inherit-height-transition.html (807B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-transitions/#starting"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <style> 6 div { height: inherit; } 7 #outer { height: 50px; } 8 #outer.collapsed { 9 height: 0px; 10 transition: height 0.01s; 11 } 12 </style> 13 <div id="outer"> 14 <div> 15 <div id="inner">You should only see a flash of red.</div> 16 </div> 17 </div> 18 <script> 19 promise_test(t => { 20 outer.offsetTop; 21 outer.className = "collapsed"; 22 return (new Promise((resolve) => outer.addEventListener("transitionend", resolve))).then(() => { 23 assert_equals(getComputedStyle(inner).height, "0px"); 24 }); 25 }, "Transitioned height, explicitly inherited down two DOM levels, should inherit correctly"); 26 </script>