dynamic-change-paint-fully-obscuring-child-001.html (1294B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <title>content-visibility:hidden elements painting with a fully-obscuring child</title> 4 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 5 <link rel="author" title="Google" href="http://www.google.com/"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1370776"> 8 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 9 <style> 10 11 div { width: 100px; height: 100px; } 12 13 .small { height: 50px; } 14 15 .hidden { content-visibility: hidden } 16 17 .green { background: green; } 18 .red { background: red; } 19 20 </style> 21 22 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 23 24 <!-- 25 This example shows the bug because the child would fully obscure the 26 parent if the parent were not content-visibility: hidden. 27 28 If the child has class="small", then the bug is not present. 29 30 --> 31 <div class="green"> 32 <div class="red"></div> 33 </div> 34 35 <script> 36 37 document.documentElement.addEventListener("TestRendered", function(event) { 38 for (let elt of document.querySelectorAll("body > div")) { 39 elt.classList.add("hidden"); 40 } 41 document.documentElement.classList.remove("reftest-wait"); 42 }); 43 44 </script>