summaryrefslogtreecommitdiffstats
path: root/layout/reftests/w3c-css/received/selectors-4
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/w3c-css/received/selectors-4')
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html15
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-001.html39
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-002.html41
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-003.html47
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-004.html52
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-005.html53
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-006.html55
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html15
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html40
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html41
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html43
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html49
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html60
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml30
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml32
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html22
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/selector-required.html26
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html26
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html19
-rw-r--r--layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html26
20 files changed, 731 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html
new file mode 100644
index 000000000..9d76c0674
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html
@@ -0,0 +1,15 @@
+<!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="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<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>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html
new file mode 100644
index 000000000..15de67cef
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<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" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div>
+<script>
+/* This script is an optional convenience,
+ simply removing the need to manually focus the element.
+ The test is valid even if the script is not run. */
+var focusme = document.getElementById('focusme');
+focusme.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html
new file mode 100644
index 000000000..b59dc25b5
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<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" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div>
+</div>
+<script>
+/* This script is an optional convenience,
+ simply removing the need to manually focus the element.
+ The test is valid even if the script is not run. */
+var focusme = document.getElementById('focusme');
+focusme.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html
new file mode 100644
index 000000000..4c87dc627
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<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" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div>
+ </div>
+ </div>
+ </div>
+</div>
+<script>
+/* This script is an optional convenience,
+ simply removing the need to manually focus the element.
+ The test is valid even if the script is not run. */
+var focusme = document.getElementById('focusme');
+focusme.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html
new file mode 100644
index 000000000..f0d3765a9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<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" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" contentEditable="true">Focus this element</div>
+ </div>
+</div>
+<script>
+/* This script is an optional convenience,
+ simply removing the need to manually focus the element.
+ The test is valid even if the script is not run. */
+var editor = document.getElementById('focusme');
+editor.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html
new file mode 100644
index 000000000..5a173fd72
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<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" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" href="">Focus this element</a>
+ </div>
+</div>
+<script>
+/* This script is an optional convenience,
+ simply removing the need to manually focus the element.
+ The test is valid even if the script is not run. */
+var editor = document.getElementById('focusme');
+editor.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html
new file mode 100644
index 000000000..04e6cbcb9
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-001-ref.html">
+<meta name="flags" content="interact">
+<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" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" value="Focus this element">
+ <div>
+ </div>
+</div>
+<script>
+/* This script is an optional convenience,
+ simply removing the need to manually focus the element.
+ The test is valid even if the script is not run. */
+var editor = document.getElementById('focusme');
+editor.focus();
+</script>
+<body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html
new file mode 100644
index 000000000..4631ef3e3
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html
@@ -0,0 +1,15 @@
+<!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="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<style>
+div {
+ border: solid 15px green;
+}
+</style>
+<p>Test passes if there is a green rectangle below.</p>
+<div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html
new file mode 100644
index 000000000..e4610dacf
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="flags" content="interact 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" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').createShadowRoot();
+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();
+}, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html
new file mode 100644
index 000000000..b02a3f9a1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="flags" content="interact 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" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').createShadowRoot();
+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();
+}, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html
new file mode 100644
index 000000000..588719424
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="flags" content="interact 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" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').createShadowRoot();
+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();
+}, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html
new file mode 100644
index 000000000..8348adc35
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="flags" content="interact 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" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').createShadowRoot();
+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();
+}, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html
new file mode 100644
index 000000000..6c486fa48
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang=en>
+<meta charset="utf-8">
+<title>Selectors Level 4: focus-within with shadow DOM</title>
+<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+<link rel="match" href="focus-within-shadow-001-ref.html">
+<meta name="flags" content="interact 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" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div>
+</template>
+
+<script>
+var shadow = document.getElementById('shadow-host').createShadowRoot();
+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').createShadowRoot();
+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();
+}, 0);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml
new file mode 100644
index 000000000..af883c97e
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml
@@ -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="mailto:Ms2ger@gmail.com"/>
+<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>
diff --git a/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml
new file mode 100644
index 000000000..18fead9b1
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml
@@ -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="http://fantasai.inkedblade.net/contact"/>
+<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/>
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-first-of-type-pseudo"/>
+<link rel="match" href="of-type-selectors-ref.xhtml"/>
+<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>
diff --git a/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html b/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html
new file mode 100644
index 000000000..038a8a9b6
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS level4 Selector :required and :optional</title>
+ <link rel="author" title="LEE YUN HEE" href="mailto:zzirasi@gmail.com">
+
+ <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>
diff --git a/layout/reftests/w3c-css/received/selectors-4/selector-required.html b/layout/reftests/w3c-css/received/selectors-4/selector-required.html
new file mode 100644
index 000000000..9c0899ad2
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/selector-required.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS level4 Selector :required and :optional</title>
+ <link rel="author" title="LEE YUN HEE" href="mailto:zzirasi@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/selectors4/#opt-pseudos">
+ <meta name="assert" content="You should see a green input box.">
+ <link rel="match" href="selector-required-ref.html">
+ <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>
diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html
new file mode 100644
index 000000000..c11f42f62
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html
@@ -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="mailto:taken.spc@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo">
+ <link rel="match" href="selectors-dir-selector-ref.html">
+ <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 <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div dir="ltr"></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html
new file mode 100644
index 000000000..7b297d036
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Reftest Reference for CSS Selectors Level 4 :dir() Tests</title>
+ <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
+ <meta name="flags" content="">
+ <style type="text/css">
+ div {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+ </style>
+</head>
+<body>
+ <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div></div>
+</body>
+</html>
diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html
new file mode 100644
index 000000000..df2c63494
--- /dev/null
+++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html
@@ -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="mailto:taken.spc@gmail.com">
+ <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo">
+ <link rel="match" href="selectors-dir-selector-ref.html">
+ <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 <strong>filled green square</strong> and <strong>no red</strong>.</p>
+ <div dir="rtl"></div>
+</body>
+</html>