focus-visible-006.html (2272B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>CSS Test (Selectors): contenteditable elements always match :focus-visible</title> 6 <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org" /> 7 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" /> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <style> 13 @supports not selector(:focus-visible) { 14 :focus { 15 outline: red solid 5px; 16 background-color: red; 17 } 18 } 19 20 span[contenteditable] { 21 border: 1px solid black; 22 background-color: white; 23 padding: 2px 5px; 24 } 25 26 :focus-visible { 27 outline: green solid 5px; 28 } 29 30 :focus:not(:focus-visible) { 31 outline: 0; 32 background-color: red; 33 } 34 </style> 35 </head> 36 <body> 37 This test checks that <code>:focus-visible</code> always matches on elements with <code>contenteditable=true</code> set. 38 <ol id="instructions"> 39 <li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li> 40 <li><strong>Click</strong> the content editable span below to focus it.</li> 41 <li>If the element has a red background, then the test result is FAILURE. If the element has a green outline, then the test result is SUCCESS.</li> 42 </ol> 43 <br /> 44 <div> 45 <span id="el" contenteditable>Focus me</span> 46 </div> 47 <script> 48 var actions_promise; 49 50 async_test(function(t) { 51 el.addEventListener("focus", t.step_func(function() { 52 assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${el.tagName}#${el.id} should be green`); 53 assert_not_equals(getComputedStyle(el).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${el.tagName}#${el.id} should NOT be red`); 54 // Make sure the test finishes after all the input actions are completed. 55 actions_promise.then( () => t.done() ); 56 })); 57 58 actions_promise = test_driver.click(el); 59 }, "Focus should always match :focus-visible on content editable divs"); 60 </script> 61 </body> 62 </html>