Bug 1684009 [wpt PR 26994] - [selectors] Improve :focus-visible tests, a=testonly

Automatic update from web-platform-tests
[selectors] Improve :focus-visible tests

These tests were using "outline-style: auto" but then set an outline-color.
Some browsers like Firefox ignore the outline-color when rendering the auto style,
which follows the spec (https://drafts.csswg.org/css-ui/#typedef-outline-line-style):
"As such, this specification does not define how the outline-color and outline-width
 are incorporated or used (if at all) when rendering auto style outlines."
So this patch changes outline-style to "solid" in all these tests to avoid this problem.

Apart from that the patch adds a condition to show the wrong behavior
if the browser doesn't support :focus-visible using "@supports not (selector(:focus-visible))".
That's not done for focus-visible-007.html as that test has other problems
that need to be fixed in its own patch (see https://crbug.com/976438).

--

wpt-commits: ccaf4599f0d853985bfb19fb87cfac20f0597308
wpt-pr: 26994

testing/web-platform/tests/css/selectors/focus-visible-001.html

@@ -11,9 +11,14 @@
   <script src="/resources/testdriver-actions.js"></script>
   <script src="/resources/testdriver-vendor.js"></script>
   <style>
+    @supports not (selector(:focus-visible)) {
+      :focus {
+        background-color: tomato;
+      }
+    }
+
     :focus-visible {
-      outline: darkgreen dotted 1px; /* fallback for Edge */
-      outline: darkgreen auto 5px;
+      outline: darkgreen solid 5px;
     }
 
     :focus:not(:focus-visible) {

testing/web-platform/tests/css/selectors/focus-visible-002.html

@@ -12,9 +12,14 @@
   <script src="/resources/testdriver-actions.js"></script>
   <script src="/resources/testdriver-vendor.js"></script>
   <style>
+    @supports not (selector(:focus-visible)) {
+      :focus {
+        background-color: tomato;
+      }
+    }
+
     :focus-visible {
-      outline: darkgreen dotted 1px; /* fallback for Edge */
-      outline: darkgreen auto 5px;
+      outline: darkgreen solid 5px;
     }
 
     :focus:not(:focus-visible) {

testing/web-platform/tests/css/selectors/focus-visible-003.html

@@ -11,9 +11,14 @@
   <script src="/resources/testdriver-actions.js"></script>
   <script src="/resources/testdriver-vendor.js"></script>
   <style>
+    @supports not (selector(:focus-visible)) {
+      :focus {
+        outline: red solid 5px;
+      }
+    }
+
     :focus-visible {
-      outline: red dotted 1px; /* fallback for Edge */
-      outline: red auto 5px;
+      outline: red solid 5px;
     }
 
     :focus:not(:focus-visible) {

testing/web-platform/tests/css/selectors/focus-visible-004.html

@@ -11,9 +11,14 @@
   <script src="/resources/testdriver-actions.js"></script>
   <script src="/resources/testdriver-vendor.js"></script>
   <style>
+    @supports not (selector(:focus-visible)) {
+      :focus {
+        outline: red solid 5px;
+      }
+    }
+
     :focus-visible {
-      outline: red dotted 1px; /* fallback for Edge */
-      outline: red auto 5px;
+      outline: red solid 5px;
     }
 
     :focus:not(:focus-visible) {

testing/web-platform/tests/css/selectors/focus-visible-005.html

@@ -10,9 +10,10 @@
   <script src="/resources/testdriver.js"></script>
   <script src="/resources/testdriver-vendor.js"></script>
   <style>
-    :focus-visible {
-      outline: red dotted 1px; /* fallback for Edge */
-      outline: red auto 5px;
+    @supports not (selector(:focus-visible)) {
+      :focus {
+        outline: red solid 5px;
+      }
     }
 
     :focus:not(:focus-visible) {

testing/web-platform/tests/css/selectors/focus-visible-006.html

@@ -17,9 +17,14 @@
         padding: 2px 5px;
     }
 
+    @supports not (selector(:focus-visible)) {
+      :focus {
+        background-color: tomato;
+      }
+    }
+
     :focus-visible {
-      outline: darkgreen dotted 1px; /* fallback for Edge */
-      outline: darkgreen auto 5px;
+      outline: darkgreen solid 5px;
     }
 
     :focus:not(:focus-visible) {
@@ -33,7 +38,7 @@
   <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 has a red background, then the test result is FAILURE. If the element has a blue outline, then the test result is SUCCESS.</li>
+    <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>
   </ol>
   <br />
   <div>

testing/web-platform/tests/css/selectors/focus-visible-007.html

@@ -11,13 +11,11 @@
   <script src="/resources/testdriver-vendor.js"></script>
   <style>
     [data-hadkeydown] :focus-visible {
-      outline: darkgreen dotted 1px; /* fallback for Edge */
-      outline: darkgreen auto 5px;
+      outline: darkgreen solid 5px;
     }
 
     [data-hadmousedown] :focus-visible {
-      outline: red dotted 1px; /* fallback for Edge */
-      outline: red auto 5px;
+      outline: red solid 5px;
     }
 
     [data-hadkeydown] :focus:not(:focus-visible) {

testing/web-platform/tests/css/selectors/focus-visible-008.html

@@ -11,12 +11,18 @@
   <script src="/resources/testdriver-actions.js"></script>
   <script src="/resources/testdriver-vendor.js"></script>
   <style>
+    @supports not (selector(:focus-visible)) {
+      #el:focus {
+        background-color: tomato;
+      }
+    }
+
     :focus-visible {
-      outline: darkgreen auto 5px;
+      outline: darkgreen solid 5px;
     }
 
     #el:focus:not(:focus-visible) {
-      background-color: tomato;;
+      background-color: tomato;
       outline: 0;
     }
   </style>

testing/web-platform/tests/css/selectors/focus-visible-009.html

@@ -8,12 +8,18 @@
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <style>
+    @supports not (selector(:focus-visible)) {
+      #buton:focus {
+        background-color: tomato;
+      }
+    }
+
     :focus-visible {
-      outline: darkgreen auto 5px;
+      outline: darkgreen solid 5px;
     }
 
     #button:focus:not(:focus-visible) {
-      background-color: tomato;;
+      background-color: tomato;
       outline: 0;
     }
   </style>

testing/web-platform/tests/css/selectors/focus-visible-010.html

@@ -8,8 +8,14 @@
   <script src="/resources/testharness.js"></script>
   <script src="/resources/testharnessreport.js"></script>
   <style>
+    @supports not (selector(:focus-visible)) {
+      :focus {
+        background-color: tomato;
+      }
+    }
+
     :focus-visible {
-      outline: darkgreen auto 5px;
+      outline: darkgreen solid 5px;
     }
 
     :focus:not(:focus-visible) {

testing/web-platform/tests/css/selectors/focus-visible-011.html

@@ -10,12 +10,18 @@
   <script src="/resources/testdriver.js"></script>
   <script src="/resources/testdriver-vendor.js"></script>
   <style>
+    @supports not (selector(:focus-visible)) {
+      #next:focus {
+        background-color: tomato;
+      }
+    }
+
     button {
       border: 0;
     }
 
     #next:focus-visible {
-      outline: darkgreen auto 5px;
+      outline: darkgreen solid 5px;
     }
 
     #next:focus:not(:focus-visible) {

testing/web-platform/tests/css/selectors/focus-visible-012.html

@@ -11,6 +11,12 @@
   <script src="/resources/testdriver-actions.js"></script>
   <script src="/resources/testdriver-vendor.js"></script>
   <style>
+    @supports not (selector(:focus-visible)) {
+      :focus {
+        background-color: tomato;
+      }
+    }
+
     :focus-visible {
       outline: 0;
       outline-color: tomato;
@@ -18,8 +24,7 @@
     }
 
     :focus:not(:focus-visible) {
-      outline: darkgreen dotted 1px; /* fallback for Edge */
-      outline: darkgreen auto 5px;
+      outline: darkgreen solid 5px;
     }
   </style>
 </head>