Bug 1684833 [wpt PR 27032] - [selectors] Improve :focus-visible tests…

…, a=testonly Automatic update from web-platform-tests [selectors] Improve :focus-visible tests * Now we have one test per element, so we have more detailed PASS/FAIL information. We also check that all test conditions (outline and background colors) are right. * Use more common colors in tests like "green" and "red" instead of "darkgreen" and "tomato". * focus-visible-004.html actually set "appearance: none". So elements that are hidden now and not focusable (radio button and checkbox) are removed. * focus-visible-007.html is not modified as it has more problems (see https://crbug.com/976438). -- wpt-commits: 77ffd6eff47bed46236fbea6e998a18e6f4a7800 wpt-pr: 27032
dothq · Jan 7, 2021 · b592a9d · b592a9d
1 parent f6970f4
commit b592a9d
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 149 deletions.
diff --git a/testing/web-platform/tests/css/selectors/focus-visible-001.html b/testing/web-platform/tests/css/selectors/focus-visible-001.html
@@ -13,17 +13,17 @@
   <style>
     @supports not (selector(:focus-visible)) {
       :focus {
-        background-color: tomato;
+        background-color: red;
       }
     }
 
     :focus-visible {
-      outline: darkgreen solid 5px;
+      outline: green solid 5px;
     }
 
     :focus:not(:focus-visible) {
       outline: 0;
-      background-color: tomato;
+      background-color: red;
     }
   </style>
 </head>
@@ -39,7 +39,8 @@
   <script>
     async_test(function(t) {
       el.addEventListener("focus", t.step_func(function() {
-        assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 100, 0)");
+        assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${el.tagName}#${el.id} should be green`);
+        assert_not_equals(getComputedStyle(el).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${el.tagName}#${el.id} should NOT be red`);
         t.done();
       }));
       const tab_key = '\ue004';

diff --git a/testing/web-platform/tests/css/selectors/focus-visible-002.html b/testing/web-platform/tests/css/selectors/focus-visible-002.html
@@ -14,17 +14,17 @@
   <style>
     @supports not (selector(:focus-visible)) {
       :focus {
-        background-color: tomato;
+        background-color: red;
       }
     }
 
     :focus-visible {
-      outline: darkgreen solid 5px;
+      outline: green solid 5px;
     }
 
     :focus:not(:focus-visible) {
       outline: 0;
-      background-color: tomato;
+      background-color: red;
     }
   </style>
 </head>
@@ -37,76 +37,65 @@
   </ol>
   <br>
   <div>
-    <input data-tested="false" id="input1" value="Focus me."></input>
+    <input class="check" id="input1" value="Focus me."></input>
   </div>
   <div>
-    <input data-tested="false" id="input2" type="text" value="Focus me."></input>
+    <input class="check" id="input2" type="text" value="Focus me."></input>
   </div>
   <div>
-    <input data-tested="false" id="input3" type="email" value="Focus me."></input>
+    <input class="check" id="input3" type="email" value="Focus me."></input>
   </div>
    <div>
-    <input data-tested="false" id="input4" type="password" value="Focus me."></input>
+    <input class="check" id="input4" type="password" value="Focus me."></input>
   </div>
   <div>
-    <input data-tested="false" id="input5" type="search" value="Focus me."></input>
+    <input class="check" id="input5" type="search" value="Focus me."></input>
   </div>
   <div>
-    <input data-tested="false" id="input6" type="telephone" value="Focus me."></input>
+    <input class="check" id="input6" type="telephone" value="Focus me."></input>
   </div>
   <div>
-    <input data-tested="false" id="input7" type="url" value="Focus me."></input>
+    <input class="check" id="input7" type="url" value="Focus me."></input>
   </div>
   <div>
-    <input data-tested="false" id="input8" type="number" value="10000"></input>
+    <input class="check" id="input8" type="number" value="10000"></input>
   </div>
   <div>
-    <input data-tested="false" id="input9" type="date"></input>
+    <input class="check" id="input9" type="date"></input>
   </div>
   <div>
-    <input data-tested="false" id="input10" type="datetime-local"></input>
+    <input class="check" id="input10" type="datetime-local"></input>
   </div>
   <div>
-    <input data-tested="false" id="input11" type="month"></input>
+    <input class="check" id="input11" type="month"></input>
   </div>
   <div>
-    <input data-tested="false" id="input12" type="time"></input>
+    <input class="check" id="input12" type="time"></input>
   </div>
   <div>
-    <input data-tested="false" id="input13" type="week"></input>
+    <input class="check" id="input13" type="week"></input>
   </div>
   <div>
-    <textarea data-tested="false" id="input14">Focus me.</textarea>
+    <textarea class="check" id="input14">Focus me.</textarea>
   </div>
   <div>
-    <select data-tested="false" id="input15">
+    <select class="check" id="input15">
       <option>Focus me.</option>
       <option>Focus me.</option>
     </select>
   </div>
   <script>
-    async_test(function(t) {
-        function mouseClickInTarget(selector) {
-            let target = document.querySelector(selector);
-            return test_driver.click(target);
-        }
-
-        function testNextTarget(e) {
-            let el = e.target;
-            assert_equals(getComputedStyle(el).outlineColor, "rgb(0, 100, 0)");
-            el.dataset.tested = true;
-            let nextTarget = document.querySelector("[data-tested=false]");
-            if (nextTarget) {
-                nextTarget.addEventListener("click", testNextTarget);
-                mouseClickInTarget("[data-tested=false]");
-            } else {
-                t.done();
-            }
-        }
-        input1.addEventListener("click", t.step_func(testNextTarget));
-
-        mouseClickInTarget("[data-tested=false]");
-    }, "Mouse focus on elements which would show a virtual keyboard should match :focus-visible");
+    for (const target of document.querySelectorAll(".check")) {
+      promise_test(() => {
+        return new Promise(resolve => {
+          target.addEventListener("focus", resolve);
+          test_driver.click(target);
+        }).then(() => {
+          assert_equals(getComputedStyle(target).outlineColor, "rgb(0, 128, 0)", `outlineColor for ${target.tagName}#${target.id} should be green`);
+          assert_not_equals(getComputedStyle(target).backgroundColor, "rgb(255, 0, 0)", `backgroundColor for ${target.tagName}#${target.id} should NOT be red`);
+        });
+      }, `Focus element ${target.tagName}#${target.id} via mouse should match :focus-visible as it supports keyboard input`);
+    }
   </script>
 </body>
 </html>
diff --git a/testing/web-platform/tests/css/selectors/focus-visible-003.html b/testing/web-platform/tests/css/selectors/focus-visible-003.html
@@ -23,7 +23,7 @@
 
     :focus:not(:focus-visible) {
         outline: 0;
-        background-color: darkseagreen;
+        background-color: lime;
     }
   </style>
 </head>
@@ -36,68 +36,63 @@
   </ol>
   <br />
   <div>
-    <span data-tested="false" id="el-1" tabindex="1">Focus me</span>
+    <span class="check" id="el-1" tabindex="1">Focus me</span>
   </div>
   <div>
-    <span data-tested="false" id="el-2" tabindex="-1">Focus me</span>
+    <span class="check" id="el-2" tabindex="-1">Focus me</span>
   </div>
   <div>
-    <span data-tested="false" id="el-3" tabindex="0">Focus me</span>
+    <span class="check" id="el-3" tabindex="0">Focus me</span>
   </div>
   <div>
-    <button data-tested="false" id="el-4">Focus me</span>
+    <button class="check" id="el-4">Focus me</span>
   </div>
   <div>
-    <input data-tested="false" id="el-5" type="button" value="Focus me"></input>
+    <input class="check" id="el-5" type="button" value="Focus me"></input>
   </div>
   <div>
-    <input data-tested="false" id="el-6" type="image" alt="Focus me."></input>
+    <input class="check" id="el-6" type="image" alt="Focus me."></input>
   </div>
   <div>
-    <input data-tested="false" id="el-7" type="reset" value="Focus me."></input>
+    <input class="check" id="el-7" type="reset" value="Focus me."></input>
   </div>
   <div>
-    <input data-tested="false" id="el-8" type="submit" value="Focus me."></input>
+    <input class="check" id="el-8" type="submit" value="Focus me."></input>
   </div>
   <div>
-    <label><input data-tested="false" id="el-9" type="checkbox"></input> Focus me.</label>
+    <label><input class="check" id="el-9" type="checkbox"></input> Focus me.</label>
   </div>
   <div>
-    <label><input data-tested="false" id="el-10" type="radio"></input> Focus me.</label>
+    <label><input class="check" id="el-10" type="radio"></input> Focus me.</label>
   </div>
   <div>
     <!-- Focusing file input triggers a modal, so only test manually -->
-    <input id="el-12" type="file" value="Focus me."></input>
+    <input id="el-11" type="file" value="Focus me."></input>
   </div>
   <div>
-    <label><input data-tested="false" id="el-13" type="range"></input> Focus me.</label>
+    <label><input class="check" id="el-12" type="range"></input> Focus me.</label>
   </div>
   <div>
     <!-- Ensure the color input is last, as it has a pop-up which obscures other elements -->
-    <label><input data-tested="false" id="el-11" type="color"></input> Focus me.</label>
+    <label><input class="check" id="el-13" type="color"></input> Focus me.</label>
   </div>
   <script>
     function mouseClickInTarget(selector) {
        let target = document.querySelector(selector);
        return test_driver.click(target);
     }
 
-    async_test(function(t) {
-        document.querySelectorAll("[data-tested]").forEach((el) => {
-            el.addEventListener("click", t.step_func((e) => {
-                let el = e.target;
-                assert_equals(getComputedStyle(el).outlineStyle, "none");
-                el.dataset.tested = true;
-                if (document.querySelector("[data-tested=false]")) {
-                    mouseClickInTarget("[data-tested=false]");
-                } else {
-                    t.done();
-                }
-            }));
+    for (const target of document.querySelectorAll(".check")) {
+      promise_test(() => {
+        return new Promise(resolve => {
+          target.addEventListener("focus", resolve);
+          test_driver.click(target);
+        }).then(() => {
+          assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", `backgroundColor for ${target.tagName}#${target.id} should be lime`);
+          assert_not_equals(getComputedStyle(target).outlineColor, "rgb(255, 0, 0)", `outlineColor for ${target.tagName}#${target.id} should NOT be red`);
         });
-
-        mouseClickInTarget("[data-tested=false]");
-    }, "Mouse focus on input elements which do not show a virtual keyboard should NOT match :focus-visible");
+      }, `Focus element ${target.tagName}#${target.id} via mouse should NOT match :focus-visible as it does NOT support keyboard input`);
+    }
   </script>
 </body>
 </html>
diff --git a/testing/web-platform/tests/css/selectors/focus-visible-004.html b/testing/web-platform/tests/css/selectors/focus-visible-004.html
@@ -23,7 +23,12 @@
 
     :focus:not(:focus-visible) {
       outline: 0;
-      background-color: darkseagreen;
+      background-color: lime;
+    }
+
+    .check {
+      -webkit-appearance: none;
+      appearance: none;
     }
   </style>
 </head>
@@ -36,70 +41,57 @@
   </ol>
   <br />
   <div>
-    <span data-tested="false" id="el-1" tabindex="1">Focus me</span>
-  </div>
-  <div>
-    <span data-tested="false" id="el-2" tabindex="-1">Focus me</span>
+    <span class="check" id="el-1" tabindex="1">Focus me</span>
   </div>
   <div>
-    <span data-tested="false" id="el-3" tabindex="0">Focus me</span>
+    <span class="check" id="el-2" tabindex="-1">Focus me</span>
   </div>
   <div>
-    <button data-tested="false" id="el-4">Focus me</span>
+    <span class="check" id="el-3" tabindex="0">Focus me</span>
   </div>
   <div>
-    <input data-tested="false" id="el-5" type="button" value="Focus me"></input>
+    <button class="check" id="el-4">Focus me</span>
   </div>
   <div>
-    <input data-tested="false" id="el-6" type="image" alt="Focus me."></input>
+    <input class="check" id="el-5" type="button" value="Focus me"></input>
   </div>
   <div>
-    <input data-tested="false" id="el-7" type="reset" value="Focus me."></input>
+    <input class="check" id="el-6" type="image" alt="Focus me."></input>
   </div>
   <div>
-    <input data-tested="false" id="el-8" type="submit" value="Focus me."></input>
+    <input class="check" id="el-7" type="reset" value="Focus me."></input>
   </div>
   <div>
-    <label><input data-tested="false" id="el-9" type="checkbox"></input> Focus me.</label>
-  </div>
-  <div>
-    <label><input data-tested="false" id="el-10" type="radio"></input> Focus me.</label>
+    <input class="check" id="el-8" type="submit" value="Focus me."></input>
   </div>
   <div>
     <!-- Focusing file input triggers a modal, so only test manually -->
-    <input id="el-12" type="file" value="Focus me."></input>
+    <input id="el-9" type="file" value="Focus me."></input>
   </div>
   <div>
-    <label><input data-tested="false" id="el-13" type="range"></input> Focus me.</label>
+    <label><input class="check" id="el-10" type="range"></input> Focus me.</label>
   </div>
   <div>
-    <!-- Ensure the color input is last, as it has a pop-up which obscures other elements,
-         causing the `mouseClickInTarget` method to fail and the test to hang waiting for
-         a click event.-->
-    <label><input data-tested="false" id="el-11" type="color"></input> Focus me.</label>
+    <!-- Ensure the color input is last, as it has a pop-up which obscures other elements -->
+    <label><input class="check" id="el-11" type="color"></input> Focus me.</label>
   </div>
   <script>
     function mouseClickInTarget(selector) {
        let target = document.querySelector(selector);
        return test_driver.click(target);
     }
 
-    async_test(function(t) {
-        document.querySelectorAll("[data-tested]").forEach((el) => {
-            el.addEventListener("click", t.step_func((e) => {
-                let el = e.target;
-                assert_equals(getComputedStyle(el).outlineStyle, "none");
-                el.dataset.tested = true;
-                if (document.querySelector("[data-tested=false]")) {
-                    mouseClickInTarget("[data-tested=false]");
-                } else {
-                    t.done();
-                }
-            }));
+    for (const target of document.querySelectorAll(".check")) {
+      promise_test(() => {
+        return new Promise(resolve => {
+          target.addEventListener("focus", resolve);
+          test_driver.click(target);
+        }).then(() => {
+          assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", `backgroundColor for ${target.tagName}#${target.id} should be lime`);
+          assert_not_equals(getComputedStyle(target).outlineColor, "rgb(255, 0, 0)", `outlineColor for ${target.tagName}#${target.id} should NOT be red`);
         });
-
-        mouseClickInTarget("[data-tested=false]");
-    }, "Mouse focus on input elements which do not show a virtual keyboard should NOT match :focus-visible - not affected by -webkit-appearance");
+      }, `Focus element ${target.tagName}#${target.id} via mouse should NOT match :focus-visible as it does NOT support keyboard input - not affected by "appearance: none"`);
+    }
   </script>
 </body>
 </html>
diff --git a/testing/web-platform/tests/css/selectors/focus-visible-005.html b/testing/web-platform/tests/css/selectors/focus-visible-005.html
@@ -16,9 +16,13 @@
       }
     }
 
+    :focus-visible {
+      outline: red solid 5px;
+    }
+
     :focus:not(:focus-visible) {
       outline: 0;
-      background-color: darkseagreen;
+      background-color: lime;
     }
   </style>
 </head>
@@ -38,7 +42,8 @@
     });
     async_test(function(t) {
       el.addEventListener("focus", t.step_func(function() {
-        assert_equals(getComputedStyle(el).outlineStyle, "none");
+        assert_equals(getComputedStyle(el).backgroundColor, "rgb(0, 255, 0)", `backgroundColor for ${el.tagName}#${el.id} should be lime`);
+        assert_not_equals(getComputedStyle(el).outlineColor, "rgb(255, 0, 0)", `outlineColor for ${el.tagName}#${el.id} should NOT be red`);
         t.done();
       }));
       test_driver.click(button);