Adding upstream version 86.0.1.upstream/86.0.1 upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-28 14:29:10 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-28 14:29:10 +0000
commit: 2aa4a82499d4becd2284cdb482213d541b8804dd (patch)
tree: b80bf8bf13c3766139fbacc530efd0dd9d54394c /layout/reftests/css-display
parent: Initial commit. (diff)
download: firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.tar.xz
firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.zip
39 files changed, 2044 insertions, 0 deletions
diff --git a/layout/reftests/css-display/display-contents-495385-2d-ref.html b/layout/reftests/css-display/display-contents-495385-2d-ref.html
new file mode 100644
index 0000000000..c926c70375
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-495385-2d-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head>
+<style>
+body > div { border:1px solid black; margin:1em;
+             font-family:sans-serif; letter-spacing:2px; }
+</style>
+</head>
+<body>
+  <div><span>Hello</span> <span>Kitty</span></div>
+  <div><span>Hello</span> <span>Kitty</span></div>
+  <div><span>Hello</span> <span>Kitty</span></div>
+  <div><span>Hello</span> <span>Kitty</span></div>
+  <div><span>Hello</span> <span>Kitty</span></div>
+  <div><span>Hello</span> <span>Kitty</span></div>
+  <div><span>Hello</span> <span>Kitty</span></div>
+  <div><span>Hello</span> <span>Kitty</span></div>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-495385-2d.html b/layout/reftests/css-display/display-contents-495385-2d.html
new file mode 100644
index 0000000000..d88f9f0a37
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-495385-2d.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+<!-- Test that before/after generated content stops suppression correctly,
+     both statically and dynamically -->
+  <meta charset="UTF-8">
+  <title>CSS Test: CSS display:contents; with ::after/::before</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+  <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style>
+body > div { border:1px solid black; margin:1em;
+             font-family:sans-serif; letter-spacing:2px; }
+#d1:before { content:"Hello"; }
+#d2:after { content:"Kitty"; }
+#d3.c:before { content:"Hello"; }
+#d4.c:after { content:"Kitty"; }
+#d5.c:before { content:"Hello"; }
+#d6.c:after { content:"Kitty"; }
+#d7.c:after { content:"Kitty"; }
+#d8.c:before { content:"Hello"; }
+#d5,#d6 { overflow:hidden; }
+#d1,#d2,#d3,#d4 { display:contents; }
+x { display:table; }
+y { display:table-outer; }
+</style>
+<script>
+function loaded() {
+  document.body.offsetHeight;
+  document.getElementById("d3").setAttribute("class", "c");
+  document.getElementById("d4").setAttribute("class", "c");
+  document.getElementById("d5").setAttribute("class", "c");
+  document.getElementById("d6").setAttribute("class", "c");
+  document.getElementById("d7").setAttribute("class", "c");
+  document.getElementById("d8").setAttribute("class", "c");
+}
+</script>
+</head>
+<body onload="loaded()">
+  <div><div id="d1"> <span>Kitty</span></div></div>
+  <div><div id="d2"><span>Hello</span> </div></div>
+  <div><div id="d3"> <span>Kitty</span></div></div>
+  <div><div id="d4"><span>Hello</span> </div></div>
+  <div><div id="d5"> <span>Kitty</span></div></div>
+  <div><div id="d6"><span>Hello</span> </div></div>
+  <div><x id="d7"><span>Hello</span> </div></x>
+  <div><x id="d8"> <span>Kitty</span> </div></x>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-acid-dyn-1.html b/layout/reftests/css-display/display-contents-acid-dyn-1.html
new file mode 100644
index 0000000000..b82cd0f4c1
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-acid-dyn-1.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: CSS display:contents</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+  <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+
+        html,body {
+            color:black; background-color:white; height:100%; font-size:16px; padding:0; margin:0;
+        }
+
+iframe { padding:0;margin:0;border-width:0;width:100%;height:90%; color:red; }
+
+    </style>
+<script>
+function runTest(iframe) {
+  var win = iframe.contentWindow;
+  var doc = iframe.contentDocument;
+  doc.body.offsetHeight
+  var e = doc.querySelectorAll('*');
+  var contents = new Array;
+  for (i=0; i < e.length; ++i) {
+    var elm = e[i];
+    if (win.getComputedStyle(elm).display == 'contents') {
+      contents.push(elm);
+      elm.style.display='none';
+    }
+  }
+  doc.body.offsetHeight;
+  for (i=0; i < contents.length; ++i) {
+    elm = contents[i];
+    elm.style.display='contents';
+  }
+  doc.body.offsetHeight;
+}
+</script>
+</head>
+<body>
+
+<iframe src="display-contents-acid.html" frameborder=0 onload="runTest(this)"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-acid-dyn-2.html b/layout/reftests/css-display/display-contents-acid-dyn-2.html
new file mode 100644
index 0000000000..8a798af10b
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-acid-dyn-2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: CSS display:contents</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+  <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+
+        html,body {
+            color:black; background-color:white; height:100%; font-size:16px; padding:0; margin:0;
+        }
+
+iframe { padding:0;margin:0;border-width:0;width:100%;height:90%; color:red; }
+
+    </style>
+<script>
+function runTest(iframe) {
+  var win = iframe.contentWindow;
+  var doc = iframe.contentDocument;
+  doc.body.offsetHeight
+  var e = doc.querySelectorAll('*');
+  var contents = new Array;
+  for (i=0; i < e.length; ++i) {
+    var elm = e[i];
+    if (win.getComputedStyle(elm).display == 'contents') {
+      contents.push(elm);
+      elm.style.display='inline';
+    }
+  }
+  doc.body.offsetHeight;
+  for (i=0; i < contents.length; ++i) {
+    elm = contents[i];
+    elm.style.display='contents';
+  }
+  doc.body.offsetHeight;
+}
+</script>
+</head>
+<body>
+
+<iframe src="display-contents-acid.html" frameborder=0 onload="runTest(this)"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-acid-dyn-3.html b/layout/reftests/css-display/display-contents-acid-dyn-3.html
new file mode 100644
index 0000000000..8dbcf8a9de
--- /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.remove();
+    }
+  }
+  doc.body.offsetHeight;
+  var i = contents.length;
+  while(i--) {
+    var arr = contents[i];
+    arr[2].insertBefore(arr[0], arr[1]);
+  }
+  doc.body.offsetHeight;
+}
+</script>
+</head>
+<body>
+
+<iframe src="display-contents-acid.html" frameborder=0 onload="runTest(this)"></iframe>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-acid-ref.html b/layout/reftests/css-display/display-contents-acid-ref.html
new file mode 100644
index 0000000000..6cf995cc77
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-acid-ref.html
@@ -0,0 +1,180 @@
+<!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  { 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"><span class="inline c1">Legend</span><span class="inline c1">Legend</span></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>
+
+<span class="c1">Legendfieldset but<span>ton</span></span>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-acid.html b/layout/reftests/css-display/display-contents-acid.html
new file mode 100644
index 0000000000..974aae5b31
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-acid.html
@@ -0,0 +1,192 @@
+<!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  { columns:2; height:4em; }
+
+.contents { display:contents; align-items:inherit; justify-items:inherit; }
+
+.c1 { color:lime; }
+.c2 { background:blue; color:pink; }
+.c3 { color:teal; }
+.c4 { color:green; }
+.c5 { color:silver; }
+.c6 { color:cyan; }
+.c7 { color:magenta; }
+.c8 { color:yellow; }
+.c9 { color:grey; }
+.c10{ color:black; }
+
+.b { background:inherit; }
+    </style>
+</head>
+<body style="color:red">
+
+<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
+<div class="contents c3"><div class="cell">3</div></div>
+<div class="contents c4"><div class="rowg">4</div></div>
+<div class="contents c5"><div class="cell">5a</div></div>
+<div class="cell c5">5b</div>
+<div class="contents c6"><div class="head">6</div></div>
+<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
+<div class="contents c8"><div class="cell">7b</div></div>
+<div class="contents c9"><div class="foot">8</div></div>
+<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
+<div class="contents c10"><div class="cell">10</div></div>
+
+<div class="table" style="float:right">
+<div class="contents c1"><div class="contents c2"><div class="caption">1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div class="row">2a<div class="cell">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
+<div class="contents c3"><div class="cell">3</div></div>
+<div class="contents c4"><div class="rowg">4</div></div>
+<div class="contents c5"><div class="cell">5a</div></div>
+<div class="cell c5">5b</div>
+<div class="contents c6"><div class="head">6</div></div>
+<div class="contents c7"><div class="cell"><div class="contents c2">7<span class="b">a</span></div></div></div>
+<div class="contents c8"><div class="cell">7b</div></div>
+<div class="contents c9"><div class="foot">8</div></div>
+<div class="contents c9"><div class="foot">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
+<div class="contents c10"><div class="cell">10</div></div>
+</div>
+
+<div class="flex c1">
+0
+<div class="contents c1">x</div>
+<div class="contents c1"><div class="contents c2">y</div></div>
+<div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
+<div class="contents c3"><div class="inline">3</div></div>
+<div class="inline"><div class="contents c4">4</div></div>
+<div class=""><div class="contents c5">5a</div></div>
+<div class=" c5">5b</div>
+<div class="contents c6"><div class="">6</div></div>
+<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
+<div class="contents c9"><div class="">8</div></div>
+<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
+<div class="contents c10"><div class="">10</div></div>
+</div>
+
+<div class="flex"><div class="contents c2">
+0
+<div class="contents c1">x</div>
+<div class="contents c1"><div class="contents c2">y</div></div>
+<div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
+<div class="contents c3"><div class="inline">3</div></div>
+<div class=""><div class="contents c4">4</div></div>
+<div class=""><div class="contents c5">5a</div></div>
+<div class=" c5">5b</div>
+<div class="contents c6"><div class="">6</div></div>
+<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
+<div class="contents c9"><div class="">8</div></div>
+<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
+<div class="contents c10"><div class="">10</div></div>
+</div></div>
+
+<div class="iflex"><div class="contents c2">
+0
+</div></div>
+<div class="iflex"><div class="contents c2">
+0
+<div class="contents c1">1</div>
+2
+</div></div>
+<div class="iflex"><div class="contents c2">
+0
+<div class="c1">1</div>
+2
+</div></div>
+<div class="iflex c3">
+0
+<div class="contents c2"><div class="c1">1</div></div>
+2
+</div>
+<div class="iflex c3">
+<div class="contents c2">0</div>
+<div class="contents c2"><div class="c1">1</div></div>
+<div class="contents c2">2</div>
+</div>
+<div class="iflex c3">
+<div class="inline">0</div>
+<div class="contents"><div class="inline c1">1</div></div>
+<div class="inline">2</div>
+</div>
+
+<ul><li class="c1"><div class="contents c2">
+0
+<div class="contents c1">x</div>
+<div class="contents c1"><div class="contents c2">y</div></div>
+<div class="contents c1"><div class="contents c2"><div class="">1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div class="inline">2a<div class="">2<div class="contents c2">b<span class="b">b</span></div></div></div></div>
+<div class="contents c3"><div class="inline">3</div></div>
+<div class="inline"><div class="contents c4">4</div></div>
+<div class=""><div class="contents c5">5a</div></div>
+<div class=" c5">5b</div>
+<div class="contents c6"><div class="">6</div></div>
+<div class="ib"><div class="contents c7"><div class="contents c2">7<span class="b">a</span></div></div></div>
+<div class="contents c9"><div class="">8</div></div>
+<div class="contents c9"><div class="contents">9<div class="contents c2">a<span class="b">b</span>c</div></div></div>
+<div class="contents c10"><div class="">10</div></div>
+</div></li>
+</ul>
+
+<div class="columns">
+<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div>2</div></div>
+<div class="contents c3"><div>3</div></div>
+</div>
+
+<div class="columns">
+<div class="columns contents">
+<div class="contents c1"><div class="contents c2"><div>1<span class="b">1</span></div></div></div>
+<div class="contents c2"><div>2</div></div>
+<div class="contents c3"><div>3</div></div>
+</div>
+</div>
+
+<div class="contents c3"><!-- comment node --></div>
+<div class="contents c3"><?PI ?></div>
+
+<span class="c2"><legend class="contents c1">Legend</legend><legend class="contents c1">Legend</legend></span>
+<br clear="all">
+<span class="c3">x<div class="contents c1" style="float:left">float:left</div></span>
+<span class="c3">y<div class="contents c1" style="position:absolute">position:absolute</div></span>
+
+<fieldset class="contents c1"><legend class="contents">Legend</legend>fieldset</fieldset>
+<button class="contents c1" style="font: inherit;">but<span>ton</span></button>
+
+<!-- Stuff below should simply behave as having display: none -->
+
+<select class="contents c1"><option>select</select>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-dyn-insert-text-ref.html b/layout/reftests/css-display/display-contents-dyn-insert-text-ref.html
new file mode 100644
index 0000000000..a212e025eb
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-dyn-insert-text-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<title>CSS Test reference - Bug 1338678</title>
+<div style="display: contents">
+  <div id="element">PASS</div>
+</div>
diff --git a/layout/reftests/css-display/display-contents-dyn-insert-text.html b/layout/reftests/css-display/display-contents-dyn-insert-text.html
new file mode 100644
index 0000000000..f3b0c0c951
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-dyn-insert-text.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="author" title="Markus Stange" href="mailto:mstange@themasta.com">
+<link rel="help" href="https://drafts.csswg.org/css-display/#box-generation">
+<title>Bug 1338678 - display:contents makes textContent disappear</title>
+<div style="display: contents">
+  <div id="element"></div>
+</div>
+<script>
+window.onload = function() {
+  document.body.offsetTop;
+  var element = document.getElementById('element');
+  element.textContent = "FAIL";
+  element.textContent = "PASS";
+}
+</script>
diff --git a/layout/reftests/css-display/display-contents-fieldset-ref.html b/layout/reftests/css-display/display-contents-fieldset-ref.html
new file mode 100644
index 0000000000..d5e125f038
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-fieldset-ref.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html><head>
+<style>
+fieldset { padding:0; }
+span { display:block; width:10px; height:10px; background:lime; }
+.contents { }
+legend { border: 1px solid; }
+.test2 legend { }
+.test2 legend::after, .test3 legend::after { content:"legend"; }
+.test2 legend.static, .test3 legend.static { display:block; }
+.test2 legend.static::before, .test3 legend.static::before { content:"static "; }
+.test2 legend.static::before { content:"static "; }
+.after::after { content:"::after"; }
+.before::before { content:"::before"; }
+.nb legend.static  { border: 1px solid; }
+.nb legend { border-style:none; }
+</style>
+</head>
+<body>
+<fieldset><div class="test contents"></div></fieldset>
+<fieldset><div class="test contents">x</div></fieldset>
+<fieldset><div class="test contents after"></div></fieldset>
+<fieldset><div class="test contents before"></div></fieldset>
+<fieldset><div class="test contents before after"></div></fieldset>
+<fieldset><span></span></fieldset>
+<fieldset><span></span></fieldset>
+<fieldset><span></span></fieldset>
+<fieldset class="test2"></fieldset>
+<fieldset class="test2 after"></fieldset>
+<fieldset class="test2"><legend class="static"></legend></fieldset>
+<fieldset class="test2"><legend class="static contents"></legend></fieldset>
+<fieldset class="test2"><legend class="static"></legend></fieldset>
+<fieldset class="test2"></fieldset>
+<fieldset class="test3"></fieldset>
+<fieldset class="test2"><legend class="static"></legend></fieldset>
+<fieldset class="test3"><legend class="static"></legend></fieldset>
+<script>
+document.body.offsetHeight;
+var tests = document.querySelectorAll('.test');
+for (i=0; i < tests.length; ++i) {
+  test = tests[i];
+  test.appendChild(document.createElement('span'));
+}
+var tests = document.querySelectorAll('.test2');
+for (i=0; i < tests.length; ++i) {
+  test = tests[i];
+  let span = document.createElement('dummy-inline');
+  span.innerHTML = "legend";
+  test.appendChild(span);
+}
+
+var tests = document.querySelectorAll('.test3');
+for (i=0; i < tests.length; ++i) {
+  test = tests[i];
+  test.appendChild(document.createElement('legend'));
+}
+</script>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-fieldset.html b/layout/reftests/css-display/display-contents-fieldset.html
new file mode 100644
index 0000000000..06cf5c99ea
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-fieldset.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html><head>
+<style>
+fieldset { padding:0; }
+span { display:block; width:10px; height:10px; background:lime; }
+.contents { display: contents; }
+legend { border: 1px solid; }
+.test2 legend { display:contents; }
+.test2 legend::after, .test3 legend::after { content:"legend"; }
+.test2 legend.static, .test3 legend.static { display:block; }
+.test2 legend.static::before, .test3 legend.static::before { content:"static "; }
+.after::after { content:"::after"; }
+.before::before { content:"::before"; }
+</style>
+</head>
+<body>
+<fieldset><div class="test contents"></div></fieldset>
+<fieldset><div class="test contents">x</div></fieldset>
+<fieldset><div class="test contents after"></div></fieldset>
+<fieldset><div class="test contents before"></div></fieldset>
+<fieldset><div class="test contents before after"></div></fieldset>
+<fieldset><legend class="test contents"></legend></fieldset>
+<fieldset><div class="contents"><legend class="test contents"></legend></div></fieldset>
+<fieldset><legend class="contents"><div class="test contents"></div></legend></fieldset>
+<fieldset class="test2"></fieldset>
+<fieldset class="test2 after"></fieldset>
+<fieldset class="test2"><legend class="static"></legend></fieldset>
+<fieldset class="test2"><legend class="static contents"></legend></fieldset>
+<fieldset class="test2"><div class="contents"><legend class="static"></legend></div></fieldset>
+<fieldset><div class="test2 contents"></div></fieldset>
+<fieldset><div class="test3 contents"></div></fieldset>
+<fieldset><div class="test2 contents"><legend class="static"></legend></div></fieldset>
+<fieldset><div class="test3 contents"><legend class="static"></legend></div></fieldset>
+<script>
+document.body.offsetHeight;
+var tests = document.querySelectorAll('.test');
+for (i=0; i < tests.length; ++i) {
+  test = tests[i];
+  test.appendChild(document.createElement('span'));
+}
+var tests = document.querySelectorAll('.test2,.test3');
+for (i=0; i < tests.length; ++i) {
+  test = tests[i];
+  test.appendChild(document.createElement('legend'));
+}
+</script>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-generated-content-2.html b/layout/reftests/css-display/display-contents-generated-content-2.html
new file mode 100644
index 0000000000..842c61e988
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-generated-content-2.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-wait">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: CSS display:contents; generated content</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+  <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+body,html { color:black; background-color:white; }
+div { display:inline; }
+
+.test {
+  display: contents;
+  content: "content";
+  color: lime;
+}
+.contents {
+  display: contents;
+  color: green;
+}
+.s1 {display: none;}
+.s2 {display: none;}
+.s3 {display: contents;}
+.s5 {display: contents;}
+.s7 {display: none;}
+.s8 {display: none;}
+.s9 {display: contents;}
+.s11 {display: contents;}
+.before::before {
+  display: contents;
+  content:"before";
+}
+.after::after {
+  display: contents;
+  content:"after";
+}
+</style>
+<script>
+
+function setup() {
+  document.body.offsetHeight;
+  document.querySelector('.t1').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t2').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t3').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t4').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t5').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t6').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t7').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t8').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t9').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t10').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t11').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t12').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t13').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.s1').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.s2').style.display = 'inline';
+  document.body.offsetHeight;
+  document.querySelector('.s3').style.display = 'normal';
+  document.body.offsetHeight;
+  document.querySelector('.s4').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.s5').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.s6').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.s7').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.s8').style.display = 'inline';
+  document.body.offsetHeight;
+  document.querySelector('.s9').style.display = 'normal';
+  document.body.offsetHeight;
+  document.querySelector('.s10').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.s11').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.s12').style.display = 'none';
+  document.body.offsetHeight;
+}
+
+function runTest() {
+  var doc = document;
+  var win = window;
+  setup();
+  var e = doc.querySelectorAll('*');
+  for (i=0; i < e.length; ++i) {
+    var elm = e[i];
+    if (win.getComputedStyle(elm).display == 'contents') {
+      var c = elm.childNodes[0];
+      if (c) {
+        var next = c.nextSibling;
+        elm.removeChild(c);
+        elm.insertBefore(c,next);
+      }
+      var c = elm.childNodes[1];
+      if (c) {
+        var next = c.nextSibling;
+        elm.removeChild(c);
+        elm.insertBefore(c,next);
+      }
+      var c = elm.childNodes.length ? elm.childNodes[elm.childNodes.length-1] : null;
+      if (c) {
+        elm.removeChild(c);
+        elm.appendChild(c);
+      }
+    }
+  }
+
+  document.documentElement.className = '';
+}
+
+</script>
+</head>
+<body onload="runTest()">
+
+<div class="test"><span>A a</span></div>
+<div class="test"><span class="t1">t1</span></div>
+<div class="test"><span class="t2">t2</span></div>
+<div class="contents before">1<span>B b</span>2</div>
+<div class="contents after">1<span>C c</span>2</div>
+<div class="contents before after">1<span>D d</span>2</div>
+<div class="contents before">1<span class="t5">B b</span>2</div>
+<div class="contents after">1<span class="t6">C c</span>2</div>
+<div class="contents before after">1<span class="t7">D d</span>2</div>
+
+<div class="contents">
+  <div class="test"><span>span</span></div>
+  <div class="test"><span class="t3">t3</span></div>
+  <div class="test"><span class="t4">t4</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+  <div class="contents before">1<span class="t8">span</span>2</div>
+  <div class="contents after">1<span class="t9">span</span>2</div>
+  <div class="contents before after">1<span class="t10">span</span>2</div>
+  <div class="contents before">1<span class="t11">span</span>2</div>
+  <div class="contents after">1<span class="t12">span</span>2</div>
+  <div class="contents before after">1<span class="t13">span</span>2</div>
+</div>
+
+<div class="contents"><span class="s1">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s2">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s3">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s4">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s5">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s6">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before"><span class="s7">
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents after"><span class="s8">
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s9">
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before after"><span class="s10">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before"><span class="s11">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents after"><span class="s12">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-generated-content-ref.html b/layout/reftests/css-display/display-contents-generated-content-ref.html
new file mode 100644
index 0000000000..29ee8b20d8
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-generated-content-ref.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: CSS display:contents; generated content</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+  <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+body,html { color:black; background-color:white; }
+
+.test {
+  display: inline;
+  content: "content";
+  color: lime;
+}
+.contents {
+  display: inline;
+  color: green;
+}
+.before::before {
+  display: inline;
+  content:"before";
+}
+.after::after {
+  display: inline;
+  content:"after";
+}
+</style>
+</head>
+<body>
+
+<div class="test"><span>A a</span></div>
+<div class="test"><span class="contents">t1</span></div>
+<div class="test"></div>
+<div class="contents before">1<span>B b</span>2</div>
+<div class="contents after">1<span>C c</span>2</div>
+<div class="contents before after">1<span>D d</span>2</div>
+<div class="contents before">1<span class="t5">B b</span>2</div>
+<div class="contents after">12</div>
+<div class="contents before after">1<span class="t7">D d</span>2</div>
+
+<div class="contents">
+  <div class="test"><span>span</span></div>
+  <div class="test"><span class="contents">t3</span></div>
+  <div class="test"></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+  <div class="contents before">12</div>
+  <div class="contents after">1<span class="t9">span</span>2</div>
+  <div class="contents before after">12</div>
+  <div class="contents before">1<span class="t11">span</span>2</div>
+  <div class="contents after">12</div>
+  <div class="contents before after">1<span class="t13">span</span>2</div>
+</div>
+
+<div class="contents"><span class="s1">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s2">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s3">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s4">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"></div>
+
+<div class="contents"></div>
+
+<div class="contents before"><span class="s7">
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents after"><span class="s8">
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s9">
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before after"><span class="s10">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before"></div>
+
+<div class="contents after"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-generated-content.html b/layout/reftests/css-display/display-contents-generated-content.html
new file mode 100644
index 0000000000..16c9a998a3
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-generated-content.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-wait">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: CSS display:contents; generated content</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+  <link rel="help" href="http://dev.w3.org/csswg/css-display">
+<style type="text/css">
+body,html { color:black; background-color:white; }
+div { display:inline; }
+
+.test {
+  display: contents;
+  content: "content";
+  color: lime;
+}
+.contents {
+  display: contents;
+  color: green;
+}
+.s1 {display: none;}
+.s2 {display: none;}
+.s3 {display: contents;}
+.s5 {display: contents;}
+.s7 {display: none;}
+.s8 {display: none;}
+.s9 {display: contents;}
+.s11 {display: contents;}
+.before::before {
+  display: contents;
+  content:"before";
+}
+.after::after {
+  display: contents;
+  content:"after";
+}
+</style>
+<script>
+
+function runTest() {
+  document.body.offsetHeight;
+  document.querySelector('.t1').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t2').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t3').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t4').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t5').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t6').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t7').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t8').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t9').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t10').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t11').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.t12').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.t13').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.s1').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.s2').style.display = 'inline';
+  document.body.offsetHeight;
+  document.querySelector('.s3').style.display = 'normal';
+  document.body.offsetHeight;
+  document.querySelector('.s4').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.s5').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.s6').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.s7').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.s8').style.display = 'inline';
+  document.body.offsetHeight;
+  document.querySelector('.s9').style.display = 'normal';
+  document.body.offsetHeight;
+  document.querySelector('.s10').className = 'contents';
+  document.body.offsetHeight;
+  document.querySelector('.s11').style.display = 'none';
+  document.body.offsetHeight;
+  document.querySelector('.s12').style.display = 'none';
+  document.body.offsetHeight;
+
+  document.documentElement.className = '';
+}
+
+</script>
+</head>
+<body onload="runTest()">
+
+<div class="test"><span>A a</span></div>
+<div class="test"><span class="t1">t1</span></div>
+<div class="test"><span class="t2">t2</span></div>
+<div class="contents before">1<span>B b</span>2</div>
+<div class="contents after">1<span>C c</span>2</div>
+<div class="contents before after">1<span>D d</span>2</div>
+<div class="contents before">1<span class="t5">B b</span>2</div>
+<div class="contents after">1<span class="t6">C c</span>2</div>
+<div class="contents before after">1<span class="t7">D d</span>2</div>
+
+<div class="contents">
+  <div class="test"><span>span</span></div>
+  <div class="test"><span class="t3">t3</span></div>
+  <div class="test"><span class="t4">t4</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+  <div class="contents before">1<span class="t8">span</span>2</div>
+  <div class="contents after">1<span class="t9">span</span>2</div>
+  <div class="contents before after">1<span class="t10">span</span>2</div>
+  <div class="contents before">1<span class="t11">span</span>2</div>
+  <div class="contents after">1<span class="t12">span</span>2</div>
+  <div class="contents before after">1<span class="t13">span</span>2</div>
+</div>
+
+<div class="contents"><span class="s1">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s2">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s3">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s4">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s5">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s6">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before"><span class="s7">
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents after"><span class="s8">
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents"><span class="s9">
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before after"><span class="s10">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents before"><span class="s11">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+<div class="contents after"><span class="s12">
+  <div class="test"><span>span</span></div>
+  <div class="contents before">1<span>span</span>2</div>
+  <div class="contents after">1<span>span</span>2</div>
+  <div class="contents before after">1<span>span</span>2</div>
+</span></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-list-item-child-ref.html b/layout/reftests/css-display/display-contents-list-item-child-ref.html
new file mode 100644
index 0000000000..25a9d3fe53
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-list-item-child-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html style="margin:2em;">
+<head>
+<meta charset="UTF-8">
+</head>
+<body style="margin:0;padding:0"><li style="color:lime;">LI</body></html>
diff --git a/layout/reftests/css-display/display-contents-list-item-child.html b/layout/reftests/css-display/display-contents-list-item-child.html
new file mode 100644
index 0000000000..8a4916e5a4
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-list-item-child.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html style="margin:2em;color:red">
+<head>
+<meta charset="UTF-8">
+<script>
+
+function boom()
+{
+    document.documentElement.offsetHeight;
+    document.body.style.position = "fixed";
+    document.documentElement.offsetHeight;
+    document.documentElement.style.MozBoxSizing = "border-box";
+    document.documentElement.offsetHeight;
+}
+
+</script>
+</head>
+<body style="display: contents;" onload="boom();"><li style="color:lime">LI</body></html>
diff --git a/layout/reftests/css-display/display-contents-state-change-ref.html b/layout/reftests/css-display/display-contents-state-change-ref.html
new file mode 100644
index 0000000000..244572a685
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-state-change-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS test reference</title>
+<link rel="author" name="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
+<style>
+div {
+  color: green;
+}
+</style>
+<div>
+  This text should be green, there should be no red border at any time.
+</div>
diff --git a/layout/reftests/css-display/display-contents-state-change.html b/layout/reftests/css-display/display-contents-state-change.html
new file mode 100644
index 0000000000..4af9a8b000
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-state-change.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS display: State changes are handled correctly for display: contents children</title>
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
+<link rel="author" name="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
+<link rel="match" href="display-contents-state-change-ref.html">
+<style>
+:focus-within .contents {
+  color: green;
+}
+.contents {
+  display: contents;
+  border: 10px solid red;
+  color: red;
+}
+input {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+}
+</style>
+<div>
+  <input type="text">
+  <div class="contents">This text should be green, there should be no red border at any time.</div>
+</div>
+<script>
+onload = function() {
+  document.querySelector('input').focus();
+}
+</script>
diff --git a/layout/reftests/css-display/display-contents-style-inheritance-1-dom-mutations.html b/layout/reftests/css-display/display-contents-style-inheritance-1-dom-mutations.html
new file mode 100644
index 0000000000..c46bef2955
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-style-inheritance-1-dom-mutations.html
@@ -0,0 +1,119 @@
+<!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);
+
+  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>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-style-inheritance-1-ref.html b/layout/reftests/css-display/display-contents-style-inheritance-1-ref.html
new file mode 100644
index 0000000000..37649f545a
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-style-inheritance-1-ref.html
@@ -0,0 +1,38 @@
+<!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>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-style-inheritance-1-stylechange.html b/layout/reftests/css-display/display-contents-style-inheritance-1-stylechange.html
new file mode 100644
index 0000000000..0f68aa5b09
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-style-inheritance-1-stylechange.html
@@ -0,0 +1,57 @@
+<!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');
+  }
+  // FIXME(emilio): This basically does a full subtree restyle, and could hide
+  // bugs in the previous parts of the test.
+  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>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-style-inheritance-1.html b/layout/reftests/css-display/display-contents-style-inheritance-1.html
new file mode 100644
index 0000000000..3dab318b95
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-style-inheritance-1.html
@@ -0,0 +1,39 @@
+<!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>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-suppression-dynamic-ref.html b/layout/reftests/css-display/display-contents-suppression-dynamic-ref.html
new file mode 100644
index 0000000000..3e8063e385
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-suppression-dynamic-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<body>
+<script>
+  const SVG_NS = "http://www.w3.org/2000/svg";
+  let g = document.createElementNS(SVG_NS, "g");
+  g.style.display = "contents";
+  document.body.appendChild(g);
+  let div = document.createElement('div');
+  div.style.width = div.style.height = "100px";
+  div.style.backgroundColor = "green";
+  g.appendChild(div);
+</script>
+</body>
diff --git a/layout/reftests/css-display/display-contents-suppression-dynamic.html b/layout/reftests/css-display/display-contents-suppression-dynamic.html
new file mode 100644
index 0000000000..341b5804af
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-suppression-dynamic.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<body>
+<script>
+  const SVG_NS = "http://www.w3.org/2000/svg";
+  let g = document.createElementNS(SVG_NS, "g");
+  g.style.display = "contents";
+  document.body.appendChild(g);
+  // The only difference between this test and the ref is this flush, this
+  // tests we're consistent.
+  g.offsetTop;
+  let div = document.createElement('div');
+  div.style.width = div.style.height = "100px";
+  div.style.backgroundColor = "green";
+  g.appendChild(div);
+</script>
+</body>
diff --git a/layout/reftests/css-display/display-contents-tables-2.xhtml b/layout/reftests/css-display/display-contents-tables-2.xhtml
new file mode 100644
index 0000000000..d301f59005
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-tables-2.xhtml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
+<head>
+  <title>CSS Test: CSS display:contents; tables</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
+  <link rel="help" href="http://dev.w3.org/csswg/css-display"/>
+<style type="text/css">
+html { color:red; background-color:white; }
+body { color:white; background-color:pink; width:0; }
+.test { display:contents; color:white; background-color:lime; }
+td { background-color:inherit; }
+</style>
+</head>
+<body><div class="test"><td>green</td></div><td>pink</td></body></html>
diff --git a/layout/reftests/css-display/display-contents-tables-3-ref.xhtml b/layout/reftests/css-display/display-contents-tables-3-ref.xhtml
new file mode 100644
index 0000000000..15fae7e197
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-tables-3-ref.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
+<head>
+  <title>CSS Test: CSS display:contents; tables</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
+<style type="text/css">
+body { color:red; background-color:white; }
+.test { float:left; color:white; background-color:lime; }
+td { background-color:inherit; }
+</style>
+</head>
+<body><div class="test"><td>green</td></div></body></html>
diff --git a/layout/reftests/css-display/display-contents-tables-3.xhtml b/layout/reftests/css-display/display-contents-tables-3.xhtml
new file mode 100644
index 0000000000..f864908056
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-tables-3.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
+<head>
+  <title>CSS Test: CSS display:contents; tables</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
+  <link rel="help" href="http://dev.w3.org/csswg/css-display"/>
+<style type="text/css">
+body { color:red; background-color:white; }
+.test { display:contents; color:white; background-color:lime; }
+td { background-color:inherit; }
+</style>
+</head>
+<body><div class="test"><td>green</td></div></body></html>
diff --git a/layout/reftests/css-display/display-contents-tables-ref.xhtml b/layout/reftests/css-display/display-contents-tables-ref.xhtml
new file mode 100644
index 0000000000..223b33fea1
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-tables-ref.xhtml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
+<head>
+  <title>CSS Test: CSS display:contents; tables</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
+<style type="text/css">
+body { color:red; background-color:white; }
+td { color:white; background-color:lime; }
+.pink { background-color:pink; }
+</style>
+</head>
+<body><td>green</td><td class="pink">pink</td></body></html>
diff --git a/layout/reftests/css-display/display-contents-tables.xhtml b/layout/reftests/css-display/display-contents-tables.xhtml
new file mode 100644
index 0000000000..ce2aa774ed
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-tables.xhtml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
+<head>
+  <title>CSS Test: CSS display:contents; tables</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"/>
+  <link rel="help" href="http://dev.w3.org/csswg/css-display"/>
+<style type="text/css">
+body { color:red; background-color:white; }
+.test { display:contents; color:white; background-color:lime; }
+td { background-color:inherit; }
+</style>
+</head>
+<body><div class="test"><td>green</td></div><div class="test" style="background-color:pink"><td>pink</td></div></body></html>
diff --git a/layout/reftests/css-display/display-contents-visibility-hidden-2.html b/layout/reftests/css-display/display-contents-visibility-hidden-2.html
new file mode 100644
index 0000000000..6ba1afdd2b
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-visibility-hidden-2.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-wait">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: CSS display:contents; visibility:hidden</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+  <link rel="help" href="http://dev.w3.org/csswg/css-display">
+</head>
+<body style="color: red">
+  <div id="x" style="display:contents; visibility: hidden; color: green">
+    Line 1
+  </div><script type="text/javascript">
+    document.body.offsetWidth;
+    document.getElementById("x").style.visibility = "visible";
+    document.body.offsetWidth;
+
+    document.documentElement.className = '';
+  </script>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-visibility-hidden-ref.html b/layout/reftests/css-display/display-contents-visibility-hidden-ref.html
new file mode 100644
index 0000000000..0c8e1b786e
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-visibility-hidden-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: CSS display:contents; visibility:hidden</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+</head>
+<body>
+  <div id="x" style="color:green">
+    Line 1
+  </div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-visibility-hidden.html b/layout/reftests/css-display/display-contents-visibility-hidden.html
new file mode 100644
index 0000000000..57d6fe3c1d
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-visibility-hidden.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html lang="en-US" class="reftest-wait">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Test: CSS display:contents; visibility:hidden</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396">
+  <link rel="help" href="http://dev.w3.org/csswg/css-display">
+</head>
+<body>
+  <div id="x" style="display:contents; visibility: hidden">
+    Line 1
+  </div><script type="text/javascript">
+    document.body.offsetWidth;
+    document.getElementById("x").style.visibility = "visible";
+    document.body.style.color = "green";
+    document.body.offsetWidth;
+
+    document.documentElement.className = '';
+  </script>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-writing-mode-1-ref.html b/layout/reftests/css-display/display-contents-writing-mode-1-ref.html
new file mode 100644
index 0000000000..00ede6bd09
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-writing-mode-1-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head><meta charset="UTF-8">
+  <title>Reference: display:contents with orthogonal writing-mode</title>
+  <style type="text/css">
+
+div { display:inline-block; }
+
+span {
+  width: 0;
+  border: 1px solid;
+}
+
+  </style>
+</head>
+<body>
+<div style="display:inline-block"><span>a b c</span></div>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-writing-mode-1.html b/layout/reftests/css-display/display-contents-writing-mode-1.html
new file mode 100644
index 0000000000..781acfa99e
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-writing-mode-1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head><meta charset="UTF-8">
+  <title>CSS Test: display:contents with orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1258147">
+  <link rel="help" href="http://dev.w3.org/csswg/css-display">
+  <link rel="match" href="display-contents-writing-mode-1-ref.html">
+  <style type="text/css">
+
+body {
+  writing-mode: horizontal-tb;
+}
+
+div {
+  display: contents;
+  writing-mode: vertical-lr;
+}
+
+span {
+  width: 0;
+  border: 1px solid;
+}
+
+  </style>
+</head>
+<body>
+<div><span style="writing-mode:horizontal-tb">a b c</span></div>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-writing-mode-2-ref.html b/layout/reftests/css-display/display-contents-writing-mode-2-ref.html
new file mode 100644
index 0000000000..f0f0690ed3
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-writing-mode-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head><meta charset="UTF-8">
+  <title>Reference: display:contents with orthogonal writing-mode</title>
+  <style type="text/css">
+
+span {
+  display: inline-block;
+  writing-mode: vertical-lr;
+  width: 0;
+  border: 1px solid;
+}
+
+  </style>
+</head>
+<body>
+<span>a b c</span>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-contents-writing-mode-2.html b/layout/reftests/css-display/display-contents-writing-mode-2.html
new file mode 100644
index 0000000000..03bde8b769
--- /dev/null
+++ b/layout/reftests/css-display/display-contents-writing-mode-2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+<head><meta charset="UTF-8">
+  <title>CSS Test: display:contents with orthogonal writing-mode</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1258147">
+  <link rel="help" href="http://dev.w3.org/csswg/css-display">
+  <link rel="match" href="display-contents-writing-mode-2-ref.html">
+  <style type="text/css">
+
+body {
+  writing-mode: horizontal-tb;
+}
+
+div {
+  display: contents;
+  writing-mode: vertical-lr;
+}
+
+span {
+  width: 0;
+  border: 1px solid;
+}
+
+  </style>
+</head>
+<body>
+<div><span>a b c</span></div>
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-flow-root-001-ref.html b/layout/reftests/css-display/display-flow-root-001-ref.html
new file mode 100644
index 0000000000..fcb5ac277e
--- /dev/null
+++ b/layout/reftests/css-display/display-flow-root-001-ref.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: display:flow-root</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322191">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.float {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: pink;
+}
+
+.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
+
+  </style>
+</head>
+<body>
+
+<div style="border:1px solid">
+  <div style="margin: 40px 0">
+    <div>x</div>
+  </div>
+</div>
+
+<div style="border:1px solid">
+  <div class="float"></div>
+  <div class="clearfix"></div>
+</div>
+
+<div style="border:1px solid">
+  <div class="float"></div>
+  <div style="display:block; border:1px solid; margin-left:20px">x</div>
+</div>
+
+<span>
+  <span style="display:block; background:grey; margin:20px 0 0 21px"><div style="padding:20px">x</div></span>
+</span>
+
+<div style="border:3px solid; height:10px;"></div>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/display-flow-root-001.html b/layout/reftests/css-display/display-flow-root-001.html
new file mode 100644
index 0000000000..3d1dcb020d
--- /dev/null
+++ b/layout/reftests/css-display/display-flow-root-001.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Display Test: display:flow-root</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322191">
+  <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-flow-root">
+  <link rel="match" href="display-flow-root-001-ref.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+
+.float {
+  float: left;
+  width: 20px;
+  height: 40px;
+  background: pink;
+}
+
+  </style>
+</head>
+<body>
+
+<div style="border:1px solid">
+  <!-- this tests that the flow-root margins don't collapse with its children. -->
+  <span style="display:flow-root; margin: 20px 0">
+    <div style="margin: 20px 0">x</div>
+  </span>
+</div>
+
+<div style="border:1px solid">
+  <!-- this tests that the flow-root grows to fit child floats -->
+  <span style="display:flow-root"><div class="float"></div></span>
+</div>
+
+<div style="border:1px solid; margin-bottom:20px">
+  <!-- this tests that a float does not intrude into flow-root box -->
+  <div class="float"></div>
+  <span style="display:flow-root; border:1px solid">x</span>
+</div>
+
+<span>
+  <!-- this tests that a flow-root box is constructed also in the "ibsplit" case -->
+  <span style="display:flow-root; background:grey;"><div style="margin:20px">x</div></span>
+</span>
+
+<span style="display:flow-root; border:3px solid; height:10px;">
+  <!-- this tests that a flow-root fills the available width, and that 'height' applies -->
+</span>
+
+</body>
+</html>
diff --git a/layout/reftests/css-display/reftest.list b/layout/reftests/css-display/reftest.list
new file mode 100644
index 0000000000..25711f5923
--- /dev/null
+++ b/layout/reftests/css-display/reftest.list
@@ -0,0 +1,26 @@
+# Tests for CSS Display spec features.
+# http://dev.w3.org/csswg/css-display
+
+fuzzy-if(Android,0-8,0-604) == display-contents-acid.html display-contents-acid-ref.html
+fuzzy-if(Android,0-8,0-604) == display-contents-acid-dyn-1.html display-contents-acid-ref.html
+fuzzy-if(Android,0-8,0-604) == display-contents-acid-dyn-2.html display-contents-acid-ref.html
+fuzzy-if(Android,0-8,0-604) == display-contents-acid-dyn-3.html display-contents-acid-ref.html
+== display-contents-generated-content.html display-contents-generated-content-ref.html
+== display-contents-generated-content-2.html display-contents-generated-content-ref.html
+== display-contents-style-inheritance-1.html display-contents-style-inheritance-1-ref.html
+== display-contents-style-inheritance-1-stylechange.html display-contents-style-inheritance-1-ref.html
+fuzzy-if(winWidget,0-12,0-100) == display-contents-style-inheritance-1-dom-mutations.html display-contents-style-inheritance-1-ref.html
+== display-contents-tables.xhtml display-contents-tables-ref.xhtml
+== display-contents-tables-2.xhtml display-contents-tables-ref.xhtml
+== display-contents-tables-3.xhtml display-contents-tables-3-ref.xhtml
+== display-contents-visibility-hidden.html display-contents-visibility-hidden-ref.html
+== display-contents-visibility-hidden-2.html display-contents-visibility-hidden-ref.html
+== display-contents-495385-2d.html display-contents-495385-2d-ref.html
+asserts(0-1) fuzzy-if(Android,0-8,0-3216) == display-contents-fieldset.html display-contents-fieldset-ref.html # bug 1089223
+== display-contents-list-item-child.html display-contents-list-item-child-ref.html
+== display-contents-dyn-insert-text.html display-contents-dyn-insert-text-ref.html
+== display-contents-writing-mode-1.html display-contents-writing-mode-1-ref.html
+== display-contents-writing-mode-2.html display-contents-writing-mode-2-ref.html
+needs-focus == display-contents-state-change.html display-contents-state-change-ref.html
+== display-flow-root-001.html display-flow-root-001-ref.html
+== display-contents-suppression-dynamic.html display-contents-suppression-dynamic-ref.html
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-28 14:29:10 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-28 14:29:10 +0000
commit	2aa4a82499d4becd2284cdb482213d541b8804dd (patch)
tree	b80bf8bf13c3766139fbacc530efd0dd9d54394c /layout/reftests/css-display
parent	Initial commit. (diff)
download	firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.tar.xz firefox-2aa4a82499d4becd2284cdb482213d541b8804dd.zip