Bug 1176997 - Part2. Import w3c reftest. r=xidorn
authorEthan Lin <ethlin@mozilla.com>
Wed, 07 Sep 2016 23:37:00 +0200
changeset 314607 86dcd8447298594f80723967b01ce20fe5e6d4e0
parent 314606 9546409302784cb6e97371b448132194bbba8ecb
child 314608 1331b2d3cfa33dabbade0cf38e8e39c8c031ae46
push id30732
push usercbook@mozilla.com
push dateWed, 21 Sep 2016 10:04:03 +0000
treeherdermozilla-central@560b2c805bf7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersxidorn
bugs1176997
milestone52.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1176997 - Part2. Import w3c reftest. r=xidorn
layout/reftests/w3c-css/failures.list
layout/reftests/w3c-css/import-tests.py
layout/reftests/w3c-css/received/import.log
layout/reftests/w3c-css/received/reftest.list
layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html
layout/reftests/w3c-css/received/selectors-4/focus-within-001.html
layout/reftests/w3c-css/received/selectors-4/focus-within-002.html
layout/reftests/w3c-css/received/selectors-4/focus-within-003.html
layout/reftests/w3c-css/received/selectors-4/focus-within-004.html
layout/reftests/w3c-css/received/selectors-4/focus-within-005.html
layout/reftests/w3c-css/received/selectors-4/focus-within-006.html
layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html
layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html
layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html
layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html
layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html
layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html
layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml
layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml
layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html
layout/reftests/w3c-css/received/selectors-4/selector-required.html
layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html
layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html
layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html
--- a/layout/reftests/w3c-css/failures.list
+++ b/layout/reftests/w3c-css/failures.list
@@ -6,16 +6,23 @@
 #       layout/tools/reftest/README.txt) and a path pattern starting
 #       with module. E.g.:
 #       fails css-values-3/attr-*.html
 #
 # If a test matches multiple path pattern, the last one wins. Because
 # of this, an item could have zero <failure-type>, which indicates it
 # is expected to pass, and override failure rule above it.
 
+# focus-within
+needs-focus selectors-4/focus-within-00*.html
+pref(dom.webcomponents.enabled,true) needs-focus selectors-4/focus-within-shadow-*.html
+
+# Bug 1208113
+fails needs-focus selectors-4/focus-within-shadow-001.html
+
 # Fuzzy
 fuzzy-if(OSX,40,6) css-values-3/ch-unit-001.html
 
 # Bug 435426
 fails css-values-3/attr-*.html
       css-values-3/attr-*-invalid-fallback.html
       css-values-3/attr-invalid-type-???.html
 
--- a/layout/reftests/w3c-css/import-tests.py
+++ b/layout/reftests/w3c-css/import-tests.py
@@ -29,16 +29,17 @@ import re
 # test only once, even if it covers more than one spec.)
 
 # But for now, let's just import a few sets of tests.
 
 gSubtrees = [
     os.path.join("css-namespaces-3"),
     os.path.join("css-conditional-3"),
     os.path.join("css-values-3"),
+    os.path.join("selectors-4"),
 ]
 
 gPrefixedProperties = [
     "column-count",
     "column-fill",
     "column-gap",
     "column-rule",
     "column-rule-color",
--- a/layout/reftests/w3c-css/received/import.log
+++ b/layout/reftests/w3c-css/received/import.log
@@ -1,9 +1,9 @@
-Importing revision: 5f28431ca4254462b567c39af397abc6b094a2ef
+Importing revision: 4c3ccc36a5c52aee08fc6ee0761c9a08c1f746e8
 from repository: https://hg.csswg.org/test/
 Importing css-conditional-3/at-media-whitespace-optional-001.html to css-conditional-3/at-media-whitespace-optional-001.html
 Importing css-conditional-3/reference/background-lime.html to css-conditional-3/background-lime.html
 Importing css-conditional-3/at-media-whitespace-optional-002.html to css-conditional-3/at-media-whitespace-optional-002.html
 Importing css-conditional-3/at-supports-001.html to css-conditional-3/at-supports-001.html
 Importing css-conditional-3/at-supports-001-ref.html to css-conditional-3/at-supports-001-ref.html
 Importing css-conditional-3/at-supports-002.html to css-conditional-3/at-supports-002.html
 Importing css-conditional-3/at-supports-003.html to css-conditional-3/at-supports-003.html
@@ -84,27 +84,27 @@ Importing css-values-3/support/1x1-green
 Importing css-values-3/support/1x1-lime.png to css-values-3/support/1x1-lime.png
 Importing css-values-3/support/1x1-maroon.png to css-values-3/support/1x1-maroon.png
 Importing css-values-3/support/1x1-navy.png to css-values-3/support/1x1-navy.png
 Importing css-values-3/support/1x1-red.png to css-values-3/support/1x1-red.png
 Importing css-values-3/support/1x1-white.png to css-values-3/support/1x1-white.png
 Importing css-values-3/support/60x60-gg-rr.png to css-values-3/support/60x60-gg-rr.png
 Importing css-values-3/support/60x60-green.png to css-values-3/support/60x60-green.png
 Importing css-values-3/support/60x60-red.png to css-values-3/support/60x60-red.png
+Importing css-values-3/support/README to css-values-3/support/README
 Importing css-values-3/support/a-green.css to css-values-3/support/a-green.css
 Importing css-values-3/support/b-green.css to css-values-3/support/b-green.css
 Importing css-values-3/support/c-red.css to css-values-3/support/c-red.css
 Importing css-values-3/support/cat.png to css-values-3/support/cat.png
 Importing css-values-3/support/import-green.css to css-values-3/support/import-green.css
 Importing css-values-3/support/import-red.css to css-values-3/support/import-red.css
 Importing css-values-3/support/pattern-grg-rgr-grg.png to css-values-3/support/pattern-grg-rgr-grg.png
 Importing css-values-3/support/pattern-grg-rrg-rgg.png to css-values-3/support/pattern-grg-rrg-rgg.png
 Importing css-values-3/support/pattern-rgr-grg-rgr.png to css-values-3/support/pattern-rgr-grg-rgr.png
 Importing css-values-3/support/pattern-tr.png to css-values-3/support/pattern-tr.png
-Importing css-values-3/support/README to css-values-3/support/README
 Importing css-values-3/support/ruler-h-50%.png to css-values-3/support/ruler-h-50%.png
 Importing css-values-3/support/ruler-h-50px.png to css-values-3/support/ruler-h-50px.png
 Importing css-values-3/support/ruler-v-100px.png to css-values-3/support/ruler-v-100px.png
 Importing css-values-3/support/ruler-v-50px.png to css-values-3/support/ruler-v-50px.png
 Importing css-values-3/support/square-purple.png to css-values-3/support/square-purple.png
 Importing css-values-3/support/square-teal.png to css-values-3/support/square-teal.png
 Importing css-values-3/support/square-white.png to css-values-3/support/square-white.png
 Importing css-values-3/support/swatch-blue.png to css-values-3/support/swatch-blue.png
@@ -158,8 +158,28 @@ Importing css-values-3/vh-support-atview
 Importing css-values-3/vh-support-margin.html to css-values-3/vh-support-margin.html
 Importing css-values-3/vh-support-transform-origin.html to css-values-3/vh-support-transform-origin.html
 Importing css-values-3/vh-support-transform-translate.html to css-values-3/vh-support-transform-translate.html
 Importing css-values-3/vh-support.html to css-values-3/vh-support.html
 Importing css-values-3/vh-zero-support.html to css-values-3/vh-zero-support.html
 Importing css-values-3/vh_not_refreshing_on_chrome.html to css-values-3/vh_not_refreshing_on_chrome.html
 Importing css-values-3/reference/vh_not_refreshing_on_chrome-ref.html to css-values-3/vh_not_refreshing_on_chrome-ref.html
 Importing css-values-3/vh_not_refreshing_on_chrome_iframe.html to css-values-3/vh_not_refreshing_on_chrome_iframe.html
+Importing selectors-4/focus-within-001.html to selectors-4/focus-within-001.html
+Importing selectors-4/focus-within-001-ref.html to selectors-4/focus-within-001-ref.html
+Importing selectors-4/focus-within-002.html to selectors-4/focus-within-002.html
+Importing selectors-4/focus-within-003.html to selectors-4/focus-within-003.html
+Importing selectors-4/focus-within-004.html to selectors-4/focus-within-004.html
+Importing selectors-4/focus-within-005.html to selectors-4/focus-within-005.html
+Importing selectors-4/focus-within-006.html to selectors-4/focus-within-006.html
+Importing selectors-4/focus-within-shadow-001.html to selectors-4/focus-within-shadow-001.html
+Importing selectors-4/focus-within-shadow-001-ref.html to selectors-4/focus-within-shadow-001-ref.html
+Importing selectors-4/focus-within-shadow-002.html to selectors-4/focus-within-shadow-002.html
+Importing selectors-4/focus-within-shadow-003.html to selectors-4/focus-within-shadow-003.html
+Importing selectors-4/focus-within-shadow-004.html to selectors-4/focus-within-shadow-004.html
+Importing selectors-4/focus-within-shadow-005.html to selectors-4/focus-within-shadow-005.html
+Importing selectors-4/of-type-selectors.xhtml to selectors-4/of-type-selectors.xhtml
+Importing selectors-4/of-type-selectors-ref.xhtml to selectors-4/of-type-selectors-ref.xhtml
+Importing selectors-4/selector-required.html to selectors-4/selector-required.html
+Importing selectors-4/selector-required-ref.html to selectors-4/selector-required-ref.html
+Importing selectors-4/selectors-dir-selector-ltr-001.html to selectors-4/selectors-dir-selector-ltr-001.html
+Importing selectors-4/selectors-dir-selector-ref.html to selectors-4/selectors-dir-selector-ref.html
+Importing selectors-4/selectors-dir-selector-rtl-001.html to selectors-4/selectors-dir-selector-rtl-001.html
--- a/layout/reftests/w3c-css/received/reftest.list
+++ b/layout/reftests/w3c-css/received/reftest.list
@@ -95,8 +95,23 @@ fuzzy-if(OSX,40,6) == css-values-3/ch-un
 == css-values-3/vh-support-atviewport.html css-values-3/all-green.html
 == css-values-3/vh-support-margin.html css-values-3/all-green.html
 skip == css-values-3/vh-support-transform-origin.html css-values-3/all-green.html
 skip == css-values-3/vh-support-transform-translate.html css-values-3/all-green.html
 == css-values-3/vh-support.html css-values-3/all-green.html
 == css-values-3/vh-zero-support.html css-values-3/all-green.html
 skip == css-values-3/vh_not_refreshing_on_chrome.html css-values-3/vh_not_refreshing_on_chrome-ref.html
 skip == css-values-3/vh_not_refreshing_on_chrome_iframe.html css-values-3/vh_not_refreshing_on_chrome-ref.html
+needs-focus == selectors-4/focus-within-001.html selectors-4/focus-within-001-ref.html
+needs-focus == selectors-4/focus-within-002.html selectors-4/focus-within-001-ref.html
+needs-focus == selectors-4/focus-within-003.html selectors-4/focus-within-001-ref.html
+needs-focus == selectors-4/focus-within-004.html selectors-4/focus-within-001-ref.html
+needs-focus == selectors-4/focus-within-005.html selectors-4/focus-within-001-ref.html
+needs-focus == selectors-4/focus-within-006.html selectors-4/focus-within-001-ref.html
+fails needs-focus == selectors-4/focus-within-shadow-001.html selectors-4/focus-within-shadow-001-ref.html
+pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-002.html selectors-4/focus-within-shadow-001-ref.html
+pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-003.html selectors-4/focus-within-shadow-001-ref.html
+pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-004.html selectors-4/focus-within-shadow-001-ref.html
+pref(dom.webcomponents.enabled,true) needs-focus == selectors-4/focus-within-shadow-005.html selectors-4/focus-within-shadow-001-ref.html
+== selectors-4/of-type-selectors.xhtml selectors-4/of-type-selectors-ref.xhtml
+== selectors-4/selector-required.html selectors-4/selector-required-ref.html
+== selectors-4/selectors-dir-selector-ltr-001.html selectors-4/selectors-dir-selector-ref.html
+== selectors-4/selectors-dir-selector-rtl-001.html selectors-4/selectors-dir-selector-ref.html
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>