mirror of
https://github.com/servo/servo.git
synced 2025-08-03 20:50:07 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
WPT Sync Bot
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
|
@ -0,0 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
|
||||
<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="aspect-ratio: 2/1; min-height: 100px; width: 100px; background: green;"></div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The definite max-width should win the automatic content-based minimum width</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="The definite max-width should win the automatic content-based minimum width.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; height: 100px; aspect-ratio: 2 / 1; max-width: 100px;">
|
||||
<div style="width:200px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The definite max-height should win the automatic content-based minimum height</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="The definite max-height should win the automatic content-based minimum height.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; width: 100px; aspect-ratio: 1 / 2; max-height: 100px;">
|
||||
<div style="height:200px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The definite max-height should win the transferred maximum height</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="CSS aspect-ratio: The definite max-height should win the transferred maximum height.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; width: 200px; aspect-ratio: 1 / 2; max-width: 100px; max-height: 100px;"></div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The definite max-width should win the transferred maximum width</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="The definite max-width should win the transferred maximum width.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; height: 200px; aspect-ratio: 2 / 1; max-height: 100px; max-width: 100px;"></div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The transferred maximum height beats the automatic content-based minimum height</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="The transferred maximum height beats the automatic content-based minimum height.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; width: 200px; aspect-ratio: 1 / 1; max-width: 100px;">
|
||||
<div style="height:200px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The transferred maximum width beats the automatic content-based minimum width</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="The transferred maximum width beats the automatic content-based minimum width.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; height: 200px; aspect-ratio: 1 / 1; max-height: 100px;">
|
||||
<div style="width:200px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The definite max-height should win the transferred minimum height</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="CSS aspect-ratio: The definite max-height should win the transferred minimum height.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; width: 50px; aspect-ratio: 1 / 2; min-width: 100px; max-height: 100px;"></div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The definite max-width should win the transferred minimum width</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="CSS aspect-ratio: The definite max-width should win the transferred minimum width.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; height: 50px; aspect-ratio: 2 / 1; min-height: 100px; max-width: 100px;"></div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The definite min-height should win the transferred minimum height</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="CSS aspect-ratio: The definite min-height should win the transferred minimum height.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; width: 50px; aspect-ratio: 2 / 1; min-width: 100px; min-height: 100px;"></div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The definite min-width should win the transferred minimum width</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="CSS aspect-ratio: The definite min-width should win the transferred minimum width.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; height: 50px; aspect-ratio: 1 / 2; min-height: 100px; min-width: 100px;"></div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The definite min-height should win the transferred maximum height</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="CSS aspect-ratio: The definite min-height should win the transferred maximum height.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; width: 100px; aspect-ratio: 2 / 1; max-width: 150px; min-height: 100px;"></div>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: The definite min-width should win the transferred maximum width</title>
|
||||
<link rel="author" title="Cathie Chen" href="mailto:cchen@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="CSS aspect-ratio: The definite min-width should win the transferred maximum width.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; height: 100px; aspect-ratio: 1 / 2; max-height: 150px; min-width: 100px;"></div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: Use correct box-sizing when calculating block size</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#valdef-aspect-ratio-auto--ratio">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert" content="CSS aspect-ratio: Use correct box-sizing when calculating block size.">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; width: 100px; aspect-ratio: auto 1/1; box-sizing: border-box; padding-top:10px; padding-left: 50px">
|
||||
<div style="height: 90px"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio Reference: fieldset</title>
|
||||
<style>
|
||||
fieldset {
|
||||
width: 200px;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
legend {
|
||||
background: black;
|
||||
color: white;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Choose one item:</legend>
|
||||
|
||||
<input type="radio" id="item1" name="item">
|
||||
<label for="item1">item 1</label><br/>
|
||||
|
||||
<input type="radio" id="item2" name="item">
|
||||
<label for="item2">item 2</label><br/>
|
||||
|
||||
<input type="radio" id="item3" name="item">
|
||||
<label for="item3">item 3</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: Test fieldset's block size honoring automatic content-based minimum</title>
|
||||
<link rel="author" title="mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
|
||||
<link rel="match" href="fieldset-element-001-ref.html" />
|
||||
|
||||
<style>
|
||||
fieldset {
|
||||
width: 200px;
|
||||
aspect-ratio: 20 / 1;
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
legend {
|
||||
background: black;
|
||||
color: white;
|
||||
padding: 3px 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Choose one item:</legend>
|
||||
|
||||
<input type="radio" id="item1" name="item">
|
||||
<label for="item1">item 1</label><br/>
|
||||
|
||||
<input type="radio" id="item2" name="item">
|
||||
<label for="item2">item 2</label><br/>
|
||||
|
||||
<input type="radio" id="item3" name="item">
|
||||
<label for="item3">item 3</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
|
@ -10,9 +10,9 @@
|
|||
|
||||
<div style="display: flex;">
|
||||
<!-- No transferred size suggestion since the flex item is non-replaced.
|
||||
Content size suggestion is 50px because 50px is item's min-content size. -->
|
||||
Content size suggestion is 100px because min-intrinsic width is 100px.
|
||||
-->
|
||||
<div style="background: green; height: 100px; aspect-ratio: 1/2; flex-basis: 0;">
|
||||
<div style="width: 100px;"></div>
|
||||
</div>
|
||||
<div style="background: green; height: 100px; width: 50px;"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,9 @@
|
|||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="background: green; width: 100px; height:50px;"></div>
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<!-- No transferred size suggestion since the flex item is non-replaced.
|
||||
Content size suggestion is 50px because min-content size is 50px. -->
|
||||
Content size suggestion is 100px because min-intrinsic height is 100px. -->
|
||||
<div style="background: green; width: 100px; aspect-ratio: 2/1; flex-basis: 0;">
|
||||
<div style="height: 100px;"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>aspect-ratio flex item</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"
|
||||
title="Part E">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert"
|
||||
content="max-content, not max-intrinsic, size is the flex base size of an aspect-ratio item that has an indefinite flex-basis and cross size">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
</p>
|
||||
|
||||
<div style="display: flex; flex-flow: column; align-items: start;">
|
||||
<div
|
||||
style="aspect-ratio: 1/1; flex: 0 0 auto; min-height: 0px; min-width: 100px; background: green;">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>aspect-ratio flex item</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"
|
||||
title="Part E">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert"
|
||||
content="max-content, not max-intrinsic, size is the flex base size of an aspect-ratio item that has an indefinite flex-basis and cross size">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
</p>
|
||||
|
||||
<div
|
||||
style="display: flex; flex-flow: column; align-items: start; width: 0px;">
|
||||
<div
|
||||
style="aspect-ratio: 1/1; flex: 0 0 auto; min-height: 0px; min-width: 100px; background: green;">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<title>aspect-ratio flex item</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"
|
||||
title="Part E">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert"
|
||||
content="max-content, not max-intrinsic, size is the flex base size of an aspect-ratio item that has an indefinite flex-basis and cross size">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
</p>
|
||||
|
||||
<div style="display: flex; flex-flow: column; align-items: start;">
|
||||
<div
|
||||
style="aspect-ratio: 1/1; flex: 0 0 content; min-height: 0px; min-width: 100px; background: green;">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<title>aspect-ratio flex item</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"
|
||||
title="Part E">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert"
|
||||
content="max-content block size accounts for inline max-content size of an aspect-ratio item when computing flex base size">
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
<div style="display: flex; flex-flow: column; align-items: start;">
|
||||
<div style="aspect-ratio: 1/1; background: green; min-height: 0px;">
|
||||
<div style="width: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<title>aspect-ratio flex item</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item"
|
||||
title="Part E">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert"
|
||||
content="min-height is not reflected through the aspect ratio when calculating width:fit-content when laying out a column flex item for flex base size calculation.">
|
||||
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
|
||||
<div style="display: flex; flex-flow: column; align-items: start; height: 200px;">
|
||||
<!-- flex base size for this item is 1px because case E specifies that the
|
||||
flex base size is the height resulting from layout of this variant of the
|
||||
element:
|
||||
<div style="width: fit-content; aspect-ratio: 1/1; height: max-content;">
|
||||
<div style="width: 1px;"></div>
|
||||
</div>
|
||||
'min-height' was removed because of this line from the spec:
|
||||
"""When determining the flex base size, the item’s min and max main sizes are
|
||||
ignored"""
|
||||
'width:fit-content' and 'height:max-content' are from part E in the spec
|
||||
section linked to above.
|
||||
The resulting height is 1px, so flex base size is 1px.
|
||||
flex base size of the second item is obviously 1px.
|
||||
The extra 198px should be distributed evenly to the two items, with each
|
||||
item's final height being 100px.
|
||||
|
||||
Chrome 101 and Firefox 99 both get this wrong because they make the first
|
||||
item's flex base size = 100px.
|
||||
-->
|
||||
<div style="aspect-ratio: 1/1; background: green; min-height: 100px; flex: 1 0 auto;">
|
||||
<div style="width: 1px;"></div>
|
||||
</div>
|
||||
<div style="flex: 1 0 1px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: Test flex item's transferred min & max sizes when preferred sizes are auto</title>
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-size-transfers">
|
||||
<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;">
|
||||
<div style="background: green; min-height: 50px; aspect-ratio: 2/1; min-width: 0px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div style="background: green; max-height: 50px; aspect-ratio: 2/1;">
|
||||
<div style="width: 200px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: Test flex container's cross size (block axis) honoring automatic content-based minimum</title>
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
#container {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
aspect-ratio: 2 / 1;
|
||||
background: green;
|
||||
}
|
||||
#item {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: Test flex container's main size (block axis) honoring automatic content-based minimum</title>
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
#container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: green;
|
||||
width: 100px;
|
||||
aspect-ratio: 2 / 1;
|
||||
}
|
||||
#item {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
flex: none
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1335009">
|
||||
<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;">
|
||||
<div style="background: green;">
|
||||
<div style="height: 50px; width: 100px;"></div>
|
||||
<button id="target" style="all: unset; display: block; height: 90%; line-height: 0; aspect-ratio: 1; min-height: 50px;"></button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.getElementById('target').style.height = '100%';
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio reference: block formatting context with floats</title>
|
||||
|
||||
<div style="width: 200px; border: solid 1px; display: flow-root;">
|
||||
<div style="float: left; width: 50px; height: 50px; background: lime;"></div>
|
||||
<div style="float: right; width: 50px; height: 50px; background: hotpink;"></div>
|
||||
<div style="float: left; width: 160px; height: 50px; background: aqua;"></div>
|
||||
<div style="float: right; width: 40px; height: 40px; background: orange;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: block formatting context with floats</title>
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
|
||||
<link rel="match" href="floats-aspect-ratio-001-ref.html" />
|
||||
|
||||
<div style="width: 200px; border: solid 1px; display: flow-root;">
|
||||
<div style="float: left; width: 50px; height: 50px; background: lime;"></div>
|
||||
<div style="float: right; width: 50px; height: 50px; background: hotpink;"></div>
|
||||
<div style="float: left; width: 160px; height: 50px; background: aqua;"></div>
|
||||
|
||||
<div style="aspect-ratio: 1/1; background: orange; display: flow-root;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('div')">
|
||||
<div style="width: 100px; aspect-ratio: 0.00025 / 0.0001;" data-expected-height=40></div>
|
||||
<div style="width: 320px; aspect-ratio: 1.6;" data-expected-height=200></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: Test grid container's block size honoring automatic content-based minimum.</title>
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
#container {
|
||||
display: grid;
|
||||
width: 100px;
|
||||
aspect-ratio: 2 / 1;
|
||||
background: green;
|
||||
/* height: auto */
|
||||
/* min-height: auto */
|
||||
}
|
||||
#item {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="item"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.item {
|
||||
all: unset;
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: green;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p id="text">Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="grid">
|
||||
<div id="item" class="item"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
item.style.padding = "10px";
|
||||
document.body.offsetTop;
|
||||
item.style.padding = "0px";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1302927">
|
||||
<div style="display: flex;">
|
||||
<img style="writing-mode: vertical-rl;" width="2147483647" height="3">
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<!-- The pixel values from the video can be slightly different; allow for
|
||||
fuzzy matching. -->
|
||||
<meta name="fuzzy" content="0-3;0-5000">
|
||||
<meta name="fuzzy" content="0-30;0-5000">
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio reference: audio element</title>
|
||||
|
||||
<audio controls style="background: green;"></audio><br>
|
||||
<audio controls style="width: 100px; background: green;"></audio><br>
|
||||
<audio controls style="height: 100px; background: green;"></audio>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: audio element</title>
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/media.html#the-audio-element">
|
||||
<link rel="match" href="replaced-element-035-ref.html">
|
||||
|
||||
<audio controls style="aspect-ratio: 1/1; background: green;"></audio><br>
|
||||
<audio controls style="aspect-ratio: 1/1; width: 100px; background: green;"></audio><br>
|
||||
<audio controls style="aspect-ratio: 1/1; height: 100px; background: green;"></audio>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: img</title>
|
||||
<link rel="author" title="Jake Archibald" href="jakearchibald@google.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
img {
|
||||
width: 100px;
|
||||
aspect-ratio: 1/2;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
|
||||
<img
|
||||
src="error.png"
|
||||
style="display: block"
|
||||
alt="display:block img should be 200px high"
|
||||
/>
|
||||
|
||||
<img
|
||||
src="error.png"
|
||||
style="display: inline-block"
|
||||
alt="display:inline-block img should be 200px high"
|
||||
/>
|
||||
|
||||
<script>
|
||||
setup({ explicit_done: true });
|
||||
|
||||
onload = () => {
|
||||
for (const img of document.images) {
|
||||
test(() => {
|
||||
assert_equals(img.offsetHeight, 200);
|
||||
}, img.alt);
|
||||
}
|
||||
|
||||
done();
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio reference: svg in img</title>
|
||||
<style>
|
||||
img {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
</style>
|
||||
<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><rect fill="red" stroke="black" stroke-width="6" width="200" height="100"/></svg>'/>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: svg in img with box-sizing:border-box</title>
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
|
||||
<link rel="match" href="replaced-element-037-ref.html">
|
||||
|
||||
<style>
|
||||
img {
|
||||
height: auto;
|
||||
box-sizing: border-box;
|
||||
padding-top: 50px;
|
||||
}
|
||||
</style>
|
||||
<img width="200" height="100" src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100"><rect fill="red" stroke="black" stroke-width="6" width="200" height="100"/></svg>'/>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<title>border-box and max-content should include borders</title>
|
||||
<style>
|
||||
.wrapper {
|
||||
border: 1px solid red;
|
||||
width: 90px;
|
||||
}
|
||||
.item {
|
||||
width: 50px;
|
||||
background-color: blue;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.content {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper"><div class="item"><div class="content"></div></div></div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<title>border-box and max-content should include borders</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3">
|
||||
<link rel="match" href="border-box-and-max-content-001-ref.html">
|
||||
<style>
|
||||
.wrapper {
|
||||
border: 1px solid red;
|
||||
width: max-content;
|
||||
}
|
||||
.item {
|
||||
max-width: max-content;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 10px 20px;
|
||||
background-color: blue;
|
||||
}
|
||||
.content {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper">
|
||||
<div class="item">
|
||||
<div class="content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<title>border-box and max-content with aspect ratio should include borders</title>
|
||||
<style>
|
||||
.wrapper {
|
||||
border: 1px solid red;
|
||||
width: 500px;
|
||||
}
|
||||
.item {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper"><div class="item"></div></div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<title>border-box and max-content with aspect ratio should include borders</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3">
|
||||
<link rel="match" href="border-box-and-max-content-002-ref.html">
|
||||
<style>
|
||||
.wrapper {
|
||||
border: 1px solid red;
|
||||
width: max-content;
|
||||
}
|
||||
.item {
|
||||
max-width: max-content;
|
||||
height: 500px;
|
||||
aspect-ratio: 1;
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper">
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<title>border-box and fit-content should include borders</title>
|
||||
<style>
|
||||
.wrapper {
|
||||
border: 1px solid red;
|
||||
width: 540px;
|
||||
}
|
||||
.item {
|
||||
background-color: blue;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.content {
|
||||
width: 500px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper"><div class="item"><div class="content"></div></div></div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<title>border-box and fit-content should include borders</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3">
|
||||
<link rel="match" href="border-box-and-max-content-003-ref.html">
|
||||
<style>
|
||||
.wrapper {
|
||||
border: 1px solid red;
|
||||
width: max-content;
|
||||
}
|
||||
.item {
|
||||
max-width: fit-content(500px);
|
||||
padding: 10px 20px;
|
||||
box-sizing: border-box;
|
||||
background-color: blue;
|
||||
}
|
||||
.content {
|
||||
width: 500px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper"><div class="item"><div class="content"></div></div></div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=823066">
|
||||
<meta name="assert" content="Checks that calc() margins are resolved against zero for content sizing.">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="width: min-content; height: 100px; background: green;">
|
||||
<div style="margin-left: calc(10% + 100px);"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=823066">
|
||||
<meta name="assert" content="Checks that calc() margins are resolved against zero for content sizing.">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<fieldset style="width: min-content; height: 100px; margin: 0; padding: 0; border: none; background: green;">
|
||||
<div style="margin-left: calc(10% + 100px);"></div>
|
||||
</fieldset>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=823066">
|
||||
<meta name="assert" content="Checks that calc() margins are resolved against zero for content sizing.">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<fieldset style="width: min-content; height: 100px; margin: 0; padding: 0; border: none; background: green;">
|
||||
<legend style="margin-left: calc(10% + 100px); padding: 0;"></legend>
|
||||
</fieldset>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=823066">
|
||||
<meta name="assert" content="Checks that calc() margins are resolved against zero for content sizing.">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="display: flex; width: min-content; height: 100px; background: green;">
|
||||
<div style="margin-left: calc(10% + 100px);"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=823066">
|
||||
<meta name="assert" content="Checks that calc() margins are resolved against zero for content sizing.">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="display: table; width: min-content; height: 100px; background: green;">
|
||||
<div style="dipslay: table-caption; margin-left: calc(10% + 100px);"></div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
|
||||
<title>Tests that contain-intrinsic-size: auto only works with content-visibility: auto, not just hidden visibility</title>
|
||||
<title>Tests that contain-intrinsic-size: auto also works with content-visibility: hidden</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
|
|
@ -17,8 +17,7 @@ function finalize() {
|
|||
el.style.contain = "size";
|
||||
el.style.contentVisibility = "hidden";
|
||||
log.innerText = el.offsetHeight;
|
||||
// No content-visibility: auto, so this should remain 1.
|
||||
assert_equals(el.offsetHeight, 1);
|
||||
assert_equals(el.offsetHeight, 50);
|
||||
}
|
||||
|
||||
var t = async_test("contain-intrinsic-size: auto");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,406 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Last remembered size</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6220">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7527">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7532">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7539">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7564">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7606">
|
||||
<meta name="assert" content="Tests that the last remembered size is properly updated or removed" />
|
||||
|
||||
<style>
|
||||
#target {
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
}
|
||||
.cis-auto {
|
||||
contain-intrinsic-size: auto 1px auto 2px;
|
||||
}
|
||||
.skip-contents {
|
||||
content-visibility: hidden;
|
||||
}
|
||||
.size-100-50 {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
.size-75-25 {
|
||||
width: 75px;
|
||||
height: 25px;
|
||||
}
|
||||
.vertical {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="parent">
|
||||
<div id="target">
|
||||
<div id="contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
const parent = document.getElementById("parent");
|
||||
const target = document.getElementById("target");
|
||||
const contents = document.getElementById("contents");
|
||||
|
||||
function checkSize(expectedWidth, expectedHeight, msg) {
|
||||
assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
|
||||
assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
|
||||
}
|
||||
|
||||
function nextRendering() {
|
||||
return new Promise(resolve => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
|
||||
});
|
||||
}
|
||||
|
||||
function cleanup() {
|
||||
parent.className = "";
|
||||
target.className = "";
|
||||
contents.className = "";
|
||||
}
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.className = "cis-auto skip-contents";
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(1, 2, "Size containment with no last remembered size");
|
||||
|
||||
target.classList.remove("skip-contents");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
checkSize(100, 50, "Using last remembered size");
|
||||
|
||||
contents.classList.remove("size-100-50");
|
||||
contents.classList.add("size-75-25");
|
||||
checkSize(100, 50, "Still using last remembered size");
|
||||
|
||||
target.classList.remove("skip-contents");
|
||||
checkSize(75, 25, "Sizing normally with different size");
|
||||
|
||||
target.classList.add("skip-contents");
|
||||
checkSize(100, 50, "Going back to last remembered size");
|
||||
|
||||
target.classList.remove("skip-contents");
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
checkSize(75, 25, "Using the new last remembered size");
|
||||
}, "Basic usage");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
checkSize(0, 0, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(0, 0, "Using last remembered size");
|
||||
}, "Last remembered size can be 0");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
parent.classList.add("hidden");
|
||||
checkSize(0, 0, "No box");
|
||||
|
||||
await nextRendering();
|
||||
parent.classList.remove("hidden");
|
||||
contents.classList.remove("size-100-50");
|
||||
checkSize(0, 0, "Sizing normally to 0x0");
|
||||
|
||||
await nextRendering();
|
||||
contents.classList.add("size-100-50");
|
||||
target.classList.add("skip-contents");
|
||||
checkSize(0, 0, "Using the new last remembered size");
|
||||
}, "Last remembered size can be set to 0 after losing display:none");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
contents.classList.remove("size-100-50");
|
||||
checkSize(100, 50, "Using last remembered size");
|
||||
|
||||
target.classList.add("vertical");
|
||||
checkSize(50, 100, "Last remembered size is logical");
|
||||
}, "Last remembered size is logical");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
checkSize(100, 50, "Using last remembered size");
|
||||
|
||||
parent.classList.add("hidden");
|
||||
checkSize(0, 0, "No box");
|
||||
|
||||
await nextRendering();
|
||||
parent.classList.remove("hidden");
|
||||
contents.classList.remove("size-100-50");
|
||||
checkSize(100, 50, "Still using last remembered size");
|
||||
}, "Last remembered size survives box destruction");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
contents.classList.remove("size-100-50");
|
||||
checkSize(100, 50, "Using last remembered size");
|
||||
|
||||
target.classList.add("flex");
|
||||
checkSize(100, 50, "Still using last remembered size");
|
||||
}, "Last remembered size survives display type changes");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
checkSize(100, 50, "Using last remembered size");
|
||||
|
||||
target.classList.remove("cis-auto");
|
||||
checkSize(0, 0, "Basic size containment");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("cis-auto");
|
||||
checkSize(1, 2, "Size containment with no last remembered size");
|
||||
}, "Losing cis:auto removes last remembered size");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.remove("cis-auto");
|
||||
checkSize(100, 50, "Sizing normally again");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("cis-auto");
|
||||
target.classList.add("skip-contents");
|
||||
checkSize(1, 2, "Size containment with no last remembered size");
|
||||
}, "Losing cis:auto removes last remembered size even if size doesn't change");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
checkSize(100, 50, "Using last remembered size");
|
||||
|
||||
target.classList.remove("cis-auto");
|
||||
checkSize(0, 0, "Basic size containment");
|
||||
|
||||
target.classList.add("cis-auto");
|
||||
checkSize(1, 2, "Size containment with no last remembered size");
|
||||
}, "Losing cis:auto removes last remembered size immediately");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
contents.classList.remove("size-100-50");
|
||||
contents.classList.add("size-75-25");
|
||||
checkSize(100, 50, "Using last remembered size");
|
||||
|
||||
parent.classList.add("hidden");
|
||||
target.classList.remove("cis-auto");
|
||||
target.classList.remove("skip-contents");
|
||||
checkSize(0, 0, "No box");
|
||||
|
||||
await nextRendering();
|
||||
parent.classList.remove("hidden");
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.remove("size-100-50");
|
||||
contents.classList.add("size-75-25");
|
||||
checkSize(75, 25, "Sizing normally with different size");
|
||||
|
||||
target.classList.add("skip-contents");
|
||||
checkSize(100, 50, "Going back to last remembered size");
|
||||
}, "Losing cis:auto during display:none doesn't remove last remembered size");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
contents.classList.remove("size-100-50");
|
||||
contents.classList.add("size-75-25");
|
||||
checkSize(100, 50, "Using last remembered size");
|
||||
|
||||
parent.classList.add("hidden");
|
||||
checkSize(0, 0, "No box");
|
||||
|
||||
await nextRendering();
|
||||
parent.classList.remove("hidden");
|
||||
target.classList.remove("cis-auto");
|
||||
checkSize(0, 0, "Basic size containment");
|
||||
|
||||
target.classList.add("cis-auto");
|
||||
checkSize(1, 2, "Size containment with no last remembered size");
|
||||
}, "Lack of cis:auto during box creation removes last remembered size");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
contents.classList.remove("size-100-50");
|
||||
contents.classList.add("size-75-25");
|
||||
checkSize(100, 50, "Using last remembered size");
|
||||
|
||||
parent.classList.add("hidden");
|
||||
target.classList.remove("cis-auto");
|
||||
checkSize(0, 0, "No box");
|
||||
|
||||
parent.classList.remove("hidden");
|
||||
checkSize(0, 0, "Basic size containment");
|
||||
|
||||
target.classList.add("cis-auto");
|
||||
checkSize(1, 2, "Size containment with no last remembered size");
|
||||
}, "Last remembered size can be removed synchronously");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
checkSize(100, 50, "Using last remembered size");
|
||||
|
||||
target.remove();
|
||||
checkSize(0, 0, "No box");
|
||||
|
||||
parent.appendChild(target);
|
||||
checkSize(100, 50, "Still using last remembered size");
|
||||
}, "Disconnected element can briefly keep last remembered size");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
contents.classList.remove("size-100-50");
|
||||
contents.classList.add("size-75-25");
|
||||
checkSize(100, 50, "Using last remembered size");
|
||||
|
||||
target.remove();
|
||||
checkSize(0, 0, "No box");
|
||||
|
||||
await nextRendering();
|
||||
parent.appendChild(target);
|
||||
checkSize(1, 2, "Size containment with no last remembered size");
|
||||
}, "Disconnected element ends up losing last remembered size");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
checkSize(0, 0, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
target.remove();
|
||||
checkSize(0, 0, "No box");
|
||||
|
||||
await nextRendering();
|
||||
parent.appendChild(target);
|
||||
checkSize(1, 2, "Size containment with no last remembered size");
|
||||
}, "Disconnected element ends up losing last remembered size even if size was 0x0");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("inline");
|
||||
checkSize(0, 0, "Non-atomic inline box");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.remove("inline");
|
||||
target.classList.add("skip-contents");
|
||||
contents.classList.remove("size-100-50");
|
||||
checkSize(100, 50, "Still using previous last remembered size");
|
||||
}, "Last remembered size survives becoming inline");
|
||||
|
||||
promise_test(async function() {
|
||||
this.add_cleanup(cleanup);
|
||||
target.classList.add("cis-auto");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("inline");
|
||||
checkSize(0, 0, "Non-atomic inline box");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.remove("inline");
|
||||
contents.classList.remove("size-100-50");
|
||||
checkSize(0, 0, "Sizing normally to 0x0");
|
||||
|
||||
await nextRendering();
|
||||
target.classList.add("skip-contents");
|
||||
contents.classList.add("size-100-50");
|
||||
checkSize(0, 0, "Last remembered size is now 0x0");
|
||||
}, "Last remembered size can be set to 0x0 after losing display:inline");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Last remembered size</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
|
||||
<meta name="assert" content="Tests that the last remembered size works well in a variety of different elements or boxes." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
border: 1px solid;
|
||||
}
|
||||
.test::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 320px;
|
||||
height: 240px;
|
||||
}
|
||||
.contain-size {
|
||||
contain: size;
|
||||
}
|
||||
.auto-width {
|
||||
contain-intrinsic-width: auto 1px;
|
||||
}
|
||||
.auto-height {
|
||||
contain-intrinsic-height: auto 2px;
|
||||
}
|
||||
.auto-both {
|
||||
contain-intrinsic-size: auto 3px auto 4px;
|
||||
}
|
||||
.skip-contents .test {
|
||||
content-visibility: hidden;
|
||||
}
|
||||
.scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
.columns {
|
||||
columns: 60px 2;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="tests">
|
||||
<div></div>
|
||||
<div class="scroll"></div>
|
||||
<div class="columns"></div>
|
||||
<div class="grid"></div>
|
||||
<div class="flex"></div>
|
||||
<fieldset></fieldset>
|
||||
<img src="resources/dice.png">
|
||||
<svg></svg>
|
||||
<canvas></canvas>
|
||||
<iframe></iframe>
|
||||
<video></video>
|
||||
<button></button>
|
||||
<select><option>Lorem ipsum</option></select>
|
||||
<select multiple><option>Lorem ipsum</option></select>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
function nextRendering() {
|
||||
return new Promise(resolve => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
|
||||
});
|
||||
}
|
||||
addEventListener("load", async function() {
|
||||
const wrapper = document.getElementById("tests");
|
||||
const tests = new DocumentFragment();
|
||||
for (let template of wrapper.children) {
|
||||
template.classList.add("test");
|
||||
const autoWidthTest = template.cloneNode(true);
|
||||
const autoHeightTest = template.cloneNode(true);
|
||||
const autoBothTest = template.cloneNode(true);
|
||||
autoWidthTest.classList.add("auto-width");
|
||||
autoHeightTest.classList.add("auto-height");
|
||||
autoBothTest.classList.add("auto-both");
|
||||
|
||||
const normalWidth = template.clientWidth;
|
||||
const normalHeight = template.clientHeight;
|
||||
template.classList.add("contain-size");
|
||||
const containedWidth = template.clientWidth;
|
||||
const containedHeight = template.clientHeight;
|
||||
|
||||
autoWidthTest.dataset.expectedClientWidth = normalWidth;
|
||||
autoWidthTest.dataset.expectedClientHeight = containedHeight;
|
||||
autoHeightTest.dataset.expectedClientWidth = containedWidth;
|
||||
autoHeightTest.dataset.expectedClientHeight = normalHeight;
|
||||
autoBothTest.dataset.expectedClientWidth = normalWidth;
|
||||
autoBothTest.dataset.expectedClientHeight = normalHeight;
|
||||
|
||||
tests.append(autoWidthTest, autoHeightTest, autoBothTest);
|
||||
}
|
||||
wrapper.textContent = "";
|
||||
wrapper.appendChild(tests);
|
||||
|
||||
// Wait so that the last remembered size can be stored.
|
||||
await nextRendering();
|
||||
|
||||
wrapper.classList.add("skip-contents");
|
||||
checkLayout(".test");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Last remembered size</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering">
|
||||
<link rel="help" href="https://drafts.csswg.org/resize-observer-1/#html-event-loop">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7659">
|
||||
<meta name="assert" content="Tests that the last remembered size is set immediately before invoking ResizeObserver callbacks." />
|
||||
|
||||
<style>
|
||||
.target {
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
border: 1px solid;
|
||||
}
|
||||
.target::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
.cis-auto .target {
|
||||
contain-intrinsic-size: auto 40px auto 20px;
|
||||
}
|
||||
.skip-contents {
|
||||
content-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="target" id="target1"></div>
|
||||
<div class="target" id="target2"></div>
|
||||
<div class="target" id="target3"></div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
function checkSize(target, expectedWidth, expectedHeight, msg) {
|
||||
assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
|
||||
assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
|
||||
}
|
||||
|
||||
let step = 0;
|
||||
|
||||
// Animation frame callbacks are invoked before ResizeObserver callbacks,
|
||||
// so the last remembered size shouldn't have been set yet.
|
||||
const test1 = async_test("requestAnimationFrame");
|
||||
const target1 = document.getElementById("target1");
|
||||
function step1(entries, ro) {
|
||||
assert_equals(++step, 1, "Step 1");
|
||||
target1.classList.add("skip-contents");
|
||||
checkSize(target1, 40, 20, "No last remembered size");
|
||||
}
|
||||
requestAnimationFrame(test1.step_func_done(step1));
|
||||
|
||||
// The last remembered size should be set immediately before invoking
|
||||
// ResizeObserver callbacks, even if the ResizeObserver is created before
|
||||
// laying out an element that can record a last remembered size.
|
||||
const test2 = async_test("Early ResizeObserver");
|
||||
const target2 = document.getElementById("target2");
|
||||
function step2(entries, ro) {
|
||||
assert_equals(++step, 2, "Step 2");
|
||||
ro.disconnect();
|
||||
target2.classList.add("skip-contents");
|
||||
checkSize(target2, 100, 50, "Using last remembered size");
|
||||
}
|
||||
new ResizeObserver(test2.step_func_done(step2)).observe(target2);
|
||||
|
||||
// Let elements record a last remembered size and force layout.
|
||||
document.body.classList.add("cis-auto");
|
||||
document.body.offsetLeft;
|
||||
|
||||
// The last remembered size should also have been set in the callback of
|
||||
// a ResizeObserver creater after laying out an element that can record
|
||||
// a last remembered size.
|
||||
const test3 = async_test("Late ResizeObserver");
|
||||
const target3 = document.getElementById("target3");
|
||||
function step3(entries, ro) {
|
||||
assert_equals(++step, 3, "Step 3");
|
||||
ro.disconnect();
|
||||
target3.classList.add("skip-contents");
|
||||
checkSize(target3, 100, 50, "Using last remembered size");
|
||||
}
|
||||
new ResizeObserver(test3.step_func_done(step3)).observe(target3);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Last remembered size</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7529">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7516">
|
||||
<meta name="assert" content="Tests that the last remembered size is tracked independently for each axis." />
|
||||
|
||||
<style>
|
||||
#target {
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
border: 1px solid;
|
||||
}
|
||||
#target::before {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
.content-100-50::before {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
.content-150-75::before {
|
||||
width: 150px;
|
||||
height: 75px;
|
||||
}
|
||||
.content-skip {
|
||||
content-visibility: hidden;
|
||||
}
|
||||
.contain-inline-size {
|
||||
contain: inline-size;
|
||||
}
|
||||
.ciw-auto-2 {
|
||||
contain-intrinsic-width: auto 2px;
|
||||
}
|
||||
.ciw-auto-20 {
|
||||
contain-intrinsic-width: auto 20px;
|
||||
}
|
||||
.cih-auto-1 {
|
||||
contain-intrinsic-height: auto 1px;
|
||||
}
|
||||
.cih-auto-10 {
|
||||
contain-intrinsic-height: auto 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="target"></div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
const target = document.getElementById("target");
|
||||
|
||||
function checkSize(expectedWidth, expectedHeight, msg) {
|
||||
assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
|
||||
assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
|
||||
}
|
||||
|
||||
function nextRendering() {
|
||||
return new Promise(resolve => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
|
||||
});
|
||||
}
|
||||
|
||||
promise_test(async function() {
|
||||
target.className = "content-100-50 ciw-auto-20";
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.className = "content-skip ciw-auto-2 cih-auto-1";
|
||||
checkSize(100, 1, "Using last remembered inline size");
|
||||
}, "Only recording last remembered inline size");
|
||||
|
||||
promise_test(async function() {
|
||||
target.className = "content-100-50 cih-auto-10";
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.className = "content-skip ciw-auto-2 cih-auto-1";
|
||||
checkSize(2, 50, "Using last remembered block size");
|
||||
}, "Only recording last remembered block size");
|
||||
|
||||
promise_test(async function() {
|
||||
target.className = "content-100-50";
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.className = "content-100-50 ciw-auto-20 cih-auto-10 contain-inline-size";
|
||||
checkSize(20, 50, "Size containment for inline axis");
|
||||
|
||||
await nextRendering();
|
||||
target.className = "content-skip ciw-auto-2 cih-auto-1";
|
||||
checkSize(2, 50, "Using last remembered block size");
|
||||
}, "contain:inline-size prevents recording last remembered inline size");
|
||||
|
||||
promise_test(async function() {
|
||||
target.className = "content-100-50 ciw-auto-20 cih-auto-10";
|
||||
checkSize(100, 50, "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.className = "content-150-75 ciw-auto-20 cih-auto-10 contain-inline-size";
|
||||
checkSize(20, 75, "Size containment for inline axis");
|
||||
|
||||
await nextRendering();
|
||||
target.className = "content-skip ciw-auto-2 cih-auto-1";
|
||||
checkSize(100, 75, "Using last remembered sizes from different times");
|
||||
}, "contain:inline-size can keep previous last remembered inline size");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Last remembered size</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/">
|
||||
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7598">
|
||||
<meta name="assert" content="Tests that the last remembered size takes all fragments into account." />
|
||||
|
||||
<style>
|
||||
#wrapper {
|
||||
column-width: 100px;
|
||||
width: max-content;
|
||||
height: 100px;
|
||||
}
|
||||
#target {
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
background: orange;
|
||||
}
|
||||
#target::before {
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
.content-50-150::before {
|
||||
width: 50px;
|
||||
height: 150px;
|
||||
}
|
||||
.content-50-175::before {
|
||||
width: 50px;
|
||||
height: 175px;
|
||||
}
|
||||
.content-skip {
|
||||
content-visibility: hidden;
|
||||
}
|
||||
.cis-auto {
|
||||
contain-intrinsic-size: auto 1px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="wrapper">
|
||||
<div id="target"></div>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
const target = document.getElementById("target");
|
||||
|
||||
function checkSizes(expectedSizes, msg) {
|
||||
const rects = target.getClientRects();
|
||||
assert_equals(rects.length, expectedSizes.length, msg + " - fragments");
|
||||
for (let i = 0; i < rects.length; ++i) {
|
||||
assert_equals(rects[i].width, expectedSizes[i][0], `${msg} - fragment #${i+1} width`);
|
||||
assert_equals(rects[i].height, expectedSizes[i][1], `${msg} - fragment #${i+1} height`);
|
||||
}
|
||||
}
|
||||
|
||||
function nextRendering() {
|
||||
return new Promise(resolve => {
|
||||
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
|
||||
});
|
||||
}
|
||||
|
||||
promise_test(async function() {
|
||||
target.className = "cis-auto content-50-150";
|
||||
checkSizes([[50, 100], [50, 50]], "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.className = "cis-auto content-skip";
|
||||
checkSizes([[50, 150]], "Using last remembered size");
|
||||
}, "Last remembered size supports multiple fragments");
|
||||
|
||||
promise_test(async function() {
|
||||
target.className = "cis-auto content-50-150";
|
||||
checkSizes([[50, 100], [50, 50]], "Sizing normally");
|
||||
|
||||
await nextRendering();
|
||||
target.className = "cis-auto content-50-175";
|
||||
checkSizes([[50, 100], [50, 75]], "Sizing normally with new size");
|
||||
|
||||
await nextRendering();
|
||||
target.className = "cis-auto content-skip";
|
||||
checkSizes([[50, 175]], "Using updated last remembered size");
|
||||
}, "Last remembered size is updated when 2nd fragment changes size");
|
||||
</script>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf8">
|
||||
<title>CSS contain-intrinsic-size: select multiple</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
|
||||
<style>
|
||||
.border {
|
||||
border: 1px solid blue;
|
||||
width: max-content;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
select {
|
||||
background: lightblue;
|
||||
box-sizing: content-box;
|
||||
width: 55px;
|
||||
height: 66px;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
|
||||
<select multiple></select>
|
||||
|
|
@ -1,24 +1,68 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf8">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS contain-intrinsic-size: select multiple</title>
|
||||
<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="match" href="contain-intrinsic-size-009-ref.html">
|
||||
<meta name="assert" content="contain-intrinsic-size sizes select multiple">
|
||||
|
||||
<style>
|
||||
.border {
|
||||
border: 1px solid blue;
|
||||
width: max-content;
|
||||
margin: 5px;
|
||||
.cis-both {
|
||||
contain-intrinsic-size: 55px 66px;
|
||||
}
|
||||
|
||||
.cis-width {
|
||||
contain-intrinsic-size: 55px none;
|
||||
}
|
||||
|
||||
.cis-height {
|
||||
contain-intrinsic-size: none 66px;
|
||||
}
|
||||
|
||||
select {
|
||||
contain-intrinsic-size: 55px 66px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.test {
|
||||
contain: size;
|
||||
background: lightblue;
|
||||
overflow: visible;
|
||||
border: 1px solid blue;
|
||||
margin: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<select multiple></select>
|
||||
<!-- To measure the size of an empty <select> without size containment -->
|
||||
<select id="reference" multiple size="1"></select>
|
||||
|
||||
<select multiple class="test cis-both"
|
||||
data-expected-client-width="55" data-expected-client-height="66"></select>
|
||||
<select multiple class="test cis-width"
|
||||
data-expected-client-width="55"></select>
|
||||
<select multiple class="test cis-height"
|
||||
data-expected-client-height="66"></select>
|
||||
|
||||
<select multiple size="1" class="test cis-width"
|
||||
data-expected-client-width="55"></select>
|
||||
<select multiple size="1" class="test cis-height"
|
||||
data-expected-client-height="66"></select>
|
||||
|
||||
<select multiple size="10" class="test cis-width"
|
||||
data-expected-client-width="55"></select>
|
||||
<select multiple size="10" class="test cis-height"
|
||||
data-expected-client-height="66"></select>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
const reference = document.getElementById("reference");
|
||||
const normalWidth = reference.clientWidth;
|
||||
for (let test of document.querySelectorAll(".test.cis-width")) {
|
||||
reference.size = test.size || 4;
|
||||
test.dataset.expectedClientHeight = reference.clientHeight;
|
||||
}
|
||||
for (let test of document.querySelectorAll(".test.cis-height")) {
|
||||
test.dataset.expectedClientWidth = normalWidth;
|
||||
}
|
||||
|
||||
checkLayout('.test');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,159 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf8">
|
||||
<title>CSS contain-intrinsic-size: single axis size containment</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size">
|
||||
<style>
|
||||
.test {
|
||||
contain: inline-size;
|
||||
display: inline-block;
|
||||
background: green;
|
||||
}
|
||||
.test::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
}
|
||||
.cis-none {
|
||||
contain-intrinsic-size: none none;
|
||||
}
|
||||
.cis-height {
|
||||
contain-intrinsic-size: none 50px;
|
||||
}
|
||||
.cis-width {
|
||||
contain-intrinsic-size: 100px none;
|
||||
}
|
||||
.cis-both {
|
||||
contain-intrinsic-size: 100px 50px;
|
||||
}
|
||||
.vertical {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.test')">
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="test cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="20"></div>
|
||||
<div class="test cis-height"
|
||||
data-expected-client-width="0" data-expected-client-height="20"></div>
|
||||
<div class="test cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="20"></div>
|
||||
<div class="test cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="20"></div>
|
||||
|
||||
<div class="test cis-none vertical"
|
||||
data-expected-client-width="40" data-expected-client-height="0"></div>
|
||||
<div class="test cis-height vertical"
|
||||
data-expected-client-width="40" data-expected-client-height="50"></div>
|
||||
<div class="test cis-width vertical"
|
||||
data-expected-client-width="40" data-expected-client-height="0"></div>
|
||||
<div class="test cis-both vertical"
|
||||
data-expected-client-width="40" data-expected-client-height="50"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
<img class="test cis-none" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="0" data-expected-client-height="60">
|
||||
<img class="test cis-height" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="0" data-expected-client-height="60">
|
||||
<img class="test cis-width" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="100" data-expected-client-height="60">
|
||||
<img class="test cis-both" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="100" data-expected-client-height="60">
|
||||
|
||||
<img class="test cis-none vertical" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="60" data-expected-client-height="0">
|
||||
<img class="test cis-height vertical" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="60" data-expected-client-height="50">
|
||||
<img class="test cis-width vertical" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="60" data-expected-client-height="0">
|
||||
<img class="test cis-both vertical" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="60" data-expected-client-height="50">
|
||||
|
||||
<hr>
|
||||
|
||||
<svg class="test cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="150"></svg>
|
||||
<svg class="test cis-height"
|
||||
data-expected-client-width="0" data-expected-client-height="150"></svg>
|
||||
<svg class="test cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="150"></svg>
|
||||
<svg class="test cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="150"></svg>
|
||||
|
||||
<svg class="test cis-none vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="0"></svg>
|
||||
<svg class="test cis-height vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="50"></svg>
|
||||
<svg class="test cis-width vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="0"></svg>
|
||||
<svg class="test cis-both vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="50"></svg>
|
||||
|
||||
<hr>
|
||||
|
||||
<canvas class="test cis-none" width="40" height="20"
|
||||
data-expected-client-width="0" data-expected-client-height="20"></canvas>
|
||||
<canvas class="test cis-height" width="40" height="20"
|
||||
data-expected-client-width="0" data-expected-client-height="20"></canvas>
|
||||
<canvas class="test cis-width" width="40" height="20"
|
||||
data-expected-client-width="100" data-expected-client-height="20"></canvas>
|
||||
<canvas class="test cis-both" width="40" height="20"
|
||||
data-expected-client-width="100" data-expected-client-height="20"></canvas>
|
||||
|
||||
<canvas class="test cis-none vertical" width="40" height="20"
|
||||
data-expected-client-width="40" data-expected-client-height="0"></canvas>
|
||||
<canvas class="test cis-height vertical" width="40" height="20"
|
||||
data-expected-client-width="40" data-expected-client-height="50"></canvas>
|
||||
<canvas class="test cis-width vertical" width="40" height="20"
|
||||
data-expected-client-width="40" data-expected-client-height="0"></canvas>
|
||||
<canvas class="test cis-both vertical" width="40" height="20"
|
||||
data-expected-client-width="40" data-expected-client-height="50"></canvas>
|
||||
|
||||
<hr>
|
||||
|
||||
<iframe class="test cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="150"></iframe>
|
||||
<iframe class="test cis-height"
|
||||
data-expected-client-width="0" data-expected-client-height="150"></iframe>
|
||||
<iframe class="test cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="150"></iframe>
|
||||
<iframe class="test cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="150"></iframe>
|
||||
|
||||
<iframe class="test cis-none vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="0"></iframe>
|
||||
<iframe class="test cis-height vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="50"></iframe>
|
||||
<iframe class="test cis-width vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="0"></iframe>
|
||||
<iframe class="test cis-both vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="50"></iframe>
|
||||
|
||||
<hr>
|
||||
|
||||
<video class="test cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="150"></video>
|
||||
<video class="test cis-height"
|
||||
data-expected-client-width="0" data-expected-client-height="150"></video>
|
||||
<video class="test cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="150"></video>
|
||||
<video class="test cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="150"></video>
|
||||
|
||||
<video class="test cis-none vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="0"></video>
|
||||
<video class="test cis-height vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="50"></video>
|
||||
<video class="test cis-width vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="0"></video>
|
||||
<video class="test cis-both vertical"
|
||||
data-expected-client-width="300" data-expected-client-height="50"></video>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf8">
|
||||
<title>CSS contain-intrinsic-size: button</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size">
|
||||
<style>
|
||||
.test {
|
||||
contain: size;
|
||||
padding: 0;
|
||||
border: 5px solid;
|
||||
}
|
||||
.test::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
}
|
||||
.cis-none {
|
||||
contain-intrinsic-size: none none;
|
||||
}
|
||||
.cis-height {
|
||||
contain-intrinsic-size: none 50px;
|
||||
}
|
||||
.cis-width {
|
||||
contain-intrinsic-size: 100px none;
|
||||
}
|
||||
.cis-both {
|
||||
contain-intrinsic-size: 100px 50px;
|
||||
}
|
||||
.min-size {
|
||||
min-width: 30px;
|
||||
min-height: 15px;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.test')">
|
||||
<div id="log"></div>
|
||||
|
||||
<button class="test cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="0"></button>
|
||||
<button class="test cis-height"
|
||||
data-expected-client-width="0" data-expected-client-height="50"></button>
|
||||
<button class="test cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="0"></button>
|
||||
<button class="test cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"></button>
|
||||
|
||||
<button class="test cis-none min-size"
|
||||
data-expected-client-width="20" data-expected-client-height="5"></button>
|
||||
<button class="test cis-height min-size"
|
||||
data-expected-client-width="20" data-expected-client-height="50"></button>
|
||||
<button class="test cis-width min-size"
|
||||
data-expected-client-width="100" data-expected-client-height="5"></button>
|
||||
<button class="test cis-both min-size"
|
||||
data-expected-client-width="100" data-expected-client-height="50"></button>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf8">
|
||||
<title>CSS contain-intrinsic-size: scroll containers</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scroll-container">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
.test {
|
||||
contain: size;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: 5px solid;
|
||||
}
|
||||
.test::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
}
|
||||
.big-contents::before {
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
}
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
.overflow-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.cis-none {
|
||||
contain-intrinsic-size: none none;
|
||||
}
|
||||
.cis-height {
|
||||
contain-intrinsic-size: none 50px;
|
||||
}
|
||||
.cis-width {
|
||||
contain-intrinsic-size: 100px none;
|
||||
}
|
||||
.cis-both {
|
||||
contain-intrinsic-size: 100px 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="test small-contents overflow-auto cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="0"
|
||||
data-expected-scroll-width="40" data-expected-scroll-height="20"></div>
|
||||
<div class="test small-contents overflow-auto cis-height"
|
||||
data-expected-client-width="0" data-expected-client-height="50"
|
||||
data-expected-scroll-width="40" data-expected-scroll-height="50"></div>
|
||||
<div class="test small-contents overflow-auto cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="0"
|
||||
data-expected-scroll-width="100" data-expected-scroll-height="20"></div>
|
||||
<div class="test small-contents overflow-auto cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"
|
||||
data-expected-scroll-width="100" data-expected-scroll-height="50"></div>
|
||||
|
||||
<div class="test small-contents overflow-scroll cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="0"
|
||||
data-expected-scroll-width="40" data-expected-scroll-height="20"></div>
|
||||
<div class="test small-contents overflow-scroll cis-height"
|
||||
data-expected-client-width="0" data-expected-client-height="50"
|
||||
data-expected-scroll-width="40" data-expected-scroll-height="50"></div>
|
||||
<div class="test small-contents overflow-scroll cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="0"
|
||||
data-expected-scroll-width="100" data-expected-scroll-height="20"></div>
|
||||
<div class="test small-contents overflow-scroll cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"
|
||||
data-expected-scroll-width="100" data-expected-scroll-height="50"></div>
|
||||
|
||||
<div class="test small-contents overflow-hidden cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="0"
|
||||
data-expected-scroll-width="40" data-expected-scroll-height="20"></div>
|
||||
<div class="test small-contents overflow-hidden cis-height"
|
||||
data-expected-client-width="0" data-expected-client-height="50"
|
||||
data-expected-scroll-width="40" data-expected-scroll-height="50"></div>
|
||||
<div class="test small-contents overflow-hidden cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="0"
|
||||
data-expected-scroll-width="100" data-expected-scroll-height="20"></div>
|
||||
<div class="test small-contents overflow-hidden cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"
|
||||
data-expected-scroll-width="100" data-expected-scroll-height="50"></div>
|
||||
|
||||
|
||||
<div class="test big-contents overflow-auto cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="0"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
<div class="test big-contents overflow-auto cis-height"
|
||||
data-expected-client-width="0" data-expected-client-height="50"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
<div class="test big-contents overflow-auto cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="0"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
<div class="test big-contents overflow-auto cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
|
||||
<div class="test big-contents overflow-scroll cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="0"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
<div class="test big-contents overflow-scroll cis-height"
|
||||
data-expected-client-width="0" data-expected-client-height="50"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
<div class="test big-contents overflow-scroll cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="0"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
<div class="test big-contents overflow-scroll cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
|
||||
<div class="test big-contents overflow-hidden cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="0"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
<div class="test big-contents overflow-hidden cis-height"
|
||||
data-expected-client-width="0" data-expected-client-height="50"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
<div class="test big-contents overflow-hidden cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="0"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
<div class="test big-contents overflow-hidden cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"
|
||||
data-expected-scroll-width="400" data-expected-scroll-height="200"></div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
checkLayout(".test");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf8">
|
||||
<title>CSS contain-intrinsic-size: multi-column containers</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#the-multi-column-model">
|
||||
<style>
|
||||
.test {
|
||||
contain: size;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
border: 5px solid;
|
||||
column-gap: 5px;
|
||||
}
|
||||
.columns-60px-1 {
|
||||
columns: 60px 1;
|
||||
}
|
||||
.columns-120px-1 {
|
||||
columns: 120px 1;
|
||||
}
|
||||
.columns-60px-2 {
|
||||
columns: 60px 2;
|
||||
}
|
||||
.cis-none {
|
||||
contain-intrinsic-size: none none;
|
||||
}
|
||||
.cis-height {
|
||||
contain-intrinsic-size: none 50px;
|
||||
}
|
||||
.cis-width {
|
||||
contain-intrinsic-size: 100px none;
|
||||
}
|
||||
.cis-both {
|
||||
contain-intrinsic-size: 100px 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="test columns-60px-1 cis-none"
|
||||
data-expected-client-width="60" data-expected-client-height="0"></div>
|
||||
<div class="test columns-60px-1 cis-height"
|
||||
data-expected-client-width="60" data-expected-client-height="50"></div>
|
||||
<div class="test columns-60px-1 cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="0"></div>
|
||||
<div class="test columns-60px-1 cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"></div>
|
||||
|
||||
<div class="test columns-120px-1 cis-none"
|
||||
data-expected-client-width="120" data-expected-client-height="0"></div>
|
||||
<div class="test columns-120px-1 cis-height"
|
||||
data-expected-client-width="120" data-expected-client-height="50"></div>
|
||||
<div class="test columns-120px-1 cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="0"></div>
|
||||
<div class="test columns-120px-1 cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"></div>
|
||||
|
||||
<div class="test columns-60px-2 cis-none"
|
||||
data-expected-client-width="125" data-expected-client-height="0"></div>
|
||||
<div class="test columns-60px-2 cis-height"
|
||||
data-expected-client-width="125" data-expected-client-height="50"></div>
|
||||
<div class="test columns-60px-2 cis-width"
|
||||
data-expected-client-width="100" data-expected-client-height="0"></div>
|
||||
<div class="test columns-60px-2 cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"></div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
checkLayout(".test");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS contain-intrinsic-size: single-select list box</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#list-box">
|
||||
<style>
|
||||
.ciw-0 {
|
||||
contain-intrinsic-width: 0px;
|
||||
}
|
||||
.ciw-100 {
|
||||
contain-intrinsic-width: 100px;
|
||||
}
|
||||
.cih-0 {
|
||||
contain-intrinsic-height: 0px;
|
||||
}
|
||||
.cih-100 {
|
||||
contain-intrinsic-height: 100px;
|
||||
}
|
||||
select {
|
||||
padding: 0;
|
||||
border: solid;
|
||||
margin: 5px;
|
||||
}
|
||||
.test {
|
||||
contain: size;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- To measure the size of an empty <select> without size containment -->
|
||||
<select id="reference"></select>
|
||||
|
||||
<select class="test ciw-none cih-none"
|
||||
data-expected-client-width="default" data-expected-client-height="default"></select>
|
||||
<select class="test ciw-none cih-0"
|
||||
data-expected-client-width="default" data-expected-client-height="0"></select>
|
||||
<select class="test ciw-none cih-100"
|
||||
data-expected-client-width="default" data-expected-client-height="100"></select>
|
||||
|
||||
<select class="test ciw-0 cih-none"
|
||||
data-expected-client-width="0" data-expected-client-height="default"></select>
|
||||
<select class="test ciw-0 cih-0"
|
||||
data-expected-client-width="0" data-expected-client-height="0"></select>
|
||||
<select class="test ciw-0 cih-100"
|
||||
data-expected-client-width="0" data-expected-client-height="100"></select>
|
||||
|
||||
<select class="test ciw-100 cih-none"
|
||||
data-expected-client-width="100" data-expected-client-height="default"></select>
|
||||
<select class="test ciw-100 cih-0"
|
||||
data-expected-client-width="100" data-expected-client-height="0"></select>
|
||||
<select class="test ciw-100 cih-100"
|
||||
data-expected-client-width="100" data-expected-client-height="100"></select>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
const reference = document.getElementById("reference");
|
||||
const normalWidth = reference.clientWidth;
|
||||
const normalHeight = reference.clientHeight;
|
||||
for (let test of document.querySelectorAll(".ciw-none")) {
|
||||
test.dataset.expectedClientWidth = normalWidth;
|
||||
}
|
||||
for (let test of document.querySelectorAll(".cih-none")) {
|
||||
test.dataset.expectedClientHeight = normalHeight;
|
||||
}
|
||||
checkLayout('.test');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf8">
|
||||
<title>CSS contain-intrinsic-size: Logical versions</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size">
|
||||
<style>
|
||||
.test {
|
||||
contain: size;
|
||||
display: inline-block;
|
||||
background: green;
|
||||
}
|
||||
.test::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
}
|
||||
.cis-none {
|
||||
contain-intrinsic-inline-size: none;
|
||||
contain-intrinsic-block-size: none;
|
||||
}
|
||||
.cis-block {
|
||||
contain-intrinsic-inline-size: none;
|
||||
contain-intrinsic-block-size: 50px;
|
||||
}
|
||||
.cis-inline {
|
||||
contain-intrinsic-inline-size: 100px;
|
||||
contain-intrinsic-block-size: none;
|
||||
}
|
||||
.cis-both {
|
||||
contain-intrinsic-inline-size: 100px;
|
||||
contain-intrinsic-block-size: 50px;
|
||||
}
|
||||
.vertical {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onload="checkLayout('.test')">
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="test cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="0"></div>
|
||||
<div class="test cis-block"
|
||||
data-expected-client-width="0" data-expected-client-height="50"></div>
|
||||
<div class="test cis-inline"
|
||||
data-expected-client-width="100" data-expected-client-height="0"></div>
|
||||
<div class="test cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"></div>
|
||||
|
||||
<div class="test cis-none vertical"
|
||||
data-expected-client-height="0" data-expected-client-width="0"></div>
|
||||
<div class="test cis-block vertical"
|
||||
data-expected-client-height="0" data-expected-client-width="50"></div>
|
||||
<div class="test cis-inline vertical"
|
||||
data-expected-client-height="100" data-expected-client-width="0"></div>
|
||||
<div class="test cis-both vertical"
|
||||
data-expected-client-height="100" data-expected-client-width="50"></div>
|
||||
|
||||
<hr>
|
||||
|
||||
<img class="test cis-none" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="0" data-expected-client-height="0">
|
||||
<img class="test cis-block" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="0" data-expected-client-height="50">
|
||||
<img class="test cis-inline" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="100" data-expected-client-height="0">
|
||||
<img class="test cis-both" src="/css/support/60x60-green.png"
|
||||
data-expected-client-width="100" data-expected-client-height="50">
|
||||
|
||||
<img class="test cis-none vertical" src="/css/support/60x60-green.png"
|
||||
data-expected-client-height="0" data-expected-client-width="0">
|
||||
<img class="test cis-block vertical" src="/css/support/60x60-green.png"
|
||||
data-expected-client-height="0" data-expected-client-width="50">
|
||||
<img class="test cis-inline vertical" src="/css/support/60x60-green.png"
|
||||
data-expected-client-height="100" data-expected-client-width="0">
|
||||
<img class="test cis-both vertical" src="/css/support/60x60-green.png"
|
||||
data-expected-client-height="100" data-expected-client-width="50">
|
||||
|
||||
<hr>
|
||||
|
||||
<svg class="test cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="0"></svg>
|
||||
<svg class="test cis-block"
|
||||
data-expected-client-width="0" data-expected-client-height="50"></svg>
|
||||
<svg class="test cis-inline"
|
||||
data-expected-client-width="100" data-expected-client-height="0"></svg>
|
||||
<svg class="test cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"></svg>
|
||||
|
||||
<svg class="test cis-none vertical"
|
||||
data-expected-client-height="0" data-expected-client-width="0"></svg>
|
||||
<svg class="test cis-block vertical"
|
||||
data-expected-client-height="0" data-expected-client-width="50"></svg>
|
||||
<svg class="test cis-inline vertical"
|
||||
data-expected-client-height="100" data-expected-client-width="0"></svg>
|
||||
<svg class="test cis-both vertical"
|
||||
data-expected-client-height="100" data-expected-client-width="50"></svg>
|
||||
|
||||
<hr>
|
||||
|
||||
<canvas class="test cis-none" width="40" height="20"
|
||||
data-expected-client-width="0" data-expected-client-height="0"></canvas>
|
||||
<canvas class="test cis-block" width="40" height="20"
|
||||
data-expected-client-width="0" data-expected-client-height="50"></canvas>
|
||||
<canvas class="test cis-inline" width="40" height="20"
|
||||
data-expected-client-width="100" data-expected-client-height="0"></canvas>
|
||||
<canvas class="test cis-both" width="40" height="20"
|
||||
data-expected-client-width="100" data-expected-client-height="50"></canvas>
|
||||
|
||||
<canvas class="test cis-none vertical" width="40" height="20"
|
||||
data-expected-client-height="0" data-expected-client-width="0"></canvas>
|
||||
<canvas class="test cis-block vertical" width="40" height="20"
|
||||
data-expected-client-height="0" data-expected-client-width="50"></canvas>
|
||||
<canvas class="test cis-inline vertical" width="40" height="20"
|
||||
data-expected-client-height="100" data-expected-client-width="0"></canvas>
|
||||
<canvas class="test cis-both vertical" width="40" height="20"
|
||||
data-expected-client-height="100" data-expected-client-width="50"></canvas>
|
||||
|
||||
<hr>
|
||||
|
||||
<iframe class="test cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="0"></iframe>
|
||||
<iframe class="test cis-block"
|
||||
data-expected-client-width="0" data-expected-client-height="50"></iframe>
|
||||
<iframe class="test cis-inline"
|
||||
data-expected-client-width="100" data-expected-client-height="0"></iframe>
|
||||
<iframe class="test cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"></iframe>
|
||||
|
||||
<iframe class="test cis-none vertical"
|
||||
data-expected-client-height="0" data-expected-client-width="0"></iframe>
|
||||
<iframe class="test cis-block vertical"
|
||||
data-expected-client-height="0" data-expected-client-width="50"></iframe>
|
||||
<iframe class="test cis-inline vertical"
|
||||
data-expected-client-height="100" data-expected-client-width="0"></iframe>
|
||||
<iframe class="test cis-both vertical"
|
||||
data-expected-client-height="100" data-expected-client-width="50"></iframe>
|
||||
|
||||
<hr>
|
||||
|
||||
<video class="test cis-none"
|
||||
data-expected-client-width="0" data-expected-client-height="0"></video>
|
||||
<video class="test cis-block"
|
||||
data-expected-client-width="0" data-expected-client-height="50"></video>
|
||||
<video class="test cis-inline"
|
||||
data-expected-client-width="100" data-expected-client-height="0"></video>
|
||||
<video class="test cis-both"
|
||||
data-expected-client-width="100" data-expected-client-height="50"></video>
|
||||
|
||||
<video class="test cis-none vertical"
|
||||
data-expected-client-height="0" data-expected-client-width="0"></video>
|
||||
<video class="test cis-block vertical"
|
||||
data-expected-client-height="0" data-expected-client-width="50"></video>
|
||||
<video class="test cis-inline vertical"
|
||||
data-expected-client-height="100" data-expected-client-width="0"></video>
|
||||
<video class="test cis-both vertical"
|
||||
data-expected-client-height="100" data-expected-client-width="50"></video>
|
||||
</body>
|
||||
|
|
@ -55,6 +55,7 @@ test_invalid_value("contain-intrinsic-block-size", "1px none");
|
|||
test_invalid_value("contain-intrinsic-block-size", "auto 1px auto");
|
||||
test_invalid_value("contain-intrinsic-block-size", "20%");
|
||||
test_invalid_value("contain-intrinsic-block-size", "1px auto");
|
||||
test_invalid_value("contain-intrinsic-block-size", "auto none");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help"
|
||||
href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<meta name="assert"
|
||||
content="max-width: fit-content works when there is no definite available size. Chrome 105 treated fit-content as min-content in this scenario.">
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.word {
|
||||
float: left;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.
|
||||
</p>
|
||||
|
||||
<div id="reference-overlapped-red"></div>
|
||||
|
||||
<div style="width: 100px;">
|
||||
<div style="float: left; height: 100px; background: green;">
|
||||
<div style="max-width: fit-content;">
|
||||
<div class="word"></div>
|
||||
<div class="word"></div>
|
||||
<div class="word"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,18 +4,19 @@
|
|||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Sizing Test: Testing intrinsic size fallback 300x150 for some replaced elements.</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic">
|
||||
<meta name="assert" content="This test verifies that the intrinsic size fallback is 300px width and 150px height for replaced elements with no intrinsic size and no intrinsic ratio, regardless of the writing-mode.">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Sizing Test: Testing intrinsic size fallback 300x150 for some replaced elements.</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic">
|
||||
<meta name="assert"
|
||||
content="This test verifies that the intrinsic size fallback is 300px width and 150px height for replaced elements with no intrinsic size and no intrinsic ratio, regardless of the writing-mode.">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
<style>
|
||||
.test {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
|
@ -25,21 +26,24 @@
|
|||
.vertical {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
<body onload="checkLayout('.test')">
|
||||
<!-- horizontal writing-mode -->
|
||||
<iframe class="test" data-expected-width="300" data-expected-height="150"></iframe>
|
||||
<video class="test" data-expected-width="300" data-expected-height="150"></video>
|
||||
<svg class="test" data-expected-width="300" data-expected-height="150"></svg>
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"
|
||||
class="test" data-expected-width="300" data-expected-height="150">
|
||||
<body onload="checkLayout('.test')">
|
||||
<!-- horizontal writing-mode -->
|
||||
<iframe class="test" data-expected-width="300" data-expected-height="150"></iframe>
|
||||
<video class="test" data-expected-width="300" data-expected-height="150"></video>
|
||||
<svg class="test" data-expected-bounding-client-rect-width="300"
|
||||
data-expected-bounding-client-rect-height="150"></svg>
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" class="test" data-expected-width="300"
|
||||
data-expected-height="150">
|
||||
|
||||
<!-- vertical writing-mode -->
|
||||
<iframe class="test vertical" data-expected-width="300" data-expected-height="150"></iframe>
|
||||
<video class="test vertical" data-expected-width="300" data-expected-height="150"></video>
|
||||
<svg class="test vertical" data-expected-bounding-client-rect-width="300"
|
||||
data-expected-bounding-client-rect-height="150"></svg>
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" class="test vertical"
|
||||
data-expected-width="300" data-expected-height="150">
|
||||
</body>
|
||||
|
||||
<!-- vertical writing-mode -->
|
||||
<iframe class="test vertical" data-expected-width="300" data-expected-height="150"></iframe>
|
||||
<video class="test vertical" data-expected-width="300" data-expected-height="150"></video>
|
||||
<svg class="test vertical" data-expected-width="300" data-expected-height="150"></svg>
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"
|
||||
class="test vertical" data-expected-width="300" data-expected-height="150">
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="assert"
|
||||
content="Checks that a replaced element, with an aspect ratio, applies min/max block lengths for intrinsic sizing when width:max-content is specified.">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<img src="aspect-ratio/support/1x1-green.png" style="min-height: 100px; width:
|
||||
max-content;"></img>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<meta name="assert"
|
||||
content="Checks that a replaced element, with an aspect ratio, applies min/max block lengths for intrinsic sizing when it's a float.">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<img src="aspect-ratio/support/1x1-green.png" style="min-height: 100px; float: left;"></img>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1638937">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
.flexbox {
|
||||
display: flex;
|
||||
width: 600px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
svg {
|
||||
background: teal;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="checkLayout('svg')">
|
||||
No intrinsic attributes:
|
||||
<div class="flexbox">
|
||||
<svg data-expected-client-width="300" data-expected-client-height="150"></svg>
|
||||
</div>
|
||||
|
||||
viewBox and height:
|
||||
<div class="flexbox">
|
||||
<svg height="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="160" data-expected-client-height="40"></svg>
|
||||
</div>
|
||||
|
||||
viewBox and width:
|
||||
<div class="flexbox">
|
||||
<svg width="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="40" data-expected-client-height="10"></svg>
|
||||
</div>
|
||||
|
||||
viewBox, width, height:
|
||||
<div class="flexbox">
|
||||
<svg width="40" height="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="40" data-expected-client-height="40"></svg>
|
||||
</div>
|
||||
|
||||
Just viewBox:
|
||||
<div class="flexbox">
|
||||
<svg viewBox="0 0 4 1"
|
||||
data-expected-client-width="600" data-expected-client-height="150"></svg>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1638937">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
.block {
|
||||
display: block;
|
||||
width: 600px;
|
||||
border: 2px solid black;
|
||||
line-height: 0;
|
||||
}
|
||||
svg {
|
||||
background: teal;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="checkLayout('svg')">
|
||||
No intrinsic attributes:
|
||||
<div class="block">
|
||||
<svg data-expected-client-width="300" data-expected-client-height="150"></svg>
|
||||
</div>
|
||||
|
||||
viewBox and height:
|
||||
<div class="block">
|
||||
<svg height="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="160" data-expected-client-height="40"></svg>
|
||||
</div>
|
||||
|
||||
viewBox and width:
|
||||
<div class="block">
|
||||
<svg width="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="40" data-expected-client-height="10"></svg>
|
||||
</div>
|
||||
|
||||
viewBox, width, height:
|
||||
<div class="block">
|
||||
<svg width="40" height="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="40" data-expected-client-height="40"></svg>
|
||||
</div>
|
||||
|
||||
Just viewBox:
|
||||
<div class="block">
|
||||
<svg viewBox="0 0 4 1"
|
||||
data-expected-client-width="600" data-expected-client-height="150"></svg>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1638937">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
.block {
|
||||
display: block;
|
||||
width: 600px;
|
||||
border: 2px solid black;
|
||||
line-height: 0;
|
||||
}
|
||||
svg {
|
||||
background: teal;
|
||||
width: max-content;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="checkLayout('svg')">
|
||||
No intrinsic attributes:
|
||||
<div class="block">
|
||||
<svg data-expected-client-width="300" data-expected-client-height="150"></svg>
|
||||
</div>
|
||||
|
||||
viewBox and height:
|
||||
<div class="block">
|
||||
<svg height="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="160" data-expected-client-height="40"></svg>
|
||||
</div>
|
||||
|
||||
viewBox and width:
|
||||
<div class="block">
|
||||
<svg width="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="40" data-expected-client-height="10"></svg>
|
||||
</div>
|
||||
|
||||
viewBox, width, height:
|
||||
<div class="block">
|
||||
<svg width="40" height="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="40" data-expected-client-height="40"></svg>
|
||||
</div>
|
||||
|
||||
Just viewBox:
|
||||
<div class="block">
|
||||
<svg viewBox="0 0 4 1"
|
||||
data-expected-client-width="600" data-expected-client-height="150"></svg>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1638937">
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<style>
|
||||
.block {
|
||||
display: block;
|
||||
width: max-content;
|
||||
border: 2px solid black;
|
||||
line-height: 0;
|
||||
}
|
||||
svg {
|
||||
background: teal;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body onload="checkLayout('svg')">
|
||||
No intrinsic attributes:
|
||||
<div class="block">
|
||||
<svg data-expected-client-width="300" data-expected-client-height="150"></svg>
|
||||
</div>
|
||||
|
||||
viewBox and height:
|
||||
<div class="block">
|
||||
<svg height="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="160" data-expected-client-height="40"></svg>
|
||||
</div>
|
||||
|
||||
viewBox and width:
|
||||
<div class="block">
|
||||
<svg width="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="40" data-expected-client-height="10"></svg>
|
||||
</div>
|
||||
|
||||
viewBox, width, height:
|
||||
<div class="block">
|
||||
<svg width="40" height="40" viewBox="0 0 4 1"
|
||||
data-expected-client-width="40" data-expected-client-height="40"></svg>
|
||||
</div>
|
||||
|
||||
Just viewBox:
|
||||
<div class="block">
|
||||
<!-- Google Chrome 107 and Safari 16.0 both render this SVG as size 0x0. -->
|
||||
<svg viewBox="0 0 4 1"
|
||||
data-expected-client-width="0" data-expected-client-height="0"></svg>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!doctype html>
|
||||
|
||||
<title>CSS Reference: CSS-specified vs. attribute-specified percentages in SVG intrinsic sizing</title>
|
||||
|
||||
<div style="width: max-content; height: 50px">
|
||||
<svg width="100%" height="100%" style="display: block">
|
||||
<rect width="200" height="200" fill="green"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>CSS Test: CSS-specified vs. attribute-specified percentages in SVG intrinsic sizing</title>
|
||||
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1790167">
|
||||
<link rel="match" href="svg-intrinsic-size-005-ref.html">
|
||||
|
||||
<div style="width: max-content; height: 50px">
|
||||
<svg style="width: 100%; height: 100%; display: block">
|
||||
<rect width="200" height="200" fill="green"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
||||
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1289408">
|
||||
<textarea style="padding:12345967890px;"></textarea>
|
||||
Loading…
Add table
Add a link
Reference in a new issue