Diff
Modified: trunk/LayoutTests/ChangeLog (215456 => 215457)
--- trunk/LayoutTests/ChangeLog 2017-04-18 08:11:47 UTC (rev 215456)
+++ trunk/LayoutTests/ChangeLog 2017-04-18 09:17:19 UTC (rev 215457)
@@ -1,3 +1,13 @@
+2017-04-18 Manuel Rego Casasnovas <[email protected]>
+
+ [selectors4] Import W3C Test Suite
+ https://bugs.webkit.org/show_bug.cgi?id=170898
+
+ Reviewed by Youenn Fablet.
+
+ * TestExpectations: Mark a few tests as failure linking to the related bugs.
+ * platform/mac-wk1/TestExpectations: Marking some tests that have issues on WK1.
+
2017-04-18 Carlos Garcia Campos <[email protected]>
Unreviewed GTK+ gardening. Add several test expectations.
Modified: trunk/LayoutTests/TestExpectations (215456 => 215457)
--- trunk/LayoutTests/TestExpectations 2017-04-18 08:11:47 UTC (rev 215456)
+++ trunk/LayoutTests/TestExpectations 2017-04-18 09:17:19 UTC (rev 215457)
@@ -278,6 +278,12 @@
webkit.org/b/149891 imported/w3c/web-platform-tests/css/css-grid-1/grid-layout-properties.html [ Failure ]
webkit.org/b/169271 imported/w3c/web-platform-tests/css/css-grid-1/grid-items/grid-items-sizing-alignment-001.html [ ImageOnlyFailure ]
+# selectors4
+webkit.org/b/170900 imported/w3c/web-platform-tests/css/selectors4/focus-within-006.html [ ImageOnlyFailure ]
+webkit.org/b/170899 imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-006.html [ ImageOnlyFailure ]
+webkit.org/b/64861 imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001.html [ ImageOnlyFailure ]
+webkit.org/b/64861 imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001.html [ ImageOnlyFailure ]
+
# nth-child tests takes long time and Debug build sometimes timeouts because there are many test cases.
webkit.org/b/137149 fast/selectors/nth-child-of-basics.html [ Slow ]
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (215456 => 215457)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2017-04-18 08:11:47 UTC (rev 215456)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2017-04-18 09:17:19 UTC (rev 215457)
@@ -1,3 +1,55 @@
+2017-04-18 Manuel Rego Casasnovas <[email protected]>
+
+ [selectors4] Import W3C Test Suite
+ https://bugs.webkit.org/show_bug.cgi?id=170898
+
+ Reviewed by Youenn Fablet.
+
+ This patch imports "selectors4" test suite from WPT repo:
+ https://github.com/w3c/web-platform-tests/tree/master/css/selectors4
+
+ * resources/import-expectations.json:
+ * web-platform-tests/css/selectors4/OWNERS: Added.
+ * web-platform-tests/css/selectors4/focus-within-001-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-001.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-002-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-002.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-003-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-003.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-004-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-004.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-005-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-005.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-006-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-006.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-007-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-007.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-008-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-008.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-009-expected.txt: Added.
+ * web-platform-tests/css/selectors4/focus-within-009.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-001-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-001.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-002-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-002.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-003-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-003.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-004-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-004.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-005-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-005.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-006-expected.html: Added.
+ * web-platform-tests/css/selectors4/focus-within-shadow-006.html: Added.
+ * web-platform-tests/css/selectors4/of-type-selectors-expected.xhtml: Added.
+ * web-platform-tests/css/selectors4/of-type-selectors.xhtml: Added.
+ * web-platform-tests/css/selectors4/selector-required-expected.html: Added.
+ * web-platform-tests/css/selectors4/selector-required.html: Added.
+ * web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001-expected.xht: Added.
+ * web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001.html: Added.
+ * web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001-expected.xht: Added.
+ * web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001.html: Added.
+ * web-platform-tests/css/selectors4/w3c-import.log: Added.
+
2017-04-14 Jiewen Tan <[email protected]>
[WebCrypto] Add support for ECDSA
Modified: trunk/LayoutTests/imported/w3c/resources/import-expectations.json (215456 => 215457)
--- trunk/LayoutTests/imported/w3c/resources/import-expectations.json 2017-04-18 08:11:47 UTC (rev 215456)
+++ trunk/LayoutTests/imported/w3c/resources/import-expectations.json 2017-04-18 09:17:19 UTC (rev 215457)
@@ -53,6 +53,7 @@
"web-platform-tests/css/": "skip",
"web-platform-tests/css/css-grid-1/": "import",
"web-platform-tests/css/css-scoping1": "import",
+ "web-platform-tests/css/selectors4/": "import",
"web-platform-tests/cssom": "skip",
"web-platform-tests/cssom-view": "skip",
"web-platform-tests/custom-elements": "import",
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/OWNERS (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/OWNERS (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/OWNERS 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,3 @@
+@frivoal
+@plinss
+@tabatkins
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-001-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-001-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-001-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>Focus this element</div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-001.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-001.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="assert" content="Test that :focus-within applies to an element with tabindex when :focus applies.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+ outline: none;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+ This element needs to be focused for the test to make sense. */
+div {
+border: solid 15px blue;
+}
+div:focus {
+border-color: red;
+}
+div:focus-within {
+border-color: green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div id="focusme" tabindex="1">Focus this element</div>
+<script>
+var focusme = document.getElementById('focusme');
+focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-002-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-002-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-002-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>Focus this element</div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-002.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-002.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-002.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="assert" content="Test that :focus-within applies to the parent of an element with tabindex where :focus applies.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+ outline: none;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+ This element needs to be focused for the test to make sense. */
+#focusme:not(:focus) {
+ border: solid 15px blue;
+}
+
+#target:focus-within {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div id="target">
+ <div id="focusme" tabindex="1">Focus this element</div>
+</div>
+<script>
+var focusme = document.getElementById('focusme');
+focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-003-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-003-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-003-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>Focus this element</div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-003.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-003.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-003.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="assert" content="Test that :focus-within applies to ancestors of an element with tabindex where :focus applies.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+ outline: none;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+ This element needs to be focused for the test to make sense. */
+#focusme:not(:focus) {
+ border: solid 15px blue;
+}
+
+#target:focus-within {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div id="target">
+ <div>
+ <div>
+ <div>
+ <div id="focusme" tabindex="1">Focus this element</div>
+ </div>
+ </div>
+ </div>
+</div>
+<script>
+var focusme = document.getElementById('focusme');
+focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-004-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-004-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-004-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>Focus this element</div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-004.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-004.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-004.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="assert" content="Test that :focus-within works on elements that are focusable due to contenteditable.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+ outline: none;
+
+ /* Make the caret invisible
+ since it matches the color of the text, which is transparent,
+ while keeping the text readable thanks to its shadow.
+ Not using the caret-color property as it is too new to be relied on. */
+ color: transparent; text-shadow: black 0px 0px 0px;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+ This element needs to be focused for the test to make sense. */
+#focusme:not(:focus) {
+ border: solid 15px blue;
+}
+
+:focus {
+ border: solid 5px red;
+}
+div:focus-within, #focusme:focus-within {
+ border: solid 5px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>
+ <div>
+ <div id="focusme" contentEditable="true">Focus this element</div>
+ </div>
+</div>
+<script>
+var focusme = document.getElementById('focusme');
+focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-005-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-005-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-005-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>Focus this element</div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-005.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-005.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-005.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="assert" content="Test that :focus-within works on links.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+ outline: none;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+ This element needs to be focused for the test to make sense. */
+#focusme:not(:focus) {
+ border: solid 15px blue;
+}
+
+/* Make the link look like the div in the reference file */
+#focusme {
+ display: block;
+ text-decoration: none;
+ color: currentColor;
+}
+
+:focus {
+ border: solid 5px red;
+}
+div:focus-within, #focusme:focus-within {
+ border: solid 5px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>
+ <div>
+ <a id="focusme" href="" this element</a>
+ </div>
+</div>
+<script>
+var focusme = document.getElementById('focusme');
+focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-006-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-006-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-006-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>Focus this element</div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-006.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-006.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-006.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="assert" content="Test that :focus-within works on form controls, using an input element.">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+ all: initial;
+ outline: none;
+
+ /* Make the caret invisible
+ since it matches the color of the text, which is transparent,
+ while keeping the text readable thanks to its shadow.
+ Not using the caret-color property as it is too new to be relied on. */
+ color: transparent; text-shadow: black 0px 0px 0px;
+}
+
+/* Use blue to indicate that the user needs to pay attention.
+ This element needs to be focused for the test to make sense. */
+#focusme:not(:focus) {
+ border: solid 15px blue;
+}
+
+#focusme:focus:not(:focus-within) {
+ background: red;
+}
+div:focus-within {
+ border: solid 5px green;
+}
+</style>
+<p>Test passes if, when the element below is focused,
+it is surrounded by a thick green border.
+There must be no red or blue once it is focused.</p>
+<div>
+ <div>
+ <div>
+ <input id="focusme" value="Focus this element">
+ </div>
+ </div>
+</div>
+<script>
+var focusme = document.getElementById('focusme');
+focusme.focus();
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-007-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-007-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-007-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within Reference File</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<style>
+ html, body, div {
+ border: solid 5px green;
+ }
+</style>
+<p>Test passes if, when the element below is focused, it is surrounded by a green border, and HTML and BODY elements also have a green border. There must be no red or blue once it is focused.</p>
+<div>Focus this element</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-007.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-007.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-007.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="assert" content="Checks that ':focus-within' can be used as universal selector.">
+<style>
+ /* Suppress things that cannot be reproduced in the reference file */
+ :focus {
+ outline: none;
+ }
+ html, body, div {
+ border: solid 5px red;
+ }
+ /* Use blue to indicate that the user needs to pay attention.
+ This element needs to be focused for the test to make sense. */
+ div {
+ border-color: blue;
+ }
+ :focus-within {
+ border-color: green;
+ }
+</style>
+<p>Test passes if, when the element below is focused, it is surrounded by a green border, and HTML and BODY elements also have a green border. There must be no red or blue once it is focused.</p>
+<div id="focusme" tabindex="1">Focus this element</div>
+<script>
+ var focusme = document.getElementById('focusme');
+ focusme.focus();
+ document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-008-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-008-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-008-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within Reference File</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<style>
+ html, body, div {
+ border: solid 5px green;
+ }
+</style>
+<p>Test passes if, when the element below is focused, it is surrounded by a green border, and HTML and BODY elements also have a green border. There must be no red or blue once it is focused.</p>
+<div>Focus this element</div>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-008.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-008.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-008.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="assert" content="Checks that ':focus-within' can be used as universal selector (using *).">
+<style>
+ /* Suppress things that cannot be reproduced in the reference file */
+ :focus {
+ outline: none;
+ }
+ html, body, div {
+ border: solid 5px red;
+ }
+ /* Use blue to indicate that the user needs to pay attention.
+ This element needs to be focused for the test to make sense. */
+ div {
+ border-color: blue;
+ }
+ *:focus-within {
+ border-color: green;
+ }
+</style>
+<p>Test passes if, when the element below is focused, it is surrounded by a green border, and HTML and BODY elements also have a green border. There must be no red or blue once it is focused.</p>
+<div id="focusme" tabindex="1">Focus this element</div>
+<script>
+ var focusme = document.getElementById('focusme');
+ focusme.focus();
+ document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-009-expected.txt (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-009-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-009-expected.txt 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,22 @@
+
+
+
+PASS Initial State
+PASS Focus 'target1'
+PASS Focus 'target2'
+PASS Set display none on 'target2'
+PASS Focus 'target1' again
+PASS Try to focus 'target2'
+PASS Set display back on 'target2'
+PASS Focus 'target2' again
+PASS Set display none on 'container2'
+PASS Focus 'target1' once again
+PASS Try to focus 'target2' again
+PASS Set display back on 'container2'
+PASS Detach 'container1' from the document
+PASS Try to focus 'target1'
+PASS Focus 'target2' once again
+PASS Attach 'container1' in 'container2'
+PASS Focus 'target1' for the last time
+PASS Move 'target1' in 'container2'
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-009.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-009.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-009.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html id="html">
+<head>
+ <meta charset="utf-8">
+ <title>Selectors Level 4: focus-within</title>
+ <link rel="author" title="Benjamin Poulain" href=""
+ <link rel="author" title="Manuel Rego Casasnovas" href=""
+ <link rel="help" href=""
+ <meta name="assert" content="Checks the basic features of the ':focus-within' pseudo class.">
+ <script src=""
+ <script src=""
+ <style>
+ * {
+ background-color: white;
+ }
+ :focus-within {
+ background-color: rgb(1, 2, 3);
+ }
+ </style>
+</head>
+<body id="body">
+ <div id="test">
+ <div id="container1">
+ <div id="sibling1"></div>
+ <div id="sibling2">
+ <input id="target1">
+ </div>
+ <div id="sibling3"></div>
+ </div>
+ <div id="container2">
+ <div id="sibling4"></div>
+ <div id="sibling5">
+ <textarea id="target2"></textarea>
+ </div>
+ <div id="sibling6"></div>
+ </div>
+ </div>
+ <div id=log></div>
+
+ <script>
+ "use strict";
+
+ function elementsStyledWithFocusWithinSelector() {
+ let elements = [];
+ for (let element of document.querySelectorAll("*")) {
+ if (getComputedStyle(element).backgroundColor === 'rgb(1, 2, 3)') {
+ elements.push(element.id);
+ }
+ }
+ return elements;
+ }
+
+ function elementsMatchingFocusWithinSelector() {
+ let elements = [];
+ for (let element of document.querySelectorAll(":focus-within")) {
+ elements.push(element.id);
+ }
+ return elements;
+ }
+
+ test(
+ function() {
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), []);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), []);
+ }, "Initial State");
+
+ var container1 = document.getElementById("container1");
+ var container2 = document.getElementById("container2");
+ var target1 = document.getElementById("target1");
+ var target2 = document.getElementById("target2");
+
+ test(
+ function() {
+ target1.focus();
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ }, "Focus 'target1'");
+
+ test(
+ function() {
+ target2.focus();
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ }, "Focus 'target2'");
+
+ test(
+ function() {
+ target2.style.display = "none";
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ assert_true(target2.matches(":focus"));
+ }, "Set display none on 'target2'");
+
+ test(
+ function() {
+ target1.focus();
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ }, "Focus 'target1' again");
+
+ test(
+ function() {
+ target2.focus();
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ assert_true(target1.matches(":focus"));
+ assert_false(target2.matches(":focus"));
+ }, "Try to focus 'target2'");
+
+ test(
+ function() {
+ target2.style.display = "inline-block";
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ }, "Set display back on 'target2'");
+
+ test(
+ function() {
+ target2.focus();
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ }, "Focus 'target2' again");
+
+ test(
+ function() {
+ container2.style.display = "none";
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ assert_true(target2.matches(":focus"));
+ }, "Set display none on 'container2'");
+
+ test(
+ function() {
+ target1.focus();
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ }, "Focus 'target1' once again");
+
+ test(
+ function() {
+ target2.focus();
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ assert_true(target1.matches(":focus"));
+ assert_false(target2.matches(":focus"));
+ }, "Try to focus 'target2' again");
+
+ test(
+ function() {
+ container2.style.display = "block";
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container1", "sibling2", "target1"]);
+ }, "Set display back on 'container2'");
+
+ test(
+ function() {
+ container1.parentElement.removeChild(container1);
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), []);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), []);
+ assert_equals(container1.querySelectorAll(":focus-within").length, 0);
+ assert_false(target1.matches(":focus"));
+ assert_false(target2.matches(":focus"));
+ }, "Detach 'container1' from the document");
+
+ test(
+ function() {
+ target1.focus();
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), []);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), []);
+ assert_equals(container1.querySelectorAll(":focus-within").length, 0);
+ assert_false(target1.matches(":focus"));
+ assert_false(target2.matches(":focus"));
+ }, "Try to focus 'target1'");
+
+ test(
+ function() {
+ target2.focus();
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ }, "Focus 'target2' once again");
+
+ test(
+ function() {
+ container2.appendChild(container1);
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "sibling5", "target2"]);
+ }, "Attach 'container1' in 'container2'");
+
+ test(
+ function() {
+ target1.focus();
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), ["html", "body", "test", "container2", "container1", "sibling2", "target1"]);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), ["html", "body", "test", "container2", "container1", "sibling2", "target1"]);
+ }, "Focus 'target1' for the last time");
+
+ test(
+ function() {
+ container2.appendChild(target1);
+ assert_array_equals(elementsStyledWithFocusWithinSelector(), []);
+ assert_array_equals(elementsMatchingFocusWithinSelector(), []);
+ assert_false(target1.matches(":focus"));
+ assert_false(target2.matches(":focus"));
+ }, "Move 'target1' in 'container2'");
+ </script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-001-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-001-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-001-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within shadow DOM Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if there is a green rectangle below.</p>
+<div></div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-001.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-001.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="dom">
+<meta name="assert" content="Test that :focus-within applies to a focused element inside the shadow DOM.">
+<body>
+<p>Test passes if there is a green rectangle below.</p>
+<div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div>
+
+<template id="shadow-template">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+ outline: none;
+}
+
+div:focus-within {
+ border: solid 15px green;
+}
+</style>
+<div id="focusme" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'});
+var template = document.getElementById('shadow-template');
+var instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+window.setTimeout(function() {
+ var focusme = shadow.getElementById('focusme');
+ focusme.focus();
+ document.documentElement.classList.remove('reftest-wait');
+}, 0);
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-002-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-002-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-002-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within shadow DOM Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if there is a green rectangle below.</p>
+<div></div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-002.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-002.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-002.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="dom">
+<meta name="assert" content="Test that :focus-within applies to a shadow host containing a focused element.">
+<style>
+div:focus-within {
+ border: solid 15px green;
+}
+</style>
+<body>
+<p>Test passes if there is a green rectangle below.</p>
+<div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div>
+
+<template id="shadow-template">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+ outline: none;
+}
+</style>
+<div id="focusme" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'});
+var template = document.getElementById('shadow-template');
+var instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+window.setTimeout(function() {
+ var focusme = shadow.getElementById('focusme');
+ focusme.focus();
+ document.documentElement.classList.remove('reftest-wait');
+}, 0);
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-003-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-003-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-003-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within shadow DOM Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if there is a green rectangle below.</p>
+<div></div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-003.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-003.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-003.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="dom">
+<meta name="assert" content="Test that :focus-within applies to the parent of a shadow host containing a focused element.">
+<style>
+#target:focus-within {
+ border: solid 15px green;
+}
+</style>
+<body>
+<p>Test passes if there is a green rectangle below.</p>
+<div id="target">
+ <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div>
+</div>
+
+<template id="shadow-template">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+ outline: none;
+}
+</style>
+<div id="focusme" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'});
+var template = document.getElementById('shadow-template');
+var instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+window.setTimeout(function() {
+ var focusme = shadow.getElementById('focusme');
+ focusme.focus();
+ document.documentElement.classList.remove('reftest-wait');
+}, 0);
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-004-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-004-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-004-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within shadow DOM Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if there is a green rectangle below.</p>
+<div></div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-004.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-004.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-004.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="dom">
+<meta name="assert" content="Test that :focus-within applies to an ancestor of a shadow host containing a focused element.">
+<style>
+#target:focus-within {
+ border: solid 15px green;
+}
+</style>
+<body>
+<p>Test passes if there is a green rectangle below.</p>
+<div id="target">
+ <div>
+ <div>
+ <div>
+ <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<template id="shadow-template">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+ outline: none;
+}
+</style>
+<div id="focusme" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'});
+var template = document.getElementById('shadow-template');
+var instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+window.setTimeout(function() {
+ var focusme = shadow.getElementById('focusme');
+ focusme.focus();
+ document.documentElement.classList.remove('reftest-wait');
+}, 0);
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-005-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-005-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-005-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within shadow DOM Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if there is a green rectangle below.</p>
+<div></div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-005.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-005.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-005.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang=en class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="dom">
+<meta name="assert" content="Test that :focus-within propagates through nested shadow DOMs containing a focused element.">
+<style>
+#target:focus-within {
+ border: solid 15px green;
+}
+</style>
+<body>
+<p>Test passes if there is a green rectangle below.</p>
+<div id="target">
+ <div>
+ <div>
+ <div>
+ <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div>
+ </div>
+ </div>
+ </div>
+</div>
+
+<template id="shadow-template">
+<div id="nested-shadow-host"><strong>Skip this test, nested shadow hosts are not supported.</strong></div>
+</template>
+
+<template id="nested-shadow-template">
+<style>
+/* Suppress things that cannot be reproduced in the reference file */
+:focus {
+ outline: none;
+}
+</style>
+<div id="focusme" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').attachShadow({mode: 'open'});
+var template = document.getElementById('shadow-template');
+var instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+
+window.setTimeout(function() {
+shadow = shadow.getElementById('nested-shadow-host').attachShadow({mode: 'open'});
+template = document.getElementById('nested-shadow-template');
+instance = document.importNode(template.content, true);
+shadow.appendChild(instance);
+}, 0);
+
+window.setTimeout(function() {
+ var focusme = shadow.getElementById('focusme');
+ focusme.focus();
+ document.documentElement.classList.remove('reftest-wait');
+}, 0);
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-006-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-006-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-006-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within shadow DOM Reference File</title>
+<link rel="author" title="Keyong Li" href=""
+<link rel="author" title="Florian Rivoal" href=""
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if there is a green rectangle below.</p>
+<div></div>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-006.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-006.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-006.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Manuel Rego Casasnovas" href=""
+<link rel="help" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="dom">
+<meta name="assert" content="Checks that ':focus-within' is propagated to the flat tree ancestors, even if it comes from a slotted element.">
+<style>
+ /* Suppress things that cannot be reproduced in the reference file */
+ :focus {
+ outline: none;
+ }
+ :focus-within {
+ border-color: green;
+ }
+</style>
+<p>Test passes if there is a green rectangle below.</p>
+
+<div id="log"></div>
+<script>
+ if (!document.body.attachShadow)
+ document.getElementById("log").innerHTML = "<strong>Skip this test, shadow DOM is not supported.</strong>";
+</script>
+
+<div id="shadow-host">
+ <div id="focusme" tabindex="1"></div>
+</div>
+
+<script>
+ var shadowHost = document.getElementById("shadow-host");
+ shadowHost.attachShadow({ mode: "open"}).innerHTML =
+ "<style>" +
+ " #shadow-div:focus-within { border: solid 15px green; }" +
+ "</style>" +
+ "<div id='shadow-div'>" +
+ " <slot></slot>" +
+ "</div>";
+ var focusme = document.getElementById("focusme");
+ focusme.focus();
+ document.documentElement.classList.remove("reftest-wait");
+</script>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/of-type-selectors-expected.xhtml (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/of-type-selectors-expected.xhtml (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/of-type-selectors-expected.xhtml 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Selectors Level 4: :first-of-type</title>
+<link rel="author" title="Ms2ger" href=""
+<style type="text/css">
+div > *|* {
+ display: block;
+ color: black;
+ border: thin solid;
+ margin: 1em;
+}
+.yellow {
+ background: yellow;
+}
+.green {
+ background: lime;
+}
+</style>
+</head>
+<body>
+<div>
+<p class="green">This line should have a green background.</p>
+<p class="yellow">This line should have a yellow background.</p>
+<p class="yellow">This line should have a yellow background.</p>
+<p class="green">This line should have a green background.</p>
+<p class="green">This line should have a green background.</p>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/of-type-selectors.xhtml (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/of-type-selectors.xhtml (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/of-type-selectors.xhtml 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml">
+<head>
+<title>Selectors Level 4: :first-of-type</title>
+<meta name="flags" content="namespace nonHTML"/>
+<link rel="author" title="Elika J. Etemad" href=""
+<link rel="author" title="Ms2ger" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<style type="text/css">
+div > *|* {
+ display: block;
+ color: black;
+ background: yellow;
+ border: thin solid;
+ margin: 1em;
+}
+div > *|*:first-of-type {
+ background: lime;
+}
+</style>
+</head>
+<body>
+<div>
+<p>This line should have a green background.</p>
+<p>This line should have a yellow background.</p>
+<html:p>This line should have a yellow background.</html:p>
+<p xmlns="http://www.example.com/ns">This line should have a green background.</p>
+<p xmlns="">This line should have a green background.</p>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selector-required-expected.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selector-required-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selector-required-expected.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS level4 Selector :required and :optional</title>
+ <link rel="author" title="LEE YUN HEE" href=""
+
+ <style>
+ input {border:3px solid green;}
+ </style>
+ </head>
+ <body>
+ <p>
+ You should see a green input box.
+ </p>
+ <p>
+ <input>
+ </p>
+ <p>
+ <input>
+ </p>
+ </body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selector-required.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selector-required.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selector-required.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS level4 Selector :required and :optional</title>
+ <link rel="author" title="LEE YUN HEE" href=""
+ <link rel="help" href=""
+ <meta name="assert" content="You should see a green input box.">
+ <link rel="match" href=""
+ <style>
+ input {border:3px solid red;}
+ :required {border-color:green;}
+ :optional {border-color:green;}
+ </style>
+ </head>
+ <body>
+ <p>
+ You should see a green input box.
+ </p>
+ <p>
+ <input required>
+ </p>
+ <p>
+ <input optional>
+ </p>
+ </body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001-expected.xht (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001-expected.xht (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001-expected.xht 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Selectors Level 4 Test: basic support for dir(ltr)</title>
+ <link rel="author" title="Takeshi Kurosawa" href=""
+ <link rel="help" href=""
+ <link rel="match" href=""
+ <meta name="flags" content="">
+ <meta name="assert" content="The :dir(ltr) pseudo-class matches an element that has a directionality of (ltr). Since the div element has dir=ltr, the selector matches.">
+ <style type="text/css">
+ div {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ }
+
+ div:dir(ltr) {
+ background-color: green;
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div dir="ltr"></div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001-expected.xht (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001-expected.xht (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001-expected.xht 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Gérard Talbot" href="" />
+ <style type="text/css"><![CDATA[
+ div
+ {
+ background-color: green;
+ height: 100px;
+ width: 100px;
+ }
+ ]]></style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div></div>
+ </body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001.html (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001.html 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Selectors Level 4 Test: basic support for dir(rtl)</title>
+ <link rel="author" title="Takeshi Kurosawa" href=""
+ <link rel="help" href=""
+ <link rel="match" href=""
+ <meta name="flags" content="">
+ <meta name="assert" content="The :dir(rtl) pseudo-class matches an elment that has a directionality of right-to-left (rtl). Since the div element has dir=rtl, the selector matches.">
+ <style type="text/css">
+ div {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ }
+
+ div:dir(rtl) {
+ background-color: green;
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+ <div dir="rtl"></div>
+</body>
+</html>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/w3c-import.log (0 => 215457)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/w3c-import.log (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/w3c-import.log 2017-04-18 09:17:19 UTC (rev 215457)
@@ -0,0 +1,55 @@
+The tests in this directory were imported from the W3C repository.
+Do NOT modify these tests directly in WebKit.
+Instead, create a pull request on the W3C CSS or WPT github:
+ https://github.com/w3c/csswg-test
+ https://github.com/w3c/web-platform-tests
+
+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
+
+Do NOT modify or remove this file.
+
+------------------------------------------------------------------------
+Properties requiring vendor prefixes:
+None
+Property values requiring vendor prefixes:
+None
+------------------------------------------------------------------------
+List of files:
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/OWNERS
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-001-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-001.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-002-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-002.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-003-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-003.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-004-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-004.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-005-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-005.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-006-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-006.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-007-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-007.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-008-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-008.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-009.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-001-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-001.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-002-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-002.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-003-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-003.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-004-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-004.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-005-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-005.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-006-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-006.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/of-type-selectors-expected.xhtml
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/of-type-selectors.xhtml
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selector-required-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selector-required.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001-expected.xht
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-ltr-001.html
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001-expected.xht
+/LayoutTests/imported/w3c/web-platform-tests/css/selectors4/selectors-dir-selector-rtl-001.html
Modified: trunk/LayoutTests/platform/mac-wk1/TestExpectations (215456 => 215457)
--- trunk/LayoutTests/platform/mac-wk1/TestExpectations 2017-04-18 08:11:47 UTC (rev 215456)
+++ trunk/LayoutTests/platform/mac-wk1/TestExpectations 2017-04-18 09:17:19 UTC (rev 215457)
@@ -351,3 +351,10 @@
http/tests/websocket/tests/hybi/network-process-crash-error.html [ Skip ]
webkit.org/b/170830 inspector/sampling-profiler/named-function-_expression_.html [ Pass Failure ]
+
+# selectors4
+webkit.org/b/170935 imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-001.html [ Failure ]
+webkit.org/b/170935 imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-002.html [ Failure ]
+webkit.org/b/170935 imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-003.html [ Failure ]
+webkit.org/b/170935 imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-004.html [ Failure ]
+webkit.org/b/170935 imported/w3c/web-platform-tests/css/selectors4/focus-within-shadow-005.html [ Failure ]
