mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-24 21:31:04 +00:00
Bug 907396 - Tests for CSS 'display:contents'.
This commit is contained in:
Mats Palmgren
parent
8f6f1c70f4
commit
6cee3ccac1
@ -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>
|
||||
52
layout/reftests/css-display/display-contents-495385-2d.html
Normal file
52
layout/reftests/css-display/display-contents-495385-2d.html
Normal file
@ -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>
|
||||
49
layout/reftests/css-display/display-contents-acid-dyn-1.html
Normal file
49
layout/reftests/css-display/display-contents-acid-dyn-1.html
Normal file
@ -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>
|
||||
49
layout/reftests/css-display/display-contents-acid-dyn-2.html
Normal file
49
layout/reftests/css-display/display-contents-acid-dyn-2.html
Normal file
@ -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>
|
||||
50
layout/reftests/css-display/display-contents-acid-dyn-3.html
Normal file
50
layout/reftests/css-display/display-contents-acid-dyn-3.html
Normal file
@ -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>
|
||||
184
layout/reftests/css-display/display-contents-acid-ref.html
Normal file
184
layout/reftests/css-display/display-contents-acid-ref.html
Normal file
@ -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
|
||||
<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="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 </div>
|
||||
<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="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>
|
||||
191
layout/reftests/css-display/display-contents-acid.html
Normal file
191
layout/reftests/css-display/display-contents-acid.html
Normal file
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
236
layout/reftests/css-display/display-contents-shadow-dom-1.html
Normal file
236
layout/reftests/css-display/display-contents-shadow-dom-1.html
Normal file
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
18
layout/reftests/css-display/display-contents-tables-2.xhtml
Normal file
18
layout/reftests/css-display/display-contents-tables-2.xhtml
Normal file
@ -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>
|
||||
@ -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>
|
||||
17
layout/reftests/css-display/display-contents-tables-3.xhtml
Normal file
17
layout/reftests/css-display/display-contents-tables-3.xhtml
Normal file
@ -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>
|
||||
@ -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>
|
||||
17
layout/reftests/css-display/display-contents-tables.xhtml
Normal file
17
layout/reftests/css-display/display-contents-tables.xhtml
Normal file
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
22
layout/reftests/css-display/display-contents-xbl-2-ref.xul
Normal file
22
layout/reftests/css-display/display-contents-xbl-2-ref.xul
Normal file
@ -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>
|
||||
31
layout/reftests/css-display/display-contents-xbl-2.xul
Normal file
31
layout/reftests/css-display/display-contents-xbl-2.xul
Normal file
@ -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>
|
||||
22
layout/reftests/css-display/display-contents-xbl-3-ref.xul
Normal file
22
layout/reftests/css-display/display-contents-xbl-3-ref.xul
Normal file
@ -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>
|
||||
31
layout/reftests/css-display/display-contents-xbl-3.xul
Normal file
31
layout/reftests/css-display/display-contents-xbl-3.xul
Normal file
@ -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>
|
||||
22
layout/reftests/css-display/display-contents-xbl-4-ref.xul
Normal file
22
layout/reftests/css-display/display-contents-xbl-4-ref.xul
Normal file
@ -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>
|
||||
31
layout/reftests/css-display/display-contents-xbl-4.xul
Normal file
31
layout/reftests/css-display/display-contents-xbl-4.xul
Normal file
@ -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>
|
||||
31
layout/reftests/css-display/display-contents-xbl-5.xul
Normal file
31
layout/reftests/css-display/display-contents-xbl-5.xul
Normal file
@ -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>
|
||||
59
layout/reftests/css-display/display-contents-xbl-ref.html
Normal file
59
layout/reftests/css-display/display-contents-xbl-ref.html
Normal file
@ -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>
|
||||
272
layout/reftests/css-display/display-contents-xbl.xhtml
Normal file
272
layout/reftests/css-display/display-contents-xbl.xhtml
Normal file
@ -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>
|
||||
24
layout/reftests/css-display/reftest.list
Normal file
24
layout/reftests/css-display/reftest.list
Normal file
@ -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
|
||||
@ -69,6 +69,9 @@ 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
|
||||
|
||||
|
||||
@ -5459,6 +5459,10 @@ if (SpecialPowers.getBoolPref("layout.css.grid.enabled")) {
|
||||
};
|
||||
}
|
||||
|
||||
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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user