summaryrefslogtreecommitdiffstats
path: root/layout/reftests/w3c-css/submitted/selectors4
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/w3c-css/submitted/selectors4')
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01-ref.html18
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01.html50
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/dir-style-01-ref.html33
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/dir-style-01a.html37
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/dir-style-01b.html54
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/dir-style-02-ref.html31
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/dir-style-02a.html35
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/dir-style-02b.html46
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/dir-style-03-ref.html18
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/dir-style-03a.html20
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/dir-style-03b.html34
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/dir-style-04-ref.html24
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/dir-style-04.html41
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/focus-within-1-ref.html26
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/focus-within-1.html38
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/focus-within-2-ref.html19
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/focus-within-2.html36
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/focus-within-3-ref.html15
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/focus-within-3.html27
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/reftest-stylo.list8
-rw-r--r--layout/reftests/w3c-css/submitted/selectors4/reftest.list11
21 files changed, 621 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01-ref.html b/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01-ref.html
new file mode 100644
index 000000000..069c86cf0
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test reference</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com">
+<style>
+ :root {
+ color: green;
+ }
+</style>
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
+<p>Should be green
diff --git a/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01.html b/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01.html
new file mode 100644
index 000000000..5ae108b7d
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/child-index-no-parent-01.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: child-indexed selectors should match without a parent element.</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#child-index">
+<link rel="match" href="child-index-no-parent-01-ref.html">
+<style>
+ :root:first-child #a {
+ color: green;
+ }
+ :root:nth-child(n) #b {
+ color: green;
+ }
+ :root:first-of-type #c {
+ color: green;
+ }
+ :root:nth-of-type(1) #d {
+ color: green;
+ }
+ :root:last-of-type #e {
+ color: green;
+ }
+ :root:last-child #f {
+ color: green;
+ }
+ :root:nth-last-child(1) #g {
+ color: green;
+ }
+ :root:nth-last-of-type(n) #h {
+ color: green;
+ }
+
+ #i {
+ color: green;
+ }
+
+ /* NB: not matching intentionally */
+ :root:nth-last-child(2) #i {
+ color: red;
+ }
+</style>
+<p id="a">Should be green
+<p id="b">Should be green
+<p id="c">Should be green
+<p id="d">Should be green
+<p id="e">Should be green
+<p id="f">Should be green
+<p id="g">Should be green
+<p id="h">Should be green
+<p id="i">Should be green
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-01-ref.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01-ref.html
new file mode 100644
index 000000000..664d6dfa7
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>dir() selector reference</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style>
+ div { text-align: left; }
+ .blue { color: blue; direction: ltr; }
+ .lime { color: lime; direction: rtl; }
+ </style>
+ </head>
+ <body>
+ <div class="blue">This element has default direction.</div>
+ <div class="blue">This element is ltr.</div>
+ <div class="lime">This element is rtl.</div>
+ <div class="blue">
+ <div>This element should inherit ltr.</div>
+ <div class="blue">This element is ltr.</div>
+ <div class="lime">This element is rtl.</div>
+ <div class="blue">Every word in this element should inherit ltr.</div>
+ </div>
+ <div class="lime">
+ <div>This element should inherit rtl.</div>
+ <div class="blue">This element is ltr.</div>
+ <div class="lime">This element is rtl.</div>
+ <div class="lime">Every word in this element should inherit rtl.</div>
+ </div>
+ <div class="blue">This element has an invalid dir attribute and
+ should have default direction.</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-01a.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01a.html
new file mode 100644
index 000000000..d7a423979
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01a.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test: :dir() selector</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+ <meta name="assert" content="Test checks :dir() basic functions with valid and invalid values.">
+ <link rel="match" href="dir-style-01-ref.html">
+ <style>
+ div { text-align: left; }
+ :dir(ltr) { color: blue }
+ :dir(rtl) { color: lime }
+ :dir(foopy) { color: red }
+ </style>
+ </head>
+ <body>
+ <div>This element has default direction.</div>
+ <div dir="ltr">This element is ltr.</div>
+ <div dir="rtl">This element is rtl.</div>
+ <div dir="ltr">
+ <div>This element should inherit ltr.</div>
+ <div dir="ltr">This element is ltr.</div>
+ <div dir="rtl">This element is rtl.</div>
+ <div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>ltr</span></span></span></span></span></span></span></span>.</div>
+ </div>
+ <div dir="rtl">
+ <div>This element should inherit rtl.</div>
+ <div dir="ltr">This element is ltr.</div>
+ <div dir="rtl">This element is rtl.</div>
+ <div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>rtl</span></span></span></span></span></span></span></span>.</div>
+ </div>
+ <div dir="foopy">This element has an invalid dir attribute and
+ should have default direction.</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-01b.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01b.html
new file mode 100644
index 000000000..3ef501b78
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-01b.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="UTF-8">
+ <title>CSS Test: :dir() selector</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+ <meta name="assert" content="Test checks :dir() basic functions after dynamic directionality change on elements.">
+ <link rel="match" href="dir-style-01-ref.html">
+ <style>
+ div { text-align: left; }
+ :dir(ltr) { color: blue }
+ :dir(rtl) { color: lime }
+ :dir(foopy) { color: red }
+ </style>
+ <script>
+ function switchDir()
+ {
+ divs = document.getElementsByTagName("div");
+ divs[0].offsetWidth; // ensure it's a dynamic change
+ for (var i = 0; i < divs.length; ++i) {
+ theDiv = divs[i];
+ if (theDiv.dir == "ltr") {
+ theDiv.dir = "rtl";
+ } else if (theDiv.dir == "rtl") {
+ theDiv.dir = "ltr";
+ }
+ }
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ </head>
+ <body onload="switchDir()">
+ <div>This element has default direction.</div>
+ <div dir="rtl">This element is ltr.</div>
+ <div dir="ltr">This element is rtl.</div>
+ <div dir="rtl">
+ <div>This element should inherit ltr.</div>
+ <div dir="rtl">This element is ltr.</div>
+ <div dir="ltr">This element is rtl.</div>
+ <div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>ltr</span></span></span></span></span></span></span></span>.</div>
+ </div>
+ <div dir="ltr">
+ <div>This element should inherit rtl.</div>
+ <div dir="rtl">This element is ltr.</div>
+ <div dir="ltr">This element is rtl.</div>
+ <div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>rtl</span></span></span></span></span></span></span></span>.</div>
+ </div>
+ <div dir="foopy">This element has an invalid dir attribute and
+ should have default direction.</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-02-ref.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02-ref.html
new file mode 100644
index 000000000..64fb09046
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>dir() selector reference</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style>
+ div { text-align: left; }
+ .blue { color: blue; direction: ltr; }
+ .lime { color: lime; direction: rtl; }
+ </style>
+ </head>
+ <body>
+ <div class="lime">This element has default direction.</div>
+ <div class="blue">This element is ltr.</div>
+ <div class="lime">This element is rtl.</div>
+ <div class="blue">
+ <div>This element should inherit ltr.</div>
+ <div class="blue">This element is ltr.</div>
+ <div class="lime">This element is rtl.</div>
+ </div>
+ <div class="lime">
+ <div>This element should inherit rtl.</div>
+ <div class="blue">This element is ltr.</div>
+ <div class="lime">This element is rtl.</div>
+ </div>
+ <div class="lime">This element has an invalid dir attribute and
+ should have default direction.</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-02a.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02a.html
new file mode 100644
index 000000000..69b254dc8
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02a.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html dir="rtl">
+ <head>
+ <meta charset="UTF-8">
+ <title>CSS Test: :dir() selector</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+ <meta name="assert" content="Test checks :dir() basic functions when default document directionality is rtl.">
+ <link rel="match" href="dir-style-02-ref.html">
+ <style>
+ div { text-align: left; }
+ :dir(ltr) { color: blue }
+ :dir(rtl) { color: lime }
+ :dir(foopy) { color: red }
+ </style>
+ </head>
+ <body>
+ <div>This element has default direction.</div>
+ <div dir="ltr">This element is ltr.</div>
+ <div dir="rtl">This element is rtl.</div>
+ <div dir="ltr">
+ <div>This element should inherit ltr.</div>
+ <div dir="ltr">This element is ltr.</div>
+ <div dir="rtl">This element is rtl.</div>
+ </div>
+ <div dir="rtl">
+ <div>This element should inherit rtl.</div>
+ <div dir="ltr">This element is ltr.</div>
+ <div dir="rtl">This element is rtl.</div>
+ </div>
+ <div dir="foopy">This element has an invalid dir attribute and
+ should have default direction.</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-02b.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02b.html
new file mode 100644
index 000000000..802ca41f1
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-02b.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="UTF-8">
+ <title>CSS Test: :dir() selector</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+ <meta name="assert" content="Test checks :dir() basic functions when document directionality is dynamically changed from ltr to rtl.">
+ <link rel="match" href="dir-style-02-ref.html">
+ <style>
+ div { text-align: left; }
+ :dir(ltr) { color: blue }
+ :dir(rtl) { color: lime }
+ :dir(foopy) { color: red }
+ </style>
+ <script>
+ function switchDir()
+ {
+ // ensure it's a dynamic change
+ document.documentElement.getBoundingClientRect();
+
+ document.dir = "rtl";
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ </head>
+ <body onload="switchDir()">
+ <div>This element has default direction.</div>
+ <div dir="ltr">This element is ltr.</div>
+ <div dir="rtl">This element is rtl.</div>
+ <div dir="ltr">
+ <div>This element should inherit ltr.</div>
+ <div dir="ltr">This element is ltr.</div>
+ <div dir="rtl">This element is rtl.</div>
+ </div>
+ <div dir="rtl">
+ <div>This element should inherit rtl.</div>
+ <div dir="ltr">This element is ltr.</div>
+ <div dir="rtl">This element is rtl.</div>
+ </div>
+ <div dir="foopy">This element has an invalid dir attribute and
+ should have default direction.</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-03-ref.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03-ref.html
new file mode 100644
index 000000000..8c2a60745
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>dir() selector reference</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style>
+ div { text-align: left; }
+ .ltr { color: blue; direction: ltr }
+ .rtl { color: lime; direction: rtl }
+ </style>
+ </head>
+ <body>
+ <div class="rtl">This element is rtl.</div>
+ <div class="ltr">This element has default direction.</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-03a.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03a.html
new file mode 100644
index 000000000..c57b93eaa
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03a.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>CSS Test: :dir() selector</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+ <meta name="assert" content="Test checks if :dir() can work with other selectors correctly.">
+ <link rel="match" href="dir-style-03-ref.html">
+ <style>
+ div { color: lime; text-align: left; }
+ :not(:dir(ltr)) + div { color: blue; }
+ </style>
+ </head>
+ <body>
+ <div dir="rtl">This element is rtl.</div>
+ <div>This element has default direction.</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-03b.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03b.html
new file mode 100644
index 000000000..bb93b2fd6
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-03b.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="UTF-8">
+ <title>CSS Test: :dir() selector</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+ <meta name="assert" content="Test checks if :dir() can work with other selectors correctly after a dynamic directionality change on specified divs.">
+ <link rel="match" href="dir-style-03-ref.html">
+ <style>
+ div { color: lime; text-align: left; }
+ :not(:dir(ltr)) + div { color: blue }
+ </style>
+ <script>
+ function switchDir()
+ {
+ theDiv = document.getElementById("div");
+ theDiv.offsetWidth; // ensure it's a dynamic change
+ if (theDiv.dir == "ltr") {
+ theDiv.dir = "rtl";
+ } else if (theDiv.dir == "rtl") {
+ theDiv.dir = "ltr";
+ }
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ </head>
+ <body onload="switchDir()">
+ <div id="div" dir="ltr">This element is rtl.</div>
+ <div>This element has default direction.</div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-04-ref.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-04-ref.html
new file mode 100644
index 000000000..13d394abf
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-04-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="UTF-8">
+ <title>dir() selector reference</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style>
+ div { text-align: left; }
+ .ltr { direction: ltr; color: blue; }
+ .rtl { direction: rtl; color: lime; }
+ </style>
+ </head>
+ <body>
+ <div class="ltr">This element is ltr. <span>This span should
+ inherit dir from the parent. <span>This span should inherit dir
+ from the grandparent.</span></span>
+ </div>
+ <div class="rtl">This element is rtl. <span>This span should
+ inherit dir from the parent. <span>This span should inherit dir
+ from the grandparent.</span></span>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/dir-style-04.html b/layout/reftests/w3c-css/submitted/selectors4/dir-style-04.html
new file mode 100644
index 000000000..d0a458c84
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/dir-style-04.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <head>
+ <meta charset="UTF-8">
+ <title>CSS Test: :dir() selector</title>
+ <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
+ <meta name="assert" content="Test checks :dir() basic functions on runtime added elements.">
+ <link rel="match" href="dir-style-04-ref.html">
+ <style>
+ :dir(ltr) { color: blue }
+ :dir(rtl) { color: lime }
+ div { text-align: left; }
+ </style>
+ <script>
+ function appendChildren(e)
+ {
+ // ensure it's a dynamic change
+ document.documentElement.getBoundingClientRect();
+
+ var x = document.createElement("span");
+ x.innerHTML = "This span should inherit dir from the parent. ";
+
+ var y = document.createElement("span");
+ y.innerHTML = "This span should inherit dir from the grandparent.";
+
+ var div = document.getElementById(e);
+
+ x.appendChild(y);
+ div.appendChild(x);
+
+ document.documentElement.removeAttribute("class");
+ }
+ </script>
+ </head>
+ <body onload="appendChildren('d1');appendChildren('d2');">
+ <div id="d1" dir="ltr">This element is ltr. </div>
+ <div id="d2" dir="rtl">This element is rtl. </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-1-ref.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-1-ref.html
new file mode 100644
index 000000000..f5e4edf0f
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-1-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test: :focus-within selector</title>
+ <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div {
+ border: solid 15px blue;
+ outline: none;
+ border-color: green;
+ }
+ #child1 {
+ border-color: blue;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if, when the upper element is unfocused and the lower element is focused, the upper element is blue and the lower one is green, and they are surrounded by a thick green border.</p>
+ <div id="parent">
+ <div id="child1"></div>
+ <div id="child2"></div>
+ </div>
+ <body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-1.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-1.html
new file mode 100644
index 000000000..5a749c3ad
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test: :focus-within selector</title>
+ <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+ <meta name="assert" content="Test checks :focus-within works after focus change">
+ <link rel="match" href="focus-within-1-ref.html">
+ <meta name="flags" content="interact">
+ <style type="text/css">
+ div {
+ border: solid 15px blue;
+ outline: none;
+ }
+ div:focus-within {
+ border-color: green;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if, when the upper element is unfocused and the lower element is focused, the upper element is blue and the lower one is green, and they are surrounded by a thick green border.</p>
+ <div id="parent">
+ <div id="child1" tabindex="1"></div>
+ <div id="child2" tabindex="2"></div>
+ </div>
+ <script>
+ var child1 = document.getElementById('child1');
+ child1.focus();
+ document.body.offsetWidth;
+
+ var child2 = document.getElementById('child2');
+ child2.focus();
+ document.body.offsetWidth;
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-2-ref.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-2-ref.html
new file mode 100644
index 000000000..5aeac2441
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-2-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test: :focus-within selector</title>
+ <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <style type="text/css">
+ div {
+ border: solid 15px green;
+ outline: none;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if, when the element is focused and then removed, the outer element should change to green.</p>
+ <div id="parent"></div>
+ <body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-2.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-2.html
new file mode 100644
index 000000000..291bc032a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test: :focus-within selector</title>
+ <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+ <meta name="assert" content="Test checks :focus-within should not apply after element removed.">
+ <link rel="match" href="focus-within-2-ref.html">
+ <meta name="flags" content="interact">
+ <style type="text/css">
+ div {
+ border: solid 15px green;
+ outline: none;
+ }
+ div:focus-within {
+ border-color: red;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if, when the element is focused and then removed, the outer element should change to green.</p>
+ <div id="parent">
+ <div id="child" tabindex="1"></div>
+ </div>
+ <script>
+ var child = document.getElementById('child');
+ child.focus();
+ document.body.offsetWidth;
+ var parent = document.getElementById("parent");
+ parent.removeChild(child);
+ document.body.offsetWidth;
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-3-ref.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-3-ref.html
new file mode 100644
index 000000000..cb0badd2a
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-3-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test: :focus-within selector</title>
+ <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ </head>
+ <body>
+ <p>Test passes if, when the element inside the iframe is focused, there is no red border surrounded.</p>
+ <div>
+ <iframe src="focus-within-1.html" width="300px" height="300px" frameborder="0" tabindex="1"><p>Your browser does not support iframes.</p></iframe>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/focus-within-3.html b/layout/reftests/w3c-css/submitted/selectors4/focus-within-3.html
new file mode 100644
index 000000000..1a3a806ba
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/focus-within-3.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CSS Test: :focus-within selector</title>
+ <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com">
+ <link rel="author" title="Mozilla" href="https://www.mozilla.org">
+ <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
+ <meta name="assert" content="Test checks :focus-within should not work for iframe">
+ <link rel="match" href="focus-within-3-ref.html">
+ <meta name="flags" content="interact">
+ <style type="text/css">
+ div:focus-within {
+ border: solid 15px red;
+ }
+ iframe:focus-within {
+ border: solid 15px red;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if, when the element inside the iframe is focused, there is no red border surrounded.</p>
+ <div>
+ <iframe src="focus-within-1.html" width="300px" height="300px" frameborder="0" tabindex="1"><p>Your browser does not support iframes.</p></iframe>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/w3c-css/submitted/selectors4/reftest-stylo.list b/layout/reftests/w3c-css/submitted/selectors4/reftest-stylo.list
new file mode 100644
index 000000000..b86b5ca02
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/reftest-stylo.list
@@ -0,0 +1,8 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== dir-style-01a.html dir-style-01a.html
+== dir-style-01b.html dir-style-01b.html
+== dir-style-02a.html dir-style-02a.html
+== dir-style-02b.html dir-style-02b.html
+== dir-style-03a.html dir-style-03a.html
+== dir-style-03b.html dir-style-03b.html
+== dir-style-04.html dir-style-04.html
diff --git a/layout/reftests/w3c-css/submitted/selectors4/reftest.list b/layout/reftests/w3c-css/submitted/selectors4/reftest.list
new file mode 100644
index 000000000..5e1bccf5c
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/selectors4/reftest.list
@@ -0,0 +1,11 @@
+needs-focus == focus-within-1.html focus-within-1-ref.html
+needs-focus == focus-within-2.html focus-within-2-ref.html
+needs-focus == focus-within-3.html focus-within-3-ref.html
+== dir-style-01a.html dir-style-01-ref.html
+== dir-style-01b.html dir-style-01-ref.html
+== dir-style-02a.html dir-style-02-ref.html
+== dir-style-02b.html dir-style-02-ref.html
+== dir-style-03a.html dir-style-03-ref.html
+== dir-style-03b.html dir-style-03-ref.html
+== dir-style-04.html dir-style-04-ref.html
+== child-index-no-parent-01.html child-index-no-parent-01-ref.html