content-visibility-035.html (2030B)
1 <!doctype HTML> 2 <html> 3 <meta charset="utf8"> 4 <title>Display Locking: hidden shadow descendant</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="content-visibility hidden element's subtree cannot be focused"> 8 <meta name="assert" content="content-visibility hidden element's subtree can access layout values"> 9 10 <body style="margin: 0"> 11 12 <div id="host"> 13 <input id="slotted" type="button"> 14 </div> 15 16 <script src="/resources/testharness.js"></script> 17 <script src="/resources/testharnessreport.js"></script> 18 19 <script> 20 let container = document.createElement("div"); 21 container.innerHTML = "<slot></slot>"; 22 23 let shadowRoot = host.attachShadow({ mode: "open" }); 24 shadowRoot.innerHTML = "<style>.hidden { content-visibility: hidden; }</style>"; 25 shadowRoot.appendChild(container); 26 27 async_test((t) => { 28 async function focusTest() { 29 t.step(() => assert_not_equals(document.activeElement, slotted)); 30 t.step(() => assert_not_equals(shadowRoot.activeElement, slotted)); 31 32 container.classList.add("hidden"); 33 requestAnimationFrame(() => { 34 t.step(() => assert_not_equals(document.activeElement, slotted)); 35 t.step(() => assert_not_equals(shadowRoot.activeElement, slotted)); 36 37 slotted.focus(); 38 t.step(() => assert_not_equals(document.activeElement, slotted)); 39 t.step(() => assert_not_equals(shadowRoot.activeElement, slotted)); 40 41 forceLayoutTest(); 42 }); 43 } 44 45 async function forceLayoutTest() { 46 t.step(() => assert_equals(slotted.offsetTop, 0)); 47 // Add a 20px div above the slotted div. 48 container.innerHTML = "<div style='height: 20px;'></div><slot></slot>"; 49 t.step(() => assert_equals(slotted.offsetTop, 20)); 50 t.done(); 51 } 52 53 window.onload = function() { 54 requestAnimationFrame(() => requestAnimationFrame(focusTest)); 55 }; 56 }, "Testing focus and force layout on element with hidden flat-tree ancestor"); 57 58 </script> 59 </html>