line-height.html (1225B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Animations: line-height animations respond to style changes</title> 6 <link rel="help" href="https://drafts.csswg.org/css-inline/#line-height-property"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 #target { 11 animation-name: line-height-animation; 12 animation-duration: 4s; 13 animation-timing-function: linear; 14 animation-delay: -2s; 15 animation-play-state: paused; 16 } 17 @keyframes line-height-animation { 18 from { line-height: inherit; } 19 to { line-height: 20px; } 20 } 21 </style> 22 </head> 23 <body> 24 <div id="container"> 25 <div id="target"></div> 26 </div> 27 <script> 28 'use strict'; 29 const container = document.getElementById('container'); 30 const target = document.getElementById('target'); 31 32 test(() => { 33 container.style.lineHeight = '100px'; 34 assert_equals(getComputedStyle(target).lineHeight, '60px'); 35 36 container.style.lineHeight = '50px'; 37 assert_equals(getComputedStyle(target).lineHeight, '35px'); 38 39 container.style.lineHeight = '100px'; 40 assert_equals(getComputedStyle(target).lineHeight, '60px'); 41 }, 'line-height responds to inherited changes'); 42 43 </script> 44 </body> 45 </html>