Implement :focus-visible pseudo class.

Spec: https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo Intent to Implement: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/-wN72ESFsyo R=aboxhall@chromium.org Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Change-Id: I1a0aadc8ea653afc964865a277b2d4d2ccabe540
web-platform-tests · Mar 1, 2018 · f5294b7 · f5294b7
1 parent 52b29c1
commit f5294b7
Showing 1 changed file with 31 additions and 0 deletions.
diff --git a/css/selectors/focus-visible-001-manual.html b/css/selectors/focus-visible-001-manual.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
+  <link rel="author" title="Rob Dodson" href="robdodson@chromium.org" />
+  <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <style>
+    :focus-visible { color: rgb(0, 128, 0); }
+  </style>
+</head>
+<body>
+  <ol id="instructions">
+    <li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li>
+    <li>Use the TAB key on the keyboard to focus the element below that says "Focus me."</li>
+    <li>If the element does not have green text, then the test result is FAILURE. If the element has green text, then the test result is SUCCESS.</li>
+  </ol>
+  <br />
+  <div id="el" tabindex="0">Focus me.</div>
+  <script>
+    async_test(function(t) {
+      el.addEventListener("focus", t.step_func(function() {
+        assert_equals(getComputedStyle(el).color, "rgb(0, 128, 0)");
+        t.done();
+      }));
+    }, "Keyboard focus should match :focus-visible");
+  </script>
+</body>
+</html>