| <!doctype html> |
| <html> |
| <head> |
| <title>Testing focus for display: contents</title> |
| <link rel="help" href="https://drafts.csswg.org/css-display-4/#box-generation"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| </head> |
| <body> |
| |
| <!-- Dec 2023 notes for "display: contents" testing: |
| - Per CSS spec, setting "display: contents" must not alter an element's semantics (https://www.w3.org/TR/css-display-3/#valdef-display-contents): |
| "As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and |
| property inheritance, are not affected." |
| |
| --> |
| |
| <h1>Testing focusability of display: contents</h1> |
| |
| <button style="display: contents;" class="ex-focusable" data-testname="button with display: contents is focusable">x</button> |
| <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> |
| <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> |
| |
| <a href="#" style="display: contents;" class="ex-focusable" data-testname="link with display: contents is focusable">x</a> |
| <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> |
| |
| <script> |
| verifyElementsAreFocusable(); |
| |
| function verifyElementsAreFocusable() { |
| const els = document.querySelectorAll(".ex-focusable"); |
| if (!els.length) { |
| throw `Selector passed in verifyElementsAreFocusable should match at least one element.`; |
| } |
| for (const el of els) { |
| let testName = el.getAttribute("data-testname"); |
| test(() => { |
| el.focus(); |
| assert_equals(document.activeElement, el, "Element is focusable with element.focus()"); |
| }, `${testName}`); |
| } |
| }; |
| </script> |
| |
| </body> |
| </html> |
