Bug 907396 - Tests for CSS 'display:contents'.
authorMats Palmgren <matspal@gmail.com>
Thu, 20 Nov 2014 18:24:11 +0000
changeset 216695 1a4bb406f950881a467694bc8be2e9cdefcba9e2
parent 216694 92926cd0034b2678169464f498a998824a00b70d
child 216696 57e7c5f093ea7b2e0263e09a316dfdc35a0428be
push id27858
push userkwierso@gmail.com
push dateFri, 21 Nov 2014 01:35:46 +0000
treeherdermozilla-central@6309710dd71d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs907396
milestone36.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 907396 - Tests for CSS 'display:contents'.
layout/reftests/css-display/display-contents-495385-2d-ref.html
layout/reftests/css-display/display-contents-495385-2d.html
layout/reftests/css-display/display-contents-acid-dyn-1.html
layout/reftests/css-display/display-contents-acid-dyn-2.html
layout/reftests/css-display/display-contents-acid-dyn-3.html
layout/reftests/css-display/display-contents-acid-ref.html
layout/reftests/css-display/display-contents-acid.html
layout/reftests/css-display/display-contents-generated-content-2.html
layout/reftests/css-display/display-contents-generated-content-ref.html
layout/reftests/css-display/display-contents-generated-content.html
layout/reftests/css-display/display-contents-shadow-dom-1-ref.html
layout/reftests/css-display/display-contents-shadow-dom-1.html
layout/reftests/css-display/display-contents-style-inheritance-1-dom-mutations.html
layout/reftests/css-display/display-contents-style-inheritance-1-ref.html
layout/reftests/css-display/display-contents-style-inheritance-1-stylechange.html
layout/reftests/css-display/display-contents-style-inheritance-1.html
layout/reftests/css-display/display-contents-tables-2.xhtml
layout/reftests/css-display/display-contents-tables-3-ref.xhtml
layout/reftests/css-display/display-contents-tables-3.xhtml
layout/reftests/css-display/display-contents-tables-ref.xhtml
layout/reftests/css-display/display-contents-tables.xhtml
layout/reftests/css-display/display-contents-visibility-hidden-2.html
layout/reftests/css-display/display-contents-visibility-hidden-ref.html
layout/reftests/css-display/display-contents-visibility-hidden.html
layout/reftests/css-display/display-contents-xbl-2-ref.xul
layout/reftests/css-display/display-contents-xbl-2.xul
layout/reftests/css-display/display-contents-xbl-3-ref.xul
layout/reftests/css-display/display-contents-xbl-3.xul
layout/reftests/css-display/display-contents-xbl-4-ref.xul
layout/reftests/css-display/display-contents-xbl-4.xul
layout/reftests/css-display/display-contents-xbl-5.xul
layout/reftests/css-display/display-contents-xbl-ref.html
layout/reftests/css-display/display-contents-xbl.xhtml
layout/reftests/css-display/reftest.list
layout/reftests/reftest.list
layout/style/test/property_database.js
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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; }
+
+.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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/css-display/reftest.list
@@ -0,0 +1,24 @@
+# Tests for CSS Display spec features.
+# http://dev.w3.org/csswg/css-display
+
+pref(layout.css.display-contents.enabled,true) == display-contents-acid.html display-contents-acid-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-acid-dyn-1.html display-contents-acid-ref.html
+pref(layout.css.display-contents.enabled,true) == display-contents-acid-dyn-2.html display-contents-acid-ref.html
+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
+skip-if(B2G) pref(layout.css.display-contents.enabled,true) == display-contents-xbl.xhtml display-contents-xbl-ref.html
+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
+skip-if(B2G) pref(layout.css.display-contents.enabled,true) == display-contents-xbl-2.xul display-contents-xbl-2-ref.xul
+skip-if(B2G) 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
+skip-if(B2G) asserts(1) pref(layout.css.display-contents.enabled,true) == display-contents-xbl-5.xul display-contents-xbl-3-ref.xul # bug 1089223
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -64,16 +64,19 @@ include css-break/reftest.list
 include css-calc/reftest.list
 
 # css character encoding tests
 include css-charset/reftest.list
 
 # css default pseudo class tests
 include css-default/reftest.list
 
+# css-display spec tests
+include css-display/reftest.list
+
 # css :disable tests
 include css-disabled/reftest.list
 
 # css :enable tests
 include css-enabled/reftest.list
 
 # css @import tests
 include css-import/reftest.list
--- a/layout/style/test/property_database.js
+++ b/layout/style/test/property_database.js
@@ -5454,16 +5454,20 @@ if (SpecialPowers.getBoolPref("layout.cs
       "auto / auto / auto",
       "auto / auto / auto / auto"
     ],
     other_values: gridAreaOtherValues,
     invalid_values: gridAreaInvalidValues
   };
 }
 
+if (SpecialPowers.getBoolPref("layout.css.display-contents.enabled")) {
+  gCSSProperties["display"].other_values.push("contents");
+}
+
 if (SpecialPowers.getBoolPref("layout.css.image-orientation.enabled")) {
   gCSSProperties["image-orientation"] = {
     domProp: "imageOrientation",
     inherited: true,
     type: CSS_TYPE_LONGHAND,
     initial_values: [
       "0deg",
       "0grad",