contain-layout-020.html (951B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset=utf-8> 4 <title>CSS Containment Test: Removing layout containment and contained positioned elements</title> 5 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout"> 6 <link rel="match" href="reference/contain-layout-020-ref.html"> 7 <meta name=assert content="Removing layout containment relayouts contained positioned elements correctly."> 8 9 <style> 10 #container { 11 width: 300px; 12 height: 300px; 13 contain: layout; 14 } 15 .box { 16 width: 100px; 17 height: 100px; 18 background-color: green; 19 } 20 .fixed { 21 position: fixed; 22 top: 0; 23 left: 0; 24 } 25 .abspos { 26 position: absolute; 27 top: 0; 28 right: 0; 29 } 30 </style> 31 32 <div id="container"> 33 <div class="fixed box"></div> 34 <div class="abspos box"></div> 35 </div> 36 37 <script> 38 requestAnimationFrame(() => { 39 container.style.contain = "none"; 40 document.documentElement.removeAttribute("class"); 41 }); 42 </script>