lineHeight.html (2712B)
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([{lineHeight: '3em'}, {lineHeight: '5em'}], 10); 16 player.pause(); 17 player.currentTime = 5; 18 element.style.fontSize = '20px'; 19 assert_equals(getComputedStyle(element).lineHeight, '80px'); 20 }, 'lineHeight responsive to style changes'); 21 22 test(function() { 23 element.style.fontSize = '10px'; 24 var player = element.animate([{lineHeight: '40px'}, {lineHeight: 'calc(40px - 2em)'}], 10); 25 player.pause(); 26 27 player.currentTime = 5; 28 element.style.fontSize = '40px'; 29 assert_equals(getComputedStyle(element).lineHeight, '20px'); 30 31 player.currentTime = 7.5; 32 assert_equals(getComputedStyle(element).lineHeight, '10px'); 33 }, 'lineHeight clamped to 0px on keyframes'); 34 35 test(function() { 36 container.style.lineHeight = 'normal'; 37 var player = element.animate([{lineHeight: 'inherit'}, {lineHeight: '20px'}], 4000); 38 player.pause(); 39 40 player.currentTime = 1000; 41 assert_equals(getComputedStyle(element).lineHeight, 'normal'); 42 43 container.style.lineHeight = '100px'; 44 assert_equals(getComputedStyle(element).lineHeight, '80px'); 45 46 container.style.lineHeight = 'normal'; 47 assert_equals(getComputedStyle(element).lineHeight, 'normal'); 48 }, 'lineHeight responsive to inherited changes from keyword'); 49 50 test(function() { 51 container.style.fontSize = '10px'; 52 container.style.lineHeight = '1.0'; 53 const expected = getComputedStyle(container).lineHeight; 54 var player = element.animate([{lineHeight: 'inherit'}, {lineHeight: '20px'}], 4000); 55 player.pause(); 56 57 player.currentTime = 1000; 58 getComputedStyle(element).lineHeight; 59 60 container.style.lineHeight = '100px'; 61 assert_equals(getComputedStyle(element).lineHeight, '80px'); 62 }, 'lineHeight responsive to inherited changes from number'); 63 64 test(function() { 65 container.style.fontSize = '10px'; 66 container.style.lineHeight = '1'; 67 var player = element.animate([{lineHeight: 'inherit'}, {lineHeight: '2'}], 4000); 68 player.pause(); 69 70 player.currentTime = 1000; 71 const expected = getComputedStyle(element).lineHeight; 72 73 container.style.lineHeight = '97px'; 74 assert_equals(getComputedStyle(element).lineHeight, '97px'); 75 76 container.style.lineHeight = '1'; 77 assert_equals(getComputedStyle(element).lineHeight, expected); 78 }, 'lineHeight responsive to inherited changes from length'); 79 80 </script>