display-contents-focus.html (2217B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Testing focus for display: contents</title> 5 <link rel="help" href="https://drafts.csswg.org/css-display-4/#box-generation"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 </head> 12 <body> 13 14 <!-- Dec 2023 notes for "display: contents" testing: 15 - Per CSS spec, setting "display: contents" must not alter an element's semantics (https://www.w3.org/TR/css-display-3/#valdef-display-contents): 16 "As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and 17 property inheritance, are not affected." 18 19 --> 20 21 <h1>Testing focusability of display: contents</h1> 22 23 <button style="display: contents;" class="ex-focusable" data-testname="button with display: contents is focusable">x</button> 24 <div role="button" tabindex="0" style="display: contents;" class="ex-focusable" data-testname="div with role button, tabindex=0 and display: contents is focusable"></div> 25 <div role="button" tabindex="-1" style="display: contents;" class="ex-focusable" data-testname="div with role button, tabindex=-1 and display: contents is focusable"></div> 26 27 <a href="#" style="display: contents;" class="ex-focusable" data-testname="link with display: contents is focusable">x</a> 28 <span role="link" tabindex="0" style="display: contents;" class="ex-focusable" data-testname="span with role link, tabindex=0 and display: contents is focusable"></span> 29 30 <script> 31 verifyElementsAreFocusable(); 32 33 function verifyElementsAreFocusable() { 34 const els = document.querySelectorAll(".ex-focusable"); 35 if (!els.length) { 36 throw `Selector passed in verifyElementsAreFocusable should match at least one element.`; 37 } 38 for (const el of els) { 39 let testName = el.getAttribute("data-testname"); 40 test(() => { 41 el.focus(); 42 assert_equals(document.activeElement, el, "Element is focusable with element.focus()"); 43 }, `${testName}`); 44 } 45 }; 46 </script> 47 48 </body> 49 </html>