summaryrefslogtreecommitdiffstats
path: root/layout/reftests/generated-content
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/generated-content')
-rw-r--r--layout/reftests/generated-content/attr-whitespace-ref.html10
-rw-r--r--layout/reftests/generated-content/attr-whitespace.xhtml60
-rw-r--r--layout/reftests/generated-content/before-style-sharing-ref.html3
-rw-r--r--layout/reftests/generated-content/before-style-sharing.html8
-rw-r--r--layout/reftests/generated-content/display-types-01-ref.html45
-rw-r--r--layout/reftests/generated-content/display-types-01.html53
-rw-r--r--layout/reftests/generated-content/dynamic-attr-01-ref.html6
-rw-r--r--layout/reftests/generated-content/dynamic-attr-01.html30
-rw-r--r--layout/reftests/generated-content/dynamic-button-01-ref.html4
-rw-r--r--layout/reftests/generated-content/dynamic-button-01a.html15
-rw-r--r--layout/reftests/generated-content/dynamic-button-01b.html10
-rw-r--r--layout/reftests/generated-content/dynamic-content-ref.html7
-rw-r--r--layout/reftests/generated-content/dynamic-content.html14
-rw-r--r--layout/reftests/generated-content/dynamic-fieldset-01-ref.html4
-rw-r--r--layout/reftests/generated-content/dynamic-fieldset-01a.html15
-rw-r--r--layout/reftests/generated-content/dynamic-fieldset-01b.html10
-rw-r--r--layout/reftests/generated-content/dynamic-generated-content-inherit-001.html25
-rw-r--r--layout/reftests/generated-content/dynamic-restyle-01-ref.html7
-rw-r--r--layout/reftests/generated-content/dynamic-restyle-01.html29
-rw-r--r--layout/reftests/generated-content/dynamic-table-cell-01-ref.html8
-rw-r--r--layout/reftests/generated-content/dynamic-table-cell-01a.html20
-rw-r--r--layout/reftests/generated-content/dynamic-table-cell-01b.html13
-rw-r--r--layout/reftests/generated-content/dynamic-table-cell-indent-ref.html4
-rw-r--r--layout/reftests/generated-content/dynamic-table-cell-indent.html24
-rw-r--r--layout/reftests/generated-content/floated-01-ref.html23
-rw-r--r--layout/reftests/generated-content/floated-01.html44
-rw-r--r--layout/reftests/generated-content/generated-content-inherit-001-ref.html7
-rw-r--r--layout/reftests/generated-content/generated-content-inherit-001.html20
-rw-r--r--layout/reftests/generated-content/images-01-ref.html11
-rw-r--r--layout/reftests/generated-content/images-01.html18
-rw-r--r--layout/reftests/generated-content/positioned-01-ref.html21
-rw-r--r--layout/reftests/generated-content/positioned-01.html48
-rw-r--r--layout/reftests/generated-content/quotes-001-ref.xml13
-rw-r--r--layout/reftests/generated-content/quotes-001.xml93
-rw-r--r--layout/reftests/generated-content/reftest.list24
-rw-r--r--layout/reftests/generated-content/square-outline-32x32.pngbin0 -> 96 bytes
-rw-r--r--layout/reftests/generated-content/table-ignoring-whitespace-01-ref.html27
-rw-r--r--layout/reftests/generated-content/table-ignoring-whitespace-01.html49
-rw-r--r--layout/reftests/generated-content/table-parts-01-ref.html75
-rw-r--r--layout/reftests/generated-content/table-parts-01.html74
-rw-r--r--layout/reftests/generated-content/transitive-style-invalidation-ref.html19
-rw-r--r--layout/reftests/generated-content/transitive-style-invalidation.html22
42 files changed, 1012 insertions, 0 deletions
diff --git a/layout/reftests/generated-content/attr-whitespace-ref.html b/layout/reftests/generated-content/attr-whitespace-ref.html
new file mode 100644
index 0000000000..54a74fe4d8
--- /dev/null
+++ b/layout/reftests/generated-content/attr-whitespace-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div>HelloWorld</div>
+<div>HelloWorld</div>
+<div>HelloWorld</div>
+<div>Hello</div>
+<div>Hello</div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/attr-whitespace.xhtml b/layout/reftests/generated-content/attr-whitespace.xhtml
new file mode 100644
index 0000000000..e9b6554849
--- /dev/null
+++ b/layout/reftests/generated-content/attr-whitespace.xhtml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Whitespace in attributes</title>
+ <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="https://drafts.csswg.org/css-values-3/#attr-notation"/>
+<style>
+@namespace ns url(http://www.example.com/ns);
+/* Spaces within attr() are fine*/
+#a::after {
+
+ content: attr(
+ data-text
+
+
+ );
+}
+#b::after {
+
+ content: attr(ns|data-text);
+}
+#c::after {
+
+ content: attr(
+ ns|data-text
+
+
+ );
+}
+
+/* No whitespace around the | */
+#d::after {
+
+ content: attr(
+ ns |data-text
+
+
+ );
+}
+#e::after {
+
+ content: attr(
+ ns| data-text
+
+
+ );
+}
+</style>
+</head>
+<body xmlns:ns="http://www.example.com/ns">
+<div id="a" data-text="World">Hello</div>
+<div id="b" ns:data-text="World">Hello</div>
+<div id="b" ns:data-text="World">Hello</div>
+<div id="d" ns:data-text="World">Hello</div>
+<div id="e" ns:data-text="World">Hello</div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/before-style-sharing-ref.html b/layout/reftests/generated-content/before-style-sharing-ref.html
new file mode 100644
index 0000000000..944bcfd790
--- /dev/null
+++ b/layout/reftests/generated-content/before-style-sharing-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<div></div>
+<div>This text should appear</div>
diff --git a/layout/reftests/generated-content/before-style-sharing.html b/layout/reftests/generated-content/before-style-sharing.html
new file mode 100644
index 0000000000..9f1be5b32e
--- /dev/null
+++ b/layout/reftests/generated-content/before-style-sharing.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<style>
+ [foo]:before {
+ content: "This text should appear";
+ }
+</style>
+<div></div>
+<div foo></div>
diff --git a/layout/reftests/generated-content/display-types-01-ref.html b/layout/reftests/generated-content/display-types-01-ref.html
new file mode 100644
index 0000000000..76a02e5789
--- /dev/null
+++ b/layout/reftests/generated-content/display-types-01-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div { border:1px solid green; margin:5px; }
+</style>
+</head>
+<body>
+<table width="100%"><tr><td valign="top">
+ <div><span style="display:block">1<img src="square-outline-32x32.png">"Before block</span
+>Inner<span style="display:block">2<img src="square-outline-32x32.png">After block"</span
+></div>
+ <div><span style="display:inline">1<img src="square-outline-32x32.png">"Before inline</span
+>Inner<span style="display:inline">2<img src="square-outline-32x32.png">After inline"</span
+></div>
+ <div><span style="display:inline-block">1<img src="square-outline-32x32.png">"Before inline-block</span
+>Inner<span style="display:inline-block">2<img src="square-outline-32x32.png">After inline-block"</span
+></div>
+ <div><span style="display:table">1<img src="square-outline-32x32.png">"Before table</span
+>Inner<span style="display:table">2<img src="square-outline-32x32.png">After table"</span
+></div>
+ <div><span style="display:inline-table">1<img src="square-outline-32x32.png">"Before inline-table</span
+>Inner<span style="display:inline-table">2<img src="square-outline-32x32.png">After inline-table"</span
+></div>
+ <div><span style="display:table-row-group">1<img src="square-outline-32x32.png">"Before table-row-group</span
+>Inner<span style="display:table-row-group">2<img src="square-outline-32x32.png">After table-row-group"</span
+></div>
+</td><td valign="top">
+ <div><span style="display:table-row">1<img src="square-outline-32x32.png">"Before table-row</span
+>Inner<span style="display:table-row">2<img src="square-outline-32x32.png">After table-row"</span
+></div>
+ <div><span style="display:table-cell">1<img src="square-outline-32x32.png">"Before table-cell</span
+>Inner<span style="display:table-cell">2<img src="square-outline-32x32.png">After table-cell"</span
+></div>
+ <div><span style="display:table-caption">1<img src="square-outline-32x32.png">"Before table-caption</span
+>Inner<span style="display:table-caption">2<img src="square-outline-32x32.png">After table-caption"</span
+></div>
+ <div><span style="display:-moz-box">1<img src="square-outline-32x32.png">"Before flexbox</span
+>Inner<span style="display:-moz-box">2<img src="square-outline-32x32.png">After flexbox"</span
+></div>
+ <div><span style="display:-moz-inline-box">1<img src="square-outline-32x32.png">"Before inline-flexbox</span
+>Inner<span style="display:-moz-inline-box">2<img src="square-outline-32x32.png">After inline-flexbox"</span
+></div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/display-types-01.html b/layout/reftests/generated-content/display-types-01.html
new file mode 100644
index 0000000000..db2c9525e0
--- /dev/null
+++ b/layout/reftests/generated-content/display-types-01.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: generated content</title>
+ <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"/>
+ <meta name="flags" content="" />
+<style>
+div { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"}
+
+div::before {
+ content:counter(ctr) url(square-outline-32x32.png) open-quote "Before " attr(class);
+ counter-increment:ctr;
+}
+div::after {
+ content:counter(ctr) url(square-outline-32x32.png) "After " attr(class) close-quote;
+ counter-increment:ctr;
+}
+
+.block::before, .block::after { display:block; }
+.inline::before, .inline::after { display:inline; }
+.inline-block::before, .inline-block::after { display:inline-block; }
+.table::before, .table::after { display:table; }
+.inline-table::before, .inline-table::after { display:inline-table; }
+.table-row-group::before, .table-row-group::after { display:table-row-group; }
+.table-row::before, .table-row::after { display:table-row; }
+.table-cell::before, .table-cell::after { display:table-cell; }
+.table-caption::before, .table-caption::after { display:table-caption; }
+.flexbox::before, .flexbox::after { display:-moz-box; }
+.inline-flexbox::before, .inline-flexbox::after { display:-moz-inline-box; }
+
+div { border:1px solid green; margin:5px; }
+</style>
+</head>
+
+<body>
+<table width="100%"><tr><td valign="top">
+ <div class="block">Inner</div>
+ <div class="inline">Inner</div>
+ <div class="inline-block">Inner</div>
+ <div class="table">Inner</div>
+ <div class="inline-table">Inner</div>
+ <div class="table-row-group">Inner</div>
+</td><td valign="top">
+ <div class="table-row">Inner</div>
+ <div class="table-cell">Inner</div>
+ <div class="table-caption">Inner</div>
+ <div class="flexbox">Inner</div>
+ <div class="inline-flexbox">Inner</div>
+</td></tr></table>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/dynamic-attr-01-ref.html b/layout/reftests/generated-content/dynamic-attr-01-ref.html
new file mode 100644
index 0000000000..f460142fec
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-attr-01-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body style="font-family:sans-serif;">
+before after!
+</body>
+</html>
diff --git a/layout/reftests/generated-content/dynamic-attr-01.html b/layout/reftests/generated-content/dynamic-attr-01.html
new file mode 100644
index 0000000000..87240768d3
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-attr-01.html
@@ -0,0 +1,30 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+ <title>CSS 2.1 Test Suite: generated content</title>
+ <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#content"/>
+ <meta name="flags" content="dom" />
+<style>
+body {
+ font-family:sans-serif;
+}
+body::before {
+ content:attr(my-attr);
+}
+body::after {
+ content:attr(my-attr-2);
+}
+</style>
+<script>
+function fixupDOM() {
+ document.body.setAttribute("my-attr", "before");
+ document.body.setAttribute("my-attr-2", "after!");
+ document.documentElement.className = "";
+}
+</script>
+</head>
+<body my-attr-2="xyz" onload="fixupDOM()">
+</body>
+</html>
diff --git a/layout/reftests/generated-content/dynamic-button-01-ref.html b/layout/reftests/generated-content/dynamic-button-01-ref.html
new file mode 100644
index 0000000000..5afde3aa15
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-button-01-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<button class="test">
+ Button contents
+ <span>::after content</span></button>
diff --git a/layout/reftests/generated-content/dynamic-button-01a.html b/layout/reftests/generated-content/dynamic-button-01a.html
new file mode 100644
index 0000000000..1978d79741
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-button-01a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+.test::after {
+ content:"::after content";
+}
+</style>
+
+<button>
+ Button contents
+</button>
+<script>
+ var td = document.querySelector("button");
+ td.offsetWidth;
+ td.className = "test";
+</script>
diff --git a/layout/reftests/generated-content/dynamic-button-01b.html b/layout/reftests/generated-content/dynamic-button-01b.html
new file mode 100644
index 0000000000..fff73c523f
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-button-01b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+.test::after {
+ content:"::after content";
+}
+</style>
+
+<button class="test">
+ Button contents
+</button>
diff --git a/layout/reftests/generated-content/dynamic-content-ref.html b/layout/reftests/generated-content/dynamic-content-ref.html
new file mode 100644
index 0000000000..0f8f612628
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-content-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<style>
+div::before {
+ content: "Woof";
+}
+</style>
+<div></div>
diff --git a/layout/reftests/generated-content/dynamic-content.html b/layout/reftests/generated-content/dynamic-content.html
new file mode 100644
index 0000000000..5eebe244a7
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-content.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<style>
+div::before {
+ content: none;
+}
+.foo::before {
+ content: "Woof";
+}
+</style>
+<div></div>
+<script>
+ document.body.offsetTop;
+ document.querySelector('div').classList.add('foo');
+</script>
diff --git a/layout/reftests/generated-content/dynamic-fieldset-01-ref.html b/layout/reftests/generated-content/dynamic-fieldset-01-ref.html
new file mode 100644
index 0000000000..7cfdc0278a
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-fieldset-01-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<fieldset class="test">
+ Fieldset contents
+ <span>::after content</span></fieldset>
diff --git a/layout/reftests/generated-content/dynamic-fieldset-01a.html b/layout/reftests/generated-content/dynamic-fieldset-01a.html
new file mode 100644
index 0000000000..7cce024093
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-fieldset-01a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+.test::after {
+ content:"::after content";
+}
+</style>
+
+<fieldset>
+ Fieldset contents
+</fieldset>
+<script>
+ var td = document.querySelector("fieldset");
+ td.offsetWidth;
+ td.className = "test";
+</script>
diff --git a/layout/reftests/generated-content/dynamic-fieldset-01b.html b/layout/reftests/generated-content/dynamic-fieldset-01b.html
new file mode 100644
index 0000000000..d9d0fa96b4
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-fieldset-01b.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+.test::after {
+ content:"::after content";
+}
+</style>
+
+<fieldset class="test">
+ Fieldset contents
+</fieldset>
diff --git a/layout/reftests/generated-content/dynamic-generated-content-inherit-001.html b/layout/reftests/generated-content/dynamic-generated-content-inherit-001.html
new file mode 100644
index 0000000000..0bec9c9eaf
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-generated-content-inherit-001.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: Dynamic ::before and ::after generation by a style attribute</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="match" href="generated-content-inherit-001-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#generated-content">
+<meta name="flags" content="">
+<meta name="assert" content="Tests that changes to the style attribute of an element properly generate generated content">
+<!--
+ TODO(emilio): upstream this to WPT once
+ https://github.com/w3c/csswg-drafts/issues/1757 is resolved
+-->
+<style>
+.first::before, .second::after {
+ content: inherit;
+}
+</style>
+<p>Test passes if you see two PASS lines below:</p>
+<div class="first">SS</div>
+<div class="second">PA</div>
+<script>
+document.body.offsetTop;
+document.querySelector(".first").style.content = "\"PA\"";
+document.querySelector(".second").style.content = "\"SS\"";
+</script>
diff --git a/layout/reftests/generated-content/dynamic-restyle-01-ref.html b/layout/reftests/generated-content/dynamic-restyle-01-ref.html
new file mode 100644
index 0000000000..39973882b2
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-restyle-01-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE HTML>
+<html>
+<body style="border:2px solid red;">
+<span style="border:2px solid red;">Before</span>
+<div>After</div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/dynamic-restyle-01.html b/layout/reftests/generated-content/dynamic-restyle-01.html
new file mode 100644
index 0000000000..aa1b846593
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-restyle-01.html
@@ -0,0 +1,29 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<head>
+ <title>CSS 2.1 Test Suite: generated content</title>
+ <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#content"/>
+ <meta name="flags" content="dom" />
+<style>
+body::before {
+ content:"Before";
+ border:inherit;
+}
+.cl::after {
+ display:block;
+ content:"After";
+}
+</style>
+<script>
+function fixupDOM() {
+ document.body.setAttribute("style", "border:2px solid red;");
+ document.body.className = "cl";
+ document.documentElement.className = "";
+}
+</script>
+</head>
+<body onload="fixupDOM()">
+</body>
+</html>
diff --git a/layout/reftests/generated-content/dynamic-table-cell-01-ref.html b/layout/reftests/generated-content/dynamic-table-cell-01-ref.html
new file mode 100644
index 0000000000..02db86fcaa
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-table-cell-01-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<table>
+ <tr>
+ <td class="test">
+ Cell contents
+ <span>::after content</span></td>
+ </tr>
+</table>
diff --git a/layout/reftests/generated-content/dynamic-table-cell-01a.html b/layout/reftests/generated-content/dynamic-table-cell-01a.html
new file mode 100644
index 0000000000..f0bd6b119d
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-table-cell-01a.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<style>
+.test::after {
+ content:"::after content";
+}
+</style>
+
+<table>
+ <tr>
+ <td>
+ Cell contents
+ </td>
+ </tr>
+</table>
+
+<script>
+ var td = document.querySelector("td");
+ td.offsetWidth;
+ td.className = "test";
+</script>
diff --git a/layout/reftests/generated-content/dynamic-table-cell-01b.html b/layout/reftests/generated-content/dynamic-table-cell-01b.html
new file mode 100644
index 0000000000..43e68eb0ba
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-table-cell-01b.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+.test::after {
+ content:"::after content";
+}
+</style>
+<table>
+ <tr>
+ <td class="test">
+ Cell contents
+ </td>
+ </tr>
+</table>
diff --git a/layout/reftests/generated-content/dynamic-table-cell-indent-ref.html b/layout/reftests/generated-content/dynamic-table-cell-indent-ref.html
new file mode 100644
index 0000000000..b831182613
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-table-cell-indent-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<table cellpadding="0">
+ <tr><td style="text-indent: 50px">Some text</td></tr>
+</table>
diff --git a/layout/reftests/generated-content/dynamic-table-cell-indent.html b/layout/reftests/generated-content/dynamic-table-cell-indent.html
new file mode 100644
index 0000000000..ea9a25bca8
--- /dev/null
+++ b/layout/reftests/generated-content/dynamic-table-cell-indent.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+ <style>
+ tr::before {
+ content: "Some text";
+ display: table-cell;
+ }
+ tr.i::before {
+ text-indent: 50px;
+ }
+ </style>
+ <table cellpadding="0">
+ <tr></tr>
+ </table>
+ <script>
+ onload = function() {
+ var tr = document.querySelector("tr");
+ // Make sure it's laid out
+ window.w = tr.offsetWidth;
+ document.querySelector("tr").className = "i";
+ document.documentElement.className = "";
+ }
+ </script>
+</html>
diff --git a/layout/reftests/generated-content/floated-01-ref.html b/layout/reftests/generated-content/floated-01-ref.html
new file mode 100644
index 0000000000..de4da62838
--- /dev/null
+++ b/layout/reftests/generated-content/floated-01-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div { border:1px solid green; margin:5px; }
+div { overflow:auto; }
+</style>
+</head>
+<body>
+<div><span style="float:left">1<img src="square-outline-32x32.png">"Before beforeleft afterleft</span
+>Inner<span style="float:left">2<img src="square-outline-32x32.png">After beforeleft afterleft"</span
+></div>
+<div><span style="float:left">1<img src="square-outline-32x32.png">"Before beforeleft afterright</span
+>Inner<span style="float:right">2<img src="square-outline-32x32.png">After beforeleft afterright"</span
+></div>
+<div><span style="float:right">1<img src="square-outline-32x32.png">"Before beforeright afterleft</span
+>Inner<span style="float:left">2<img src="square-outline-32x32.png">After beforeright afterleft"</span
+></div>
+<div><span style="float:right">1<img src="square-outline-32x32.png">"Before beforeright afterright</span
+>Inner<span style="float:right">2<img src="square-outline-32x32.png">After beforeright afterright"</span
+></div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/floated-01.html b/layout/reftests/generated-content/floated-01.html
new file mode 100644
index 0000000000..f3ff0115a4
--- /dev/null
+++ b/layout/reftests/generated-content/floated-01.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: generated content</title>
+ <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"/>
+ <meta name="flags" content="" />
+<style>
+div { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"; }
+
+div::before {
+ content:counter(ctr) url(square-outline-32x32.png) open-quote "Before " attr(class);
+ counter-increment:ctr;
+}
+div::after {
+ content:counter(ctr) url(square-outline-32x32.png) "After " attr(class) close-quote;
+ counter-increment:ctr;
+}
+
+.beforeleft::before {
+ float:left;
+}
+.beforeright::before {
+ float:right;
+}
+.afterleft::after {
+ float:left;
+}
+.afterright::after {
+ float:right;
+}
+
+div { border:1px solid green; margin:5px; }
+div { overflow:auto; }
+</style>
+</head>
+<body>
+<div class="beforeleft afterleft">Inner</div>
+<div class="beforeleft afterright">Inner</div>
+<div class="beforeright afterleft">Inner</div>
+<div class="beforeright afterright">Inner</div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/generated-content-inherit-001-ref.html b/layout/reftests/generated-content/generated-content-inherit-001-ref.html
new file mode 100644
index 0000000000..c15156138e
--- /dev/null
+++ b/layout/reftests/generated-content/generated-content-inherit-001-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test reference</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<p>Test passes if you see two PASS lines below:</p>
+<div>PASS</div>
+<div>PASS</div>
diff --git a/layout/reftests/generated-content/generated-content-inherit-001.html b/layout/reftests/generated-content/generated-content-inherit-001.html
new file mode 100644
index 0000000000..67b9f242df
--- /dev/null
+++ b/layout/reftests/generated-content/generated-content-inherit-001.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: ::before and ::after generated with content: inherit</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="match" href="generated-content-inherit-001-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#generated-content">
+<meta name="flags" content="">
+<meta name="assert" content="Tests that pseudo-elements are properly generated with content: inherit">
+<!--
+ TODO(emilio): upstream this to WPT once
+ https://github.com/w3c/csswg-drafts/issues/1757 is resolved
+-->
+<style>
+.first::before, .second::after {
+ content: inherit;
+}
+</style>
+<p>Test passes if you see two PASS lines below:</p>
+<div class="first" style="content: 'PA'">SS</div>
+<div class="second" style="content: 'SS'">PA</div>
diff --git a/layout/reftests/generated-content/images-01-ref.html b/layout/reftests/generated-content/images-01-ref.html
new file mode 100644
index 0000000000..c201db3514
--- /dev/null
+++ b/layout/reftests/generated-content/images-01-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div { border:1px solid green; margin:5px; }
+</style>
+</head>
+<body>
+<div>Inner</div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/images-01.html b/layout/reftests/generated-content/images-01.html
new file mode 100644
index 0000000000..b15b502ac6
--- /dev/null
+++ b/layout/reftests/generated-content/images-01.html
@@ -0,0 +1,18 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: generated content</title>
+ <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#content"/>
+ <meta name="flags" content="" />
+<style>
+div::before {
+ content:url(missing-image.png);
+}
+div { border:1px solid green; margin:5px; }
+</style>
+</head>
+<div>Inner</div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/positioned-01-ref.html b/layout/reftests/generated-content/positioned-01-ref.html
new file mode 100644
index 0000000000..b4fbb25fbe
--- /dev/null
+++ b/layout/reftests/generated-content/positioned-01-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div { border:1px solid green; margin:5px; height:100px; }
+</style>
+</head>
+<div><span style="position:absolute; left:0">1<img src="square-outline-32x32.png">"Before gen abs</span
+>Inner<span style="position:absolute; right:0">2<img src="square-outline-32x32.png">After gen abs"</span
+></div>
+<div style="position:relative"><span style="position:absolute; left:0">1<img src="square-outline-32x32.png">"Before gen abs</span
+>Inner<span style="position:absolute; right:0">2<img src="square-outline-32x32.png">After gen abs"</span
+></div>
+<div><span style="position:relative; top:-10px;">1<img src="square-outline-32x32.png">"Before gen rel</span
+>Inner<span style="position:relative; top:10px;">2<img src="square-outline-32x32.png">After gen rel"</span
+></div>
+<div>Begin <span style="position:relative; top:-10px;">1<img src="square-outline-32x32.png">"Before gen rel</span
+>Inner<span style="position:relative; top:10px;">2<img src="square-outline-32x32.png">After gen rel"</span
+> End</div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/positioned-01.html b/layout/reftests/generated-content/positioned-01.html
new file mode 100644
index 0000000000..3dbd7f8549
--- /dev/null
+++ b/layout/reftests/generated-content/positioned-01.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: generated content</title>
+ <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"/>
+ <meta name="flags" content="" />
+<style>
+div { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"; }
+
+.gen::before {
+ content:counter(ctr) url(square-outline-32x32.png) open-quote "Before " attr(class);
+ counter-increment:ctr;
+}
+.gen::after {
+ content:counter(ctr) url(square-outline-32x32.png) "After " attr(class) close-quote;
+ counter-increment:ctr;
+}
+
+.abs::before {
+ position:absolute;
+ left:0;
+}
+.abs::after {
+ position:absolute;
+ right:0;
+}
+
+.rel::before {
+ position:relative;
+ top:-10px;
+}
+.rel::after {
+ position:relative;
+ top:10px;
+}
+
+div { border:1px solid green; margin:5px; height:100px; }
+</style>
+</head>
+<div class="gen abs">Inner</div>
+<!-- an element should be the containing block for its positioned content -->
+<div style="position:relative;" class="gen abs">Inner</div>
+<div class="gen rel">Inner</div>
+<div>Begin <span class="gen rel">Inner</span> End</div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/quotes-001-ref.xml b/layout/reftests/generated-content/quotes-001-ref.xml
new file mode 100644
index 0000000000..90ce6ff506
--- /dev/null
+++ b/layout/reftests/generated-content/quotes-001-ref.xml
@@ -0,0 +1,13 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS and Quotes: Counting Right (Slightly Simpler Version)</title>
+ <style type="text/css">
+ <![CDATA[
+ .test { margin-left: 2em; }
+ ]]>
+ </style>
+ </head>
+ <body>
+ <div class="test">Isn't it wonderful to see CSS quotes work!!!</div>
+ </body>
+</html>
diff --git a/layout/reftests/generated-content/quotes-001.xml b/layout/reftests/generated-content/quotes-001.xml
new file mode 100644
index 0000000000..4085c44acb
--- /dev/null
+++ b/layout/reftests/generated-content/quotes-001.xml
@@ -0,0 +1,93 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<!--
+
+Test originally from
+http://www.hixie.ch/tests/adhoc/css/quotes/001.xml ,
+relicensed to MPL/LGPL/GPL tri-license per Hixie's permission on IRC,
+March 5, 2009, and upgraded to MPL 2.
+
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS and Quotes: Counting Right (Slightly Simpler Version)</title>
+ <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#quotes"/>
+ <meta name="flags" content="" />
+ <style type="text/css">
+ <![CDATA[
+ .party1 * { display: inline; }
+ .party1 .a { quotes: "Isn" "'"
+ "t" "FAIL!"
+ "FAIL!" " i"; }
+ .party1 .b { quotes: "" "FAIL!!"
+ " wonderful" "!!!"
+ " to " " work"
+ "see " " [FAIL to]"
+ "C" "quotes"
+ "S" " "; }
+ .party1 .c { quotes: none; }
+ .party1 .d { quotes: "FAIL!" "FAIL!"
+ "FAIL!" "FAIL!"
+ "" ""; }
+ .test { margin-left: 2em; }
+ .test .no-open:before { content: no-open-quote; }
+ .test .open:before { content: open-quote; }
+ .test .triple-open:before { content: open-quote open-quote open-quote; }
+ .test .no-close:after { content: no-close-quote; }
+ .test .triple-no-close:after { content: no-close-quote no-close-quote no-close-quote; }
+ .test .close:after { content: close-quote; }
+ .test .triple-close:after { content: close-quote close-quote close-quote; }
+ .test .no-close-open:before { content: no-close-quote open-quote; }
+
+ ]]>
+ </style>
+ </head>
+ <body>
+
+ <!-- this is the same as the 002.xml version except the <br> and <hr> nodes are <div>s. -->
+
+ <!-- Isn't it wonderful to see CSS quotes work!!!
+ --><div class="test c party1"><!-- c 0
+ --><div class="a open close"><!-- open a 1 isn
+ --></div><!-- close a 0 '
+ --><div class="a"><!-- a 0
+ --><div class="c open"><!-- open c 1
+ --><div class="a open"><!-- open a 2 t
+ --></div><!-- a 2
+ --></div><!-- c 2
+ --><div class="no-open close"><!-- a 3 [FAIL!]
+ --></div><!-- close a 2 i
+ --></div><!-- a 2
+ --><div class="no-close-open no-close a"><!-- a 2 [FAIL!] t
+ --></div><!-- close a 1
+ --><div class="d no-open no-close"><!-- open d 2 [FAIL!]
+ --><div class="open close"><!-- open d 3
+ --><div class="open close"><!-- open d 4
+ --></div><!-- close d 3
+ --></div><!-- close d 2
+ --></div><!-- close d 1 [FAIL!]
+ --><div class="b no-close"><!-- b 1
+ --><div class="triple-no-close"/><!-- close b 0 [FAIL!!]
+ --><div class="triple-open"/><!-- open x 3 b 3 "", "wonderful ", "to "
+ --><div class="triple-open"/><!-- open x 3 b 6 "see ", "C", "S"
+ --><div class="open close"><!-- open b 7 S
+ --><div class="close"><!-- b 7
+ --><div class="no-close"><!-- b 7
+ --><div class="close"><!-- b 7
+ --><div class="no-close"><!-- b 7
+ --><div class="close"><!-- b 7
+ --></div><!-- close b 6 " "
+ --></div><!-- close b 5 [" "]
+ --></div><!-- close b 4 quotes
+ --></div><!-- close b 3 [ FAIL to]
+ --></div><!-- close b 2 work
+ --></div><!-- close b 1 !!!
+ --></div><!-- close b 0 [FAIL!!]
+ --></div><!-- b 0
+ -->
+
+ </body>
+</html>
diff --git a/layout/reftests/generated-content/reftest.list b/layout/reftests/generated-content/reftest.list
new file mode 100644
index 0000000000..e464ab33d3
--- /dev/null
+++ b/layout/reftests/generated-content/reftest.list
@@ -0,0 +1,24 @@
+# Almost all tests in this file have fuzz on OS X 10.10 due to bug 1220052.
+
+== display-types-01.html display-types-01-ref.html
+== dynamic-attr-01.html dynamic-attr-01-ref.html
+== dynamic-button-01a.html dynamic-button-01-ref.html
+== dynamic-button-01b.html dynamic-button-01-ref.html
+== dynamic-fieldset-01a.html dynamic-fieldset-01-ref.html
+== dynamic-fieldset-01b.html dynamic-fieldset-01-ref.html
+== dynamic-restyle-01.html dynamic-restyle-01-ref.html
+== dynamic-table-cell-01a.html dynamic-table-cell-01-ref.html
+== dynamic-table-cell-01b.html dynamic-table-cell-01-ref.html
+== dynamic-table-cell-indent.html dynamic-table-cell-indent-ref.html
+== floated-01.html floated-01-ref.html
+== images-01.html images-01-ref.html
+== positioned-01.html positioned-01-ref.html
+== quotes-001.xml quotes-001-ref.xml
+== table-ignoring-whitespace-01.html table-ignoring-whitespace-01-ref.html
+== table-parts-01.html table-parts-01-ref.html
+== before-style-sharing.html before-style-sharing-ref.html
+== transitive-style-invalidation.html transitive-style-invalidation-ref.html
+== dynamic-content.html dynamic-content-ref.html
+== generated-content-inherit-001.html generated-content-inherit-001-ref.html
+== dynamic-generated-content-inherit-001.html generated-content-inherit-001-ref.html
+== attr-whitespace.xhtml attr-whitespace-ref.html \ No newline at end of file
diff --git a/layout/reftests/generated-content/square-outline-32x32.png b/layout/reftests/generated-content/square-outline-32x32.png
new file mode 100644
index 0000000000..917163f409
--- /dev/null
+++ b/layout/reftests/generated-content/square-outline-32x32.png
Binary files differ
diff --git a/layout/reftests/generated-content/table-ignoring-whitespace-01-ref.html b/layout/reftests/generated-content/table-ignoring-whitespace-01-ref.html
new file mode 100644
index 0000000000..d9d64e31d4
--- /dev/null
+++ b/layout/reftests/generated-content/table-ignoring-whitespace-01-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+div { border:1px solid green; margin:5px; }
+</style>
+</head>
+
+<body>
+<div>
+ <table><tbody><tr><td>Cell0</td><td></td></tr>
+ <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table>
+</div>
+<div>
+ <table><tbody><tr><td></td><td>Cell0</td></tr>
+ <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table>
+</div>
+<div>
+ <table><tbody><tr><td></td><td>Cell0</td></tr>
+ <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table>
+</div>
+<div>
+ <table><tbody><tr><td></td><td>Cell0</td></tr>
+ <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/table-ignoring-whitespace-01.html b/layout/reftests/generated-content/table-ignoring-whitespace-01.html
new file mode 100644
index 0000000000..67700d2959
--- /dev/null
+++ b/layout/reftests/generated-content/table-ignoring-whitespace-01.html
@@ -0,0 +1,49 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: generated content</title>
+ <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#content"/>
+ <meta name="flags" content="" />
+<style>
+.gen0::before {
+ padding:1px;
+}
+.gen1::before {
+ content: " ";
+}
+.gen2::before {
+ content: attr(missing);
+}
+.gen3::before {
+ content: url(missing-image.png);
+}
+
+div { border:1px solid green; margin:5px; }
+</style>
+</head>
+
+<!-- This tests that generated content items that evaluate to empty strings or
+ broken images are *not* treated as whitespace text and ignored by the table.
+ Altogether missing content should be ignored, though. (In fact it won't even be generated.) -->
+
+<body>
+<div>
+ <table><tbody><tr class="gen0"><td>Cell0</td></tr>
+ <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table>
+</div>
+<div>
+ <table><tbody><tr class="gen1"><td>Cell0</td></tr>
+ <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table>
+</div>
+<div>
+ <table><tbody><tr class="gen2"><td>Cell0</td></tr>
+ <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table>
+</div>
+<div>
+ <table><tbody><tr class="gen3"><td>Cell0</td></tr>
+ <tr><td>Cell1</td><td>Cell2</td></tr></tbody></table>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/table-parts-01-ref.html b/layout/reftests/generated-content/table-parts-01-ref.html
new file mode 100644
index 0000000000..d5cf10a2da
--- /dev/null
+++ b/layout/reftests/generated-content/table-parts-01-ref.html
@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<style>
+table { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"; }
+
+table { border:1px solid blue; }
+td.real { border:1px solid cyan; }
+td { border-spacing:0; padding:0; }
+
+.table { display:table; }
+.row { display:table-row; }
+.rowgroup { display:table-row-group; }
+
+div { border:1px solid green; margin:5px; }
+div.cell { border:none; display:table-cell; }
+div.real { display:table-cell; }
+
+.tall { height:100px; }
+
+.yellow { background:yellow; }
+.orange { background:orange; }
+.brown { background:brown; }
+</style>
+</head>
+
+<body>
+<table style="border:none" width="100%"><tr><td style="border:none" valign="top">
+ <div><table><tbody><tr><td>1<img src="square-outline-32x32.png">"Before gen</td
+><td class="real">Inner</td><td>2<img src="square-outline-32x32.png">After gen"</td
+></tr></tbody></table></div>
+ <div><table><tbody><tr><td>1<img src="square-outline-32x32.png">"Before gen</td
+></tr><tr><td class="real">Inner</td></tr><tr><td>2<img src="square-outline-32x32.png">After gen"</td
+></tr></tbody></table></div>
+ <div><table><tbody><tr><td>1<img src="square-outline-32x32.png">"Before gen</td
+></tr><tr><td>2<img src="square-outline-32x32.png">After gen"</td
+></tr><tr><td class="real">Inner</td></tr></tbody></table></div>
+ <div><table><tbody><tr><td class="real">Inner</td></tr></tbody></table></div>
+ <div><table><tbody><tr><td>2<img src="square-outline-32x32.png">After gen headfoot"</td
+></tr><tr><td class="real">Inner</td></tr><tr><td>1<img src="square-outline-32x32.png">"Before gen headfoot</td
+></tr></tbody></table></div>
+ <div><div class="table tall"><div class="cell yellow">1<img src="square-outline-32x32.png">"Before gen table gencell varyheight</div
+><div class="real orange">Inner</div><div class="cell brown">2<img src="square-outline-32x32.png">After gen table gencell varyheight"</div
+></div></div>
+ <div><div><div class="table tall" style="border:none; margin:0;"><div class="cell yellow">1<img src="square-outline-32x32.png">"Before gen gencell varyheight</div
+><div class="real orange">Inner</div><div class="cell brown">2<img src="square-outline-32x32.png">After gen gencell varyheight"</div
+></div></div></div>
+ <div><div><div class="table" style="border:none; margin:0;"><div class="row yellow">1<img src="square-outline-32x32.png">"Before gen genrow varywidth</div
+><div class="row orange">Inner</div><div class="row brown">2<img src="square-outline-32x32.png">After gen genrow varywidth"</div
+></div></div></div>
+</td><td style="border:none" valign="top">
+ <div><div class="row"><div class="cell">1<img src="square-outline-32x32.png">"Before gen row gencell</div
+><div class="real">Inner</div><div class="cell">2<img src="square-outline-32x32.png">After gen row gencell"</div
+></div></div>
+ <div><div class="row"><div class="cell">1<img src="square-outline-32x32.png">"Before gen row genblock</div
+><div class="real">Inner</div><div class="cell">2<img src="square-outline-32x32.png">After gen row genblock"</div
+></div></div>
+ <div><div class="row"><div class="cell">1<img src="square-outline-32x32.png">"Before gen row geninline</div
+><div class="real">Inner</div><div class="cell">2<img src="square-outline-32x32.png">After gen row geninline"</div
+></div></div>
+ <div><div class="rowgroup"><div class="row">1<img src="square-outline-32x32.png">"Before gen rowgroup genrow</div
+><div class="row"><div class="real">Inner</div></div><div class="row">2<img src="square-outline-32x32.png">After gen rowgroup genrow"</div
+></div></div>
+ <div><div class="rowgroup"><div class="row">1<img src="square-outline-32x32.png">"Before gen rowgroup gencell</div
+><div class="row"><div class="real">Inner</div></div><div class="row">2<img src="square-outline-32x32.png">After gen rowgroup gencell"</div
+></div></div>
+ <div><div class="rowgroup"><div class="row">1<img src="square-outline-32x32.png">"Before gen rowgroup genblock</div
+><div class="row"><div class="real">Inner</div></div><div class="row">2<img src="square-outline-32x32.png">After gen rowgroup genblock"</div
+></div></div>
+ <div><div class="rowgroup"><div class="row">1<img src="square-outline-32x32.png">"Before gen rowgroup geninline</div
+><div class="row"><div class="real">Inner</div></div><div class="row">2<img src="square-outline-32x32.png">After gen rowgroup geninline"</div
+></div></div>
+</tr></td></table>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/table-parts-01.html b/layout/reftests/generated-content/table-parts-01.html
new file mode 100644
index 0000000000..3ce9328e0e
--- /dev/null
+++ b/layout/reftests/generated-content/table-parts-01.html
@@ -0,0 +1,74 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>CSS 2.1 Test Suite: generated content</title>
+ <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" />
+ <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
+ <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"/>
+ <meta name="flags" content="" />
+<style>
+table, div.gen { counter-reset:ctr; quotes:"\0022" "\0022" "\0022" "\0022"; }
+
+.gen::before {
+ content:counter(ctr) url(square-outline-32x32.png) open-quote "Before " attr(class);
+ counter-increment:ctr;
+}
+.gen::after {
+ content:counter(ctr) url(square-outline-32x32.png) "After " attr(class) close-quote;
+ counter-increment:ctr;
+}
+
+table { border:1px solid blue; }
+td { border:1px solid cyan; }
+td { border-spacing:0; padding:0; }
+
+tr.gen::before, tr.gen::after { display:table-cell; }
+tbody.gen::before, tbody.gen::after { display:table-row; }
+table.gen::before, table.gen::after { display:table-row-group; }
+table.col::before, table.gen.col::after { display:table-column-group; }
+/* note reordering here! */
+table.headfoot::after { display:table-header-group; }
+table.headfoot::before { display:table-footer-group; }
+
+.cell { display:table-cell; }
+.row { display:table-row; }
+.rowgroup { display:table-row-group; }
+.table { display:table; }
+div.gencell::before, div.gencell::after { display:table-cell; }
+div.genrow::before, div.genrow::after { display:table-row; }
+div.genblock::before, div.genblock::after { display:block; }
+div.geninline::before, div.geninline::after { display:inline; }
+
+div { border:1px solid green; margin:5px; }
+
+.varyheight::before { height:100px; background:yellow; }
+.varyheight > div { height:80px; background:orange; }
+.varyheight::after { height:60px; background:brown; }
+
+.varywidth::before { background:yellow; }
+.varywidth > div { background:orange; }
+.varywidth::after { background:brown; }
+</style>
+</head>
+
+<body>
+<table style="border:none" width="100%"><tr><td style="border:none" valign="top">
+ <div><table><tbody><tr class="gen"><td>Inner</td></tr></tbody></table></div>
+ <div><table><tbody class="gen"><tr><td>Inner</td></tr></tbody></table></div>
+ <div><table class="gen"><tfoot><tr><td>Inner</td></tr></tfoot></table></div>
+ <div><table class="gen col"><tbody><tr><td>Inner</td></tr></tbody></table></div>
+ <div><table class="gen headfoot"><tbody><tr><td>Inner</td></tr></tbody></table></div>
+ <div><div class="gen table gencell varyheight"><div class="cell">Inner</div></div></div>
+ <div><div class="gen gencell varyheight"><div class="cell">Inner</div></div></div>
+ <div><div class="gen genrow varywidth"><div class="row">Inner</div></div></div>
+</td><td style="border:none" valign="top">
+ <div><div class="gen row gencell"><div class="cell">Inner</div></div></div>
+ <div><div class="gen row genblock"><div class="cell">Inner</div></div></div>
+ <div><div class="gen row geninline"><div class="cell">Inner</div></div></div>
+ <div><div class="gen rowgroup genrow"><div class="row"><div class="cell">Inner</div></div></div></div>
+ <div><div class="gen rowgroup gencell"><div class="row"><div class="cell">Inner</div></div></div></div>
+ <div><div class="gen rowgroup genblock"><div class="row"><div class="cell">Inner</div></div></div></div>
+ <div><div class="gen rowgroup geninline"><div class="row"><div class="cell">Inner</div></div></div></div>
+</tr></td></table>
+</body>
+</html>
diff --git a/layout/reftests/generated-content/transitive-style-invalidation-ref.html b/layout/reftests/generated-content/transitive-style-invalidation-ref.html
new file mode 100644
index 0000000000..cf2f709149
--- /dev/null
+++ b/layout/reftests/generated-content/transitive-style-invalidation-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<style>
+.foo > div::before {
+ display: block;
+ width: 100px;
+ height: 100px;
+ background: green;
+ content: "";
+}
+</style>
+<div class="foo">
+ <div>
+ </div>
+</div>
+<script>
+onload = function() {
+ document.querySelector('.foo').className = 'foo bar';
+}
+</script>
diff --git a/layout/reftests/generated-content/transitive-style-invalidation.html b/layout/reftests/generated-content/transitive-style-invalidation.html
new file mode 100644
index 0000000000..7972b6ea45
--- /dev/null
+++ b/layout/reftests/generated-content/transitive-style-invalidation.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<style>
+.foo > div::before {
+ display: block;
+ width: 100px;
+ height: 100px;
+ background: red;
+ content: "";
+}
+.foo.bar > div::before {
+ background: green;
+}
+</style>
+<div class="foo">
+ <div>
+ </div>
+</div>
+<script>
+onload = function() {
+ document.querySelector('.foo').className = 'foo bar';
+}
+</script>