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