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