зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1541659 [wpt PR 16145] - Adding 5 new contain-content-* tests, 1 contain-strict test and 2 ref…, a=testonly
Automatic update from web-platform-tests Adding 5 new contain-content-* tests, 1 contain-strict test and 2 ref… (#16145) Adding contain-content-001.html contain-content-002.html contain-content-003.html contain-content-004.html contain-content-011.html contain-strict-011.html reference/contain-content-011-ref.html reference/contain-strict-011-ref.html where contain-content-011 test and contain-strict-011 test explicitly verify that **'contain: strict' and 'contain: content' do not turn on style containment** -- wpt-commits: 3547167a5284e011145013c7705ac7cea8d01c91 wpt-pr: 16145
This commit is contained in:
Gérard Talbot
James Graham
Родитель
896af39088
Коммит
975cd0014d
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: a block with 'contain: content' alongside a float</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
|
||||
<link rel="match" href="reference/contain-layout-ifc-022-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
color: transparent;
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
div#floated-left
|
||||
{
|
||||
background-color: blue;
|
||||
float: left;
|
||||
margin: 8px;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
div#with-contain-content
|
||||
{
|
||||
background-color: orange;
|
||||
width: 12em;
|
||||
|
||||
contain: content;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<p>Test passes if the orange rectangle and blue rectangle do not overlap.
|
||||
|
||||
<div id="floated-left">Some text in a blue rectangle.</div>
|
||||
|
||||
<div id="with-contain-content">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: 'contain: content' and margin collapsing</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
|
||||
<link rel="match" href="reference/contain-paint-ifc-011-ref.html">
|
||||
|
||||
<meta content="This test checks that a block element with 'contain: content' establishes a new block formatting context which is independent and separate from others. This causes margin collapsing to be ineffective among vertically-adjacent boxes. In this test, the top margin of parent boxes and top margin of their respective first in-flow child do not collapse. Also, in this test, the bottom margin of the last in-flow child of boxes and bottom margin of their respective parent boxes do not collapse." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
contain: content;
|
||||
margin: 30px 0px;
|
||||
}
|
||||
|
||||
div#grand-grand-parent-orange
|
||||
{
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
div#grand-parent-blue
|
||||
{
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
div#parent-lime
|
||||
{
|
||||
background-color: lime;
|
||||
}
|
||||
|
||||
div#collapse-through-child /* margin collapsing through element */
|
||||
{
|
||||
contain: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are 5 horizontal stripes across the page in this order (from top to bottom): an orange stripe, a blue stripe, a bright green stripe, a blue stripe and then an orange stripe.
|
||||
|
||||
<div id="grand-grand-parent-orange">
|
||||
|
||||
<div id="grand-parent-blue">
|
||||
|
||||
<div id="parent-lime">
|
||||
|
||||
<div id="collapse-through-child"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: element with 'contain: content' and absolutely positioned descendants</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="This test checks that an element with 'contain: content' acts as containing block for its absolutely positioned descendants.">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#contain-content
|
||||
{
|
||||
background-color: red;
|
||||
contain: content;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.abspos
|
||||
{
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
div#first-abspos
|
||||
{
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
div#second-abspos
|
||||
{
|
||||
bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
|
||||
<div id="contain-content">
|
||||
<div id="first-abspos" class="abspos"></div>
|
||||
<div id="second-abspos" class="abspos"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: 'contain: content' applies to 'table-cell' elements</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="reference/contain-layout-cell-001-ref.html">
|
||||
|
||||
<meta content="In this test, the td#contain should act as the containing block for div#abs-pos ." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
table
|
||||
{
|
||||
background-color: blue;
|
||||
border-spacing: 2px;
|
||||
height: 206px;
|
||||
table-layout: fixed;
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
background-color: white;
|
||||
padding: 0px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
td#contain
|
||||
{
|
||||
contain: content;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
background-color: red;
|
||||
color: yellow;
|
||||
font-family: monospace;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div#abs-pos
|
||||
{
|
||||
background-color: green;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is the word PASS and if there is <strong>no red</strong>.
|
||||
|
||||
<table>
|
||||
|
||||
<tr><td> <td>
|
||||
|
||||
<tr><td> <td id="contain"><span>FAIL</span><div id="abs-pos">PASS</div>
|
||||
|
||||
</table>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: 'contain: content' does not turn on style containment</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="match" href="reference/contain-content-011-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="'contain: content' does not turn on style containment. So, in this test, the counter of div.abspos child should not be reset and must not be reset.">
|
||||
|
||||
<style>
|
||||
body
|
||||
{
|
||||
counter-reset: counter-of-abspos-div 17;
|
||||
}
|
||||
|
||||
/*
|
||||
This creates a new counter identified as
|
||||
"counter-of-abspos-div" and initially sets
|
||||
such counter to 17 (an entirely arbitrary
|
||||
number)
|
||||
*/
|
||||
|
||||
div
|
||||
{
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
div#contain-content
|
||||
{
|
||||
background-color: red;
|
||||
contain: content;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
div.abspos
|
||||
{
|
||||
background-color: green;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
div#contain-content > div.abspos
|
||||
{
|
||||
counter-increment: counter-of-abspos-div 4;
|
||||
}
|
||||
|
||||
/*
|
||||
This increments the counter identified as
|
||||
"counter-of-abspos-div" of the step value
|
||||
of 4 (an entirely arbitrary number) each and
|
||||
every time there is a div.abspos child
|
||||
within the subtree of div#contain-content
|
||||
*/
|
||||
|
||||
div#first-abspos
|
||||
{
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
div#second-abspos
|
||||
{
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
div#result::after
|
||||
{
|
||||
content: counter(counter-of-abspos-div);
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
/*
|
||||
Now, the generated content is set to the
|
||||
current value of the counter identified
|
||||
as "counter-of-abspos-div":
|
||||
17 + 4 * 2 == 25
|
||||
*/
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled green square, no red and the number 25.
|
||||
|
||||
<div id="contain-content">
|
||||
<div id="first-abspos" class="abspos"></div>
|
||||
<div id="second-abspos" class="abspos"></div>
|
||||
</div>
|
||||
|
||||
<div id="result"></div>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Containment Test: 'contain: strict' does not turn on style containment</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="match" href="reference/contain-strict-011-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="'contain: strict' does not turn on style containment. So, in this test, the counter of spans should not be reset and must not be reset.">
|
||||
|
||||
<style>
|
||||
body
|
||||
{
|
||||
counter-reset: counter-of-span 17;
|
||||
}
|
||||
|
||||
/*
|
||||
This creates a new counter identified as "counter-of-span"
|
||||
and initially sets such counter to 17 (an entirely
|
||||
arbitrary number)
|
||||
*/
|
||||
|
||||
div
|
||||
{
|
||||
contain: strict;
|
||||
}
|
||||
|
||||
div > span
|
||||
{
|
||||
background-color: yellow;
|
||||
color: red;
|
||||
counter-increment: counter-of-span 3;
|
||||
}
|
||||
|
||||
/*
|
||||
This increments the counter identified as "counter-of-span"
|
||||
of the step value of 3 (an entirely arbitrary number) each
|
||||
and every time there is a <span> child within the subtree
|
||||
of div
|
||||
*/
|
||||
|
||||
p#test::after
|
||||
{
|
||||
content: counter(counter-of-span);
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
/*
|
||||
Now, the generated content is set to the current
|
||||
value of the counter identified as "counter-of-span":
|
||||
17 + 3 * 3 == 26
|
||||
*/
|
||||
</style>
|
||||
|
||||
<body>
|
||||
|
||||
<div><span>FAIL1</span> <span>FAIL2</span> <span>FAIL3</span></div>
|
||||
|
||||
<p id="pass-fail-conditions-sentence">Test passes if there is the number 26.
|
||||
|
||||
<p id="test">
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
div#green-square
|
||||
{
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#result
|
||||
{
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square, no red and the number 25.
|
||||
|
||||
<div id="green-square"></div>
|
||||
|
||||
<div id="result">25</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reference Test</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<style>
|
||||
p
|
||||
{
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
div
|
||||
{
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is the number 26.
|
||||
|
||||
<div>26</div>
|
||||
Загрузка…
Ссылка в новой задаче