mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -8,7 +8,6 @@
|
|||
<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
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<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
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<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
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<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' turns on style containment. So, in this test, the counter of div.abspos child should not be reset and must not be reset.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<p>You should see a wide orange rectangle to the left of the third float, overlapping the float.</p>
|
||||
<div style="width:400px;position:relative">
|
||||
<div style="float:right;width:200px;height:100px;background:blue"></div>
|
||||
<div style="float:left;width:250px;height:100px;background:blue"></div>
|
||||
<div style="float:right;width:300px;height:100px;background:blue"></div>
|
||||
<div style="position:absolute;left:0;top:200px;width:200px;height:20px;background-color:orange"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<title>CSS Containment Test: inline-size of fit-content bfc constrained by floats, affected by height via its contents</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="match" href="contain-inline-size-bfc-floats-001-ref.html">
|
||||
<style>
|
||||
.float { float: left; background-color: blue; }
|
||||
.right { float: right; }
|
||||
|
||||
#outer { width: 400px; }
|
||||
#float1 { width: 200px; height: 100px; }
|
||||
#float2 { width: 250px; height: 100px; }
|
||||
#float3 { width: 300px; height: 100px; }
|
||||
|
||||
#contain {
|
||||
contain: inline-size;
|
||||
display: flow-root;
|
||||
width: fit-content;
|
||||
line-height: 1em;
|
||||
}
|
||||
#filler { height: 150px; }
|
||||
#orange {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
background: orange;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
<p>You should see a wide orange rectangle to the left of the third float, overlapping the float.</p>
|
||||
<div id="outer">
|
||||
<div id="float1" class="float right"></div>
|
||||
<div id="float2" class="float left"></div>
|
||||
<div id="float3" class="float right"></div>
|
||||
<div id="contain">
|
||||
<span id="orange"></span>
|
||||
<div id="filler"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<p>You should see a wide orange rectangle to the left of the first float, overlapping the float.</p>
|
||||
<div style="width:400px;position:relative">
|
||||
<div style="float:right;width:200px;height:100px;background:blue"></div>
|
||||
<div style="float:left;width:250px;height:100px;background:blue"></div>
|
||||
<div style="float:right;width:300px;height:100px;background:blue"></div>
|
||||
<div style="position:absolute;left:0;top:0;width:300px;height:20px;background-color:orange"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<title>CSS Containment Test: inline-size of fit-content bfc constrained by floats, not affected by height</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="match" href="contain-inline-size-bfc-floats-002-ref.html">
|
||||
<style>
|
||||
.float { float: left; background-color: blue; }
|
||||
.right { float: right; }
|
||||
|
||||
#outer { width: 400px; }
|
||||
#float1 { width: 200px; height: 100px; }
|
||||
#float2 { width: 250px; height: 100px; }
|
||||
#float3 { width: 300px; height: 100px; }
|
||||
|
||||
#contain {
|
||||
contain: inline-size;
|
||||
display: flow-root;
|
||||
width: fit-content;
|
||||
}
|
||||
#orange {
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
height: 20px;
|
||||
background: orange;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
<p>You should see a wide orange rectangle to the left of the first float, overlapping the float.</p>
|
||||
<div id="outer">
|
||||
<div id="float1" class="float right"></div>
|
||||
<div id="float2" class="float left"></div>
|
||||
<div id="float3" class="float right"></div>
|
||||
<div id="contain">
|
||||
<span id="orange"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain:inline-size and fieldset</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<p>The fieldset below has inline-size containment. It should not make any
|
||||
inline-size room for the blue legend line, but it should fit the hotpink
|
||||
square in the block direction (but not in the inline direction, where it
|
||||
should overflow the right border of the fieldset.</p>
|
||||
<fieldset style="border:20px solid; width:0; min-width:0;">
|
||||
<legend>
|
||||
<div style="width:200px; height:2px; background:blue;"></div>
|
||||
</legend>
|
||||
<div style="width:100px; height:100px; background:hotpink;"></div>
|
||||
</fieldset>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain:inline-size and fieldset</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="match" href="contain-inline-size-fieldset-ref.html">
|
||||
<p>The fieldset below has inline-size containment. It should not make any
|
||||
inline-size room for the blue legend line, but it should fit the hotpink
|
||||
square in the block direction (but not in the inline direction, where it
|
||||
should overflow the right border of the fieldset.</p>
|
||||
<fieldset style="contain:inline-size; border:20px solid; width:fit-content;">
|
||||
<legend>
|
||||
<div style="width:200px; height:2px; background:blue;"></div>
|
||||
</legend>
|
||||
<div style="width:100px; height:100px; background:hotpink;"></div>
|
||||
</fieldset>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain:inline-size on flexbox</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="display:flex; contain:inline-size; width:fit-content; border:solid green; border-width:0 50px; background:red;">
|
||||
<div style="width:100px; height:100px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain:inline-size on flexitem</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="width:100px; height:100px; background:red;">
|
||||
<div style="display:flex;">
|
||||
<div style="contain:inline-size; flex-basis:100px; background:green;">
|
||||
<div style="width:300px; height:100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain:inline-size on grid</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="display:grid; contain:inline-size; width:fit-content; border:solid green; border-width:0 50px; background:red;">
|
||||
<div style="width:100px; height:100px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain:inline-size on legend</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<p>There should be blue square (legend), and a yellow square below it (fieldset
|
||||
content).</p>
|
||||
<fieldset style="width:fit-content; min-width:0;">
|
||||
<legend style="width:0; border:solid blue; border-width:0 50px; padding:0; background:red;">
|
||||
<div style="width:500px; height:100px;"></div>
|
||||
</legend>
|
||||
<div style="height:100px; background:yellow;"></div>
|
||||
</fieldset>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain:inline-size on legend</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="match" href="contain-inline-size-legend-ref.html">
|
||||
<p>There should be blue square (legend), and a yellow square below it (fieldset
|
||||
content).</p>
|
||||
<fieldset style="width:fit-content; min-width:0;">
|
||||
<legend style="contain:inline-size; border:solid blue; border-width:0 50px; padding:0; background:red;">
|
||||
<div style="width:500px; height:100px;"></div>
|
||||
</legend>
|
||||
<div style="height:100px; background:yellow;"></div>
|
||||
</fieldset>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain:inline-size on multicol</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="columns:4; column-gap:0; contain:inline-size; width:fit-content; border:solid green; border-width:0 50px; background:red;">
|
||||
<div style="width:25px; height:400px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain:inline-size on block-level box</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="contain:inline-size; width:fit-content; border:solid green; border-width:0 50px; background:red;">
|
||||
<div style="width:100px; height:100px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain:inline-size on table</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<!-- Note that size containment doesn't apply to tables:
|
||||
https://www.w3.org/TR/css-contain-1/#containment-size -->
|
||||
<div style="width:100px; height:100px; background:red;">
|
||||
<div style="display:table; contain:inline-size; width:fit-content; background:green;">
|
||||
<div style="width:100px; height:100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>contain:inline-size on element with vertical writing-mode</title>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="writing-mode:vertical-rl; contain:inline-size; width:fit-content; border:solid green; border-width:50px 0; background:red;">
|
||||
<div style="width:100px; height:100px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Layout containment inside a fit-content element</title>
|
||||
<link rel="help" href="https://crbug.com/1268449">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name=assert
|
||||
content="Layout containment inside a fit-content element should update size when the content is changed">
|
||||
<style>
|
||||
#contain-parent {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#contain-layout {
|
||||
contain: layout;
|
||||
background: green;
|
||||
}
|
||||
|
||||
#content {
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="contain-parent">
|
||||
<div id="contain-layout">
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.requestAnimationFrame(() => {
|
||||
document.body.offsetTop;
|
||||
document.getElementById('content').style.width = '100px';
|
||||
document.body.offsetTop;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
<meta name=assert content="With contain:layout, for the purpose of the vertical-align property, the containing element is treated as having no baseline.">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
#red {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<title>CSS-contain test: layout containment and forced breaks</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<meta content="" name="flags">
|
||||
<meta content="forced breaks within layout containment do not propagate to the parent." name="assert">
|
||||
|
||||
<link href="reference/contain-layout-breaks-002-ref.html" rel="match">
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-layout-cell-001-ref.html">
|
||||
|
||||
<meta content="In this test, the div#contain should act as the containing block for div#abs-pos ." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#table
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<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
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-layout-ifc-022-ref.html">
|
||||
|
||||
<meta content="This test checks that an element with 'contain: layout' will make such element create its own formatting context. In this test, the element with 'contain: layout' acts as if it has its own formatting context independent from div#floated-left element. In other words, the div#with-contain-layout is no longer required to flow its content around the div#floated-left element and current line boxes next to the float are no longer shortened to make room for the margin box of the float." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
|
||||
<link rel="match" href="reference/contain-layout-size-003-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-paint-022-ref.html">
|
||||
|
||||
<meta content="This test checks that paint containment applies to atomic inline elements and then they act as containing block for absolutely positioned descendants." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<meta content="This test checks that paint containment applies to atomic inline elements so that they can act as containing block for absolutely positioned descendants." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
|
||||
<meta content="This test checks that paint containment does not apply to non-atomic inline elements so they do not act as containing block for absolutely positioned descendants." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#correct-containing-block
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
|
||||
<meta content="This test checks that an element with 'contain: paint' that has its content overflowing will clip at padding edge." name="assert">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/ref-if-there-is-no-red.xht">
|
||||
|
||||
<meta content="This test checks that an element with 'contain: paint' that has its content overflowing will clip at padding edge." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<meta name=assert content="contain:paint does not suppress baseline alignment">
|
||||
<link rel="match" href="reference/contain-baseline-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-paint">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-paint-047-ref.html">
|
||||
|
||||
<meta content="This test checks that the paint containment applies to table-cell elements. Therefore the content of the table-cell element should be clipped to the padding edge of its principal box." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#table
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-paint-047-ref.html">
|
||||
|
||||
<meta content="This test checks that the paint containment applies to table-cell elements. Therefore the content of the table-cell element should be clipped to the padding edge of its principal box." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
table
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/#contain-property">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/rendering-utils.js"></script>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="width: 100px; background: red">
|
||||
<div id="container" style="contain: paint; opacity: 0.1">
|
||||
<div style="height: 100px; background: green; position: relative"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
waitForAtLeastOneFrame().then(() => {
|
||||
container.style.opacity = 1;
|
||||
takeScreenshot();
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -30,7 +30,6 @@
|
|||
|
||||
-->
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@
|
|||
|
||||
-->
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@
|
|||
|
||||
-->
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#red-overlapped-test
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@
|
|||
|
||||
-->
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#red-overlapped-test
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@
|
|||
|
||||
-->
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -33,7 +33,6 @@
|
|||
|
||||
-->
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#red-container-circle
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@
|
|||
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@
|
|||
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
|
||||
<meta content="This test checks that the paint containment of an element clips contents.
|
||||
It should also prevent layout overflow from being propagated to ancestors." name="assert">
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
#container {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-paint-ifc-011-ref.html">
|
||||
|
||||
<meta content="This test checks that a block element with 'contain: paint' 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
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
|
||||
<link rel="match" href="reference/contain-paint-size-001-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
table
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
|
||||
<link rel="match" href="reference/contain-paint-size-001-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
|
||||
<link rel="match" href="reference/contain-layout-size-003-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="match" href="reference/contain-paint-047-ref.html">
|
||||
|
||||
<meta content="This test checks that paint containment applies to table elements. Therefore the content of the table element should be clipped to the padding edge of its principal box." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#table
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="match" href="reference/contain-paint-047-ref.html">
|
||||
|
||||
<meta content="This test checks that paint containment applies to table elements. Therefore the content of the table element (including its caption) should be clipped to the padding edge of its principal box." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#table
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-size-021-ref.html">
|
||||
|
||||
<meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 1 image and no in-flow block descendant." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<!--
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-size-023-ref.html">
|
||||
|
||||
<meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has text and no in-flow block descendant." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<!--
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-size-025-ref.html">
|
||||
|
||||
<meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 2 in-flow block descendants made of images." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<!--
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-size-027-ref.html">
|
||||
|
||||
<meta content="This test checks that when laying out an inline-block element with 'contain: size', the inline-block element must be treated as if it would have no contents. In this test, the inline-block element has 2 in-flow block descendants made of text." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<!--
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-size-025-ref.html">
|
||||
|
||||
<meta content="This test checks that when laying out an inline replaced element with 'contain: size', the inline replaced element must be treated as having an intrinsic width and height of 0." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
img#blue-test
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/contain-size-022-ref.html">
|
||||
|
||||
<meta content="This test checks that when laying out an inline replaced element with 'contain: size', the inline replaced element must be treated as having an intrinsic width and height of 0." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
img#blue-test
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-051-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
td
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-051-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#table
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-056-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
table
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-061-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-062-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-size">
|
||||
<link rel="match" href="reference/contain-size-063-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="asserts" content="the intrinsic size of a size-contained element is treated as 0 in various scenarios involving intrinsic sizing.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<meta name=assert content="contain:size does not suppress baseline alignment">
|
||||
<link rel="match" href="reference/contain-baseline-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="match" href="reference/contain-size-monolithic-001-ref.html">
|
||||
|
||||
<meta content="This test checks that an element with size containment becomes monolithic. In this test, the only way to break the content of such monolithic element is to break (or slice) the content at each pair of characters. Since column rules are only drawn between two columns that both have content and since the test expects only 1 column filled with content, therefore the column rule should not be painted, thus the 'no red' test success condition." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#multi-column
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
|
||||
<link rel="match" href="reference/contain-paint-size-001-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
table
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
|
||||
<link rel="match" href="reference/contain-paint-size-001-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#contain-property">
|
||||
<link rel="match" href="reference/contain-layout-size-003-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<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' turns on style containment. So, in this test, the counter of spans should not be reset and must not be reset.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<meta name=assert content="contain:style does not suppress baseline alignment">
|
||||
<link rel="match" href="reference/contain-baseline-ref.html">
|
||||
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="match" href="reference/contain-style-counters-001-ref.html">
|
||||
|
||||
<meta content="This test checks that when an element has 'contain: style', then counters which may be affecting its subtree are reset to 0 for such scope." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#create-counter
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="match" href="reference/contain-style-counters-001-ref.html">
|
||||
|
||||
<meta content="This test checks that when an element has 'contain: style', then counters which may be affecting its subtree are reset to 0 for such scope. In this test, the div#test does not generate a principal box because of 'display: contents'. Despite that particular condition, 'contain: style' will have an effect on div#test." name="assert">
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
div#create-counter
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-style">
|
||||
<link rel="match" href="reference/contain-style-counters-003-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
body
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-style">
|
||||
<link rel="match" href="reference/contain-style-counters-004-ref.html">
|
||||
|
||||
<meta name="flags" content="">
|
||||
|
||||
<style>
|
||||
body
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<!doctype html>
|
||||
<title>Container Queries - Animating container size</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { width: 200px; }
|
||||
to { width: 100px; }
|
||||
}
|
||||
#container {
|
||||
container-type: inline-size;
|
||||
animation: anim 1s linear paused;
|
||||
}
|
||||
#target {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
@container size(width: 200px) {
|
||||
#target {
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id=container>
|
||||
<div id=target>
|
||||
Test
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)');
|
||||
|
||||
assert_equals(container.getAnimations().length, 1);
|
||||
let animation = container.getAnimations()[0];
|
||||
animation.currentTime = 500;
|
||||
|
||||
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)');
|
||||
}, 'Animation affects container query evaluation');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!doctype html>
|
||||
<title>Container Queries - Animated container creating new containers</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { width: 200px; }
|
||||
to { width: 300px; }
|
||||
}
|
||||
#container {
|
||||
container-type: inline-size;
|
||||
animation: anim 1s linear paused;
|
||||
}
|
||||
#target {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#intermediate {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
@container size(min-width: 250px) {
|
||||
#intermediate {
|
||||
container-type: inline-size;
|
||||
}
|
||||
}
|
||||
|
||||
@container size(width: 200px) {
|
||||
#target {
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
|
||||
@container size(width: 100px) {
|
||||
/* Initially queries #container, but later queries #intermediate, when
|
||||
the other container query starts matching. */
|
||||
#target {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id=container>
|
||||
<div id=intermediate>
|
||||
<div id=target>
|
||||
Test
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)');
|
||||
|
||||
assert_equals(container.getAnimations().length, 1);
|
||||
let animation = container.getAnimations()[0];
|
||||
|
||||
animation.currentTime = 600;
|
||||
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)');
|
||||
|
||||
// Verify that #intermediate is queried by changing its width. The container
|
||||
// query will stop matching if #intermediate is the queried container.
|
||||
intermediate.style.width = '110px';
|
||||
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(255, 0, 0)');
|
||||
}, 'Animated container creating new container');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Container Queries - Animations within animating container</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes outer {
|
||||
from { width: 100px; }
|
||||
to { width: 300px; }
|
||||
}
|
||||
@keyframes inner {
|
||||
from { background-color: blue; }
|
||||
to { background-color: yellow; }
|
||||
}
|
||||
#container {
|
||||
container-type: inline-size;
|
||||
animation: outer 1s linear paused;
|
||||
}
|
||||
#target {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
@container size(min-width: 200px) {
|
||||
#target {
|
||||
animation: inner 1s linear paused;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id=container>
|
||||
<div id=target>
|
||||
Test
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)');
|
||||
|
||||
assert_equals(container.getAnimations().length, 1);
|
||||
let animation = container.getAnimations()[0];
|
||||
animation.currentTime = 600;
|
||||
|
||||
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)');
|
||||
}, 'Animated container can create inner animation');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!doctype html>
|
||||
<title>Container Queries - Animated container with inner transition</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#animated-containers">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes outer {
|
||||
from { width: 100px; }
|
||||
to { width: 300px; }
|
||||
}
|
||||
#container {
|
||||
container-type: inline-size;
|
||||
animation: outer 1s linear paused;
|
||||
}
|
||||
#target {
|
||||
background-color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
@container size(min-width: 200px) {
|
||||
#target {
|
||||
transition: background-color 100s steps(2, start);
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id=container>
|
||||
<div id=target>
|
||||
Test
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(100, 100, 100)');
|
||||
|
||||
assert_equals(container.getAnimations().length, 1);
|
||||
let animation = container.getAnimations()[0];
|
||||
animation.currentTime = 600;
|
||||
|
||||
assert_equals(getComputedStyle(target).backgroundColor, 'rgb(150, 150, 150)');
|
||||
}, 'Animated container size triggers transition');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype html>
|
||||
<title>@container queries with aspect-ratio</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#aspect-ratio">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#inline-size { container-type: inline-size; }
|
||||
#size { container-type: size; }
|
||||
span { color: red }
|
||||
@container size(min-aspect-ratio: 1 / 1000) {
|
||||
span { color: green; }
|
||||
}
|
||||
@container size(min-aspect-ratio: 2 / 1) {
|
||||
span { background-color: lime; }
|
||||
}
|
||||
</style>
|
||||
<div id="inline-size" class="container"><span></span></div>
|
||||
<div id="size" class="container"><span></span></div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
const red = "rgb(255, 0, 0)";
|
||||
const green = "rgb(0, 128, 0)";
|
||||
const lime = "rgb(0, 255, 0)";
|
||||
const transparent = "rgba(0, 0, 0, 0)";
|
||||
|
||||
const inline_span = document.querySelector("#inline-size > span");
|
||||
const size_span = document.querySelector("#size > span");
|
||||
|
||||
test(() => {
|
||||
assert_equals(getComputedStyle(inline_span).color, red,
|
||||
"Should not match for inline-size containment");
|
||||
assert_equals(getComputedStyle(size_span).color, green,
|
||||
"Should match for block-size containment");
|
||||
assert_equals(getComputedStyle(size_span).backgroundColor, transparent,
|
||||
"Square should not match 2/1 min-ratio");
|
||||
}, "@container queries with aspect-ratio and size containment");
|
||||
|
||||
test(() => {
|
||||
document.querySelector("#size").style.width = "200px";
|
||||
assert_equals(getComputedStyle(size_span).backgroundColor, lime,
|
||||
"Should match 2/1 min-ratio");
|
||||
}, "@container query with aspect-ratio change after resize");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<!doctype html>
|
||||
<title>@container: parsing</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<div style="container:size; width:100px; height:100px">
|
||||
<main id=main></main>
|
||||
</div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
function cleanup_main() {
|
||||
while (main.firstChild)
|
||||
main.firstChild.remove();
|
||||
}
|
||||
|
||||
function set_style(text) {
|
||||
let style = document.createElement('style');
|
||||
style.innerText = text;
|
||||
main.append(style);
|
||||
return style;
|
||||
}
|
||||
|
||||
function test_query_invalid(query) {
|
||||
test(t => {
|
||||
t.add_cleanup(cleanup_main);
|
||||
let style = set_style(`@container ${query} {}`);
|
||||
assert_equals(style.sheet.rules.length, 0);
|
||||
}, query);
|
||||
}
|
||||
|
||||
// Tests that 1) the query parses, and 2) is either "unknown" or not, as
|
||||
// specified.
|
||||
function test_query_valid(query, unknown) {
|
||||
test(t => {
|
||||
t.add_cleanup(cleanup_main);
|
||||
let style = set_style(`
|
||||
@container ${query} {}
|
||||
@container (${query} or (not ${query})) { main { --match:true; } }
|
||||
`);
|
||||
assert_equals(style.sheet.rules.length, 2);
|
||||
const expected = unknown ? '' : 'true';
|
||||
assert_equals(getComputedStyle(main).getPropertyValue('--match'), expected);
|
||||
}, query);
|
||||
}
|
||||
|
||||
function test_query_known(query) {
|
||||
test_query_valid(query, false /* unknown */);
|
||||
}
|
||||
|
||||
function test_query_unknown(query) {
|
||||
test_query_valid(query, true /* unknown */);
|
||||
}
|
||||
|
||||
function test_container_selector_invalid(container_selector) {
|
||||
test(t => {
|
||||
t.add_cleanup(cleanup_main);
|
||||
let style = set_style(`@container ${container_selector} (width) {}`);
|
||||
assert_equals(style.sheet.rules.length, 0);
|
||||
}, `Container selector: ${container_selector}`);
|
||||
}
|
||||
|
||||
function test_container_selector_valid(container_selector) {
|
||||
test(t => {
|
||||
t.add_cleanup(cleanup_main);
|
||||
let style = set_style(`@container ${container_selector} (width) {}`);
|
||||
assert_equals(style.sheet.rules.length, 1);
|
||||
}, `Container selector: ${container_selector}`);
|
||||
}
|
||||
|
||||
test_query_known('size(width)');
|
||||
test_query_known('size(min-width: 0px)');
|
||||
test_query_known('size(max-width: 0px)');
|
||||
test_query_known('size(height)');
|
||||
test_query_known('size(min-height: 0px)');
|
||||
test_query_known('size(max-height: 0px)');
|
||||
test_query_known('size(aspect-ratio)');
|
||||
test_query_known('size(min-aspect-ratio: 1/2)');
|
||||
test_query_known('size(max-aspect-ratio: 1/2)');
|
||||
test_query_known('size(orientation: portrait)');
|
||||
test_query_known('size(inline-size)');
|
||||
test_query_known('size(min-inline-size: 0px)');
|
||||
test_query_known('size(max-inline-size: 0px)');
|
||||
test_query_known('size(block-size)');
|
||||
test_query_known('size(min-block-size: 0px)');
|
||||
test_query_known('size(max-block-size: 0px)');
|
||||
|
||||
test_query_known('size(width: 100px)');
|
||||
test_query_known('size((width: 100px))');
|
||||
test_query_known('size(not (width: 100px))');
|
||||
test_query_known('size((width: 100px) and (height: 100px))');
|
||||
test_query_known('size((width: 50px) or (height: 100px))');
|
||||
test_query_known('size(width < 100px)');
|
||||
test_query_known('size(100px < width)');
|
||||
test_query_known('size(100px < width < 200px)');
|
||||
|
||||
test_query_unknown('foo(width)');
|
||||
test_query_unknown('size(asdf)');
|
||||
test_query_unknown('size(resolution > 100dpi)');
|
||||
test_query_unknown('size(resolution: 150dpi)');
|
||||
test_query_unknown('size(color)');
|
||||
test_query_unknown('size(min-color: 1)');
|
||||
test_query_unknown('size(color-index >= 1)');
|
||||
test_query_unknown('(color-index >= 1)');
|
||||
test_query_unknown('size(grid)');
|
||||
test_query_unknown('(grid)');
|
||||
|
||||
test_query_invalid('screen');
|
||||
test_query_invalid('print');
|
||||
test_query_invalid('not print');
|
||||
test_query_invalid('only print');
|
||||
test_query_invalid('screen and (width: 100px)');
|
||||
test_query_invalid('screen or (width: 100px)');
|
||||
test_query_invalid('not screen and (width: 100px)');
|
||||
test_query_invalid('not screen or (width: 100px)');
|
||||
test_query_invalid('(width: 100px), (height: 100px)');
|
||||
|
||||
test_container_selector_valid(' foo');
|
||||
test_container_selector_valid(' foo ');
|
||||
test_container_selector_valid('name(foo)');
|
||||
test_container_selector_valid('name( foo )');
|
||||
test_container_selector_valid('type(size)');
|
||||
test_container_selector_valid('type( size )');
|
||||
test_container_selector_valid('type(inline-size)');
|
||||
test_container_selector_valid('type(block-size)');
|
||||
test_container_selector_valid('name(bar) type(block-size)');
|
||||
test_container_selector_valid('type(block-size) name(bar)');
|
||||
|
||||
test_container_selector_invalid('foo foo');
|
||||
test_container_selector_invalid('1px');
|
||||
test_container_selector_invalid('50gil');
|
||||
test_container_selector_invalid('name(1px)');
|
||||
test_container_selector_invalid('type(1px)');
|
||||
test_container_selector_invalid('type(red)');
|
||||
test_container_selector_invalid('type(size) type(size)');
|
||||
test_container_selector_invalid('type(inline-size) type(block-size)');
|
||||
test_container_selector_invalid('name(foo) name(bar)');
|
||||
test_container_selector_invalid('type(inline-size) name(foo) type(block-size)');
|
||||
test_container_selector_invalid('name(foo) type(size) name(bar)');
|
||||
test_container_selector_invalid('name(type(size))');
|
||||
test_container_selector_invalid('type(name(bar))');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!doctype html>
|
||||
<title>CSS Container Queries Test: scrollbar stability for @container queries and overflow:auto</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollbar-layout">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
#scroller {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#container {
|
||||
container-type: inline-size;
|
||||
}
|
||||
#inner {
|
||||
height: 100px;
|
||||
border-bottom: 1px solid red;
|
||||
}
|
||||
@container size(max-width: 99px) {
|
||||
#inner {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="precondition" style="width:100px;height:100px;overflow:scroll"></div>
|
||||
<div id="scroller">
|
||||
<div id="container">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
setup(() => {
|
||||
assert_implements_container_queries();
|
||||
assert_implements_optional(precondition.clientWidth < 100,
|
||||
"Tests do not work with overlay scrollbars");
|
||||
});
|
||||
|
||||
test(() => {
|
||||
assert_less_than(scroller.clientWidth, 100, "Expects a vertical scrollbar");
|
||||
assert_equals(getComputedStyle(inner).height, "50px",
|
||||
"Layout with a scrollbar means the container query applies");
|
||||
}, "Initial layout - expecting a scrollbar without overflowing content instead of overflowing content without a scrollbar");
|
||||
|
||||
test(() => {
|
||||
inner.style.borderBottomWidth = "2px";
|
||||
assert_less_than(scroller.clientWidth, 100, "Expects a vertical scrollbar");
|
||||
assert_equals(getComputedStyle(inner).height, "50px",
|
||||
"Layout with a scrollbar means the container query applies");
|
||||
}, "Same result after a reflow");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<title>Test that ::backdrop responds to container size changes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
:root {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#container {
|
||||
container-type: size;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
::backdrop {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
@container size(min-width: 300px) {
|
||||
::backdrop {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<main id=container>
|
||||
<dialog>test</dialog>
|
||||
</main>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
let dialog = document.querySelector('dialog');
|
||||
|
||||
test(function() {
|
||||
try {
|
||||
dialog.showModal();
|
||||
|
||||
assert_equals(getComputedStyle(dialog, '::backdrop').backgroundColor, 'rgb(0, 0, 0)');
|
||||
|
||||
container.style.width = '300px';
|
||||
assert_equals(getComputedStyle(dialog, '::backdrop').backgroundColor, 'rgb(0, 128, 0)');
|
||||
|
||||
container.style = '';
|
||||
assert_equals(getComputedStyle(dialog, '::backdrop').backgroundColor, 'rgb(0, 0, 0)');
|
||||
} finally {
|
||||
dialog.close();
|
||||
}
|
||||
}, 'Pseudo-element ::backdrop responds to container size changes');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<p>You should see the word PASS below.</p>
|
||||
PASS
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<title>CSS Container Queries Test: Change display and box inside a container</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
|
||||
<link rel="match" href="change-display-in-container-ref.html">
|
||||
<style>
|
||||
.fail { display: inline; }
|
||||
.pass { display: none; }
|
||||
#container { container-type: size; width: 100px; }
|
||||
@container size(min-width: 200px) {
|
||||
.fail { display: none; }
|
||||
.pass { display: inline; }
|
||||
}
|
||||
</style>
|
||||
<p>You should see the word PASS below.</p>
|
||||
<div id="container">
|
||||
<span>
|
||||
<span class="fail">FAIL</span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="pass">PASS</span>
|
||||
<span class="fail">FAIL</span>
|
||||
</span>
|
||||
</div>
|
||||
<script>
|
||||
container.offsetTop;
|
||||
container.style.width = "auto";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<title>Conditionally removing container status</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
.parent { width: 300px; }
|
||||
.child { width: 100px; }
|
||||
.parent, .child { container-type: inline-size; }
|
||||
@container size(min-width: 200px) {
|
||||
.child { container-type: initial; }
|
||||
.grandchild { border: 3px solid green }
|
||||
}
|
||||
</style>
|
||||
<div class="parent">
|
||||
<div class="child">
|
||||
<div class="grandchild">You should see a green border around this text</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test(function() {
|
||||
let s = getComputedStyle(document.querySelector('.grandchild'));
|
||||
assert_equals(s.getPropertyValue('border-color'), 'rgb(0, 128, 0)');
|
||||
}, 'Conditionally applying container-type:initial');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Computed values of container</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test_computed_value('container', 'initial', 'none');
|
||||
test_computed_value('container', 'inherit', 'none');
|
||||
test_computed_value('container', 'unset', 'none');
|
||||
test_computed_value('container', 'inline-size');
|
||||
test_computed_value('container', 'size');
|
||||
test_computed_value('container', 'inline-size / inline-size');
|
||||
test_computed_value('container', 'size / block-size');
|
||||
test_computed_value('container', 'size style / name', 'style size / name');
|
||||
test_computed_value('container', 'inline-size state style/ name', 'style state inline-size / name');
|
||||
test_computed_value('container', 'inline-size / foo');
|
||||
test_computed_value('container', 'inline-size /foo', 'inline-size / foo');
|
||||
test_computed_value('container', 'inline-size/ foo', 'inline-size / foo');
|
||||
test_computed_value('container', 'inline-size/foo', 'inline-size / foo');
|
||||
test_computed_value('container', 'size / FoO', 'size / FoO');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,287 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Container Queries Test: query container for Shadow DOM</title>
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5984">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
#inclusive-ancestor-across-root,
|
||||
#inclusive-ancestor-skip-slotting,
|
||||
#inclusive-ancestor-slotted,
|
||||
#inclusive-ancestor-host,
|
||||
#inclusive-ancestor-part,
|
||||
#inclusive-ancestor-slotted-before,
|
||||
#inclusive-ancestor-host-before,
|
||||
#inclusive-ancestor-part-before,
|
||||
#inclusive-ancestor-inner-part,
|
||||
#inclusive-ancestor-slot-fallback {
|
||||
width: 400px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="inclusive-ancestor-across-root">
|
||||
<div>
|
||||
<template shadowroot="open">
|
||||
<style>
|
||||
@container size(width = 400px) {
|
||||
#t1 { color: green; }
|
||||
}
|
||||
</style>
|
||||
<div id="t1"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inclusive-ancestor-skip-slotting">
|
||||
<div>
|
||||
<template shadowroot="open">
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
@container size(width = 400px) {
|
||||
#t2 { color: green; }
|
||||
}
|
||||
</style>
|
||||
<div id="t2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inclusive-ancestor-slotted">
|
||||
<div>
|
||||
<template shadowroot="open">
|
||||
<style>
|
||||
slot {
|
||||
display: block;
|
||||
width: 200px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
@container size(width = 200px) {
|
||||
::slotted(#t3) { color: green; }
|
||||
}
|
||||
</style>
|
||||
<slot></slot>
|
||||
</template>
|
||||
<div id="t3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inclusive-ancestor-host">
|
||||
<div id="t4">
|
||||
<template shadowroot="open">
|
||||
<style>
|
||||
@container size(width = 400px) {
|
||||
:host(#t4) { color: green; }
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inclusive-ancestor-part">
|
||||
<div>
|
||||
<template shadowroot="open">
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<span id="t5" part="part"></span>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
@container size(width = 400px) {
|
||||
#inclusive-ancestor-part > div::part(part) { color: green; }
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inclusive-ancestor-slotted-before">
|
||||
<div>
|
||||
<template shadowroot="open">
|
||||
<style>
|
||||
slot {
|
||||
display: block;
|
||||
width: 200px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
@container size(width = 200px) {
|
||||
::slotted(#t6)::before {
|
||||
content: "X";
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<slot></slot>
|
||||
</template>
|
||||
<style>
|
||||
#t6 {
|
||||
width: 400px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
</style>
|
||||
<div id="t6"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inclusive-ancestor-host-before">
|
||||
<div id="t7">
|
||||
<template shadowroot="open">
|
||||
<style>
|
||||
:host {
|
||||
width: 200px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
@container size(width = 200px) {
|
||||
:host(#t7)::before {
|
||||
content: "X";
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inclusive-ancestor-part-before">
|
||||
<style>
|
||||
@container size(width = 400px) {
|
||||
#inclusive-ancestor-part-before > div::part(part)::before {
|
||||
content: "X";
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<template shadowroot="open">
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<span id="t8" part="part"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inclusive-ancestor-inner-part">
|
||||
<style>
|
||||
@container size(width = 400px) {
|
||||
#inclusive-ancestor-inner-part > div::part(inner-part) { color: green; }
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<template shadowroot="open">
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
</style>
|
||||
<div exportparts="inner-part">
|
||||
<template shadowroot="open">
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<span id="t9" part="inner-part"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="inclusive-ancestor-slot-fallback">
|
||||
<div><template shadowroot="open">
|
||||
<style>
|
||||
div {
|
||||
width: 200px;
|
||||
container-type: inline-size;
|
||||
}
|
||||
@container size(width = 200px) {
|
||||
#t10 { color: green; }
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<slot><span id="t10"></span></slot>
|
||||
</div>
|
||||
</template></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
const green = "rgb(0, 128, 0)";
|
||||
|
||||
test(() => {
|
||||
const t1 = document.querySelector("#inclusive-ancestor-across-root > div").shadowRoot.querySelector("#t1");
|
||||
assert_equals(getComputedStyle(t1).color, green);
|
||||
}, "Match container in outer tree");
|
||||
|
||||
test(() => {
|
||||
const t2 = document.querySelector("#t2");
|
||||
assert_equals(getComputedStyle(t2).color, green);
|
||||
}, "Match container in same tree, not walking flat tree ancestors");
|
||||
|
||||
test(() => {
|
||||
const t3 = document.querySelector("#t3");
|
||||
assert_equals(getComputedStyle(t3).color, green);
|
||||
}, "Match container in ::slotted selector's originating element tree");
|
||||
|
||||
test(() => {
|
||||
const t4 = document.querySelector("#t4");
|
||||
assert_equals(getComputedStyle(t4).color, green);
|
||||
}, "Match container in outer tree for :host");
|
||||
|
||||
test(() => {
|
||||
const t5 = document.querySelector("#inclusive-ancestor-part > div").shadowRoot.querySelector("#t5");
|
||||
assert_equals(getComputedStyle(t5).color, green);
|
||||
}, "Match container in ::part selector's originating element tree");
|
||||
|
||||
test(() => {
|
||||
const t6 = document.querySelector("#t6");
|
||||
assert_equals(getComputedStyle(t6, "::before").color, green);
|
||||
}, "Match container for ::before in ::slotted selector's originating element tree");
|
||||
|
||||
test(() => {
|
||||
const t7 = document.querySelector("#t7");
|
||||
assert_equals(getComputedStyle(t7, "::before").color, green);
|
||||
}, "Match container in outer tree for :host::before");
|
||||
|
||||
test(() => {
|
||||
const t8 = document.querySelector("#inclusive-ancestor-part-before > div").shadowRoot.querySelector("#t8");
|
||||
assert_equals(getComputedStyle(t8, "::before").color, green);
|
||||
}, "Match container for ::before in ::part selector's originating element tree");
|
||||
|
||||
test(() => {
|
||||
const outerhost = document.querySelector("#inclusive-ancestor-inner-part > div");
|
||||
const innerhost = outerhost.shadowRoot.querySelector("div");
|
||||
const t9 = innerhost.shadowRoot.querySelector("#t9");
|
||||
assert_equals(getComputedStyle(t9).color, green);
|
||||
}, "Match container for ::part selector's originating element tree for exportparts");
|
||||
|
||||
test(() => {
|
||||
const t10 = document.querySelector("#inclusive-ancestor-slot-fallback > div").shadowRoot.querySelector("#t10");
|
||||
assert_equals(getComputedStyle(t10).color, green);
|
||||
}, "Match container for slot light tree child fallback");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Inheritance of container-*</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/inheritance-testcommon.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<div id="container">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
assert_not_inherited('container-name', 'none', 'foo');
|
||||
assert_not_inherited('container-type', 'none', 'inline-size');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Computed values of container-name</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test_computed_value('container-name', 'initial', 'none');
|
||||
test_computed_value('container-name', 'unset', 'none');
|
||||
test_computed_value('container-name', 'foo');
|
||||
test_computed_value('container-name', 'FoO');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!doctype html>
|
||||
<title>container-name invalidation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
div {
|
||||
color: black;
|
||||
}
|
||||
#outer {
|
||||
container-name: c1;
|
||||
container-type: inline-size;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
container-name: c2;
|
||||
container-type: inline-size;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#intermediate {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
@container c1 size(width: 250px) {
|
||||
#child {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div id=intermediate>
|
||||
<div id=inner>
|
||||
<div id=child>Test</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test(function(t) {
|
||||
t.add_cleanup(() => { outer.style = ''; });
|
||||
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
|
||||
|
||||
outer.style.width = '250px';
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
|
||||
|
||||
outer.style.width = '251px';
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
|
||||
}, 'Changing a named container invalidates relevant descendants');
|
||||
|
||||
test(function(t) {
|
||||
t.add_cleanup(() => {
|
||||
outer.style = '';
|
||||
intermediate.style = '';
|
||||
});
|
||||
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
|
||||
|
||||
// #intermediate becomes the new container.
|
||||
intermediate.style = 'container-name:c1; container-type:inline-size';
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
|
||||
|
||||
// #outer becomes the container again.
|
||||
intermediate.style = '';
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
|
||||
|
||||
outer.style.width = '250px';
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
|
||||
}, 'Changing container-name invalidates relevant descendants');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Parsing of container-name</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test_valid_value('container-name', 'initial');
|
||||
test_valid_value('container-name', 'inherit');
|
||||
test_valid_value('container-name', 'unset');
|
||||
test_valid_value('container-name', 'revert');
|
||||
test_valid_value('container-name', 'none');
|
||||
test_valid_value('container-name', 'foo');
|
||||
test_valid_value('container-name', 'BAR');
|
||||
test_valid_value('container-name', 'foo bar');
|
||||
|
||||
test_invalid_value('container-name', 'none none');
|
||||
test_invalid_value('container-name', 'foo, bar');
|
||||
test_invalid_value('container-name', '#fff');
|
||||
test_invalid_value('container-name', '1px');
|
||||
test_invalid_value('container-name', 'default'); /* reserved */
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Parsing of container</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-name">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test_valid_value('container', 'initial');
|
||||
test_valid_value('container', 'inherit');
|
||||
test_valid_value('container', 'unset');
|
||||
test_valid_value('container', 'revert');
|
||||
test_valid_value('container', 'none');
|
||||
test_valid_value('container', 'none / none', 'none');
|
||||
test_valid_value('container', 'inline-size');
|
||||
test_valid_value('container', 'inline-size / none', 'inline-size');
|
||||
test_valid_value('container', 'size');
|
||||
test_valid_value('container', 'size / block-size');
|
||||
test_valid_value('container', 'inline-size / inline-size');
|
||||
test_valid_value('container', 'size / size');
|
||||
test_valid_value('container', 'size state / none', 'size state');
|
||||
|
||||
test_invalid_value('container', 'none none');
|
||||
test_invalid_value('container', 'none inline-size');
|
||||
test_invalid_value('container', 'inline-size none');
|
||||
test_invalid_value('container', 'inline-size inline-size');
|
||||
test_invalid_value('container', 'inline-size block-size unknown');
|
||||
test_invalid_value('container', 'inline-size block-size');
|
||||
test_invalid_value('container', 'size block-size');
|
||||
test_invalid_value('container', 'none, none');
|
||||
test_invalid_value('container', 'foo');
|
||||
test_invalid_value('container', 'foo, bar');
|
||||
test_invalid_value('container', '#fff');
|
||||
test_invalid_value('container', '1px');
|
||||
test_invalid_value('container', 'default');
|
||||
test_invalid_value('container', 'inline-size / 10px');
|
||||
test_invalid_value('container', 'inline-size / #fefefe');
|
||||
test_invalid_value('container', 'inline-size / calc(3px)');
|
||||
test_invalid_value('container', 'size 1 / name');
|
||||
test_invalid_value('container', 'block-size');
|
||||
test_invalid_value('container', 'block-size / name');
|
||||
test_invalid_value('container', 'block-size / NAME', 'block-size / NAME');
|
||||
test_invalid_value('container', 'block-size/NAME','block-size / NAME');
|
||||
test_invalid_value('container', 'block-size / block-size');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<!doctype html>
|
||||
<title>@container: selection using name(), type()</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
|
||||
main { background-color: lightgray; }
|
||||
main > div { background-color: skyblue; }
|
||||
main > div > div { background-color: seagreen; }
|
||||
main > div > div > div { background-color: tomato; }
|
||||
|
||||
main {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
main div {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.inline { container-type: inline-size; }
|
||||
.size { container-type: size; }
|
||||
|
||||
.a-inline { container: inline-size / a; }
|
||||
.a-size { container: size / a; }
|
||||
|
||||
.b-size { container: inline-size / b; }
|
||||
.b-size { container: size / b; }
|
||||
|
||||
.a { container-name: a; contain: strict; }
|
||||
|
||||
</style>
|
||||
|
||||
<main>
|
||||
<div class="inline">
|
||||
<div class="size">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<main>
|
||||
<div class="size">
|
||||
<div class="inline">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<main>
|
||||
<div class="inline">
|
||||
<div class="inline">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<main>
|
||||
<div class="a-size">
|
||||
<div class="b-size">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<main>
|
||||
<div class="a-size">
|
||||
<div class="a-size">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<main>
|
||||
<div class="a-size">
|
||||
<div class="a">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<main>
|
||||
<div class="a-size">
|
||||
<div class="b-size">
|
||||
<div class="a-inline">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<main>
|
||||
<div class="a-inline">
|
||||
<div class="b-size">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
function test_query(prelude, selector, expected) {
|
||||
test(t => {
|
||||
let elements = document.querySelectorAll(selector);
|
||||
assert_equals(elements.length, 1);
|
||||
let element = elements[0];
|
||||
|
||||
let style = document.createElement('style');
|
||||
t.add_cleanup(() => { style.remove(); });
|
||||
style.innerText = `@container ${prelude} { span { --match:true; } } `;
|
||||
document.body.append(style);
|
||||
|
||||
assert_equals(getComputedStyle(element).getPropertyValue('--match'), expected);
|
||||
}, `${prelude} for ${selector}`);
|
||||
}
|
||||
|
||||
// Test that a given container query applies to the specified element.
|
||||
// The provided selector must unique identify the element.
|
||||
function test_applied(prelude, selector) {
|
||||
test_query(prelude, selector, 'true');
|
||||
}
|
||||
|
||||
function test_rejected(prelude, selector) {
|
||||
test_query(prelude, selector, '');
|
||||
}
|
||||
|
||||
// For the following tests, the inner container has a size of 16x16px,
|
||||
// and the outer container has a size of 32x32px.
|
||||
|
||||
// "Nearest" selection:
|
||||
test_applied('size(width: 16px)', '.size > .inline > span');
|
||||
test_applied('size(height: 16px)', '.inline > .size > span');
|
||||
test_applied('size(width: 16px)', '.inline > .size > span');
|
||||
test_rejected('size(height)', '.size > .inline > span');
|
||||
|
||||
// type():
|
||||
test_applied('type(inline-size) size(width: 16px)', '.inline > .size > span');
|
||||
test_applied('type(inline-size) size(width: 16px)', '.size > .inline > span');
|
||||
|
||||
test_applied('type(size) size(height: 16px)', '.inline > .size > span');
|
||||
test_applied('type(size) size(height: 32px)', '.size > .inline > span');
|
||||
test_rejected('type(size) size(height)', '.inline > .inline > span');
|
||||
|
||||
// name():
|
||||
test_applied('name(a) size(width: 32px)', '.a-size > .b-size > span');
|
||||
test_applied('name(b) size(width: 16px)', '.a-size > .b-size > span');
|
||||
test_rejected('name(c) size(width)','.a-size > .b-size > span');
|
||||
test_applied('name(a) size(width: 16px)', '.a-size > .a-size > span');
|
||||
|
||||
// Name as plain ident:
|
||||
test_applied('a size(width: 32px)', '.a-size > .b-size > span');
|
||||
test_applied('b size(width: 16px)', '.a-size > .b-size > span');
|
||||
test_rejected('c size(width)', '.a-size > .b-size > span');
|
||||
test_applied('a size(width: 16px)', '.a-size > .a-size > span');
|
||||
|
||||
// container-name alone does not establish a container:
|
||||
test_applied('a size(width: 32px)', '.a-size > .a > span');
|
||||
|
||||
// The following tests have three containers:
|
||||
//
|
||||
// outer -> 32x32px
|
||||
// middle -> 16x16px
|
||||
// inner -> 8x8px
|
||||
|
||||
// Mixing name() and type():
|
||||
test_applied('name(a) type(inline-size) size(width: 8px)', '.a-size > .b-size > .a-inline > span');
|
||||
test_applied('name(b) type(inline-size) size(width: 16px)', '.a-size > .b-size > .a-inline > span');
|
||||
test_applied('name(a) type(size) size(width: 32px)', '.a-size > .b-size > .a-inline > span');
|
||||
test_applied('name(b) type(size) size(width: 16px)', '.a-size > .b-size > .a-inline > span');
|
||||
test_rejected('name(a) type(size) size(width)', '.a-inline > .b-size');
|
||||
|
||||
// type() first, then name():
|
||||
test_applied('type(inline-size) name(a) size(width: 8px)', '.a-size > .b-size > .a-inline > span');
|
||||
test_applied('type(size) name(a) size(height: 32px)', '.a-size > .b-size > .a-inline > span');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<title>@container-dependent elements respond to container size changes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
#container {
|
||||
container-type: size;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
div { color: red; }
|
||||
@container size(min-width: 300px) {
|
||||
div { color: green; }
|
||||
}
|
||||
</style>
|
||||
<main id=container>
|
||||
<div id=child>
|
||||
Test
|
||||
<p><span id=descendant>Deep</span></p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(255, 0, 0)');
|
||||
container.style.width = '300px';
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
|
||||
}, 'Children respond to changes in container size');
|
||||
|
||||
test(function() {
|
||||
container.style = '';
|
||||
assert_equals(getComputedStyle(descendant).color, 'rgb(255, 0, 0)');
|
||||
container.style.width = '300px';
|
||||
assert_equals(getComputedStyle(descendant).color, 'rgb(0, 128, 0)');
|
||||
}, 'Descendants respond to changes in container size');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<title>CSS Container Queries Test: Changing container-type in Chrome legacy layout</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
|
||||
<link rel="help" href="https://crbug.com/1286773">
|
||||
<p>Pass if there is no crash.</p>
|
||||
<span style="column-count: 1"><table></table></span>
|
||||
<video id="video"></video>
|
||||
<input id="input"></input>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
video.style.containerType = "inline-size";
|
||||
document.body.offsetLeft;
|
||||
video.style.columnCount = "1";
|
||||
input.setAttribute("type", "button");
|
||||
document.body.offsetTop;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Computed values of container-type</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test_computed_value('container-type', 'initial', 'none');
|
||||
test_computed_value('container-type', 'unset', 'none');
|
||||
test_computed_value('container-type', 'inline-size');
|
||||
test_computed_value('container-type', 'size');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!doctype html>
|
||||
<title>CSS Container Queries Test: applied containment for container-type</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Note: background colors have no impact on the test result. They are
|
||||
present to make it easier to visually verify that the test
|
||||
does the right thing. */
|
||||
.square {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: tomato;
|
||||
}
|
||||
.half {
|
||||
width: 25px;
|
||||
height: 50px;
|
||||
background: red;
|
||||
}
|
||||
div > div:nth-of-type(1) { background: skyblue; }
|
||||
div > div:nth-of-type(2) { background: hotpink; }
|
||||
</style>
|
||||
|
||||
<div id=test1 class=square>
|
||||
<div id=float1 class=half style="float:left"></div>
|
||||
<div id=child1 class=half style="container-type:inline-size"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(child1.offsetLeft, test1.offsetLeft + float1.offsetWidth);
|
||||
}, 'container-type:inline-size turns on layout containment');
|
||||
</script>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id=test2 class=square>
|
||||
<div id=ref2 style="float:left">A</div>
|
||||
<div id=child2 style="float:left; container-type:inline-size">A</div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(child2.offsetWidth, 0);
|
||||
assert_equals(child2.offsetHeight, ref2.offsetHeight);
|
||||
}, 'container-type:inline-size turns on inline-size containment');
|
||||
</script>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id=test3 class=square>
|
||||
<div id=child3 style="float:left; container-type:size">A</div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(child3.offsetHeight, 0);
|
||||
assert_equals(child3.offsetWidth, 0);
|
||||
}, 'container-type:size turns on full size containment');
|
||||
</script>
|
||||
|
||||
<hr>
|
||||
|
||||
<style>
|
||||
#ref4::before, #child4::before {
|
||||
content: counter(foo);
|
||||
}
|
||||
</style>
|
||||
<div id=test4 class=square style="counter-set: foo 5">
|
||||
<div id=ref4 style="float:left"></div>
|
||||
<section style="container-type:inline-size">
|
||||
<span style="counter-increment: foo 1000;"></span>
|
||||
</section>
|
||||
<section style="container-type:size">
|
||||
<span style="counter-increment: foo 1000;"></span>
|
||||
</section>
|
||||
<div id=child4 style="float:left"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(() => {
|
||||
assert_equals(child4.offsetWidth, ref4.offsetWidth);
|
||||
}, 'container-type:inline/size turns on style containment');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!doctype html>
|
||||
<title>container-type invalidation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
div {
|
||||
color: black;
|
||||
}
|
||||
#outer {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
#intermediate {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.container {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
@container size((max-width: 200px) or (min-width: 300px)) {
|
||||
#child { color: green; }
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div id=intermediate>
|
||||
<div id=inner>
|
||||
<div id=child>Test</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test(function(t) {
|
||||
t.add_cleanup(() => {
|
||||
for (let e of [outer, intermediate, inner])
|
||||
e.classList.remove('container');
|
||||
});
|
||||
|
||||
// No container.
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
|
||||
|
||||
outer.classList.add('container');
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
|
||||
|
||||
// The container query does not match widths in the range [201, 299],
|
||||
// and #intermediate has width:250px.
|
||||
intermediate.classList.add('container');
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
|
||||
|
||||
inner.classList.add('container');
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
|
||||
|
||||
// Should have no effect, #inner is the container.
|
||||
outer.classList.remove('container');
|
||||
intermediate.classList.remove('container');
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
|
||||
|
||||
inner.classList.remove('container');
|
||||
assert_equals(getComputedStyle(child).color, 'rgb(0, 0, 0)');
|
||||
}, 'Changing the container type invalidates relevant descendants');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<title>container-type layout invalidation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<style>
|
||||
#div {
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
<div id=div>
|
||||
content
|
||||
</div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test(function(t) {
|
||||
t.add_cleanup(() => { div.style = ''; });
|
||||
|
||||
assert_greater_than(div.offsetWidth, 0);
|
||||
assert_greater_than(div.offsetHeight, 0);
|
||||
|
||||
div.style.containerType = 'size';
|
||||
|
||||
assert_equals(div.offsetWidth, 0);
|
||||
assert_equals(div.offsetHeight, 0);
|
||||
}, 'Changing container-type invalidates layout');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Containment Test: Parsing of container-type</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-type">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
<script src="support/cq-testcommon.js"></script>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
setup(() => assert_implements_container_queries());
|
||||
|
||||
test_valid_value('container-type', 'initial');
|
||||
test_valid_value('container-type', 'inherit');
|
||||
test_valid_value('container-type', 'unset');
|
||||
test_valid_value('container-type', 'revert');
|
||||
test_valid_value('container-type', 'none');
|
||||
test_valid_value('container-type', 'style');
|
||||
test_valid_value('container-type', 'state');
|
||||
test_valid_value('container-type', 'size');
|
||||
test_valid_value('container-type', 'inline-size');
|
||||
|
||||
test_valid_value('container-type', 'inline-size state');
|
||||
test_valid_value('container-type', 'style state');
|
||||
test_valid_value('container-type', 'style inline-size');
|
||||
test_valid_value('container-type', 'state size');
|
||||
|
||||
test_invalid_value('container-type', 'block-size');
|
||||
test_invalid_value('container-type', 'none none');
|
||||
test_invalid_value('container-type', 'none inline-size');
|
||||
test_invalid_value('container-type', 'inline-size none');
|
||||
test_invalid_value('container-type', 'inline-size inline-size');
|
||||
test_invalid_value('container-type', 'inline-size block-size');
|
||||
test_invalid_value('container-type', 'block-size inline-size');
|
||||
test_invalid_value('container-type', 'size inline-size');
|
||||
test_invalid_value('container-type', 'inline-size size');
|
||||
test_invalid_value('container-type', 'none, none');
|
||||
test_invalid_value('container-type', 'foo');
|
||||
test_invalid_value('container-type', '"foo"');
|
||||
test_invalid_value('container-type', 'foo, bar');
|
||||
test_invalid_value('container-type', '#fff');
|
||||
test_invalid_value('container-type', '1px');
|
||||
test_invalid_value('container-type', 'default');
|
||||
test_invalid_value('container-type', 'size nonsense');
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue