pseudo-elements-002.html (1060B)
1 <!DOCTYPE html> 2 <title>CSS Transitions Test: Transition pseudo element with ancestor display change</title> 3 <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-transitions/#starting"> 5 <link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-property-property"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #inner::before { 10 content: "This text should transition from red to green."; 11 height: 100px; 12 transition: height steps(2, start) 1s; 13 } 14 .flex #inner::before { 15 height: 300px; 16 } 17 .flex { display: flex } 18 </style> 19 <div id="outer"> 20 <div id="inner"></div> 21 </div> 22 <script> 23 test(() => { 24 assert_equals(getComputedStyle(inner, "::before").height, "100px"); 25 outer.className = "flex"; 26 assert_equals(getComputedStyle(inner, "::before").height, "200px"); 27 }, "Check that transitions run on a pseudo element whose ancestor changes display type."); 28 </script>