view-transition-name-stacking-context-dynamic.html (882B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS will-change: 'will-change: view-transition-name' creates a stacking context dynamically</title> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1962862"> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/#named-and-transitioning"> 7 <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> 8 <style> 9 div { width: 100px; height: 100px } 10 #wc { background: red; position: relative; } 11 #child { position: absolute; top: 0; left: 0; z-index: -1; background: green } 12 </style> 13 <p>Test passes if there is a filled green square.</p> 14 <div id="wc"> 15 <div id="child"></div> 16 </div> 17 <script> 18 window.addEventListener("TestRendered", function() { 19 wc.style.viewTransitionName = "something"; 20 document.documentElement.removeAttribute("class"); 21 }); 22 </script>