OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../resources/testharness.js"></script> | 2 <script src="../resources/testharness.js"></script> |
3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../resources/testharnessreport.js"></script> |
4 | 4 |
5 <div id='container'> | 5 <div id='container'> |
6 <div id='element'></div> | 6 <div id='element'></div> |
7 </div> | 7 </div> |
8 | 8 |
9 <script> | 9 <script> |
10 var element = document.getElementById('element'); | 10 var element = document.getElementById('element'); |
| 11 var container = document.getElementById('container'); |
| 12 |
11 test(function() { | 13 test(function() { |
12 element.style.fontSize = '10px'; | 14 element.style.fontSize = '10px'; |
13 container.style.width = '1000px'; | 15 container.style.width = '1000px'; |
14 var player = element.animate([{left: 'calc(100px + 80%)', offset: 0}, {left:
'10em', offset: 1}], 10); | 16 var player = element.animate([{left: 'calc(100px + 80%)', offset: 0}, {left:
'10em', offset: 1}], 10); |
15 player.pause(); | 17 player.pause(); |
16 player.currentTime = 5; | 18 player.currentTime = 5; |
17 assert_equals(getComputedStyle(element).left, '500px'); | 19 assert_equals(getComputedStyle(element).left, '500px'); |
18 element.style.fontSize = '20px'; | 20 element.style.fontSize = '20px'; |
19 assert_equals(getComputedStyle(element).left, '550px'); | 21 assert_equals(getComputedStyle(element).left, '550px'); |
20 container.style.width = '500px'; | 22 container.style.width = '500px'; |
21 assert_equals(getComputedStyle(element).left, '350px'); | 23 assert_equals(getComputedStyle(element).left, '350px'); |
22 }, 'Lengths responsive to style changes'); | 24 }, 'Lengths responsive to style changes'); |
| 25 |
| 26 test(function() { |
| 27 container.style.width = '1000px'; |
| 28 var player = element.animate([{paddingTop: '30%', offset: 0}, {paddingTop: '
50%', offset: 1}], 10); |
| 29 player.pause(); |
| 30 player.currentTime = 5; |
| 31 container.style.width = '700px'; |
| 32 assert_equals(getComputedStyle(element).paddingTop, '280px'); |
| 33 }, 'Percentages responsive to width style changes'); |
| 34 |
| 35 test(function() { |
| 36 element.style.fontSize = '1px'; |
| 37 var player = element.animate([{lineHeight: '9', offset: 0}, {lineHeight: '13
', offset: 1}], 10); |
| 38 player.pause(); |
| 39 player.currentTime = 2.5; |
| 40 element.style.fontSize = '7px'; |
| 41 assert_equals(getComputedStyle(element).lineHeight, '70px'); |
| 42 }, 'Numbers responsive to style changes'); |
| 43 |
23 </script> | 44 </script> |
24 | |
OLD | NEW |