width.html (2591B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <style> 5 6 body { width: 500px } 7 8 #child { width: 20px } 9 10 </style> 11 12 <div id='container'> 13 <div id='element'> 14 <div id='child'> 15 </div> 16 </div> 17 </div> 18 19 <script> 20 var element = document.getElementById('element'); 21 var container = document.getElementById('container'); 22 23 test(function() { 24 element.style.fontSize = '10px'; 25 var player = element.animate([{width: '3em'}, {width: '5em'}], 10); 26 player.pause(); 27 player.currentTime = 5; 28 element.style.fontSize = '20px'; 29 assert_equals(getComputedStyle(element).width, '80px'); 30 }, 'width responsive to style changes'); 31 32 test(function() { 33 element.style.fontSize = '10px'; 34 var player = element.animate([{width: '40px'}, {width: 'calc(40px - 2em)'}], 10); 35 player.pause(); 36 37 player.currentTime = 5; 38 element.style.fontSize = '40px'; 39 assert_equals(getComputedStyle(element).width, '20px'); 40 41 player.currentTime = 7.5; 42 assert_equals(getComputedStyle(element).width, '10px'); 43 }, 'width clamped to 0px on keyframes'); 44 45 test(function() { 46 container.style.width = 'auto'; 47 var player = element.animate([{width: 'inherit'}, {width: '20px'}], 4000); 48 player.pause(); 49 50 player.currentTime = 1000; 51 assert_equals(getComputedStyle(element).width, '500px'); 52 53 container.style.width = '100px'; 54 assert_equals(getComputedStyle(element).width, '80px'); 55 56 container.style.width = 'min-content'; 57 assert_equals(getComputedStyle(element).width, '20px'); 58 59 container.style.width = '100px'; 60 assert_equals(getComputedStyle(element).width, '80px'); 61 62 container.style.width = 'max-content'; 63 assert_equals(getComputedStyle(element).width, '20px'); 64 65 container.style.width = '100px'; 66 assert_equals(getComputedStyle(element).width, '80px'); 67 68 container.style.width = 'fit-content'; 69 assert_equals(getComputedStyle(element).width, '20px'); 70 }, 'width responsive to inherited changes from keyword'); 71 72 test(function() { 73 container.style.fontSize = '10px'; 74 container.style.width = '100px'; 75 var player = element.animate([{width: 'inherit'}, {width: '200px'}], 4000); 76 player.pause(); 77 78 player.currentTime = 1000; 79 assert_equals(getComputedStyle(element).width, '125px'); 80 81 container.style.width = '120px'; 82 assert_equals(getComputedStyle(element).width, '140px'); 83 84 container.style.width = '100px'; 85 assert_equals(getComputedStyle(element).width, '125px'); 86 }, 'width responsive to inherited changes from length'); 87 88 </script>