content-visibility-036.html (2425B)
1 <!doctype HTML> 2 <html> 3 <meta charset="utf8"> 4 <title>Display Locking: style on hidden element & child</title> 5 <link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <meta name="assert" content="style is available for content-visibility hidden elements"> 8 9 <style> 10 .hidden { 11 content-visibility: hidden; 12 } 13 </style> 14 <div id="container" class=hidden> 15 <div id="child"> 16 <div id="grandchild"></div> 17 </div> 18 </div> 19 20 <script src="/resources/testharness.js"></script> 21 <script src="/resources/testharnessreport.js"></script> 22 23 <script> 24 async_test((t) => { 25 async function runTest() { 26 let container = document.getElementById("container"); 27 container.style = "color: blue;"; 28 t.step(() => assert_equals(getComputedStyle(container).color, "rgb(0, 0, 255)", "container color changed to blue")); 29 t.step(() => assert_equals(getComputedStyle(child).color, "rgb(0, 0, 255)", "child inherits blue color")); 30 t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(0, 0, 255)", "grandchild inherits blue color")); 31 32 child.style = "color: green;"; 33 t.step(() => assert_equals(getComputedStyle(container).color, "rgb(0, 0, 255)", "container color is still blue")); 34 t.step(() => assert_equals(getComputedStyle(child).color, "rgb(0, 128, 0)", "child color changed to green")); 35 t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(0, 128, 0)", "grandchild inherits green color")); 36 37 child.style = ""; 38 39 // Commit container, lock child. 40 container.classList.remove("hidden"); 41 child.classList.add("hidden"); 42 requestAnimationFrame(() => { 43 // Update style outside of the hidden subtree. 44 container.style = "color: red;"; 45 container.offsetTop; 46 47 // Inheritance works as usual through hidden boundaries. 48 t.step(() => assert_equals(getComputedStyle(grandchild).color, "rgb(255, 0, 0)", "grandchild inherits red color")); 49 t.step(() => assert_equals(getComputedStyle(child).color, "rgb(255, 0, 0)", "child inherits red color")); 50 t.step(() => assert_equals(getComputedStyle(container).color, "rgb(255, 0, 0)", "container color changed to red")); 51 52 t.done(); 53 }); 54 } 55 56 window.onload = function() { 57 requestAnimationFrame(() => requestAnimationFrame(runTest)); 58 }; 59 }, "getComputedStyle gets up-to-date style"); 60 </script>