<!DOCTYPE html> <title>CSS Transitions Test: Transition pseudo element with ancestor display change</title> <link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> <link rel="help" href="https://drafts.csswg.org/css-transitions/#starting"> <link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-property-property"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> #inner::before { content: "This text should transition from red to green."; height: 100px; transition: height steps(2, start) 1s; } .flex #inner::before { height: 300px; } .flex { display: flex } </style> <div id="outer"> <div id="inner"></div> </div> <script> test(() => { assert_equals(getComputedStyle(inner, "::before").height, "100px"); outer.className = "flex"; assert_equals(getComputedStyle(inner, "::before").height, "200px"); }, "Check that transitions run on a pseudo element whose ancestor changes display type."); </script>