[css-ui] Allow outline-style:auto to be process the same as solid (#4…

…3010) In response to w3c/csswg-drafts#9201 (comment) Co-authored-by: Oriol Brufau <obrufau@igalia.com>
web-platform-tests · Nov 15, 2023 · 9d3be8a · 9d3be8a
1 parent 920a941
commit 9d3be8a
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 22 deletions.
diff --git a/css/css-ui/outline-auto-width-001.html b/css/css-ui/outline-auto-width-001.html
@@ -6,21 +6,31 @@
 <meta name=flags content="">
 <meta name=assert content="outline-width is ignored when outline-style is auto">
 <link rel=help href="https://drafts.csswg.org/css-ui-4/#outline-style">
-<link rel="match" href="reference/outline-auto-with-001-ref.html">
+<link rel="match" href="reference/outline-auto-width-001-ref.html">
+<link rel="match" href="reference/outline-auto-width-001-b-ref.html"><!-- Allowing 'outline-style: auto' to behave the same as 'solid'-->
 <style>
 div {
     outline-style: auto;
-    outline-width: 100px;
+    outline-width: 1em;
     width: 100px;
     height: 100px;
-    margin: 1em;
+    margin: 2em;
 }
 div + div {
     outline-width: 0;
 }
+hr ~ div {
+    outline-style: solid;
+}
 </style>
 
-<p>Test passes if there are two identical box frames below.
+<p>Test passes if either:
+<ul>
+    <li>there are three boxes below, two above the horizontal line and one below, and the two boxes above the line are identical
+    <li>there are two identical boxes below, one above the horizontal line and one below
+</ul>
 
 <div></div>
 <div></div>
+<hr>
+<div></div>
diff --git a/css/css-ui/reference/outline-auto-width-001-b-ref.html b/css/css-ui/reference/outline-auto-width-001-b-ref.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS-UI test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+    outline-style: solid;
+    outline-width: 1em;
+    width: 100px;
+    height: 100px;
+    margin: 2em;
+}
+div + div {
+    outline-style: none;
+}
+</style>
+
+<p>Test passes if either:
+<ul>
+    <li>there are three boxes below, two above the horizontal line and one below, and the two boxes above the line are identical
+    <li>there are two identical boxes below, one above the horizontal line and one below
+</ul>
+
+<div></div>
+<div></div>
+<hr>
+<div></div>
diff --git a/css/css-ui/reference/outline-auto-width-001-ref.html b/css/css-ui/reference/outline-auto-width-001-ref.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang=en>
+<meta charset=utf-8>
+<title>CSS-UI test reference</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<style>
+div {
+    outline-style: auto;
+    width: 100px;
+    height: 100px;
+    margin: 2em;
+}
+hr + div {
+    outline-style: solid;
+    outline-width: 1em;
+}
+</style>
+
+<p>Test passes if either:
+<ul>
+    <li>there are three boxes below, two above the horizontal line and one below, and the two boxes above the line are identical
+    <li>there are two identical boxes below, one above the horizontal line and one below
+</ul>
+
+<div></div>
+<div></div>
+<hr>
+<div></div>
diff --git a/css/css-ui/reference/outline-auto-with-001-ref.html b/css/css-ui/reference/outline-auto-with-001-ref.html