| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test (Selectors): "Always show focus" preference causes :focus-visible to always match</title> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| :focus-visible { |
| outline: darkgreen dotted 1px; /* fallback for Edge */ |
| outline: darkgreen auto 5px; |
| } |
| |
| :focus:not(:focus-visible) { |
| outline-color: darkred; |
| background-color: darkred; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="el" tabindex="0">Focus me.</div> |
| <script> |
| function clickOn(element) { |
| return new Promise(function(resolve, reject) { |
| if (!window.eventSender) |
| return reject(); |
| |
| var rect = element.getBoundingClientRect(); |
| var x = rect.left + (rect.width / 2); |
| var y = rect.top + (rect.height / 2); |
| var pointerActions = [{ |
| source: "mouse", |
| actions: [ |
| { name: "pointerMove", x: x, y: y }, |
| { name: "pointerDown", x: x, y: y, button: 0 }, |
| { name: "pointerUp", x: x, y: y, button: 0 }, |
| { name: "pointerMove", x: 0, y: 0 } |
| ] |
| }]; |
| chrome.gpuBenchmarking.pointerActionSequence(pointerActions, resolve); |
| }); |
| } |
| |
| async_test(function(t) { |
| el.addEventListener("focus", t.step_func(function() { |
| assert_equals(getComputedStyle(el).outlineColor, "rgb(139, 0, 0)"); |
| internals.settings.setAccessibilityAlwaysShowFocus(true); |
| // changing the setting should trigger style recalc |
| assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 100, 0)"); |
| }), true); |
| |
| // Click the div; without the setting, this would not trigger :focus-visible matching |
| clickOn(el) |
| .then(t.step_func(() => { |
| t.done(); |
| })).catch(t.step_func((reason) => { |
| assert_true(false, reason); |
| t.done(); |
| })); |
| }, ":focus-visible always matches if the 'always show focus' setting is enabled."); |
| </script> |
| </body> |
| </html> |
