contain-layout-dynamic-005.html (1919B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>Dynamic change to layout containment</title> 5 <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1874826"> 7 <meta name="assert" content="Verify floats are properly displayed after dynamic change to layout containment."> 8 <link rel="match" href="contain-layout-dynamic-005-ref.html"> 9 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <script src="/common/reftest-wait.js"></script> 12 <script src="/common/rendering-utils.js"></script> 13 14 <style> 15 div { 16 font: 25px/1 Ahem; 17 } 18 #wrapper { 19 width: 15em; 20 background: lightgray; 21 } 22 .containment { 23 contain: layout; 24 } 25 .float { 26 box-sizing: border-box; 27 border: 1px solid black; 28 } 29 .left { 30 float: left; 31 width: 1em; 32 height: 2em; 33 } 34 .right { 35 float: right; 36 width: 1em; 37 height: 3em; 38 } 39 </style> 40 41 <body> 42 <p>PASS if the boxes with dark colors are floating next to the boxes with 43 light colors.</p> 44 <div id="wrapper"> 45 <div> 46 <div id="container" class="containment"> 47 <div><div class="float left" style="background: lightblue"></div></div> 48 <div class="float right" style="background: lightyellow"></div> 49 <div>XX XXX XXXX X</div> 50 </div> 51 <div class="float left" style="background: blue"></div> 52 <div> 53 <div> 54 <div><div class="float right" style="background: yellow"></div></div> 55 <div>XXX XXXXXX XXXX XX XX</div> 56 </div> 57 <div>XXXX XXXXX XX</div> 58 </div> 59 <div>XXX XXX XX XXXX</div> 60 </div> 61 </div> 62 <script> 63 window.addEventListener("load", async () => { 64 container.classList.remove('containment'); 65 await waitForAtLeastOneFrame(); 66 takeScreenshot(); 67 }); 68 </script> 69 </body> 70 </html>