mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
3
tests/wpt/web-platform-tests/css/css-display/OWNERS
Normal file
3
tests/wpt/web-platform-tests/css/css-display/OWNERS
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@kojiishi
|
||||
@tabatkins
|
||||
@fantasai
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
align-items: center;
|
||||
border: 2px solid purple;
|
||||
}
|
||||
.container > div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there's a blue square vertically centered inside the box.</p>
|
||||
<div class="container">
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: flex container align-items is used for flex item regardless of intermediate display: contents ancestors</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#align-items-property">
|
||||
<link rel="match" href="display-contents-alignment-001-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
align-items: center;
|
||||
border: 2px solid purple;
|
||||
}
|
||||
.contents {
|
||||
display: contents;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.contents > div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
align-self: auto;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there's a blue square vertically centered inside the box.</p>
|
||||
<div class="container">
|
||||
<div class="contents">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
justify-items: center;
|
||||
border: 2px solid purple;
|
||||
}
|
||||
.container > div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there's a blue square horizontally centered inside the box.</p>
|
||||
<div class="container">
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: grid container justify-items is used for grid item regardless of intermediate display: contents ancestors</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align/#justify-items-property">
|
||||
<link rel="match" href="display-contents-alignment-002-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
justify-items: center;
|
||||
border: 2px solid purple;
|
||||
}
|
||||
.contents {
|
||||
display: contents;
|
||||
justify-items: start;
|
||||
}
|
||||
.contents > div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
justify-self: auto;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there's a blue square horizontally centered inside the box.</p>
|
||||
<div class="container">
|
||||
<div class="contents">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: Generated ::before and ::after on display:contents</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-pass-ref.html">
|
||||
<style>
|
||||
div { display: contents }
|
||||
.p::before { content: "P" }
|
||||
.a::before { content: "A" }
|
||||
.s::after { content: "S" }
|
||||
</style>
|
||||
<p>You should see the word PASS below.</p>
|
||||
<div><!--
|
||||
--><div><div class="p"></div></div><!--
|
||||
--><div></div><!--
|
||||
--><div class="a"></div><!--
|
||||
--><div>S<div class="s"></div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: Generated ::before and ::after with display:contents</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-pass-ref.html">
|
||||
<style>
|
||||
div::before {
|
||||
display: contents;
|
||||
border: 100px solid red;
|
||||
content: "P"
|
||||
}
|
||||
div::after {
|
||||
display: contents;
|
||||
border: 100px solid red;
|
||||
content: "S"
|
||||
}
|
||||
</style>
|
||||
<p>You should see the word PASS below.</p>
|
||||
<div>A<span>S</span></div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: display:contents in block layout</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-pass-no-red-ref.html">
|
||||
<style>
|
||||
#contents {
|
||||
display: contents;
|
||||
border: 10px solid red
|
||||
}
|
||||
</style>
|
||||
<p>You should see the word PASS and no red below.</p>
|
||||
<div>
|
||||
<div id="contents">
|
||||
<div id="inner">P<span>A</span>S<span>S</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<p>You should see the word PASS with a 300px top margin below.</p>
|
||||
<div style="margin-top: 300px">PASS</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: margin collapsing through display:contents</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-block-002-ref.html">
|
||||
<style>
|
||||
#outer { margin-top: 100px }
|
||||
#inner { margin-top: 300px }
|
||||
#contents {
|
||||
display: contents;
|
||||
margin-top: 2000px
|
||||
}
|
||||
</style>
|
||||
<p>You should see the word PASS with a 300px top margin below.</p>
|
||||
<div id="outer">
|
||||
<div id="contents">
|
||||
<div id="inner">PASS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: Computed style for display:contents</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#transformations">
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-1/#resolved-values">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
html, .contents { display: contents }
|
||||
|
||||
#t2 .contents { background-color: green }
|
||||
#t2 span { background-color: inherit }
|
||||
|
||||
#t3 .contents { color: green }
|
||||
|
||||
#t4 {
|
||||
width: auto;
|
||||
height: 50%;
|
||||
margin-left: 25%;
|
||||
padding-top: 10%;
|
||||
}
|
||||
</style>
|
||||
<div id="t1" class="contents"></div>
|
||||
<div id="t2">
|
||||
<div class="contents">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="t3">
|
||||
<div class="contents">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="t4" class="contents"></div>
|
||||
<script>
|
||||
test(function(){
|
||||
assert_equals(getComputedStyle(document.querySelector("#t1")).display, "contents");
|
||||
}, "Serialization of computed style value for display:contents");
|
||||
|
||||
test(function(){
|
||||
assert_equals(getComputedStyle(document.querySelector("#t2 span")).backgroundColor, "rgb(0, 128, 0)");
|
||||
}, "display:contents element as inherit parent - explicit inheritance");
|
||||
|
||||
test(function(){
|
||||
assert_equals(getComputedStyle(document.querySelector("#t3 span")).color, "rgb(0, 128, 0)");
|
||||
}, "display:contents element as inherit parent - implicit inheritance");
|
||||
|
||||
test(function(){
|
||||
var computed = getComputedStyle(document.querySelector("#t4"));
|
||||
assert_equals(computed.width, "auto");
|
||||
assert_equals(computed.height, "50%");
|
||||
assert_equals(computed.marginLeft, "25%");
|
||||
assert_equals(computed.paddingTop, "10%");
|
||||
}, "Resolved value should be computed value, not used value, for display:contents");
|
||||
|
||||
test(function(){
|
||||
assert_equals(getComputedStyle(document.documentElement).display, "block");
|
||||
}, "display:contents is blockified for root elements");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: Dynamic changes to ::before and ::after on display:contents</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-pass-green-no-red-ref.html">
|
||||
<style>
|
||||
div { display: contents; color: green; }
|
||||
.p::before { content: "P" }
|
||||
.a::before { content: "A" }
|
||||
.s::after { content: "S" }
|
||||
div::before { color: red; display: contents; border: 1px solid red; }
|
||||
.active div::before { color: green; }
|
||||
</style>
|
||||
<p>You should see the word PASS in green and no red below.</p>
|
||||
<div><!--
|
||||
--><div><div class="p"></div></div><!--
|
||||
--><div></div><!--
|
||||
--><div class="a"></div><!--
|
||||
--><div>S<div class="s"></div></div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.body.className = "active";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: Dynamic changes to ::before and ::after on display:contents when ::first-letter is in effect</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-pass-green-no-red-ref.html">
|
||||
<style>
|
||||
div { color: blue; }
|
||||
div::first-letter { color: red; }
|
||||
div::before { display: contents; content: "PASS"; border: 1px solid red; }
|
||||
.active div::before,
|
||||
.active div::first-letter { color: green; }
|
||||
</style>
|
||||
<p>You should see the word PASS in green and no red below.</p>
|
||||
<div></div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.body.className = "active";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display 3: Display contents reattachment works well in a flex container</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-flex-001-ref.html">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
.contents {
|
||||
display: contents;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p>
|
||||
<div class="flex">
|
||||
P
|
||||
<div class="contents">
|
||||
<div>A</div>
|
||||
</div>
|
||||
<div class="contents">
|
||||
<div class="inline">S<div>0</div></div>
|
||||
</div>
|
||||
<div class="contents">
|
||||
S
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'inline'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display 3: Display contents reattachment works well in a flex container</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-flex-001-ref.html">
|
||||
<script src="support/util.js"></script>
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
.contents {
|
||||
display: contents;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p>
|
||||
<div class="flex">
|
||||
P
|
||||
<div class="contents">
|
||||
<div>A</div>
|
||||
</div>
|
||||
<div class="contents">
|
||||
<div class="inline">S<div>0</div></div>
|
||||
</div>
|
||||
<div class="contents">
|
||||
S
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'none'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in flex layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-flex-002-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<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>1<span class="b">1</span></div></div></div>
|
||||
<div class="contents c2"><div class="inline">2a<div>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><div class="contents c5">5a</div></div>
|
||||
<div class="c5">5b</div>
|
||||
<div class="contents c6"><div>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>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>10</div></div>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'inline'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in flex layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-flex-002-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<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>1<span class="b">1</span></div></div></div>
|
||||
<div class="contents c2"><div class="inline">2a<div>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><div class="contents c5">5a</div></div>
|
||||
<div class="c5">5b</div>
|
||||
<div class="contents c6"><div>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>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>10</div></div>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'none'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in flex layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-flex-002-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div class="flex"><div class="contents 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>1<span class="b">1</span></div></div></div>
|
||||
<div class="contents c2"><div class="inline">2a<div>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><div class="contents c4">4</div></div>
|
||||
<div><div class="contents c5">5a</div></div>
|
||||
<div class="c5">5b</div>
|
||||
<div class="contents c6"><div>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>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>10</div></div>
|
||||
</div></div>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'inline'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in flex layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-flex-002-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div class="flex"><div class="contents 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>1<span class="b">1</span></div></div></div>
|
||||
<div class="contents c2"><div class="inline">2a<div>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><div class="contents c4">4</div></div>
|
||||
<div><div class="contents c5">5a</div></div>
|
||||
<div class="c5">5b</div>
|
||||
<div class="contents c6"><div>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>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>10</div></div>
|
||||
</div></div>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'none'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<style>
|
||||
div {
|
||||
display: contents;
|
||||
border: 10px solid red;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Test passes if there is no red text and no red border.
|
||||
</p>
|
||||
<fieldset>
|
||||
<div></div>
|
||||
</fieldset>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: Dynamic changes to display: contents generated content in fieldsets.</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-dynamic-generated-content-fieldset-001-ref.html">
|
||||
<style>
|
||||
.after::after {
|
||||
content: "FAIL";
|
||||
color: red;
|
||||
}
|
||||
div {
|
||||
display: contents;
|
||||
border: 10px solid red;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Test passes if there is no red text and no red border.
|
||||
</p>
|
||||
<fieldset>
|
||||
<div class="after"></div>
|
||||
</fieldset>
|
||||
<script>
|
||||
document.body.offsetHeight;
|
||||
document.querySelector("div").classList.remove("after");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in inline-flex layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-inline-flex-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div style="color: red">
|
||||
<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>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'none'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in inline-flex layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-inline-flex-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div style="color: red">
|
||||
<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>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'none'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in list layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-list-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div style="color: red">
|
||||
<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>1<span class="b">1</span></div></div></div>
|
||||
<div class="contents c2"><div class="inline">2a<div>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><div class="contents c5">5a</div></div>
|
||||
<div class="c5">5b</div>
|
||||
<div class="contents c6"><div>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>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>10</div></div>
|
||||
</div></li></ul>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'inline'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in list layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-list-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div style="color: red">
|
||||
<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>1<span class="b">1</span></div></div></div>
|
||||
<div class="contents c2"><div class="inline">2a<div>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><div class="contents c5">5a</div></div>
|
||||
<div class="c5">5b</div>
|
||||
<div class="contents c6"><div>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>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>10</div></div>
|
||||
</div></li></ul>
|
||||
</div>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'inline'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display:contents in multicolumn layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-multicol-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div style="color: red">
|
||||
<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>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'inline'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display:contents in multicolumn layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-multicol-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div style="color: red">
|
||||
<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>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(document, window,
|
||||
function(e) { e.style.display = 'none'; },
|
||||
function(e) { e.style.display = ''; })
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display:contents</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-table-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div 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>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(
|
||||
document,
|
||||
window,
|
||||
function(e) { e.style.display = 'inline'; },
|
||||
function(e) { e.style.display = 'contents'; });
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display:contents</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-table-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div 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>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(
|
||||
document,
|
||||
window,
|
||||
function(e) { e.style.display = 'none'; },
|
||||
function(e) { e.style.display = 'contents'; });
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display:contents in table layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-table-002-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div style="color: red">
|
||||
<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>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(
|
||||
document,
|
||||
window,
|
||||
function(e) { e.style.display = 'inline'; },
|
||||
function(e) { e.style.display = 'contents'; });
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display:contents in table layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-table-002-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<script src="support/util.js"></script>
|
||||
<div style="color: red">
|
||||
<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>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
eachDisplayContentsElementIn(
|
||||
document,
|
||||
window,
|
||||
function(e) { e.style.display = 'none'; },
|
||||
function(e) { e.style.display = 'contents'; });
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: display:contents and ::first-letter</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo">
|
||||
<link rel="match" href="display-contents-pass-green-no-red-ref.html">
|
||||
<style>
|
||||
#contents { display: contents }
|
||||
#contents::first-letter { background-color: red }
|
||||
#container::first-letter { color: green }
|
||||
span { color: green }
|
||||
</style>
|
||||
<p>You should see the word PASS in green and no red below.</p>
|
||||
<div id="container">
|
||||
<div id="contents">P<span>ASS</span></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: display:contents and ::first-line</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo">
|
||||
<link rel="match" href="display-contents-pass-green-no-red-ref.html">
|
||||
<style>
|
||||
#contents { display: contents }
|
||||
#contents::first-line { background-color: red }
|
||||
#container::first-line { color: green }
|
||||
</style>
|
||||
<p>You should see the word PASS in green and no red below.</p>
|
||||
<div id="container">
|
||||
<div id="contents"><span>P</span>ASS</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p>
|
||||
<div class="flex">
|
||||
P
|
||||
<div>A</div>
|
||||
<div class="inline">S<div>0</div></div>
|
||||
S
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: display: contents inside a flex container</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-flex-001-ref.html">
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
.contents {
|
||||
display: contents;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p>
|
||||
<div class="flex">
|
||||
P
|
||||
<div class="contents">
|
||||
<div>A</div>
|
||||
</div>
|
||||
<div class="contents">
|
||||
<div class="inline">S<div>0</div></div>
|
||||
</div>
|
||||
<div class="contents">
|
||||
S
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div style="color: red" class="ref">
|
||||
<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>1<span>1</span></div></div></div>
|
||||
<div class="inline 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><div class="inline c5">5a</div></div>
|
||||
<div class="c5">5b</div>
|
||||
<div class="inline c6"><div>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>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>10</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in flex layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-flex-002-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<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>1<span class="b">1</span></div></div></div>
|
||||
<div class="contents c2"><div class="inline">2a<div>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><div class="contents c5">5a</div></div>
|
||||
<div class="c5">5b</div>
|
||||
<div class="contents c6"><div>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>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>10</div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in flex layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-flex-002-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div class="flex"><div class="contents 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>1<span class="b">1</span></div></div></div>
|
||||
<div class="contents c2"><div class="inline">2a<div>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><div class="contents c4">4</div></div>
|
||||
<div><div class="contents c5">5a</div></div>
|
||||
<div class="c5">5b</div>
|
||||
<div class="contents c6"><div>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>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>10</div></div>
|
||||
</div></div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: display:contents works on floated elements</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-pass-no-red-ref.html">
|
||||
<style>
|
||||
div {
|
||||
display: contents;
|
||||
float: right;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<p>You should see the word PASS and no red below.</p>
|
||||
<div>P<span>A</span>S<span>S</span></div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: display:contents in inline layout</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-pass-no-red-ref.html">
|
||||
<style>
|
||||
#contents {
|
||||
display: contents;
|
||||
border: 10px solid red
|
||||
}
|
||||
</style>
|
||||
<p>You should see the word PASS and no red below.</p>
|
||||
<span>
|
||||
P<div id="contents">A<span>S</span></div>S
|
||||
</span>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div style="color: red" class="ref">
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in inline-flex layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-inline-flex-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div style="color: red">
|
||||
<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>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div style="color: red" class="ref">
|
||||
<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>1<span>1</span></div></div></div>
|
||||
<div class="inline c2"><div class="inline">2a<div>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><div class="inline c5">5a</div></div>
|
||||
<div class="c5">5b</div>
|
||||
<div class="inline c6"><div>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>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>10</div></div>
|
||||
</div></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display: contents in list layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-list-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div style="color: red">
|
||||
<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>1<span class="b">1</span></div></div></div>
|
||||
<div class="contents c2"><div class="inline">2a<div>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><div class="contents c5">5a</div></div>
|
||||
<div class="c5">5b</div>
|
||||
<div class="contents c6"><div>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>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>10</div></div>
|
||||
</div></li></ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div style="color: red" class="ref">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display:contents in multicolumn layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-multicol-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div style="color: red">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: display:contents works on out-of-flow positioned elements</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-pass-no-red-ref.html">
|
||||
<style>
|
||||
div {
|
||||
display: contents;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<p>You should see the word PASS and no red below.</p>
|
||||
<div>P<span>A</span>S<span>S</span></div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: display:contents works on out-of-flow positioned elements</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-pass-no-red-ref.html">
|
||||
<style>
|
||||
div {
|
||||
display: contents;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<p>You should see the word PASS and no red below.</p>
|
||||
<div>P<span>A</span>S<span>S</span></div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<p>You should see the word PASS in green and no red below.</p>
|
||||
<div style="color:green"><span>P</span>ASS</div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<p>You should see the word PASS and no red below.</p>
|
||||
<div>P<span>A</span>S<span>S</span></div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<p>You should see the word PASS below.</p>
|
||||
P<span>A</span>S<span>S</span>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<style>
|
||||
button, img, input, textarea {
|
||||
display: contents;
|
||||
border: 10px solid green
|
||||
}
|
||||
</style>
|
||||
<p>You should see five form inputs, and an orange image, with green border below.</p>
|
||||
<button>Button</button>
|
||||
<input type="text" value="text"></input>
|
||||
<input type="file"></input>
|
||||
<input type="password" value="password"></input>
|
||||
<textarea>textarea</textarea>
|
||||
<img src="support/swatch-orange.png">
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: display:contents and replaced elements</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-replaced-001-ref.html">
|
||||
<style>
|
||||
button, img, input, textarea {
|
||||
display: contents;
|
||||
border: 10px solid green
|
||||
}
|
||||
</style>
|
||||
<p>You should see five form inputs, and an orange image, with green border below.</p>
|
||||
<button>Button</button>
|
||||
<input type="text" value="text"></input>
|
||||
<input type="file"></input>
|
||||
<input type="password" value="password"></input>
|
||||
<textarea>textarea</textarea>
|
||||
<img src="support/swatch-orange.png">
|
||||
|
|
@ -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>
|
||||
|
|
@ -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-001-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>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div style="color: red" class="ref">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display:contents in table layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-table-001-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div 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>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div style="color: red" class="ref">
|
||||
<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>
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSS display:contents in table layout</title>
|
||||
<!-- Imported from: https://bugzilla.mozilla.org/show_bug.cgi?id=907396 -->
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-table-002-ref.html">
|
||||
<link rel="stylesheet" href="support/acid.css">
|
||||
<div style="color: red">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: Children of multiple td elements with display:contents wrapped in single anonymous table cell</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-pass-ref.html">
|
||||
<style>
|
||||
td {
|
||||
display: contents;
|
||||
padding-right: 3em
|
||||
}
|
||||
</style>
|
||||
<p>You should see the word PASS below.</p>
|
||||
<table cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td>P</td><td>A</td><td>S</td><td>S</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; }
|
||||
</style>
|
||||
<p>Test passes if you see the word "PASS" below</p>
|
||||
PASS
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: Only text on a display: contents subtree</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecobos@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-text-only-001-ref.html">
|
||||
<style>
|
||||
body { display: contents; }
|
||||
</style>
|
||||
<p>Test passes if you see the word "PASS" below</p>
|
||||
PASS
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<p>You should see the word PASS below.</p>
|
||||
<table cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td>P<span>A</span></td>
|
||||
<td>S<span>S</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Display: td elements wrapped in single anonymous table-row with display:contents tr</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
|
||||
<link rel="match" href="display-contents-tr-001-ref.html">
|
||||
<style>
|
||||
tr { display: contents }
|
||||
</style>
|
||||
<p>You should see the word PASS below.</p>
|
||||
<table cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td>P<span>A</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>S<span>S</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
html, body {
|
||||
color: black;
|
||||
background-color: white;
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body { color: red; }
|
||||
|
||||
.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; }
|
||||
|
||||
/** This is the only difference between references and non-reference styles */
|
||||
.ref .c2 { background: transparent; }
|
||||
.ref .b { background:blue; }
|
||||
.ref div.contents { display: block; }
|
||||
.ref span.contents { display: inline; }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
23
tests/wpt/web-platform-tests/css/css-display/support/util.js
Normal file
23
tests/wpt/web-platform-tests/css/css-display/support/util.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
function eachDisplayContentsElementIn(document, window, callbackDo, callbackUndo) {
|
||||
var elements = [];
|
||||
|
||||
document.body.offsetHeight;
|
||||
|
||||
// NOTE: Doing qsa('*') and getComputedStyle is just for the
|
||||
// test's sake, since it's easier to mess it up when
|
||||
// getComputedStyle is involved.
|
||||
var all = document.querySelectorAll('*');
|
||||
for (var i = 0; i < all.length; ++i) {
|
||||
if (window.getComputedStyle(all[i]).display === "contents") {
|
||||
callbackDo(all[i]);
|
||||
elements.push(all[i]);
|
||||
}
|
||||
}
|
||||
|
||||
document.body.offsetHeight;
|
||||
|
||||
for (var i = 0; i < elements.length; ++i)
|
||||
callbackUndo(elements[i]);
|
||||
|
||||
document.body.offsetHeight;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue