<!DOCTYPE html> <link rel="help" href="https://drafts.csswg.org/css-transitions/#starting"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> div { height: inherit; } #outer { height: 50px; } #outer.collapsed { height: 0px; transition: height 0.01s; } </style> <div id="outer"> <div> <div id="inner">You should only see a flash of red.</div> </div> </div> <script> promise_test(t => { outer.offsetTop; outer.className = "collapsed"; return (new Promise((resolve) => outer.addEventListener("transitionend", resolve))).then(() => { assert_equals(getComputedStyle(inner).height, "0px"); }); }, "Transitioned height, explicitly inherited down two DOM levels, should inherit correctly"); </script>