Update web-platform-tests to revision de3ae39cb59880a8245431e7f09817a2a4dad1a3

2025-08-29 00:58:20 +01:00 · 2018-06-15 21:19:30 -04:00 · 2018-06-15 21:19:30 -04:00 · b322aa3943
commit b322aa3943
parent 0c5b020163
131 changed files with 2717 additions and 600 deletions
--- a/tests/wpt/web-platform-tests/css/selectors/focus-visible-001-manual.html
+++ b/tests/wpt/web-platform-tests/css/selectors/focus-visible-001-manual.html
@ -8,21 +8,37 @@
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <style>
-    :focus-visible { background-color: rgb(128, 196, 128); }
+    :root {
+      --focus-background: hsl(50, 94%, 72%);
+      --focus-ring-color: rgb(59, 153, 252);
+    }
+
+    :focus-visible {
+      outline: var(--focus-ring-color) auto 5px;
+    }
+
+    * {
+      outline: 0;
+    }
+
+    :focus {
+      background-color: var(--focus-background);
+    }
  </style>
 </head>
 <body>
+  This test checks that using the Tab key to navigate focus to an element triggers <code>:focus-visible</code> matching.
  <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 a green background, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li>
+    <li>If the element does not have a blue outline, then the test result is FAILURE. If the element has a blue outline, then the test result is SUCCESS.</li>
  </ol>
-  <br />
+  <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).backgroundColor, "rgb(128, 196, 128)");
+        assert_equals(getComputedStyle(el).outlineColor, "rgb(59, 153, 252)");
        t.done();
      }));
    }, "Keyboard focus should match :focus-visible");
--- a/tests/wpt/web-platform-tests/css/selectors/focus-visible-002-manual.html
+++ b/tests/wpt/web-platform-tests/css/selectors/focus-visible-002-manual.html
@ -2,22 +2,38 @@
 <html>
 <head>
  <meta charset="utf-8" />
-  <title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
+  <title>CSS Test (Selectors): :focus-visible always matches on texty input elements</title>
  <link rel="author" title="Alice Boxhall" href="aboxhall@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 { background-color: rgb(128, 196, 128); }
+    :root {
+      --focus-background: hsl(50, 94%, 72%);
+      --focus-ring-color: rgb(59, 153, 252);
+    }
+
+    :focus-visible {
+      outline: var(--focus-ring-color) auto 5px;
+    }
+
+    * {
+      outline: 0;
+    }
+
+    :focus {
+      background-color: var(--focus-background);
+    }
  </style>
 </head>
 <body>
+  This test checks that <code>:focus-visible</code> always matches on <code>&lt;input&gt;</code> elements which take text input, regardless of focus mechanism.
  <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><strong>Click</strong> each form element below to focus it.</li>
-    <li>If the element does not have a green background, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li>
+    <li>If the element does not have a blue outline, then the test result is FAILURE. If the element has a blue outline, then the test result is SUCCESS.</li>
  </ol>
-  <br />
+  <br>
  <div>
    <input data-tested="false" id="input1" value="Focus me."></input>
  </div>
@ -70,8 +86,7 @@
    async_test(function(t) {
        function testNextTarget(e) {
            let el = e.target;
-            assert_equals(getComputedStyle(el).backgroundColor,
-                          "rgb(128, 196, 128)");
+            assert_equals(getComputedStyle(el).outlineColor, "rgb(59, 153, 252)");
            el.dataset.tested = true;
            let nextTarget = document.querySelector("[data-tested=false]");
            if (nextTarget) {
--- a/tests/wpt/web-platform-tests/css/selectors/focus-visible-003-manual.html
+++ b/tests/wpt/web-platform-tests/css/selectors/focus-visible-003-manual.html
@ -2,21 +2,36 @@
 <html>
 <head>
  <meta charset="utf-8" />
-  <title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
+  <title>CSS Test (Selectors): :focus-visible does not match on non-texty inputs</title>
  <link rel="author" title="Alice Boxhall" href="aboxhall@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:not(:focus-visible) { background-color: rgb(128, 196, 128); }
-    label:focus-within:not(:focus-visible) { background-color: rgb(128, 196, 128); }
+    :root {
+      --focus-background: hsl(50, 94%, 72%);
+      --focus-ring-color: rgb(59, 153, 252);
+    }
+
+    :focus-visible {
+      outline: var(--focus-ring-color) auto 5px;
+    }
+
+    * {
+      outline: 0;
+    }
+
+    :focus {
+      background-color: var(--focus-background);
+    }
  </style>
 </head>
 <body>
+  This test checks that <code>:focus-visible</code> is <em>not</em> triggered by mouse focus on <code>&lt;input&gt;</code> elements which do not take text input.
  <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>Click each element element below to focus it.</li>
-    <li>If the element does not have a green background, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li>
+    <li>If the element has a blue outline, then the test result is FAILURE. If the element does NOT have a blue outline, then the test result is SUCCESS.</li>
  </ol>
  <br />
  <div>
@ -64,8 +79,7 @@
        document.querySelectorAll("[data-tested]").forEach((el) => {
            el.addEventListener("click", t.step_func((e) => {
                let el = e.target;
-                assert_equals(getComputedStyle(el).backgroundColor,
-                              "rgb(128, 196, 128)");
+                assert_equals(getComputedStyle(el).outlineStyle, "none");
                el.dataset.tested = true;
                if (document.querySelector("[data-tested=false]")) {
                    mouseClickInTarget("[data-tested=false]");
--- a/tests/wpt/web-platform-tests/css/selectors/focus-visible-004-manual.html
+++ b/tests/wpt/web-platform-tests/css/selectors/focus-visible-004-manual.html
@ -2,22 +2,36 @@
 <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" />
+  <title>CSS Test (Selectors): :focus-visible does not match on non-texty inputs with appearance: none</title>
+  <link rel="author" title="Alice Boxhall" href="aboxhall@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:not(:focus-visible) { background-color: rgb(128, 196, 128); }
-    label:focus-within:not(:focus-visible) { background-color: rgb(128, 196, 128); }
-    * { -webkit-appearance: none }
+    :root {
+      --focus-background: hsl(50, 94%, 72%);
+      --focus-ring-color: rgb(59, 153, 252);
+    }
+
+    :focus-visible {
+      outline: var(--focus-ring-color) auto 5px;
+    }
+
+    * {
+      outline: 0;
+    }
+
+    :focus {
+      background-color: var(--focus-background);
+    }
  </style>
 </head>
 <body>
+  This test checks that <code>:focus-visible</code> is <em>not</em> triggered by mouse focus on <code>&lt;input&gt;</code> elements which do not take text input, even if <code>appearance: none</code> is used.
  <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>Click each element element below to focus it.</li>
-    <li>If the element does not have a green background, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li>
+    <li>If the element has a blue outline, then the test result is FAILURE. If the element does NOT have a blue outline, then the test result is SUCCESS.</li>
  </ol>
  <br />
  <div>
@ -65,8 +79,7 @@
        document.querySelectorAll("[data-tested]").forEach((el) => {
            el.addEventListener("click", t.step_func((e) => {
                let el = e.target;
-                assert_equals(getComputedStyle(el).backgroundColor,
-                              "rgb(128, 196, 128)");
+                assert_equals(getComputedStyle(el).outlineStyle, "none");
                el.dataset.tested = true;
                if (document.querySelector("[data-tested=false]")) {
                    mouseClickInTarget("[data-tested=false]");
--- a/tests/wpt/web-platform-tests/css/selectors/focus-visible-005-manual.html
+++ b/tests/wpt/web-platform-tests/css/selectors/focus-visible-005-manual.html
@ -1,38 +0,0 @@
-<!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 { background-color: rgb(128, 196, 128); }
-    :focus:not(:focus-visible) { background-color: rgb(196, 128, 128); }
-  </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>Click the button below that says "Click me."</li>
-    <li>If the element that says "I will be focused programmatically." does not have a green background, then the test result is FAILURE. If the element has green background, then the test result is SUCCESS.</li>
-  </ol>
-  <br />
-  <button id="button">Click me.</button>
-  <div id="el" tabindex="-1">I will be focused programmatically.</el>
-  <script>
-    button.addEventListener("click", () => {
-        el.focus();
-    });
-    async_test(function(t) {
-        el.addEventListener("focus", t.step_func(() => {
-            assert_equals(getComputedStyle(el).backgroundColor,
-                          "rgb(128, 196, 128)");
-            t.done();
-        }));
-        el.focus();
-    }, "Programmatic focus should always match :focus-visible");
-  </script>
-</body>
-</html>
--- a/tests/wpt/web-platform-tests/css/selectors/focus-visible-005.html
+++ b/tests/wpt/web-platform-tests/css/selectors/focus-visible-005.html
@ -2,36 +2,50 @@
 <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" />
+  <title>CSS Test (Selectors): Programmatic focus causes :focus-visible to match</title>
+  <link rel="author" title="Alice Boxhall" href="aboxhall@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 { background-color: rgb(128, 196, 128); }
-    :focus:not(:focus-visible) { background-color: rgb(196, 128, 128); }
+    :root {
+      --focus-background: hsl(50, 94%, 72%);
+      --focus-ring-color: rgb(59, 153, 252);
+    }
+
+    :focus-visible {
+      outline: var(--focus-ring-color) auto 5px;
+    }
+
+    * {
+      outline: 0;
+    }
+
+    :focus {
+      background-color: var(--focus-background);
+    }
  </style>
 </head>
 <body>
+  This test checks that programmatically focusing an element causes <code>:focus-visible</code> matching to trigger.
  <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>Click the button below that says "Click me."</li>
-    <li>If the element that says "I will be focused programmatically." does not have a <strong>green</strong> background, then the test result is FAILURE. If the element <em>has</em> a <strong>green</strong> background, then the test result is SUCCESS.</li>
+    <li>If the element that says "I will be focused programmatically." does not have a blue outline, then the test result is FAILURE. If the element has a blue outline, then the test result is SUCCESS.</li>
  </ol>
  <br />
  <button id="button">Click me.</button>
-  <div id="el" tabindex="-1">I will be focused programmatically.</el>
+  <div id="el" tabindex="-1">I will be focused programmatically.</div>
  <script>
    button.addEventListener("click", () => {
-        el.focus();
+      el.focus();
    });
    async_test(function(t) {
-        el.addEventListener("focus", t.step_func(() => {
-            assert_equals(getComputedStyle(el).backgroundColor,
-                          "rgb(128, 196, 128)");
-            t.done();
-        }));
-        el.focus();
+      el.addEventListener("focus", t.step_func(() => {
+        assert_equals(getComputedStyle(el).outlineColor, "rgb(59, 153, 252)");
+        t.done();
+      }));
+      el.focus();
    }, "Programmatic focus should always match :focus-visible");
  </script>
 </body>
--- a/tests/wpt/web-platform-tests/css/selectors/focus-visible-006-manual.html
+++ b/tests/wpt/web-platform-tests/css/selectors/focus-visible-006-manual.html
@ -2,7 +2,7 @@
 <html>
 <head>
  <meta charset="utf-8" />
-  <title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
+  <title>CSS Test (Selectors): contenteditable elements always match :focus-visible</title>
  <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org" />
  <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
  <script src="/resources/testharness.js"></script>
@ -13,14 +13,31 @@
        background-color: white;
        padding: 2px 5px;
    }
-    span[contenteditable]:focus-visible { background-color: rgb(128, 196, 128); }
+
+    :root {
+      --focus-background: hsl(50, 94%, 72%);
+      --focus-ring-color: rgb(59, 153, 252);
+    }
+
+    :focus-visible {
+      outline: var(--focus-ring-color) auto 5px;
+    }
+
+    * {
+      outline: 0;
+    }
+
+    :focus {
+      background-color: var(--focus-background);
+    }
  </style>
 </head>
 <body>
+  This test checks that <code>:focus-visible</code> always matches on elements with <code>contenteditable=true</code> set.
  <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><strong>Click</strong> the content editable span below to focus it.</li>
-    <li>If the element does not have a green background, then the test result is FAILURE. If the element has a green background, then the test result is SUCCESS.</li>
+    <li>If the element does not have a blue outline, then the test result is FAILURE. If the element has a blue outline, then the test result is SUCCESS.</li>
  </ol>
  <br />
  <div>
@ -29,7 +46,7 @@
  <script>
    async_test(function(t) {
      el.addEventListener("focus", t.step_func(function() {
-        assert_equals(getComputedStyle(el).backgroundColor, "rgb(128, 196, 128)");
+        assert_equals(getComputedStyle(el).outlineColor, "rgb(59, 153, 252)");
        t.done();
      }));
    }, "Focus should always match :focus-visible on content editable divs");
--- a/tests/wpt/web-platform-tests/css/selectors/focus-visible-007.html
+++ b/tests/wpt/web-platform-tests/css/selectors/focus-visible-007.html
@ -2,7 +2,7 @@
 <html>
 <head>
  <meta charset="utf-8" />
-  <title>CSS Test (Selectors): Keyboard focus enables :focus-visible</title>
+  <title>CSS Test (Selectors): Keyboard use triggers :focus-visible</title>
  <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org" />
  <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
  <script src="/resources/testharness.js"></script>
@ -10,16 +10,38 @@
  <script src="/resources/testdriver.js"></script>
  <script src="/resources/testdriver-vendor.js"></script>
  <style>
-    body[data-hadkeydown] #one:focus-visible { background-color: rgb(128, 196, 128); }
-    body:not([data-hadkeydown]) #one:focus-visible { background-color: rgb(196, 128, 128); }
+    :root {
+      --focus-background: hsl(50, 94%, 72%);
+      --focus-ring-color: rgb(59, 153, 252);
+    }

-    body:not([data-hadkeydown]) #two:focus-visible { background-color: rgb(196, 128, 128); }
-    body:not([data-hadkeydown]) #two:focus:not(:focus-visible) {
-      background-color: rgb(128, 196, 128);
+    :focus-visible {
+      outline: var(--focus-ring-color) auto 5px;
+    }
+
+    * {
+      outline-width: 0;
+    }
+
+    :focus {
+      background-color: var(--focus-background);
    }
  </style>
 </head>
 <body>
+  This test checks that using the keyboard in a way that does not move focus still causes <code>:focus-visible</code> matching to trigger.
+  <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 mouse to focus the element below that says "Click me first."</li>
+    <li>If the element has a blue outline, then the test result is FAILURE.</li>
+    <li>Press the SHIFT key.</li>
+    <li>If the element now DOES NOT have a blue outline, then the test result is FAILURE..</li>
+    <li>Use the mouse to click the element that says "Click me first." a second time</li>
+    <li>If the element now DOES NOT still have a blue outline, then the test result is FAILURE.</li>
+    <li>Use the mouse to click the element below that says "Click me second."</li>
+        <li>If the element does not have a blue outline then the test result is SUCCESS.</li>
+  </ol>
+
  <div id="one" tabindex="0">Click me first.</div>
  <div id="two" tabindex="0">Click me second.</div>
  <script>
@ -54,7 +76,7 @@
        });

        const test_modality_change = t.step_func(() => {
-          assert_equals(getComputedStyle(one).backgroundColor, "rgb(128, 196, 128)");
+          assert_equals(getComputedStyle(one).outlineColor, "rgb(59, 153, 252)");
          tested_modality_change = true;
          one.removeEventListener("keyup", test_modality_change);
          one.addEventListener("click", test_modality_unchanged_by_mouse_click);
@ -63,7 +85,7 @@

        const test_modality_unchanged_by_mouse_click = t.step_func(() => {
          assert_true(tested_modality_change);
-          assert_equals(getComputedStyle(one).backgroundColor, "rgb(128, 196, 128)");
+          assert_equals(getComputedStyle(one).outlineColor, "rgb(59, 153, 252)");
          tested_modality_unchanged_by_mouse_click = true;
          one.removeEventListener("click", test_modality_unchanged_by_mouse_click);
          two.addEventListener("focus", test_mouse_focus_after_modality_change);
@ -73,7 +95,7 @@
        const test_mouse_focus_after_modality_change = t.step_func(() => {
          assert_true(tested_modality_unchanged_by_mouse_click);
          assert_false("hadkeydown" in document.body.dataset);
-          assert_equals(getComputedStyle(two).backgroundColor, "rgb(128, 196, 128)");
+          assert_equals(getComputedStyle(two).outlineColor, "rgb(59, 153, 252)");
          tested_mouse_focus_after_modality_change = true;
          t.done();
        });