summaryrefslogtreecommitdiffstats
path: root/layout/reftests/css-display
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/css-display')
-rw-r--r--layout/reftests/css-display/display-contents-495385-2d-ref.html23
-rw-r--r--layout/reftests/css-display/display-contents-495385-2d.html52
-rw-r--r--layout/reftests/css-display/display-contents-acid-dyn-1.html49
-rw-r--r--layout/reftests/css-display/display-contents-acid-dyn-2.html49
-rw-r--r--layout/reftests/css-display/display-contents-acid-dyn-3.html50
-rw-r--r--layout/reftests/css-display/display-contents-acid-ref.html184
-rw-r--r--layout/reftests/css-display/display-contents-acid.html191
-rw-r--r--layout/reftests/css-display/display-contents-fieldset-ref.html52
-rw-r--r--layout/reftests/css-display/display-contents-fieldset.html48
-rw-r--r--layout/reftests/css-display/display-contents-generated-content-2.html240
-rw-r--r--layout/reftests/css-display/display-contents-generated-content-ref.html123
-rw-r--r--layout/reftests/css-display/display-contents-generated-content.html211
-rw-r--r--layout/reftests/css-display/display-contents-list-item-child-ref.html6
-rw-r--r--layout/reftests/css-display/display-contents-list-item-child.html18
-rw-r--r--layout/reftests/css-display/display-contents-shadow-dom-1-ref.html52
-rw-r--r--layout/reftests/css-display/display-contents-shadow-dom-1.html236
-rw-r--r--layout/reftests/css-display/display-contents-style-inheritance-1-dom-mutations.html157
-rw-r--r--layout/reftests/css-display/display-contents-style-inheritance-1-ref.html42
-rw-r--r--layout/reftests/css-display/display-contents-style-inheritance-1-stylechange.html67
-rw-r--r--layout/reftests/css-display/display-contents-style-inheritance-1.html51
-rw-r--r--layout/reftests/css-display/display-contents-tables-2.xhtml18
-rw-r--r--layout/reftests/css-display/display-contents-tables-3-ref.xhtml16
-rw-r--r--layout/reftests/css-display/display-contents-tables-3.xhtml17
-rw-r--r--layout/reftests/css-display/display-contents-tables-ref.xhtml16
-rw-r--r--layout/reftests/css-display/display-contents-tables.xhtml17
-rw-r--r--layout/reftests/css-display/display-contents-visibility-hidden-2.html24
-rw-r--r--layout/reftests/css-display/display-contents-visibility-hidden-ref.html18
-rw-r--r--layout/reftests/css-display/display-contents-visibility-hidden.html26
-rw-r--r--layout/reftests/css-display/display-contents-writing-mode-1-ref.html23
-rw-r--r--layout/reftests/css-display/display-contents-writing-mode-1.html33
-rw-r--r--layout/reftests/css-display/display-contents-writing-mode-2-ref.html23
-rw-r--r--layout/reftests/css-display/display-contents-writing-mode-2.html33
-rw-r--r--layout/reftests/css-display/display-contents-xbl-2-ref.xul22
-rw-r--r--layout/reftests/css-display/display-contents-xbl-2.xul31
-rw-r--r--layout/reftests/css-display/display-contents-xbl-3-ref.xul22
-rw-r--r--layout/reftests/css-display/display-contents-xbl-3.xul31
-rw-r--r--layout/reftests/css-display/display-contents-xbl-4-ref.xul22
-rw-r--r--layout/reftests/css-display/display-contents-xbl-4.xul31
-rw-r--r--layout/reftests/css-display/display-contents-xbl-5.xul31
-rw-r--r--layout/reftests/css-display/display-contents-xbl-ref.html59
-rw-r--r--layout/reftests/css-display/display-contents-xbl.xhtml272
-rw-r--r--layout/reftests/css-display/reftest-stylo.list37
-rw-r--r--layout/reftests/css-display/reftest.list28
43 files changed, 2751 insertions, 0 deletions
diff --git a/layout/reftests/css-display/display-contents-495385-2d-ref.html b/layout/reftests/css-display/display-contents-495385-2d-ref.html
new file mode 100644
index 000000000..c926c7037
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-495385-2d-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+body > div { border:1px solid black; margin:1em;
+ font-family:sans-serif; letter-spacing:2px; }
+</style>
+</head>
+<body>
+ <div><span>Hello</span> <span>Kitty</span></div>
+ <div><span>Hello</span> <span>Kitty</span></div>
+ <div><span>Hello</span> <span>Kitty</span></div>
+ <div><span>Hello</span> <span>Kitty</span></div>
+ <div><span>Hello</span> <span>Kitty</span></div>
+ <div><span>Hello</span> <span>Kitty</span></div>
+ <div><span>Hello</span> <span>Kitty</span></div>
+ <div><span>Hello</span> <span>Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-495385-2d.html b/layout/reftests/css-display/display-contents-495385-2d.html
new file mode 100644
index 000000000..d88f9f0a3
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-495385-2d.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+<!-- Test that before/after generated content stops suppression correctly,
+ both statically and dynamically -->
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents; with ::after/::before</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style>
+body > div { border:1px solid black; margin:1em;
+ font-family:sans-serif; letter-spacing:2px; }
+#d1:before { content:"Hello"; }
+#d2:after { content:"Kitty"; }
+#d3.c:before { content:"Hello"; }
+#d4.c:after { content:"Kitty"; }
+#d5.c:before { content:"Hello"; }
+#d6.c:after { content:"Kitty"; }
+#d7.c:after { content:"Kitty"; }
+#d8.c:before { content:"Hello"; }
+#d5,#d6 { overflow:hidden; }
+#d1,#d2,#d3,#d4 { display:contents; }
+x { display:table; }
+y { display:table-outer; }
+</style>
+<script>
+function loaded() {
+ document.body.offsetHeight;
+ document.getElementById("d3").setAttribute("class", "c");
+ document.getElementById("d4").setAttribute("class", "c");
+ document.getElementById("d5").setAttribute("class", "c");
+ document.getElementById("d6").setAttribute("class", "c");
+ document.getElementById("d7").setAttribute("class", "c");
+ document.getElementById("d8").setAttribute("class", "c");
+}
+</script>
+</head>
+<body onload="loaded()">
+ <div><div id="d1"> <span>Kitty</span></div></div>
+ <div><div id="d2"><span>Hello</span> </div></div>
+ <div><div id="d3"> <span>Kitty</span></div></div>
+ <div><div id="d4"><span>Hello</span> </div></div>
+ <div><div id="d5"> <span>Kitty</span></div></div>
+ <div><div id="d6"><span>Hello</span> </div></div>
+ <div><x id="d7"><span>Hello</span> </div></x>
+ <div><x id="d8"> <span>Kitty</span> </div></x>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-acid-dyn-1.html b/layout/reftests/css-display/display-contents-acid-dyn-1.html
new file mode 100644
index 000000000..b82cd0f4c
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-acid-dyn-1.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+
+ html,body {
+ color:black; background-color:white; height:100%; font-size:16px; padding:0; margin:0;
+ }
+
+iframe { padding:0;margin:0;border-width:0;width:100%;height:90%; color:red; }
+
+ </style>
+<script>
+function runTest(iframe) {
+ var win = iframe.contentWindow;
+ var doc = iframe.contentDocument;
+ doc.body.offsetHeight
+ var e = doc.querySelectorAll('*');
+ var contents = new Array;
+ for (i=0; i < e.length; ++i) {
+ var elm = e[i];
+ if (win.getComputedStyle(elm).display == 'contents') {
+ contents.push(elm);
+ elm.style.display='none';
+ }
+ }
+ doc.body.offsetHeight;
+ for (i=0; i < contents.length; ++i) {
+ elm = contents[i];
+ elm.style.display='contents';
+ }
+ doc.body.offsetHeight;
+}
+</script>
+</head>
+<body>
+
+<iframe src="display-contents-acid.html" frameborder=0 onload="runTest(this)"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-acid-dyn-2.html b/layout/reftests/css-display/display-contents-acid-dyn-2.html
new file mode 100644
index 000000000..8a798af10
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-acid-dyn-2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+
+ html,body {
+ color:black; background-color:white; height:100%; font-size:16px; padding:0; margin:0;
+ }
+
+iframe { padding:0;margin:0;border-width:0;width:100%;height:90%; color:red; }
+
+ </style>
+<script>
+function runTest(iframe) {
+ var win = iframe.contentWindow;
+ var doc = iframe.contentDocument;
+ doc.body.offsetHeight
+ var e = doc.querySelectorAll('*');
+ var contents = new Array;
+ for (i=0; i < e.length; ++i) {
+ var elm = e[i];
+ if (win.getComputedStyle(elm).display == 'contents') {
+ contents.push(elm);
+ elm.style.display='inline';
+ }
+ }
+ doc.body.offsetHeight;
+ for (i=0; i < contents.length; ++i) {
+ elm = contents[i];
+ elm.style.display='contents';
+ }
+ doc.body.offsetHeight;
+}
+</script>
+</head>
+<body>
+
+<iframe src="display-contents-acid.html" frameborder=0 onload="runTest(this)"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-acid-dyn-3.html b/layout/reftests/css-display/display-contents-acid-dyn-3.html
new file mode 100644
index 000000000..11231e6d5
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-acid-dyn-3.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+
+ html,body {
+ color:black; background-color:white; height:100%; font-size:16px; padding:0; margin:0;
+ }
+
+iframe { padding:0;margin:0;border-width:0;width:100%;height:90%; color:red; }
+
+ </style>
+<script>
+function runTest(iframe) {
+ var win = iframe.contentWindow;
+ var doc = iframe.contentDocument;
+ doc.body.offsetHeight
+ var e = doc.querySelectorAll('*');
+ var contents = new Array;
+ for (i=0; i < e.length; ++i) {
+ var elm = e[i];
+ if (win.getComputedStyle(elm).display == 'contents') {
+ contents.push([ elm, elm.nextSibling, elm.parentNode ]);
+ elm.parentNode.removeChild(elm);
+ }
+ }
+ doc.body.offsetHeight;
+ var i = contents.length;
+ while(i--) {
+ var arr = contents[i];
+ arr[2].insertBefore(arr[0], arr[1]);
+ }
+ doc.body.offsetHeight;
+}
+</script>
+</head>
+<body>
+
+<iframe src="display-contents-acid.html" frameborder=0 onload="runTest(this)"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-acid-ref.html b/layout/reftests/css-display/display-contents-acid-ref.html
new file mode 100644
index 000000000..4f2485193
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-acid-ref.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+<style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+.table { display:table; border-collapse:collapse; border: blue solid 1pt;}
+.itable { display:inline-table; }
+.caption { display:table-caption; }
+.cell { display:table-cell; border:inherit; }
+.row { display:table-row; border: green dashed 1pt; }
+.rowg { display:table-row-group; }
+.head { display:table-header-group; }
+.foot { display:table-footer-group; }
+.col { display:table-column; }
+.colg { display:table-column-group; }
+.flex { display:flex; }
+.iflex { display:inline-flex; }
+.li { display:list-item; }
+.ib { display:inline-block; }
+.inline { display:inline; }
+.columns { -moz-columns:2; columns:2; height:4em; }
+
+
+
+.c1 { color:lime; }
+.c2 { color:pink; }
+.c3 { color:teal; }
+.c4 { color:green; }
+.c5 { color:silver; }
+.c6 { color:cyan; }
+.c7 { color:magenta; }
+.c8 { color:yellow; }
+.c9 { color:grey; }
+.c10{ color:black; }
+
+.b { background:blue; }
+ </style>
+</head>
+<body style="color:red">
+
+<div class="caption c2">1<span>1</span></div>
+<div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div>
+<div class="cell c3">3</div>
+<div class="rowg c4">4</div>
+<div class="cell c5">5a</div>
+<div class="cell c5">5b</div>
+<div class="head c6">6</div>
+<div class="cell c7"><div class="inline c2">7<span class="b">a</span></div></div>
+<div class="cell c8">7b</div>
+<div class="foot c9">8</div>
+<div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div>
+<div class="cell c10">10</div>
+
+<div class="table" style="float:right">
+<div class="caption c2">1<span>1</span></div>
+<div class="row c2">2a<div class="cell">2<div class="inline c2">b<span class="b">b</span></div></div></div>
+<div class="cell c3" style="border:none">3</div>
+<div class="rowg c4">4</div>
+<div class="cell c5" style="border:none">5a</div>
+<div class="cell c5">5b</div>
+<div class="head c6">6</div>
+<div class="cell c7" style="border:none"><div class="inline c2">7<span class="b">a</span></div></div>
+<div class="cell c8" style="border:none">7b</div>
+<div class="foot c9" style="border:none">8</div>
+<div class="foot c9">9<div class="inline c2">a<span class="b">b</span>c</div></div>
+<div class="cell c10" style="border:none">10</div>
+</div>
+
+<div class="flex c1">
+0&nbsp;
+<div class="inline c1">x&nbsp;</div>
+<div class="inline c1"><div class="inline c2">y</div></div>
+<div class="inline c1"><div class="inline c2"><div class="">1<span>1</span></div></div></div>
+<div class="inline c2"><div class="inline">2a<div class="">2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
+<div class="c3">3</div>
+<div class="inline"><div class="inline c4">4</div></div>
+<div class=""><div class="inline c5">5a</div></div>
+<div class=" c5">5b</div>
+<div class="inline c6"><div class="">6</div></div>
+<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
+<div class="inline c9"><div class="">8</div></div>
+<div class="inline c9"><div class="inline">9<div class="inline c2">a</div></div></div>
+<span class="c2 b">b</span>
+<div class="inline c2">c</div>
+<div class="inline c10"><div class="">10</div></div>
+</div>
+
+<div class="flex c1">
+<div class="inline c2">0&nbsp;</div>
+<div class="inline c1">x&nbsp;</div>
+<div class="inline c1"><div class="inline c2">y</div></div>
+<div class="inline c1"><div class="inline c2"><div class="">1<span>1</span></div></div></div>
+<div class="c2"><div class="inline">2a<div>2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
+<div class="c3">3</div>
+<div class="inline"><div class="inline c4">4</div></div>
+<div class=""><div class="inline c5">5a</div></div>
+<div class=" c5">5b</div>
+<div class="inline c6"><div class="">6</div></div>
+<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
+<div class="inline c9"><div class="">8</div></div>
+<div class="inline c9"><div class="inline">9<div class="inline c2">a</div></div></div>
+<span class="c2 b">b</span>
+<div class="inline c2">c</div>
+<div class="inline c10"><div class="">10</div></div>
+</div>
+
+
+<div class="iflex"><div class="contents c2">
+0
+</div></div>
+<div class="iflex"><div class="contents c2">
+0
+<div class="inline c1">1</div>
+2
+</div></div>
+<div class="iflex"><div class="contents c2">
+0<div class="inline c1">1</div>2
+</div></div>
+<div class="iflex c3">
+0<div class="inline c2"><div class="c1">1</div></div>2
+</div>
+<div class="iflex c3">
+<div class="inline c2">0</div><div class="inline c2"><div class="c1">1</div></div><div class="inline c2">2</div>
+</div>
+<div class="iflex c3">
+<div class="inline">0</div>
+<div class="inline"><div class="inline c1">1</div></div>
+<div class="inline">2</div>
+</div>
+
+<ul><li class="c1"><div class="inline c2">
+0
+<div class="inline c1">x</div>
+<div class="inline c1"><div class="inline c2">y</div></div>
+<div class="inline c1"><div class="inline c2"><div class="">1<span>1</span></div></div></div>
+<div class="inline c2"><div class="inline">2a<div class="">2<div class="inline c2">b<span class="b">b</span></div></div></div></div>
+<div class="inline c3"><div class="inline">3</div></div>
+<div class="inline"><div class="inline c4">4</div></div>
+<div class=""><div class="inline c5">5a</div></div>
+<div class=" c5">5b</div>
+<div class="inline c6"><div class="">6</div></div>
+<div class="ib"><div class="inline c7"><div class="inline c2">7<span class="b">a</span></div></div></div>
+<div class="inline c9"><div class="">8</div></div>
+<div class="inline c9"><div class="inline">9<div class="inline c2">a<span class="b">b</span>c</div></div></div>
+<div class="inline c10"><div class="">10</div></div>
+</div></li>
+</ul>
+
+<div class="columns">
+<div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div>
+<div class="contents c2"><div>2</div></div>
+<div class="contents c3"><div>3</div></div>
+</div>
+
+<div class="columns">
+<div class="contents c1"><div class="contents c2"><div>1<span>1</span></div></div></div>
+<div class="contents c2"><div>2</div></div>
+<div class="contents c3"><div>3</div></div>
+</div>
+
+<span class="c2 b"><legend class="inline c1">Legend</legend><legend class="inline c1">Legend</legend></span>
+<br clear="all">
+<span class="c3">x<div class="inline c1">float:left</div></span>
+<span class="c3">y<div class="inline c1">position:absolute</div></span>
+
+<!-- -->
+
+<fieldset class="c1" style="display:inline"><legend>Legend</legend>fieldset</fieldset>
+<button class="c1">but<span>ton</span></button>
+<select class="c1"><option>select</select>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-acid.html b/layout/reftests/css-display/display-contents-acid.html
new file mode 100644
index 000000000..bdd0d08ee
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-acid.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+
+ html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+ }
+
+.table { display:table; border-collapse:collapse; border: blue solid 1pt;}
+.itable { display:inline-table; }
+.caption { display:table-caption; }
+.cell { display:table-cell; border:inherit; }
+.row { display:table-row; border: green dashed 1pt; }
+.rowg { display:table-row-group; }
+.head { display:table-header-group; }
+.foot { display:table-footer-group; }
+.col { display:table-column; }
+.colg { display:table-column-group; }
+.flex { display:flex; }
+.iflex { display:inline-flex; }
+.li { display:list-item; }
+.ib { display:inline-block; }
+.inline { display:inline; }
+.columns { -moz-columns:2; columns:2; height:4em; }
+
+.contents { display:contents; align-items:inherit; justify-items:inherit; }
+
+.c1 { color:lime; }
+.c2 { background:blue; color:pink; }
+.c3 { color:teal; }
+.c4 { color:green; }
+.c5 { color:silver; }
+.c6 { color:cyan; }
+.c7 { color:magenta; }
+.c8 { color:yellow; }
+.c9 { color:grey; }
+.c10{ color:black; }
+
+.b { background:inherit; }
+ </style>
+</head>
+<body style="color:red">
+
+<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
+<div class="contents c3"><div class="cell">3</div></div>
+<div class="contents c4"><div class="rowg">4</div></div>
+<div class="contents c5"><div class="cell">5a</div></div>
+<div class="cell c5">5b</div>
+<div class="contents c6"><div class="head">6</div></div>
+<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
+<div class="contents c8"><div class="cell">7b</div></div>
+<div class="contents c9"><div class="foot">8</div></div>
+<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
+<div class="contents c10"><div class="cell">10</div></div>
+
+<div class="table" style="float:right">
+<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
+<div class="contents c3"><div class="cell">3</div></div>
+<div class="contents c4"><div class="rowg">4</div></div>
+<div class="contents c5"><div class="cell">5a</div></div>
+<div class="cell c5">5b</div>
+<div class="contents c6"><div class="head">6</div></div>
+<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
+<div class="contents c8"><div class="cell">7b</div></div>
+<div class="contents c9"><div class="foot">8</div></div>
+<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
+<div class="contents c10"><div class="cell">10</div></div>
+</div>
+
+<div class="flex c1">
+0
+<div class="contents c1">x</div>
+<div class="contents c1"><div class="contents c2">y</div></div>
+<div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
+<div class="contents c3"><div class="inline">3</div></div>
+<div class="inline"><div class="contents c4">4</div></div>
+<div class=""><div class="contents c5">5a</div></div>
+<div class=" c5">5b</div>
+<div class="contents c6"><div class="">6</div></div>
+<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
+<div class="contents c9"><div class="">8</div></div>
+<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
+<div class="contents c10"><div class="">10</div></div>
+</div>
+
+<div class="flex"><div class="contents c2">
+0
+<div class="contents c1">x</div>
+<div class="contents c1"><div class="contents c2">y</div></div>
+<div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
+<div class="contents c3"><div class="inline">3</div></div>
+<div class=""><div class="contents c4">4</div></div>
+<div class=""><div class="contents c5">5a</div></div>
+<div class=" c5">5b</div>
+<div class="contents c6"><div class="">6</div></div>
+<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
+<div class="contents c9"><div class="">8</div></div>
+<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
+<div class="contents c10"><div class="">10</div></div>
+</div></div>
+
+<div class="iflex"><div class="contents c2">
+0
+</div></div>
+<div class="iflex"><div class="contents c2">
+0
+<div class="contents c1">1</div>
+2
+</div></div>
+<div class="iflex"><div class="contents c2">
+0
+<div class="c1">1</div>
+2
+</div></div>
+<div class="iflex c3">
+0
+<div class="contents c2"><div class="c1">1</div></div>
+2
+</div>
+<div class="iflex c3">
+<div class="contents c2">0</div>
+<div class="contents c2"><div class="c1">1</div></div>
+<div class="contents c2">2</div>
+</div>
+<div class="iflex c3">
+<div class="inline">0</div>
+<div class="contents"><div class="inline c1">1</div></div>
+<div class="inline">2</div>
+</div>
+
+<ul><li class="c1"><div class="contents c2">
+0
+<div class="contents c1">x</div>
+<div class="contents c1"><div class="contents c2">y</div></div>
+<div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
+<div class="contents c3"><div class="inline">3</div></div>
+<div class="inline"><div class="contents c4">4</div></div>
+<div class=""><div class="contents c5">5a</div></div>
+<div class=" c5">5b</div>
+<div class="contents c6"><div class="">6</div></div>
+<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
+<div class="contents c9"><div class="">8</div></div>
+<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
+<div class="contents c10"><div class="">10</div></div>
+</div></li>
+</ul>
+
+<div class="columns">
+<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div>2</div></div>
+<div class="contents c3"><div>3</div></div>
+</div>
+
+<div class="columns">
+<div class="columns contents">
+<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div>2</div></div>
+<div class="contents c3"><div>3</div></div>
+</div>
+</div>
+
+<div class="contents c3"><!-- comment node --></div>
+<div class="contents c3"><?PI ?></div>
+
+<span class="c2"><legend class="contents c1">Legend</legend><legend class="contents c1">Legend</legend></span>
+<br clear="all">
+<span class="c3">x<div class="contents c1" style="float:left">float:left</div></span>
+<span class="c3">y<div class="contents c1" style="position:absolute">position:absolute</div></span>
+
+<!-- Stuff below should simply ignore having display:contents -->
+
+<fieldset class="contents c1"><legend class="contents">Legend</legend>fieldset</fieldset>
+<button class="contents c1">but<span>ton</span></button>
+<select class="contents c1"><option>select</select>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-fieldset-ref.html b/layout/reftests/css-display/display-contents-fieldset-ref.html
new file mode 100644
index 000000000..43a67343c
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-fieldset-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html><head>
+<style>
+fieldset { padding:0; }
+span { display:block; width:10px; height:10px; background:lime; }
+.contents { }
+legend { border: 1px solid; }
+.test2 legend { }
+.test2 legend::after, .test3 legend::after { content:"legend"; }
+.test2 legend.static, .test3 legend.static { display:block; }
+.test2 legend.static::before, .test3 legend.static::before { content:"static "; }
+.test2 legend.static::before { content:"static "; }
+.after::after { content:"::after"; }
+.before::before { content:"::before"; }
+.nb legend.static { border: 1px solid; }
+.nb legend { border-style:none; }
+.p0 legend { padding:0; }
+</style>
+</head>
+<body>
+<fieldset><div class="test contents"></div></fieldset>
+<fieldset><div class="test contents">x</div></fieldset>
+<fieldset><div class="test contents after"></div></fieldset>
+<fieldset><div class="test contents before"></div></fieldset>
+<fieldset><div class="test contents before after"></div></fieldset>
+<fieldset><legend class="test contents"></legend></fieldset>
+<fieldset><legend class="test contents" style="padding:0"></legend></fieldset>
+<fieldset><legend class="contents"><div class="test contents"></div></legend></fieldset>
+<fieldset class="test2"></fieldset>
+<fieldset class="test2 after"></fieldset>
+<fieldset class="test2"><legend class="static"></legend></fieldset>
+<fieldset class="test2"><legend class="static contents"></legend></fieldset>
+<fieldset class="test2"><legend class="static" style="padding:0"></legend></fieldset>
+<fieldset class="test2 p0"></fieldset>
+<fieldset class="test2 p0"></fieldset>
+<fieldset class="test2 p0"><legend class="static"></legend></fieldset>
+<fieldset class="test2 p0"><legend class="static"></legend></fieldset>
+<script>
+document.body.offsetHeight;
+var tests = document.querySelectorAll('.test');
+for (i=0; i < tests.length; ++i) {
+ test = tests[i];
+ test.appendChild(document.createElement('span'));
+}
+var tests = document.querySelectorAll('.test2,.test3');
+for (i=0; i < tests.length; ++i) {
+ test = tests[i];
+ test.appendChild(document.createElement('legend'));
+}
+</script>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-fieldset.html b/layout/reftests/css-display/display-contents-fieldset.html
new file mode 100644
index 000000000..06cf5c99e
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-fieldset.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html><head>
+<style>
+fieldset { padding:0; }
+span { display:block; width:10px; height:10px; background:lime; }
+.contents { display: contents; }
+legend { border: 1px solid; }
+.test2 legend { display:contents; }
+.test2 legend::after, .test3 legend::after { content:"legend"; }
+.test2 legend.static, .test3 legend.static { display:block; }
+.test2 legend.static::before, .test3 legend.static::before { content:"static "; }
+.after::after { content:"::after"; }
+.before::before { content:"::before"; }
+</style>
+</head>
+<body>
+<fieldset><div class="test contents"></div></fieldset>
+<fieldset><div class="test contents">x</div></fieldset>
+<fieldset><div class="test contents after"></div></fieldset>
+<fieldset><div class="test contents before"></div></fieldset>
+<fieldset><div class="test contents before after"></div></fieldset>
+<fieldset><legend class="test contents"></legend></fieldset>
+<fieldset><div class="contents"><legend class="test contents"></legend></div></fieldset>
+<fieldset><legend class="contents"><div class="test contents"></div></legend></fieldset>
+<fieldset class="test2"></fieldset>
+<fieldset class="test2 after"></fieldset>
+<fieldset class="test2"><legend class="static"></legend></fieldset>
+<fieldset class="test2"><legend class="static contents"></legend></fieldset>
+<fieldset class="test2"><div class="contents"><legend class="static"></legend></div></fieldset>
+<fieldset><div class="test2 contents"></div></fieldset>
+<fieldset><div class="test3 contents"></div></fieldset>
+<fieldset><div class="test2 contents"><legend class="static"></legend></div></fieldset>
+<fieldset><div class="test3 contents"><legend class="static"></legend></div></fieldset>
+<script>
+document.body.offsetHeight;
+var tests = document.querySelectorAll('.test');
+for (i=0; i < tests.length; ++i) {
+ test = tests[i];
+ test.appendChild(document.createElement('span'));
+}
+var tests = document.querySelectorAll('.test2,.test3');
+for (i=0; i < tests.length; ++i) {
+ test = tests[i];
+ test.appendChild(document.createElement('legend'));
+}
+</script>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-generated-content-2.html b/layout/reftests/css-display/display-contents-generated-content-2.html
new file mode 100644
index 000000000..842c61e98
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-generated-content-2.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-wait">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents; generated content</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+body,html { color:black; background-color:white; }
+div { display:inline; }
+
+.test {
+ display: contents;
+ content: "content";
+ color: lime;
+}
+.contents {
+ display: contents;
+ color: green;
+}
+.s1 {display: none;}
+.s2 {display: none;}
+.s3 {display: contents;}
+.s5 {display: contents;}
+.s7 {display: none;}
+.s8 {display: none;}
+.s9 {display: contents;}
+.s11 {display: contents;}
+.before::before {
+ display: contents;
+ content:"before";
+}
+.after::after {
+ display: contents;
+ content:"after";
+}
+</style>
+<script>
+
+function setup() {
+ document.body.offsetHeight;
+ document.querySelector('.t1').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t2').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t3').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t4').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t5').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t6').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t7').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t8').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t9').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t10').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t11').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t12').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t13').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.s1').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.s2').style.display = 'inline';
+ document.body.offsetHeight;
+ document.querySelector('.s3').style.display = 'normal';
+ document.body.offsetHeight;
+ document.querySelector('.s4').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.s5').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.s6').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.s7').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.s8').style.display = 'inline';
+ document.body.offsetHeight;
+ document.querySelector('.s9').style.display = 'normal';
+ document.body.offsetHeight;
+ document.querySelector('.s10').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.s11').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.s12').style.display = 'none';
+ document.body.offsetHeight;
+}
+
+function runTest() {
+ var doc = document;
+ var win = window;
+ setup();
+ var e = doc.querySelectorAll('*');
+ for (i=0; i < e.length; ++i) {
+ var elm = e[i];
+ if (win.getComputedStyle(elm).display == 'contents') {
+ var c = elm.childNodes[0];
+ if (c) {
+ var next = c.nextSibling;
+ elm.removeChild(c);
+ elm.insertBefore(c,next);
+ }
+ var c = elm.childNodes[1];
+ if (c) {
+ var next = c.nextSibling;
+ elm.removeChild(c);
+ elm.insertBefore(c,next);
+ }
+ var c = elm.childNodes.length ? elm.childNodes[elm.childNodes.length-1] : null;
+ if (c) {
+ elm.removeChild(c);
+ elm.appendChild(c);
+ }
+ }
+ }
+
+ document.documentElement.className = '';
+}
+
+</script>
+</head>
+<body onload="runTest()">
+
+<div class="test"><span>A a</span></div>
+<div class="test"><span class="t1">t1</span></div>
+<div class="test"><span class="t2">t2</span></div>
+<div class="contents before">1<span>B b</span>2</div>
+<div class="contents after">1<span>C c</span>2</div>
+<div class="contents before after">1<span>D d</span>2</div>
+<div class="contents before">1<span class="t5">B b</span>2</div>
+<div class="contents after">1<span class="t6">C c</span>2</div>
+<div class="contents before after">1<span class="t7">D d</span>2</div>
+
+<div class="contents">
+ <div class="test"><span>span</span></div>
+ <div class="test"><span class="t3">t3</span></div>
+ <div class="test"><span class="t4">t4</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+ <div class="contents before">1<span class="t8">span</span>2</div>
+ <div class="contents after">1<span class="t9">span</span>2</div>
+ <div class="contents before after">1<span class="t10">span</span>2</div>
+ <div class="contents before">1<span class="t11">span</span>2</div>
+ <div class="contents after">1<span class="t12">span</span>2</div>
+ <div class="contents before after">1<span class="t13">span</span>2</div>
+</div>
+
+<div class="contents"><span class="s1">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s2">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s3">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s4">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s5">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s6">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before"><span class="s7">
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents after"><span class="s8">
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s9">
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before after"><span class="s10">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before"><span class="s11">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents after"><span class="s12">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-generated-content-ref.html b/layout/reftests/css-display/display-contents-generated-content-ref.html
new file mode 100644
index 000000000..29ee8b20d
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-generated-content-ref.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents; generated content</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+body,html { color:black; background-color:white; }
+
+.test {
+ display: inline;
+ content: "content";
+ color: lime;
+}
+.contents {
+ display: inline;
+ color: green;
+}
+.before::before {
+ display: inline;
+ content:"before";
+}
+.after::after {
+ display: inline;
+ content:"after";
+}
+</style>
+</head>
+<body>
+
+<div class="test"><span>A a</span></div>
+<div class="test"><span class="contents">t1</span></div>
+<div class="test"></div>
+<div class="contents before">1<span>B b</span>2</div>
+<div class="contents after">1<span>C c</span>2</div>
+<div class="contents before after">1<span>D d</span>2</div>
+<div class="contents before">1<span class="t5">B b</span>2</div>
+<div class="contents after">12</div>
+<div class="contents before after">1<span class="t7">D d</span>2</div>
+
+<div class="contents">
+ <div class="test"><span>span</span></div>
+ <div class="test"><span class="contents">t3</span></div>
+ <div class="test"></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+ <div class="contents before">12</div>
+ <div class="contents after">1<span class="t9">span</span>2</div>
+ <div class="contents before after">12</div>
+ <div class="contents before">1<span class="t11">span</span>2</div>
+ <div class="contents after">12</div>
+ <div class="contents before after">1<span class="t13">span</span>2</div>
+</div>
+
+<div class="contents"><span class="s1">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s2">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s3">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s4">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"></div>
+
+<div class="contents"></div>
+
+<div class="contents before"><span class="s7">
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents after"><span class="s8">
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s9">
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before after"><span class="s10">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before"></div>
+
+<div class="contents after"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-generated-content.html b/layout/reftests/css-display/display-contents-generated-content.html
new file mode 100644
index 000000000..16c9a998a
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-generated-content.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-wait">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents; generated content</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+body,html { color:black; background-color:white; }
+div { display:inline; }
+
+.test {
+ display: contents;
+ content: "content";
+ color: lime;
+}
+.contents {
+ display: contents;
+ color: green;
+}
+.s1 {display: none;}
+.s2 {display: none;}
+.s3 {display: contents;}
+.s5 {display: contents;}
+.s7 {display: none;}
+.s8 {display: none;}
+.s9 {display: contents;}
+.s11 {display: contents;}
+.before::before {
+ display: contents;
+ content:"before";
+}
+.after::after {
+ display: contents;
+ content:"after";
+}
+</style>
+<script>
+
+function runTest() {
+ document.body.offsetHeight;
+ document.querySelector('.t1').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t2').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t3').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t4').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t5').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t6').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t7').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t8').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t9').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t10').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t11').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.t12').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.t13').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.s1').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.s2').style.display = 'inline';
+ document.body.offsetHeight;
+ document.querySelector('.s3').style.display = 'normal';
+ document.body.offsetHeight;
+ document.querySelector('.s4').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.s5').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.s6').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.s7').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.s8').style.display = 'inline';
+ document.body.offsetHeight;
+ document.querySelector('.s9').style.display = 'normal';
+ document.body.offsetHeight;
+ document.querySelector('.s10').className = 'contents';
+ document.body.offsetHeight;
+ document.querySelector('.s11').style.display = 'none';
+ document.body.offsetHeight;
+ document.querySelector('.s12').style.display = 'none';
+ document.body.offsetHeight;
+
+ document.documentElement.className = '';
+}
+
+</script>
+</head>
+<body onload="runTest()">
+
+<div class="test"><span>A a</span></div>
+<div class="test"><span class="t1">t1</span></div>
+<div class="test"><span class="t2">t2</span></div>
+<div class="contents before">1<span>B b</span>2</div>
+<div class="contents after">1<span>C c</span>2</div>
+<div class="contents before after">1<span>D d</span>2</div>
+<div class="contents before">1<span class="t5">B b</span>2</div>
+<div class="contents after">1<span class="t6">C c</span>2</div>
+<div class="contents before after">1<span class="t7">D d</span>2</div>
+
+<div class="contents">
+ <div class="test"><span>span</span></div>
+ <div class="test"><span class="t3">t3</span></div>
+ <div class="test"><span class="t4">t4</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+ <div class="contents before">1<span class="t8">span</span>2</div>
+ <div class="contents after">1<span class="t9">span</span>2</div>
+ <div class="contents before after">1<span class="t10">span</span>2</div>
+ <div class="contents before">1<span class="t11">span</span>2</div>
+ <div class="contents after">1<span class="t12">span</span>2</div>
+ <div class="contents before after">1<span class="t13">span</span>2</div>
+</div>
+
+<div class="contents"><span class="s1">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s2">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s3">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s4">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s5">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s6">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before"><span class="s7">
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents after"><span class="s8">
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s9">
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before after"><span class="s10">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before"><span class="s11">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents after"><span class="s12">
+ <div class="test"><span>span</span></div>
+ <div class="contents before">1<span>span</span>2</div>
+ <div class="contents after">1<span>span</span>2</div>
+ <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-list-item-child-ref.html b/layout/reftests/css-display/display-contents-list-item-child-ref.html
new file mode 100644
index 000000000..25a9d3fe5
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-list-item-child-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html style="margin:2em;">
+<head>
+<meta charset="UTF-8">
+</head>
+<body style="margin:0;padding:0"><li style="color:lime;">LI</body></html>
diff --git a/layout/reftests/css-display/display-contents-list-item-child.html b/layout/reftests/css-display/display-contents-list-item-child.html
new file mode 100644
index 000000000..8a4916e5a
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-list-item-child.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html style="margin:2em;color:red">
+<head>
+<meta charset="UTF-8">
+<script>
+
+function boom()
+{
+ document.documentElement.offsetHeight;
+ document.body.style.position = "fixed";
+ document.documentElement.offsetHeight;
+ document.documentElement.style.MozBoxSizing = "border-box";
+ document.documentElement.offsetHeight;
+}
+
+</script>
+</head>
+<body style="display: contents;" onload="boom();"><li style="color:lime">LI</body></html>
diff --git a/layout/reftests/css-display/display-contents-shadow-dom-1-ref.html b/layout/reftests/css-display/display-contents-shadow-dom-1-ref.html
new file mode 100644
index 000000000..f57822901
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-shadow-dom-1-ref.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+ <title>CSS Test: CSS display:contents; in Shadow DOM</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+<style>
+html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+
+span { color:blue; }
+</style>
+ </head>
+ <body>
+ <div>X 1 c</div>
+ <div>a 2 c</div>
+ <div>a 3 Y</div>
+ <div>X 4 Y</div>
+ <div>a 5 Y</div>
+ <div>X <span>6</span> c</div>
+ <div>a <span>7</span> c</div>
+ <div>a <span>8</span> Y</div>
+ <div>X <span>9</span> Y</div>
+ <div>a <span>A</span> Y</div>
+ <div>a <span>1 2</span> B</div>
+ <div>A <span>a 1 2 c</span> B</div>
+ <div>A <span>a 1 a 2 ca 3 c</span> B</div>
+ <div>A <span>a 1 c a 2 c</span> B</div>
+ <div>X <span>a 1 c a 2 c</span> B</div>
+ <div><span>1a 2 c</span></div>
+ <div><span>a 1 c2</span></div>
+ <div>A<span>b</span>c</div>
+ <div>A<span>b</span>c</div>
+ <div><span>b c</span>d</div>
+ <div><span>a </span>b</div>
+ <div><b>One</b><i>Two</i></div>
+ <div><b>One</b><i>Two</i></div>
+ <div><b>One</b><i>Two</i></div>
+ <div><b>One</b><i>Two</i></div>
+ <b style="color:blue">One</b><i style="color:blue">Two</i>Three
+ <span style="color:green">R</span>
+ <div></div>
+ <b style="color:green">V</b>
+ <b style="color:green">W</b>
+ <b style="color:green">X</b>
+ <!-- <b style="color:green">Y</b> -->
+ </body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-shadow-dom-1.html b/layout/reftests/css-display/display-contents-shadow-dom-1.html
new file mode 100644
index 000000000..f5e49a192
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-shadow-dom-1.html
@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html class="reftest-wait" lang="en-US">
+ <head>
+ <title>CSS Test: CSS display:contents; in Shadow DOM</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style>
+html,body {
+ color:black; background-color:white; font-size:16px; padding:0; margin:0;
+}
+.before::before {content: "a ";}
+.after::after {content: " c";}
+div.before::before {content: "X ";}
+div.after::after {content: " Y";}
+.b,.c { display:contents; }
+</style>
+ </head>
+ <body>
+ <div id="host1" class="before"></div>
+ <span id="host2"></span>
+ <div id="host3" class="after"></div>
+ <div id="host4" class="before after"></div>
+ <div id="host5" class="after"></div>
+ <div id="host6" class="before"></div>
+ <div id="host7"></div>
+ <div id="host8" class="after"></div>
+ <div id="host9" class="before after"></div>
+ <div id="hostA" class="after"></div>
+ <div id="hostB"></div>
+ <div id="hostC"></div>
+ <div id="hostD"></div>
+ <div id="hostE"></div>
+ <div id="hostF" class="before"></div>
+ <div id="hostG"></div>
+ <span id="hostH"></span>
+ <div id="hostI"></div>
+ <div id="hostJ"></div>
+ <span id="hostK"></span>
+ <div id="hostL"></div>
+ <div id="hostM"><i>Two</i><b>One</b></div>
+ <div id="hostN"><i class="c">Two</i><b>One</b></div>
+ <div id="hostO"><i>Two</i><b class="c">One</b></div>
+ <div id="hostP"><i class="c">Two</i><b class="c">One</b></div>
+ <div id="hostQ" class="c" style="color:blue"><i class="c">Two</i><b class="c">One</b></div>Three
+ <span id="hostR"><style scoped>:scope{color:green}</style></span>
+ <div id="hostS" class="c"><span class="c">S</span></div>
+ <div id="hostT" class="c">T</div>
+ <div id="hostU"><span class="c">U</span></div>
+ <div id="hostV" class="c" style="color:red"><b class="c" style="color:inherit">V</b></div>
+ <div id="hostW" class="c" style="color:red"><b class="c" style="color:inherit">W</b></div>
+ <span id="hostX" style="color:red"><b class="c" style="color:inherit">X</b></span>
+ <!-- TODO(bug 1021572?) <div id="hostY" class="c" style="color:red"><b>Y</b></div> -->
+
+ <script>
+ function shadow(id) {
+ return document.getElementById(id).createShadowRoot();
+ }
+ function span(s) {
+ var e = document.createElement("span");
+ var t = document.createTextNode(s);
+ e.appendChild(t);
+ return e;
+ }
+ function text(s) {
+ return document.createTextNode(s);
+ }
+ function contents(n) {
+ var e = document.createElement("z");
+ e.style.display = "contents";
+ e.style.color = "blue";
+ if (n) e.appendChild(n);
+ return e;
+ }
+
+ document.body.offsetHeight;
+
+ shadow("host1").innerHTML = '<content></content> c';
+ shadow("host2").innerHTML = 'a <content style="display:contents"></content> c';
+ shadow("host3").innerHTML = 'a <content style="display:contents"></content>';
+ shadow("host4").innerHTML = '<content style="display:contents"></content>';
+ shadow("host5").innerHTML = 'a <content style="display:contents"></content>';
+ shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c';
+ shadow("host7").innerHTML = 'a <content style="display:contents"></content> c';
+ shadow("host8").innerHTML = 'a <z style="color:blue; display:contents"><content style="display:contents"></z></content>';
+ shadow("host9").innerHTML = '<content style="display:contents"></content>';
+ shadow("hostA").innerHTML = 'a <content style="display:contents"></content>';
+ shadow("hostB").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B';
+ shadow("hostC").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
+ shadow("hostD").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>';
+ shadow("hostE").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B';
+ shadow("hostF").innerHTML = '<content select=".c"></content> <content select=".b"></content> B';
+ shadow("hostG").innerHTML = '<content select=".b"></content>';
+ shadow("hostH").innerHTML = '<content select=".b"></content>';
+ shadow("hostI").innerHTML = 'A<content select=".b"></content>';
+ shadow("hostJ").innerHTML = 'A<content select=".b"></content>';
+ shadow("hostK").innerHTML = '<content select=".b"></content>';
+ shadow("hostL").innerHTML = '<content select=".b"></content>';
+ shadow("hostM").innerHTML = '<content select="b"></content><content select="i"></content>';
+ shadow("hostN").innerHTML = '<content select="b"></content><content select="i"></content>';
+ shadow("hostO").innerHTML = '<content select="b"></content><content select="i"></content>';
+ shadow("hostP").innerHTML = '<content select="b"></content><content select="i"></content>';
+ shadow("hostQ").innerHTML = '<content select="b"></content><content select="i"></content>';
+ shadow("hostR").innerHTML = '<content select="span"></content>';
+ shadow("hostW").innerHTML = '<z style="color:red"><content select="b"></content></z>';
+ shadow("hostX").innerHTML = '<z style="color:red"><content select="b"></content></z>';
+ // TODO(bug 1021572?) shadow("hostY").innerHTML = '<content select="b"><style scoped>:scope{color:green}</style></content>';
+
+ function tweak() {
+ document.body.offsetHeight;
+
+ host1.appendChild(span("1"));
+ host2.appendChild(text("2"));
+ host3.appendChild(span("3"));
+ host4.appendChild(text("4"));
+
+ var e = span("5");
+ e.style.display = "contents";
+ host5.appendChild(e);
+
+ host6.appendChild(span("6"));
+ host7.appendChild(contents(text("7")));
+ host8.appendChild(contents(span("8")));
+ host9.appendChild(contents(text("9")));
+
+ var e = contents(span("A"));
+ e.style.display = "contents";
+ hostA.appendChild(e);
+
+ var e = contents(text("2"));
+ e.className = "b";
+ hostB.appendChild(e);
+ var e = contents(text("1"));
+ e.className = "c";
+ hostB.appendChild(e);
+
+ var e = contents(text("2"));
+ e.className = "b after";
+ hostC.appendChild(e);
+ var e = contents(text("1"));
+ e.className = "c before";
+ hostC.appendChild(e);
+
+ var e = contents(text("2"));
+ e.className = "b before after";
+ hostD.appendChild(e);
+ var e = contents(text(" 3"));
+ e.className = "b before after";
+ hostD.appendChild(e);
+ var e = contents(text("1"));
+ e.className = "c before";
+ hostD.appendChild(e);
+
+ var e = contents(contents(text("2")));
+ e.className = "before b after";
+ hostE.appendChild(e);
+ var e2 = contents(text("1"));
+ e2.className = "c before after";
+ hostE.insertBefore(e2, e);
+
+ var e = contents(text("2"));
+ e.className = "before b after";
+ hostF.appendChild(e);
+ var e2 = contents(text("1"));
+ e2.className = "c before after";
+ hostF.insertBefore(e2, e);
+
+ var e = contents(contents(text("1")));
+ e.className = "b";
+ hostG.appendChild(e);
+ var e = contents(text("2"));
+ e.className = "b before after";
+ hostG.appendChild(e);
+
+ var e = contents(contents(text("2")));
+ e.className = "b";
+ hostH.appendChild(e);
+ var e2 = contents(text("1"));
+ e2.className = "b before after";
+ hostH.insertBefore(e2, e);
+
+ var e = contents(text("b"));
+ e.className = "b";
+ hostI.appendChild(e);
+ var e = span("c");
+ e.className = "b";
+ hostI.appendChild(e);
+
+ var e = contents(contents(text("b")));
+ e.className = "b";
+ hostJ.appendChild(e);
+ var e = span("c");
+ e.className = "b";
+ hostJ.appendChild(e);
+
+ var inner = span("b");
+ inner.className = "after";
+ var e = contents(contents(inner));
+ e.className = "b";
+ hostK.appendChild(e);
+ var e = span("d");
+ e.className = "b";
+ hostK.appendChild(e);
+
+ var inner = contents(null);
+ inner.className = "before";
+ var e = contents(inner);
+ e.className = "b";
+ hostL.appendChild(e);
+ var e = span("b");
+ e.className = "b";
+ hostL.appendChild(e);
+
+ hostR.appendChild(span("R"));
+
+ document.body.offsetHeight;
+ setTimeout(function() {
+ shadow("hostS");
+ shadow("hostT");
+ shadow("hostU");
+ shadow("hostV").innerHTML = '<z style="color:green"><content select="b"></content></z>';
+ shadow("hostW").innerHTML = '<z style="color:green"><content select="b"></content></z>';
+ shadow("hostX").innerHTML = '<z style="color:green"><content select="b"></content></z>';
+
+ document.body.offsetHeight;
+ document.documentElement.removeAttribute("class");
+ },0);
+ }
+
+ window.addEventListener("MozReftestInvalidate", tweak, false);
+ </script>
+ </body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-style-inheritance-1-dom-mutations.html b/layout/reftests/css-display/display-contents-style-inheritance-1-dom-mutations.html
new file mode 100644
index 000000000..20024b3d1
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-style-inheritance-1-dom-mutations.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-wait">
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: CSS display:contents; style inheritance, DOM mutations</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+body,span { color:black; background-color:white; }
+.test { display:contents; }
+.green { color:green; }
+.border { border-left:1px solid green; }
+b { border:inherit; font-weight:normal; }
+</style>
+<script>
+function $(id) { return document.getElementById(id); }
+function text(s) { return document.createTextNode(s); }
+function b(s) { var e = document.createElement('b'); e.appendChild(document.createTextNode(s)); return e; }
+function div(s) { var e = document.createElement('div'); e.setAttribute('class','test'); e.appendChild(document.createTextNode(s)); return e; }
+function runTest() {
+ document.body.offsetHeight;
+
+ var e = $('t1');
+ var c = e.firstChild;
+ e.insertBefore(text('g'), c);
+ e.insertBefore(text('r'), c);
+ e.appendChild(text('n'));
+
+ var e = $('t1b');
+ var c = e.firstChild;
+ e.insertBefore(text('g'), c);
+ e.insertBefore(text('r'), c);
+ e.appendChild(text('n'));
+
+ var e = $('t2');
+ var c = e.firstChild;
+ e.insertBefore(text('gr'), c);
+ e.appendChild(text('n'));
+
+ var e = $('t2b');
+ var c = e.firstChild;
+ e.insertBefore(text('gr'), c);
+ e.appendChild(text('n'));
+
+ var e = $('t3');
+ var c = e.firstChild;
+ e.insertBefore(text('n'), c);
+ e.insertBefore(text('o'), c);
+ e.appendChild(text('er'));
+
+ var e = $('t4');
+ var c = e.firstChild;
+ e.insertBefore(text('n'), c);
+ e.insertBefore(text('o'), c);
+ e.appendChild(text('er'));
+
+ var e = $('t5');
+ var c = e.firstChild;
+ e.insertBefore(b('1px green left '), c);
+ e.appendChild(text('er'));
+
+ var e = $('t6');
+ e.appendChild(b('2px green left border'));
+
+ var e = $('t7');
+ e.appendChild(div('green'));
+
+ var e = $('t8');
+ e.appendChild(div('green'));
+
+ var e = $('t9');
+ var c = b("1px green left border");
+ var d = div('');
+ d.appendChild(c);
+ e.appendChild(d);
+
+ var e = $('t10');
+ var c = b("1px green left border");
+ var d = div('');
+ d.setAttribute('style','border:inherit');
+ d.appendChild(c);
+ e.appendChild(d);
+
+ var e = $('t11');
+ var c = b("2px green left border");
+ var d = div('');
+ d.setAttribute('style','border:inherit');
+ d.appendChild(c);
+ e.appendChild(d);
+
+ var e = $('t12');
+ var c = e.firstChild;
+ e.insertBefore(text("This text"), c);
+ e.insertBefore(b(" should be"), c);
+ e.appendChild(text(" green"));
+
+ var e = $('t13');
+ e.className = 'test';
+
+ var e = $('t14');
+ e.removeAttribute('style')
+
+ var e = $('t15');
+ e.innerHTML=':scope{color:green}';
+ var e = $('t16');
+ e.innerHTML=':scope{color:inherit}';
+ var e = $('t17');
+ e.innerHTML=':scope{color:inherit}';
+ e.parentNode.appendChild(text("green"));
+
+ var e = $('t18');
+ var c = e.appendChild(div("green"));
+ document.body.offsetHeight;
+ document.styleSheets[8].cssRules[0].style.setProperty('color','green');
+ document.body.offsetHeight;
+
+ document.documentElement.className = '';
+}
+</script>
+</head>
+<body onload="runTest()">
+
+<span class="green"><div class="test" id="t1">ee</div></span>
+<span class="green"><div class="test" id="t1b">ee</div>x</span>
+<span><div class="test green" id="t2">ee</div></span>
+<span><div class="test green" id="t2b">ee</div>x</span>
+<br>
+<span><div class="test border" id="t3"> bord</div></span>
+<span><div class="test border" id="t4"><span> bord</span></div></span>
+<span class="border"><div class="test" id="t5">bord</div></span>
+<span class="border"><div class="test" style="border:inherit" id="t6"></div></span>
+<br>
+
+<span class="green"><div class="test" id="t7"></div></span>
+<span><div class="test green" id="t8"></div></span>
+<br>
+<span class="border"><div class="test" id="t9"></div></span>
+<span class="border"><div class="test" id="t10"></div></span>
+<span class="border"><div class="test" style="border:inherit" id="t11"></div></span>
+<br>
+
+<span style="color:red"><div class="test green" id="t12"></div></span>
+<span style="color:red"><span><style scoped>:scope{color:green}</style><di id="t13"v>green</div></span></span>
+<span style="color:red"><span class="test"><style scoped>:scope{color:green}</style><div id="t14" class="test" style="color:red">green</div></span></span>
+<span style="color:red"><div class="test"><style id="t15" scoped></style>green</div></span>
+<span style="color:red"><div class="test"><style scoped>:scope{color:green}</style>
+ <div class="test"><style scoped id="t16"></style>green</div>
+ <div class="test"><style scoped id="t17"></style></div></div></span>
+<span style="color:red"><div class="test"><style scoped>:scope{color:red}</style>
+ <div class="test" id="t18"><style scoped>:scope{color:red}</style></div></div></span>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-style-inheritance-1-ref.html b/layout/reftests/css-display/display-contents-style-inheritance-1-ref.html
new file mode 100644
index 000000000..56b5fbbd5
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-style-inheritance-1-ref.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: CSS display:contents; style inheritance</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+<style type="text/css">
+body,span { color:black; background-color:white; }
+.test { display:inline; }
+.green { color:green; }
+.border { border-left:1px solid green; }
+b { font-weight:normal; }
+</style>
+</head>
+<body>
+<span class="green"><div class="test">green</div></span>
+<span class="green"><div class="test">green</div>x</span>
+<span><div class="test green">green</div></span>
+<span><div class="test green">green</div>x</span>
+<br>
+<span><div class="test">no border</div></span>
+<span><div class="test">no border</div></span>
+<span class="border"><div class="test"><b>1px green left border</b></div></span>
+<span class="border"><div class="test" style="border:inherit"><b>2px green left border</b></div></span>
+<br>
+
+<span class="green"><div class="test"><div class="test">green</div></div></span>
+<span><div class="test green"><div class="test">green</div></div></span>
+<br>
+<span class="border"><div class="test"><div class="test"><b>1px green left border</b></div></div></span>
+<span class="border"><div class="test"><div class="test" style="border:inherit"><b>1px green left border</b></div></div></span>
+<span class="border"><div class="test" style="border:inherit"><div class="test"><b>2px green left border</b></div></div></span>
+<br>
+
+<span><div class="green">This text should be green green green green greengreen green</div></span>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-style-inheritance-1-stylechange.html b/layout/reftests/css-display/display-contents-style-inheritance-1-stylechange.html
new file mode 100644
index 000000000..058db87d5
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-style-inheritance-1-stylechange.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-wait">
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: CSS display:contents; style inheritance, style changes</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+body,span { color:black; background-color:white; }
+.test { display:contents; border:10px solid black; }
+.test2 { display:contents; border-style:none; }
+.test3:not(:lang(foo)) { display:contents; color:cyan; }
+#t18:lang(foo) { display:contents; color:red; }
+.green { color:green; }
+.border { border-left:1px solid green; }
+b { border:inherit; font-weight:normal; }
+</style>
+<script>
+function runTest() {
+ var elms = document.querySelectorAll('.test')
+ for (i=0; i < elms.length; ++i) {
+ elms[i].classList.remove('test');
+ elms[i].classList.add('test2');
+ }
+ document.body.lang = 'foo';
+ document.body.offsetWidth;
+
+ document.documentElement.className = '';
+}
+</script>
+</head>
+<body onload="setTimeout(runTest,0)">
+<span class="green"><div class="test">green</div></span>
+<span class="green"><div class="test">green</div>x</span>
+<span><div class="test green">green</div></span>
+<span><div class="test green">green</div>x</span>
+<br>
+<span><div class="test border">no border</div></span>
+<span><div class="test border"><span>no border</span></div></span>
+<span class="border"><div class="test"><b>1px green left border</b></div></span>
+<span class="border"><div class="test" style="border:inherit"><b>2px green left border</b></div></span>
+<br>
+
+<span class="green"><div class="test"><div class="test">green</div></div></span>
+<span><div class="test green"><div class="test">green</div></div></span>
+<br>
+<span class="border"><div class="test"><div class="test"><b>1px green left border</b></div></div></span>
+<span class="border"><div class="test"><div class="test" style="border:inherit"><b>1px green left border</b></div></div></span>
+<span class="border"><div class="test" style="border:inherit"><div class="test" style="border:inherit"><b>2px green left border</b></div></div></span>
+<br>
+
+<span style="color:red"><span class="test3 green">This text should be green</span></span>
+<span style="color:red"><span><style scoped>:scope{color:green}</style><div class="test">green</div></span></span>
+<span style="color:red"><span class="test"><style scoped>:scope{color:green}</style><div class="test">green</div></span></span>
+<span style="color:red"><div class="test"><style scoped>:scope{color:green}</style>green</div></span>
+<span style="color:red"><div class="test"><style scoped>:scope{color:red}</style>
+ <div class="test"><style scoped>:scope{color:green}</style>green</div>
+ <div class="test"><style scoped>:scope{color:green}</style>green</div></div></span>
+<span style="color:red"><div class="test"><style scoped>:scope{color:green}</style><div class="test">
+ <div id="t18" class="test"><style scoped>:scope{color:inherit}</style>green</div></div></div></span>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-style-inheritance-1.html b/layout/reftests/css-display/display-contents-style-inheritance-1.html
new file mode 100644
index 000000000..c4796a769
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-style-inheritance-1.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: CSS display:contents; style inheritance</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+body,span { color:black; background-color:white; }
+.test { display:contents; }
+.green { color:green; }
+.border { border-left:1px solid green; }
+b { border:inherit; font-weight:normal; }
+</style>
+</head>
+<body>
+<span class="green"><div class="test">green</div></span>
+<span class="green"><div class="test">green</div>x</span>
+<span><div class="test green">green</div></span>
+<span><div class="test green">green</div>x</span>
+<br>
+<span><div class="test border">no border</div></span>
+<span><div class="test border"><span>no border</span></div></span>
+<span class="border"><div class="test"><b>1px green left border</b></div></span>
+<span class="border"><div class="test" style="border:inherit"><b>2px green left border</b></div></span>
+<br>
+
+<span class="green"><div class="test"><div class="test">green</div></div></span>
+<span><div class="test green"><div class="test">green</div></div></span>
+<br>
+<span class="border"><div class="test"><div class="test"><b>1px green left border</b></div></div></span>
+<span class="border"><div class="test"><div class="test" style="border:inherit"><b>1px green left border</b></div></div></span>
+<span class="border"><div class="test" style="border:inherit"><div class="test" style="border:inherit"><b>2px green left border</b></div></div></span>
+<br>
+
+<span style="color:red"><div class="test green">This text should be green</div></span>
+<span style="color:red"><span><style scoped>:scope{color:green}</style><div class="test">green</div></span></span>
+<span style="color:red"><span class="test"><style scoped>:scope{color:green}</style><div class="test">green</div></span></span>
+<span style="color:red"><div class="test"><style scoped>:scope{color:green}</style>green</div></span>
+<span style="color:red"><div class="test"><style scoped>:scope{color:red}</style>
+ <div class="test"><style scoped>:scope{color:green}</style>green</div>
+ <div class="test"><style scoped>:scope{color:green}</style>green</div></div></span>
+<span style="color:red"><div class="test"><style scoped>:scope{color:red}</style><div class="test"><style scoped>:scope{color:red}</style>
+ <div class="test"><style scoped>:scope{color:green}</style>green</div></div></div></span>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-tables-2.xhtml b/layout/reftests/css-display/display-contents-tables-2.xhtml
new file mode 100644
index 000000000..d301f5900
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-tables-2.xhtml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
+<head>
+ <title>CSS Test: CSS display:contents; tables</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
+ <link rel="help" href="http://dev.w3.org/csswg/css-display"/>
+<style type="text/css">
+html { color:red; background-color:white; }
+body { color:white; background-color:pink; width:0; }
+.test { display:contents; color:white; background-color:lime; }
+td { background-color:inherit; }
+</style>
+</head>
+<body><div class="test"><td>green</td></div><td>pink</td></body></html>
diff --git a/layout/reftests/css-display/display-contents-tables-3-ref.xhtml b/layout/reftests/css-display/display-contents-tables-3-ref.xhtml
new file mode 100644
index 000000000..15fae7e19
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-tables-3-ref.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
+<head>
+ <title>CSS Test: CSS display:contents; tables</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
+<style type="text/css">
+body { color:red; background-color:white; }
+.test { float:left; color:white; background-color:lime; }
+td { background-color:inherit; }
+</style>
+</head>
+<body><div class="test"><td>green</td></div></body></html>
diff --git a/layout/reftests/css-display/display-contents-tables-3.xhtml b/layout/reftests/css-display/display-contents-tables-3.xhtml
new file mode 100644
index 000000000..f86490805
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-tables-3.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
+<head>
+ <title>CSS Test: CSS display:contents; tables</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
+ <link rel="help" href="http://dev.w3.org/csswg/css-display"/>
+<style type="text/css">
+body { color:red; background-color:white; }
+.test { display:contents; color:white; background-color:lime; }
+td { background-color:inherit; }
+</style>
+</head>
+<body><div class="test"><td>green</td></div></body></html>
diff --git a/layout/reftests/css-display/display-contents-tables-ref.xhtml b/layout/reftests/css-display/display-contents-tables-ref.xhtml
new file mode 100644
index 000000000..223b33fea
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-tables-ref.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
+<head>
+ <title>CSS Test: CSS display:contents; tables</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
+<style type="text/css">
+body { color:red; background-color:white; }
+td { color:white; background-color:lime; }
+.pink { background-color:pink; }
+</style>
+</head>
+<body><td>green</td><td class="pink">pink</td></body></html>
diff --git a/layout/reftests/css-display/display-contents-tables.xhtml b/layout/reftests/css-display/display-contents-tables.xhtml
new file mode 100644
index 000000000..ce2aa774e
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-tables.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
+<head>
+ <title>CSS Test: CSS display:contents; tables</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
+ <link rel="help" href="http://dev.w3.org/csswg/css-display"/>
+<style type="text/css">
+body { color:red; background-color:white; }
+.test { display:contents; color:white; background-color:lime; }
+td { background-color:inherit; }
+</style>
+</head>
+<body><div class="test"><td>green</td></div><div class="test" style="background-color:pink"><td>pink</td></div></body></html>
diff --git a/layout/reftests/css-display/display-contents-visibility-hidden-2.html b/layout/reftests/css-display/display-contents-visibility-hidden-2.html
new file mode 100644
index 000000000..6ba1afdd2
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-visibility-hidden-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-wait">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents; visibility:hidden</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+</head>
+<body style="color: red">
+ <div id="x" style="display:contents; visibility: hidden; color: green">
+ Line 1
+ </div><script type="text/javascript">
+ document.body.offsetWidth;
+ document.getElementById("x").style.visibility = "visible";
+ document.body.offsetWidth;
+
+ document.documentElement.className = '';
+ </script>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-visibility-hidden-ref.html b/layout/reftests/css-display/display-contents-visibility-hidden-ref.html
new file mode 100644
index 000000000..0c8e1b786
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-visibility-hidden-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents; visibility:hidden</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+</head>
+<body>
+ <div id="x" style="color:green">
+ Line 1
+ </div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-visibility-hidden.html b/layout/reftests/css-display/display-contents-visibility-hidden.html
new file mode 100644
index 000000000..57d6fe3c1
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-visibility-hidden.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-wait">
+<head>
+ <meta charset="UTF-8">
+ <title>CSS Test: CSS display:contents; visibility:hidden</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+</head>
+<body>
+ <div id="x" style="display:contents; visibility: hidden">
+ Line 1
+ </div><script type="text/javascript">
+ document.body.offsetWidth;
+ document.getElementById("x").style.visibility = "visible";
+ document.body.style.color = "green";
+ document.body.offsetWidth;
+
+ document.documentElement.className = '';
+ </script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-writing-mode-1-ref.html b/layout/reftests/css-display/display-contents-writing-mode-1-ref.html
new file mode 100644
index 000000000..00ede6bd0
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-writing-mode-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head><meta charset="UTF-8">
+ <title>Reference: display:contents with orthogonal writing-mode</title>
+ <style type="text/css">
+
+div { display:inline-block; }
+
+span {
+ width: 0;
+ border: 1px solid;
+}
+
+ </style>
+</head>
+<body>
+<div style="display:inline-block"><span>a b c</span></div>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-writing-mode-1.html b/layout/reftests/css-display/display-contents-writing-mode-1.html
new file mode 100644
index 000000000..781acfa99
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-writing-mode-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head><meta charset="UTF-8">
+ <title>CSS Test: display:contents with orthogonal writing-mode</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1258147">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+ <link rel="match" href="display-contents-writing-mode-1-ref.html">
+ <style type="text/css">
+
+body {
+ writing-mode: horizontal-tb;
+}
+
+div {
+ display: contents;
+ writing-mode: vertical-lr;
+}
+
+span {
+ width: 0;
+ border: 1px solid;
+}
+
+ </style>
+</head>
+<body>
+<div><span style="writing-mode:horizontal-tb">a b c</span></div>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-writing-mode-2-ref.html b/layout/reftests/css-display/display-contents-writing-mode-2-ref.html
new file mode 100644
index 000000000..f0f0690ed
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-writing-mode-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head><meta charset="UTF-8">
+ <title>Reference: display:contents with orthogonal writing-mode</title>
+ <style type="text/css">
+
+span {
+ display: inline-block;
+ writing-mode: vertical-lr;
+ width: 0;
+ border: 1px solid;
+}
+
+ </style>
+</head>
+<body>
+<span>a b c</span>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-writing-mode-2.html b/layout/reftests/css-display/display-contents-writing-mode-2.html
new file mode 100644
index 000000000..03bde8b76
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-writing-mode-2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head><meta charset="UTF-8">
+ <title>CSS Test: display:contents with orthogonal writing-mode</title>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1258147">
+ <link rel="help" href="http://dev.w3.org/csswg/css-display">
+ <link rel="match" href="display-contents-writing-mode-2-ref.html">
+ <style type="text/css">
+
+body {
+ writing-mode: horizontal-tb;
+}
+
+div {
+ display: contents;
+ writing-mode: vertical-lr;
+}
+
+span {
+ width: 0;
+ border: 1px solid;
+}
+
+ </style>
+</head>
+<body>
+<div><span>a b c</span></div>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-xbl-2-ref.xul b/layout/reftests/css-display/display-contents-xbl-2-ref.xul
new file mode 100644
index 000000000..6d6e627b5
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-xbl-2-ref.xul
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window onload="document.documentElement.removeChild(document.getElementById('b'));"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:xbl="http://www.mozilla.org/xbl"
+>
+
+<bindings xmlns="http://www.mozilla.org/xbl" id="b">
+ <binding id="mylistitem"><content><children><x>GREEN AGAIN</x></children></content></binding>
+
+ <binding id="foo">
+ <content id="c" style="color:red"><xul:mylistitem id="i" style="-moz-binding: url(#mylistitem); color:green; border:1px solid; display:contents" ><xbl:children style="color:red;" /></xul:mylistitem></content>
+ </binding>
+</bindings>
+
+<span id="l" style="-moz-binding: url(#foo); color:red"></span>
+<span></span>
+
+</window>
diff --git a/layout/reftests/css-display/display-contents-xbl-2.xul b/layout/reftests/css-display/display-contents-xbl-2.xul
new file mode 100644
index 000000000..3ca732f1e
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-xbl-2.xul
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window onload="
+ document.documentElement.removeChild(document.getElementById('b'));
+ setTimeout(function(){
+ l = document.getElementById('l');
+ x = document.getElementById('x');
+ l.removeChild(x);
+ document.documentElement.appendChild(document.createElementNS('http://www.w3.org/1999/xhtml', 'span'));
+ }, 0);
+
+"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:xbl="http://www.mozilla.org/xbl"
+>
+
+<bindings xmlns="http://www.mozilla.org/xbl" id="b">
+ <binding id="mylistitem"><content><children><x>GREEN AGAIN</x></children></content></binding>
+
+ <binding id="foo">
+ <content id="c" style="color:red"><xul:mylistitem id="i" style="-moz-binding: url(#mylistitem); color:green; border:1px solid; display:contents" ><xbl:children style="color:red;" /></xul:mylistitem></content>
+ </binding>
+</bindings>
+
+<span id="l" style="-moz-binding: url(#foo); color:red"><hbox id="x">GREEN</hbox></span>
+
+
+</window>
diff --git a/layout/reftests/css-display/display-contents-xbl-3-ref.xul b/layout/reftests/css-display/display-contents-xbl-3-ref.xul
new file mode 100644
index 000000000..d33175ff5
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-xbl-3-ref.xul
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window onload="document.documentElement.removeChild(document.getElementById('b'));"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:xbl="http://www.mozilla.org/xbl"
+>
+
+<bindings xmlns="http://www.mozilla.org/xbl" id="b">
+ <binding id="mylistitem"><content style="color:red"><children style="color:red;"><html:span id="x" style="border:inherit">X</html:span></children></content></binding>
+
+ <binding id="foo">
+ <content id="c" style="color:red;"><xul:mylistitem id="i" style="-moz-binding: url(#mylistitem); color:green; border:solid; display:contents" ><xbl:children style="color:red;"/></xul:mylistitem></content>
+ </binding>
+</bindings>
+
+<b id="l" style="-moz-binding: url(#foo); color:red; "></b>
+
+
+</window>
diff --git a/layout/reftests/css-display/display-contents-xbl-3.xul b/layout/reftests/css-display/display-contents-xbl-3.xul
new file mode 100644
index 000000000..a5f50edbd
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-xbl-3.xul
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window onload="
+ document.documentElement.removeChild(document.getElementById('b'));
+ setTimeout(function(){
+ x = document.getElementById('x');
+ c = x.parentNode;
+ c.removeChild(x);
+ c.appendChild(x);
+ }, 0);
+
+"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:xbl="http://www.mozilla.org/xbl"
+>
+
+<bindings xmlns="http://www.mozilla.org/xbl" id="b">
+ <binding id="mylistitem"><content style="color:red"><children style="color:red;"><html:span id="x" style="border:inherit">X</html:span></children></content></binding>
+
+ <binding id="foo">
+ <content id="c" style="color:red;"><xul:mylistitem id="i" style="-moz-binding: url(#mylistitem); color:green; border:solid; display:contents" ><xbl:children style="color:red;"/></xul:mylistitem></content>
+ </binding>
+</bindings>
+
+<b id="l" style="-moz-binding: url(#foo); color:red; "></b>
+
+
+</window>
diff --git a/layout/reftests/css-display/display-contents-xbl-4-ref.xul b/layout/reftests/css-display/display-contents-xbl-4-ref.xul
new file mode 100644
index 000000000..3860c9d3b
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-xbl-4-ref.xul
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window onload="document.documentElement.removeChild(document.getElementById('b'));"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:xbl="http://www.mozilla.org/xbl"
+>
+
+<bindings xmlns="http://www.mozilla.org/xbl" id="b">
+ <binding id="mylistitem"><content style="color:red">Y<html:z style="color:blue; font-weight:bold; font-size:48px; display:contents">Z<children><html:span id="x">X</html:span></children></html:z></content></binding>
+
+ <binding id="foo">
+ <content id="c" style="color:red"><xul:mylistitem id="i" style="-moz-binding: url(#mylistitem); color:green; border:solid;" ><xbl:children style="color:red"/></xul:mylistitem></content>
+ </binding>
+</bindings>
+
+<span id="l" style="-moz-binding: url(#foo); color:pink"></span>
+
+
+</window>
diff --git a/layout/reftests/css-display/display-contents-xbl-4.xul b/layout/reftests/css-display/display-contents-xbl-4.xul
new file mode 100644
index 000000000..2368e2ccd
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-xbl-4.xul
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window onload="
+ document.documentElement.removeChild(document.getElementById('b'));
+ setTimeout(function(){
+ x = document.getElementById('x');
+ c = x.parentNode;
+ c.removeChild(x);
+ c.appendChild(x);
+ }, 0);
+
+"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:xbl="http://www.mozilla.org/xbl"
+>
+
+<bindings xmlns="http://www.mozilla.org/xbl" id="b">
+ <binding id="mylistitem"><content style="color:red">Y<html:z style="color:blue; font-weight:bold; font-size:48px; display:contents">Z<children><html:span id="x">X</html:span></children></html:z></content></binding>
+
+ <binding id="foo">
+ <content id="c" style="color:red"><xul:mylistitem id="i" style="-moz-binding: url(#mylistitem); color:green; border:solid;" ><xbl:children style="color:red"/></xul:mylistitem></content>
+ </binding>
+</bindings>
+
+<span id="l" style="-moz-binding: url(#foo); color:pink"></span>
+
+
+</window>
diff --git a/layout/reftests/css-display/display-contents-xbl-5.xul b/layout/reftests/css-display/display-contents-xbl-5.xul
new file mode 100644
index 000000000..c2bebc365
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-xbl-5.xul
@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+
+<window onload="
+ document.documentElement.removeChild(document.getElementById('b'));
+ setTimeout(function(){
+ x = document.getElementById('x');
+ c = x.parentNode;
+ c.removeChild(x);
+ c.appendChild(x);
+ }, 0);
+
+"
+ xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:html="http://www.w3.org/1999/xhtml"
+ xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+ xmlns:xbl="http://www.mozilla.org/xbl"
+>
+
+<bindings xmlns="http://www.mozilla.org/xbl" id="b">
+ <binding id="mylistitem"><content style="color:red"><html:span style="border:solid;color:green;display:contents"><children style="color:red;"><html:span id="x" style="border:inherit">X</html:span></children></html:span></content></binding>
+
+ <binding id="foo">
+ <content id="c" style="color:red;"><xul:mylistitem id="i" style="-moz-binding: url(#mylistitem); color:red; border:dashed; display:contents" ><xbl:children style="color:red;"/></xul:mylistitem></content>
+ </binding>
+</bindings>
+
+<b id="l" style="-moz-binding: url(#foo); color:red; "></b>
+
+
+</window>
diff --git a/layout/reftests/css-display/display-contents-xbl-ref.html b/layout/reftests/css-display/display-contents-xbl-ref.html
new file mode 100644
index 000000000..c851231bc
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-xbl-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<body>
+<div>a <span style="color:blue">b</span> c</div>
+<div style="color:blue">a <span>b</span> c</div>
+<div>a <span style="color:blue">b</span> cd</div>
+<div>a <span style="color:blue">b</span> c</div>
+<div>a <span style="color:blue">b</span> c</div>
+<div><b>One</b><i>Two</i></div>
+<div><b>One</b><i>Two</i></div>
+<div><b>One</b><i>Two</i></div>
+<div><b>Oneb</b><i>Two</i></div>
+<div><b>Oneb</b><i>Two</i></div>
+<div><b>Oneb</b><i>Two</i></div>
+<div><b>One</b><i>Twoi</i></div>
+<div><b>One</b><i>Twoi</i></div>
+<div><b>One</b><i>Twoi</i></div>
+<div><b>bOne</b><i>Two</i></div>
+<div><b>bOne</b><i>Two</i></div>
+<div><b>bOne</b><i>Two</i></div>
+<div><b>One</b><i>iTwo</i></div>
+<div><b>One</b><i>iTwo</i></div>
+<div><b>One</b><i>iTwo</i></div>
+<div style="color:green">a <b style="color:blue">I</b> c</div>
+<div style="color:green">a <b style="color:blue">J</b> c</div>
+<div style="color:blue">a <b>K</b> c</div>
+<div style="color:blue"><b>L1</b><span style="color:green">2</span></div>
+<div style="color:blue"><b>M1</b><span style="color:green">2</span></div>
+<span style="color:green">a <b style="color:blue">O</b> c</span>
+<span style="color:blue">a <b>P</b> c</span>
+<span style="color:blue"><b>Q1</b><span style="color:green">2</span></span>
+<span style="color:blue"><b>R1</b><span style="color:green">2</span></span>
+<span>a <span style="color:blue">b</span> c</span>
+<span style="color:blue">a <span>b</span> c</span>
+<span>a <span style="color:blue">b</span> cd</span>
+<span>a <span style="color:blue">b</span> c</span>
+<span>a <span style="color:blue">b</span> c</span>
+<span><b>One</b><i>Two</i></span>
+<span><b>One</b><i>Two</i></span>
+<span><b>One</b><i>Two</i></span>
+<span><b>Oneb</b><i>Two</i></span>
+<span><b>Oneb</b><i>Two</i></span>
+<span><b>Oneb</b><i>Two</i></span>
+<span><b>One</b><i>Twoi</i></span>
+<span><b>One</b><i>Twoi</i></span>
+<span><b>One</b><i>Twoi</i></span>
+<span><b>bOne</b><i>Two</i></span>
+<span><b>bOne</b><i>Two</i></span>
+<span><b>bOne</b><i>Two</i></span>
+<span><b>One</b><i>iTwo</i></span>
+<span><b>One</b><i>iTwo</i></span>
+<span><b>One</b><i>iTwo</i></span>
+<div><b>a <span style="color:blue">One</span> c</b><i>i</i><i>a<span style="color:blue">Two</span>c</i></div>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-xbl.xhtml b/layout/reftests/css-display/display-contents-xbl.xhtml
new file mode 100644
index 000000000..c7f1b24dd
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-xbl.xhtml
@@ -0,0 +1,272 @@
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<head>
+ <title>CSS Test: CSS display:contents in XBL</title>
+ <link rel="author" title="William Chen" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1040291"/>
+ <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
+ <link rel="help" href="http://dev.w3.org/csswg/css-display"/>
+
+<style>
+.c { display:contents; }
+</style>
+<bindings xmlns="http://www.mozilla.org/xbl"
+ xmlns:xhtml="http://www.w3.org/1999/xhtml">
+ <binding id="a">
+ <content>
+ <style xmlns="http://www.w3.org/1999/xhtml">
+ .a {
+ display: contents;
+ color: blue;
+ }
+ </style>
+ <xhtml:span>a</xhtml:span>
+ <xhtml:span class="a">
+ <children></children>
+ </xhtml:span>
+ <xhtml:span>c</xhtml:span>
+ </content>
+ </binding>
+
+ <binding id="b">
+ <content>
+ <style xmlns="http://www.w3.org/1999/xhtml">
+ .b {
+ display: contents;
+ color: blue;
+ }
+ .b::after {
+ content: 'c';
+ }
+ </style>
+ <xhtml:span class="b">
+ a <children></children>
+ </xhtml:span>
+ </content>
+ </binding>
+
+ <binding id="c">
+ <content>
+ <xhtml:span>a</xhtml:span>
+ <xhtml:span style="color:blue"> <children></children> </xhtml:span>
+ <xhtml:span>c</xhtml:span>
+ </content>
+ </binding>
+
+ <binding id="d">
+ <content>
+ <style xmlns="http://www.w3.org/1999/xhtml">
+ .d {
+ display: contents;
+ color: blue;
+ }
+ #d1::after { content: "a"; }
+ #d2::before { content: "c"; }
+ </style>
+ <xhtml:span id="d1"></xhtml:span>
+ <xhtml:span class="d">
+ <children></children>
+ </xhtml:span>
+ <xhtml:span id="d2"></xhtml:span>
+ </content>
+ </binding>
+
+ <binding id="e">
+ <content>
+ <style xmlns="http://www.w3.org/1999/xhtml">
+ .e {
+ display: contents;
+ color: blue;
+ }
+ .e::before {
+ content: 'a';
+ color: black;
+ }
+ </style>
+ <xhtml:span class="e">
+ <children></children> <xhtml:span style="color:black">c</xhtml:span>
+ </xhtml:span>
+ </content>
+ </binding>
+
+ <binding id="f">
+ <content><children includes="b"/><children includes="i"/></content>
+ </binding>
+
+ <binding id="g">
+ <content>
+ <style xmlns="http://www.w3.org/1999/xhtml">
+ .a {
+ display: contents;
+ color: blue;
+ }
+ </style>
+ <xhtml:span class="a"><children includes="b"></children></xhtml:span>
+ <xhtml:span class="a" style="color:green"><children includes="c"></children></xhtml:span>
+ </content>
+ </binding>
+</bindings>
+</head>
+<body>
+<div id="host1" style="-moz-binding: url(#a);"></div>
+<div id="host2" style="-moz-binding: url(#b);"></div>
+<div id="host3" style="-moz-binding: url(#c); display: contents;"></div>d
+<div id="host4" style="-moz-binding: url(#d);"></div>
+<div id="host5" style="-moz-binding: url(#e);"></div>
+<div style="-moz-binding: url(#f)"><i>Two</i><b>One</b></div>
+<div style="-moz-binding: url(#f)"><i style="display: contents;">Two</i><b>One</b></div>
+<div style="-moz-binding: url(#f)"><i>Two</i><b style="display: contents;">One</b></div>
+<div id="host6" style="-moz-binding: url(#f)"><i>Two</i><b>One</b></div>
+<div id="host7" style="-moz-binding: url(#f)"><i style="display: contents;">Two</i><b>One</b></div>
+<div id="host8" style="-moz-binding: url(#f)"><i>Two</i><b style="display: contents;">One</b></div>
+<div id="host9" style="-moz-binding: url(#f)"><i>Two</i><b>One</b></div>
+<div id="hostA" style="-moz-binding: url(#f)"><i style="display: contents;">Two</i><b>One</b></div>
+<div id="hostB" style="-moz-binding: url(#f)"><i>Two</i><b style="display: contents;">One</b></div>
+<div id="hostC" style="-moz-binding: url(#f)"><i>Two</i><b>One</b></div>
+<div id="hostD" style="-moz-binding: url(#f)"><i style="display: contents;">Two</i><b>One</b></div>
+<div id="hostE" style="-moz-binding: url(#f)"><i>Two</i><b style="display: contents;">One</b></div>
+<div id="hostF" style="-moz-binding: url(#f)"><i>Two</i><b>One</b></div>
+<div id="hostG" style="-moz-binding: url(#f)"><i style="display: contents;">Two</i><b>One</b></div>
+<div id="hostH" style="-moz-binding: url(#f)"><i>Two</i><b style="display: contents;">One</b></div>
+<div id="hostI" style="color:green"><b style="display:contents">I</b></div>
+<div id="hostJ" style="-moz-binding:url(#a); color:green"><b>J</b></div>
+<div id="hostK" style="-moz-binding:url(#b); color:red"><b>K</b></div>
+<div id="hostL" style="color:red"><c>2</c><b style="display:contents">L1</b></div>
+<div id="hostM" style="-moz-binding:url(#g); color:red"><c>2</c><b style="display:contents">M1</b></div>
+<div id="hostO" class="c" style="-moz-binding:url(#a); color:green"><b>O</b></div>
+<div id="hostP" class="c" style="-moz-binding:url(#b); color:red"><b>P</b></div>
+<div id="hostQ" class="c" style="color:red"><c>2</c><b style="display:contents">Q1</b></div>
+<div id="hostR" class="c" style="-moz-binding:url(#g); color:red"><c>2</c><b style="display:contents">R1</b></div>
+<div id="hostS" style="-moz-binding: url(#a);"></div>
+<div id="hostT" style="-moz-binding: url(#b);"></div>
+<div id="hostU" style="-moz-binding: url(#c); display: contents;"></div>d
+<div id="hostV" style="-moz-binding: url(#d);"></div>
+<div id="hostW" style="-moz-binding: url(#e);"></div>
+<div class="c" style="-moz-binding: url(#f)"><i>Two</i><b>One</b></div>
+<div class="c" style="-moz-binding: url(#f)"><i style="display: contents;">Two</i><b>One</b></div>
+<div class="c" style="-moz-binding: url(#f)"><i>Two</i><b style="display: contents;">One</b></div>
+<div id="hostX" style="-moz-binding: url(#f)"><i>Two</i><b>One</b></div>
+<div id="hostY" style="-moz-binding: url(#f)"><i style="display: contents;">Two</i><b>One</b></div>
+<div id="hostZ" style="-moz-binding: url(#f)"><i>Two</i><b style="display: contents;">One</b></div>
+<div id="hosta" style="-moz-binding: url(#f)"><i>Two</i><b>One</b></div>
+<div id="hostb" style="-moz-binding: url(#f)"><i style="display: contents;">Two</i><b>One</b></div>
+<div id="hostc" style="-moz-binding: url(#f)"><i>Two</i><b style="display: contents;">One</b></div>
+<div id="hostd" style="-moz-binding: url(#f)"><i>Two</i><b>One</b></div>
+<div id="hoste" style="-moz-binding: url(#f)"><i style="display: contents;">Two</i><b>One</b></div>
+<div id="hostf" style="-moz-binding: url(#f)"><i>Two</i><b style="display: contents;">One</b></div>
+<div id="hostg" style="-moz-binding: url(#f)"><i>Two</i><b>One</b></div>
+<div id="hosth" style="-moz-binding: url(#f)"><i style="display: contents;">Two</i><b>One</b></div>
+<div id="hosti" style="-moz-binding: url(#f)"><i>Two</i><b style="display: contents;">One</b></div>
+<div id="hostj" style="-moz-binding: url(#f)"><i>Two</i><b style="display: contents;">One</b></div>
+
+<script>
+
+function tweak() {
+ document.body.offsetHeight;
+
+ function span(s) {
+ var elm = document.createElement("span");
+ elm.textContent = s;
+ return elm;
+ }
+ function elem(tag) {
+ var elm = document.createElement(tag);
+ elm.textContent = tag;
+ return elm;
+ }
+
+ // Span should be distributed to the xbl:children insertion point between 'a' and 'c'.
+ host1.appendChild(span("b"));
+
+ var elm = span("b");
+ elm.style.display = "contents";
+ elm.style.color = "blue";
+ host2.appendChild(elm);
+
+ host3.appendChild(span("b"));
+ host4.appendChild(span("b"));
+ host5.appendChild(span("b"));
+
+ host6.appendChild(elem("b"));
+ host7.appendChild(elem("b"));
+ host8.appendChild(elem("b"));
+
+ host9.appendChild(elem("i"));
+ hostA.appendChild(elem("i"));
+ hostB.appendChild(elem("i"));
+
+ hostC.insertBefore(elem("b"), hostC.firstChild);
+ hostD.insertBefore(elem("b"), hostD.firstChild);
+ hostE.insertBefore(elem("b"), hostE.firstChild);
+
+ hostF.insertBefore(elem("i"), hostF.firstChild);
+ hostG.insertBefore(elem("i"), hostG.firstChild);
+ hostH.insertBefore(elem("i"), hostH.firstChild);
+
+ document.body.offsetHeight;
+ hostI.style.MozBinding='url(#a)';
+ hostL.style.MozBinding='url(#g)';
+ hostO.style.MozBinding='url(#a)';
+ hostQ.style.MozBinding='url(#g)';
+
+ hostS.className="c";
+ hostT.className="c";
+ hostU.className="c";
+ hostV.className="c";
+ hostW.className="c";
+ hostX.className="c";
+ hostY.className="c";
+ hostZ.className="c";
+ hosta.className="c";
+ hostb.className="c";
+ hostc.className="c";
+ hostd.className="c";
+ hoste.className="c";
+ hostf.className="c";
+ hostg.className="c";
+ hosth.className="c";
+ hosti.className="c";
+
+ hostS.appendChild(span("b"));
+
+ var elm = span("b");
+ elm.style.display = "contents";
+ elm.style.color = "blue";
+ hostT.appendChild(elm);
+
+ hostU.appendChild(span("b"));
+ hostV.appendChild(span("b"));
+ hostW.appendChild(span("b"));
+
+ hostX.appendChild(elem("b"));
+ hostY.appendChild(elem("b"));
+ hostZ.appendChild(elem("b"));
+
+ hosta.appendChild(elem("i"));
+ hostb.appendChild(elem("i"));
+ hostc.appendChild(elem("i"));
+
+ hostd.insertBefore(elem("b"), hostd.firstChild);
+ hoste.insertBefore(elem("b"), hoste.firstChild);
+ hostf.insertBefore(elem("b"), hostf.firstChild);
+
+ hostg.insertBefore(elem("i"), hostg.firstChild);
+ hosth.insertBefore(elem("i"), hosth.firstChild);
+ hosti.insertBefore(elem("i"), hosti.firstChild);
+
+ document.body.offsetHeight;
+ hostj.children[0].style.MozBinding='url(#a)';
+ hostj.children[1].style.MozBinding='url(#a)';
+ document.body.offsetHeight;
+ hostj.insertBefore(elem("i"), hostj.firstChild);
+
+ document.body.offsetHeight;
+ document.documentElement.removeAttribute("class");
+}
+
+window.addEventListener("MozReftestInvalidate", tweak);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/css-display/reftest-stylo.list b/layout/reftests/css-display/reftest-stylo.list
new file mode 100644
index 000000000..8f7e66498
--- /dev/null
+++ b/layout/reftests/css-display/reftest-stylo.list
@@ -0,0 +1,37 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Tests for CSS Display spec features.
+# http://dev.w3.org/csswg/css-display
+
+fuzzy-if(Android,8,604) pref(layout.css.display-contents.enabled,true) == display-contents-acid.html display-contents-acid.html
+random pref(layout.css.display-contents.enabled,true) == display-contents-acid-dyn-1.html display-contents-acid-dyn-1.html
+random pref(layout.css.display-contents.enabled,true) == display-contents-acid-dyn-2.html display-contents-acid-dyn-2.html
+random pref(layout.css.display-contents.enabled,true) == display-contents-acid-dyn-3.html display-contents-acid-dyn-3.html
+pref(layout.css.display-contents.enabled,true) == display-contents-generated-content.html display-contents-generated-content.html
+pref(layout.css.display-contents.enabled,true) == display-contents-generated-content-2.html display-contents-generated-content-2.html
+pref(layout.css.display-contents.enabled,true) == display-contents-style-inheritance-1.html display-contents-style-inheritance-1.html
+skip pref(layout.css.display-contents.enabled,true) == display-contents-style-inheritance-1-stylechange.html display-contents-style-inheritance-1-stylechange.html
+skip pref(layout.css.display-contents.enabled,true) fuzzy-if(winWidget,12,100) == display-contents-style-inheritance-1-dom-mutations.html display-contents-style-inheritance-1-dom-mutations.html
+pref(layout.css.display-contents.enabled,true) == display-contents-tables.xhtml display-contents-tables.xhtml
+pref(layout.css.display-contents.enabled,true) == display-contents-tables-2.xhtml display-contents-tables-2.xhtml
+pref(layout.css.display-contents.enabled,true) == display-contents-tables-3.xhtml display-contents-tables-3.xhtml
+pref(layout.css.display-contents.enabled,true) == display-contents-visibility-hidden.html display-contents-visibility-hidden.html
+pref(layout.css.display-contents.enabled,true) == display-contents-visibility-hidden-2.html display-contents-visibility-hidden-2.html
+random pref(layout.css.display-contents.enabled,true) == display-contents-495385-2d.html display-contents-495385-2d.html
+skip-if(B2G||Mulet) fuzzy-if(Android,7,3935) pref(layout.css.display-contents.enabled,true) == display-contents-xbl.xhtml display-contents-xbl.xhtml
+# Initial mulet triage: parity with B2G/B2G Desktop
+# fuzzy-if(Android,7,1186) pref(layout.css.display-contents.enabled,true) pref(dom.webcomponents.enabled,true) == display-contents-shadow-dom-1.html display-contents-shadow-dom-1.html
+skip-if(B2G||Mulet) pref(layout.css.display-contents.enabled,true) == display-contents-xbl-2.xul display-contents-xbl-2.xul
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) asserts(1) pref(layout.css.display-contents.enabled,true) == display-contents-xbl-3.xul display-contents-xbl-3.xul
+# bug 1089223
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip pref(layout.css.display-contents.enabled,true) == display-contents-xbl-4.xul display-contents-xbl-4.xul
+# fails (not just asserts) due to bug 1089223
+asserts(0-1) fuzzy-if(Android,8,3216) pref(layout.css.display-contents.enabled,true) == display-contents-fieldset.html display-contents-fieldset.html
+# bug 1089223
+skip-if(B2G||Mulet) asserts(1) pref(layout.css.display-contents.enabled,true) == display-contents-xbl-5.xul display-contents-xbl-5.xul
+# bug 1089223
+# Initial mulet triage: parity with B2G/B2G Desktop
+pref(layout.css.display-contents.enabled,true) == display-contents-list-item-child.html display-contents-list-item-child.html
+pref(layout.css.display-contents.enabled,true) == display-contents-writing-mode-1.html display-contents-writing-mode-1.html
+pref(layout.css.display-contents.enabled,true) == display-contents-writing-mode-2.html display-contents-writing-mode-2.html
diff --git a/layout/reftests/css-display/reftest.list b/layout/reftests/css-display/reftest.list
new file mode 100644
index 000000000..d310422bb
--- /dev/null
+++ b/layout/reftests/css-display/reftest.list
@@ -0,0 +1,28 @@
+# Tests for CSS Display spec features.
+# http://dev.w3.org/csswg/css-display
+
+fuzzy-if(Android,8,604) pref(layout.css.display-contents.enabled,true) == display-contents-acid.html display-contents-acid-ref.html
+fuzzy-if(Android,8,604) pref(layout.css.display-contents.enabled,true) == display-contents-acid-dyn-1.html display-contents-acid-ref.html
+fuzzy-if(Android,8,604) pref(layout.css.display-contents.enabled,true) == display-contents-acid-dyn-2.html display-contents-acid-ref.html
+fuzzy-if(Android,8,604) pref(layout.css.display-contents.enabled,true) == display-contents-acid-dyn-3.html display-contents-acid-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-generated-content.html display-contents-generated-content-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-generated-content-2.html display-contents-generated-content-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-style-inheritance-1.html display-contents-style-inheritance-1-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-style-inheritance-1-stylechange.html display-contents-style-inheritance-1-ref.html
+pref(layout.css.display-contents.enabled,true) fuzzy-if(winWidget,12,100) == display-contents-style-inheritance-1-dom-mutations.html display-contents-style-inheritance-1-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-tables.xhtml display-contents-tables-ref.xhtml
+pref(layout.css.display-contents.enabled,true) == display-contents-tables-2.xhtml display-contents-tables-ref.xhtml
+pref(layout.css.display-contents.enabled,true) == display-contents-tables-3.xhtml display-contents-tables-3-ref.xhtml
+pref(layout.css.display-contents.enabled,true) == display-contents-visibility-hidden.html display-contents-visibility-hidden-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-visibility-hidden-2.html display-contents-visibility-hidden-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-495385-2d.html display-contents-495385-2d-ref.html
+fuzzy-if(Android,7,3935) pref(layout.css.display-contents.enabled,true) == display-contents-xbl.xhtml display-contents-xbl-ref.html
+fuzzy-if(Android,7,1186) pref(layout.css.display-contents.enabled,true) pref(dom.webcomponents.enabled,true) == display-contents-shadow-dom-1.html display-contents-shadow-dom-1-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-xbl-2.xul display-contents-xbl-2-ref.xul
+asserts(1) pref(layout.css.display-contents.enabled,true) == display-contents-xbl-3.xul display-contents-xbl-3-ref.xul # bug 1089223
+skip pref(layout.css.display-contents.enabled,true) == display-contents-xbl-4.xul display-contents-xbl-4-ref.xul # fails (not just asserts) due to bug 1089223
+asserts(0-1) fuzzy-if(Android,8,3216) pref(layout.css.display-contents.enabled,true) == display-contents-fieldset.html display-contents-fieldset-ref.html # bug 1089223
+asserts(1) pref(layout.css.display-contents.enabled,true) == display-contents-xbl-5.xul display-contents-xbl-3-ref.xul # bug 1089223
+pref(layout.css.display-contents.enabled,true) == display-contents-list-item-child.html display-contents-list-item-child-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-writing-mode-1.html display-contents-writing-mode-1-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-writing-mode-2.html display-contents-writing-mode-2-ref.html