assorted-lengths.html (3615B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 5 <div id='container'> 6 <div id='element'></div> 7 </div> 8 9 <script> 10 var element = document.getElementById('element'); 11 var container = document.getElementById('container'); 12 13 test(function() { 14 element.style.fontSize = '10px'; 15 var player = element.animate([{bottom: '3em'}, {bottom: '5em'}], 10); 16 player.pause(); 17 player.currentTime = 5; 18 element.style.fontSize = '20px'; 19 assert_equals(getComputedStyle(element).bottom, '80px'); 20 }, 'bottom responsive to style changes'); 21 22 test(function() { 23 element.style.fontSize = '10px'; 24 var player = element.animate([{height: '3em'}, {height: '5em'}], 10); 25 player.pause(); 26 player.currentTime = 5; 27 element.style.fontSize = '20px'; 28 assert_equals(getComputedStyle(element).height, '80px'); 29 }, 'height responsive to style changes'); 30 31 test(function() { 32 element.style.fontSize = '10px'; 33 var player = element.animate([{letterSpacing: '3em'}, {letterSpacing: '5em'}], 10); 34 player.pause(); 35 player.currentTime = 5; 36 element.style.fontSize = '20px'; 37 assert_equals(getComputedStyle(element).letterSpacing, '80px'); 38 }, 'letterSpacing responsive to style changes'); 39 40 test(function() { 41 var player = element.animate([{letterSpacing: 'normal'}, {letterSpacing: 'normal'}], 10); 42 player.pause(); 43 player.currentTime = 5; 44 assert_equals(getComputedStyle(element).letterSpacing, 'normal'); 45 }, 'letterSpacing can be normal'); 46 47 test(function() { 48 element.style.fontSize = '10px'; 49 var player = element.animate([{marginRight: '3em'}, {marginRight: '5em'}], 10); 50 player.pause(); 51 player.currentTime = 5; 52 element.style.fontSize = '20px'; 53 assert_equals(getComputedStyle(element).marginRight, '80px'); 54 }, 'marginRight responsive to style changes'); 55 56 test(function() { 57 element.style.fontSize = '10px'; 58 container.style.width = '300px'; 59 var player = element.animate([{marginRight: '3em'}, {marginRight: '50%'}], 10); 60 player.pause(); 61 player.currentTime = 5; 62 element.style.fontSize = '20px'; 63 container.style.width = '600px'; 64 assert_equals(getComputedStyle(element).marginRight, '180px'); 65 }, 'marginRight allows percentages'); 66 67 test(function() { 68 element.style.fontSize = '10px'; 69 var player = element.animate([{outlineOffset: '3em'}, {outlineOffset: '5em'}], 10); 70 player.pause(); 71 player.currentTime = 5; 72 element.style.outline = 'dashed thin'; 73 element.style.fontSize = '20px'; 74 assert_equals(getComputedStyle(element).outlineOffset, '80px'); 75 }, 'outlineOffset responsive to style changes'); 76 77 test(function() { 78 container.style.fontSize = '10px'; 79 var player = container.animate([{perspective: '3em'}, {perspective: '5em'}], 10); 80 player.pause(); 81 player.currentTime = 5; 82 container.style.fontSize = '20px'; 83 assert_equals(getComputedStyle(container).perspective, '80px'); 84 }, 'perspective responsive to style changes'); 85 86 test(function() { 87 var player = element.animate([{perspective: 'none'}, {perspective: 'none'}], 10); 88 player.pause(); 89 player.currentTime = 10; 90 assert_equals(getComputedStyle(element).perspective, 'none'); 91 }, 'perspective can be none'); 92 93 test(function() { 94 element.style.fontSize = '10px'; 95 var player = element.animate([{wordSpacing: '3em'}, {wordSpacing: '5em'}], 10); 96 player.pause(); 97 player.currentTime = 5; 98 element.style.fontSize = '20px'; 99 assert_equals(getComputedStyle(element).wordSpacing, '80px'); 100 }, 'wordSpacing responsive to style changes'); 101 102 </script>