content-visibility-paint-containment-003.html (1667B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>content-visibility and paint 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=1765615"> 7 <meta name="assert" content="Verify paint containment is properly updated after dynamic change to the content-visibility property."> 8 <link rel="match" href="content-visibility-paint-containment-003-ref.html"> 9 10 <script src="/common/reftest-wait.js"></script> 11 <script src="/common/rendering-utils.js"></script> 12 13 <style> 14 #container { 15 width: 100px; 16 height: 100px; 17 background: green; 18 content-visibility: hidden; 19 /* Dynamic modification of content-visibility may change whether style 20 containment is applied, which in turn may cause drastic invalidations 21 (e.g. rebuilding counters). Make the test more robust by forcing 22 style containment to always apply. */ 23 contain: style; 24 } 25 #overflowing { 26 width: 400px; 27 height: 100px; 28 } 29 .square { 30 display: inline-block; 31 width: 50px; 32 height: 50px; 33 margin: 5px; 34 } 35 .green { 36 background: green; 37 } 38 </style> 39 40 <body> 41 <p>PASS if you see <em>two</em> green squares.</p> 42 <div id="container"> 43 <div id="overflowing"><div class="square"></div><div class="square"></div><div class="green square"></div></div> 44 </div> 45 <script> 46 window.addEventListener("TestRendered", async () => { 47 container.style.contentVisibility = "visible"; 48 await waitForAtLeastOneFrame(); 49 takeScreenshot(); 50 }); 51 </script> 52 </body> 53 </html>