display-contents-focusable-001.html (1716B)
1 <!DOCTYPE html> 2 <title>CSS Test (Display): Elements with display:contents should be focusable</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <link rel="help" href="https://drafts.csswg.org/css-display-3/#box-generation"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2632"> 7 <link rel="help" href="https://github.com/whatwg/html/issues/1837"> 8 <link rel="help" href="https://github.com/whatwg/html/pull/9425"> 9 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1366037"> 10 <!-- 11 12 This requirement may not be crystal-clear from CSS specs, but 13 discussion in https://github.com/w3c/csswg-drafts/issues/2632 14 concluded it was correct and that no spec changes were needed. 15 16 https://github.com/whatwg/html/pull/9425 makes this clearer in the 17 HTML spec. 18 19 --> 20 <script src="/resources/testharness.js"></script> 21 <script src="/resources/testharnessreport.js"></script> 22 <style> 23 24 #test { --test-var: test-not-focused; } 25 #test:focus { --test-var: test-focused; } 26 27 </style> 28 29 <div id="test" style="display: contents" tabindex="1">Hello</div> 30 31 <script> 32 33 test( 34 function() { 35 var e = document.getElementById("test"); 36 var cs = getComputedStyle(e); 37 assert_not_equals(document.activeElement, e, "precondition"); 38 assert_equals(cs.getPropertyValue("--test-var"), "test-not-focused", "precondition (style)"); 39 e.focus(); 40 assert_equals(document.activeElement, e, "e is now focused"); 41 assert_equals(cs.getPropertyValue("--test-var"), "test-focused", "e is now focused (style)"); 42 }, "element with display:contents is focusable"); 43 44 </script>