mirror of
https://github.com/servo/servo.git
synced 2025-08-08 06:55:31 +01:00
Update web-platform-tests to revision b'7af9d6ec48ab04043a2bea85a3599904a1a19efa'
This commit is contained in:
WPT Sync Bot
Josh Matthews
parent
8050c95e31
commit
87be1008de
2742 changed files with 142451 additions and 40667 deletions
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: grid track inline size should respect aspect-ratio and box-sizing</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-grid/#algo-track-sizing">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<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: grid; grid-template-columns: auto; width: max-content; background: green;">
|
||||
<div style="height: 100px; aspect-ratio: 1/1; padding-top: 50px; box-sizing: border-box;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: grid track size should respect aspect-ratio when using
|
||||
intrinsic size keywords in grid items</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-grid/#algo-track-sizing">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<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: grid; grid-template-columns: auto; width: min-content; background: green;">
|
||||
<div style="height: 50px; width: min-content; aspect-ratio: 2/1;"></div>
|
||||
<div style="height: 50px; width: 1%; min-width: min-content; aspect-ratio: 2/1;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: grid track size should respect aspect-ratio when using
|
||||
intrinsic size keywords in grid items with orthogonal writing mode</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-grid/#algo-track-sizing">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
<style>
|
||||
#reference-overlapped-red {
|
||||
position: absolute;
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: -1;
|
||||
}
|
||||
.item {
|
||||
aspect-ratio: 2/1;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
</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: grid; grid-template-columns: auto; width: min-content; background: green;">
|
||||
<div class="item" style="width: 100px; height: min-content;"></div>
|
||||
<div class="item" style="width: 100px; height: 1%; min-height: min-content;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: min-content size contribution with 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="../../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="width: min-content; height: 25px; background: green;">
|
||||
<div style="height: 25px; aspect-ratio: 4/1; box-sizing: border-box; padding-top: 15px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="width: min-content; height: 25px; background: green;">
|
||||
<div style="height: 10px; aspect-ratio: 4/1; min-height: 25px; box-sizing: border-box; padding-top: 15px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="width: min-content; height: 25px; background: green;">
|
||||
<div style="height: 100px; aspect-ratio: 4/1; max-height: 25px; box-sizing: border-box; padding-top: 15px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="width: min-content; height: 25px; background: green;">
|
||||
<div style="height: 40px; aspect-ratio: auto 4/1; box-sizing: border-box; padding-top: 15px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: max-content size contribution with 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="../../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="width: max-content; height: 25px; background: green;">
|
||||
<div style="height: 25px; aspect-ratio: 4/1; box-sizing: border-box; padding-top: 25px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="width: max-content; height: 25px; background: green;">
|
||||
<div style="height: 10px; aspect-ratio: 4/1; min-height: 25px; box-sizing: border-box; padding-top: 15px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="width: max-content; height: 25px; background: green;">
|
||||
<div style="height: 100px; aspect-ratio: 4/1; max-height: 25px; box-sizing: border-box; padding-top: 15px;"></div>
|
||||
</div>
|
||||
|
||||
<div style="width: max-content; height: 25px; background: green;">
|
||||
<div style="height: 40px; aspect-ratio: auto 4/1; box-sizing: border-box; padding-top: 15px;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: min-content size keyword together with min-content size contribution</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://github.com/w3c/csswg-drafts/issues/5032">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="width: min-content; background: green;">
|
||||
<div style="width: min-content; height: 100px; aspect-ratio: 1/1;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: max-content size keyword together with min-content size contribution</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://github.com/w3c/csswg-drafts/issues/5032">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div style="width: max-content; background: green;">
|
||||
<div style="width: min-content; height: 100px; aspect-ratio: 1/1;"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: min-size:auto and non auto/min-content/max-content width</title>
|
||||
<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>
|
||||
.target {
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<!-- `min-width:auto` does not take the content size into account if the
|
||||
aspect-ratio is not used for sizing. -->
|
||||
<div class="target" style="width: 100px; height: 100px; aspect-ratio: 1/1;">
|
||||
<div style="width: 200px;"></div>
|
||||
</div>
|
||||
|
|
@ -16,4 +16,7 @@ test_invalid_value("aspect-ratio", "16 / -9");
|
|||
test_invalid_value("aspect-ratio", "1 invalid");
|
||||
test_invalid_value("aspect-ratio", "invalid 1.5");
|
||||
test_invalid_value("aspect-ratio", "auto 1 / 1 auto");
|
||||
test_invalid_value("aspect-ratio", "16 /");
|
||||
test_invalid_value("aspect-ratio", "auto 16 /");
|
||||
test_invalid_value("aspect-ratio", "16 / auto");
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS aspect-ratio: img block size with box-sizing (vertical writing mode)</title>
|
||||
<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>
|
||||
img {
|
||||
writing-mode: vertical-rl;
|
||||
border-top: 40px solid green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<!--
|
||||
1st: A green rect 60x100.
|
||||
border-top is 60x40 and the content box is 60x60.
|
||||
We use 'aspect-ratio: auto && <ratio>', so the aspect-ratio works with
|
||||
content-box dimensions always. The inline size of the content box is
|
||||
(100px - 40px) = 60px, so the block size is 60px * 1/1 = 60px.
|
||||
|
||||
2nd: A green rect 20x100.
|
||||
border-top is 20x40 and the content box is 20x60.
|
||||
|
||||
3rd: A green rect 20x100.
|
||||
border-top is 20x40 and the content box is 20x60 because we compute
|
||||
the block size by aspect-ratio which works with border-box and so the
|
||||
block size is 100px / 5 = 20px.
|
||||
-->
|
||||
<img src="support/1x1-green.png" style="height: 100px; aspect-ratio: auto 1/10; box-sizing: border-box;"
|
||||
><img src="support/1x1-green.png" style="height: 60px; aspect-ratio: 1/3; box-sizing: content-box;"
|
||||
><img src="support/1x1-green.png" style="height: 100px; aspect-ratio: 1/5; box-sizing: border-box;">
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>CSS Reference Case: Basic cases with max-content and min-content</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
width: max-content;
|
||||
height: 50px;
|
||||
border: 1px solid black;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
.container > * {
|
||||
display: inline-block;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
.container-vertical {
|
||||
width: 50px;
|
||||
border: 1px solid black;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
.container-vertical > * {
|
||||
writing-mode: vertical-lr;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div>min<br>in the box</div>
|
||||
<div>max<br>in the box</div>
|
||||
</div>
|
||||
|
||||
<div class="container-vertical">
|
||||
<div>min<br>in the box</div>
|
||||
<div>max<br>in the box</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Basic cases of width/height on block axis with max-content and min-content</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
|
||||
<link rel="match" href="block-size-with-min-or-max-content-1-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
width: max-content;
|
||||
height: 50px;
|
||||
border: 1px solid black;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
.container > * {
|
||||
display: inline-block;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
.container-vertical {
|
||||
width: 50px;
|
||||
border: 1px solid black;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
.container-vertical > * {
|
||||
writing-mode: vertical-lr;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="height-min-content">min<br>in the box</div>
|
||||
<div class="height-max-content">max<br>in the box</div>
|
||||
</div>
|
||||
|
||||
<div class="container-vertical">
|
||||
<div class="width-min-content">min<br>in the box</div>
|
||||
<div class="width-max-content">max<br>in the box</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Basic cases of block-size with max-content and min-content</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
|
||||
<link rel="match" href="block-size-with-min-or-max-content-1-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
inline-size: max-content;
|
||||
height: 50px;
|
||||
border: 1px solid black;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
.container > * {
|
||||
display: inline-block;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
.container-vertical {
|
||||
width: 50px;
|
||||
border: 1px solid black;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
}
|
||||
.container-vertical > * {
|
||||
writing-mode: vertical-lr;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="block-min-content">min<br>in the box</div>
|
||||
<div class="block-max-content">max<br>in the box</div>
|
||||
</div>
|
||||
|
||||
<div class="container-vertical">
|
||||
<div class="block-min-content">min<br>in the box</div>
|
||||
<div class="block-max-content">max<br>in the box</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reference Case: Block size with max-content and min-content in a table</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
table {
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 2px solid lime;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.small { block-size: 1px; }
|
||||
.big { block-size: 150px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<table class="big"><td><div class="item"></div></td></table>
|
||||
<table class="big"><td><div class="item"></div></td></table>
|
||||
|
||||
<table><td class="small"><div class="item"></div></td></table>
|
||||
<table><td class="small"><div class="item"></div></td></table>
|
||||
</div>
|
||||
|
||||
<table class="big"><td><div class="item"></div></td></table>
|
||||
<table class="big"><td><div class="item"></div></td></table>
|
||||
|
||||
<table><td class="small"><div class="item"></div></td></table>
|
||||
<table><td class="small"><div class="item"></div></td></table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Basic cases of width/height (block axis) with max-content and min-content in a table</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
|
||||
<link rel="match" href="block-size-with-min-or-max-content-table-1-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 2px solid lime;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.small-h { height: 1px; }
|
||||
.big-h { height: 150px; }
|
||||
.small-w { width: 1px; }
|
||||
.big-w { width: 150px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<table class="big-w max-width-min-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
<table class="big-w max-width-max-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
|
||||
<table class="small-w min-width-min-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
<table class="small-w min-width-max-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<table class="big-h max-height-min-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
<table class="big-h max-height-max-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
|
||||
<table class="small-h min-height-min-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
<table class="small-h min-height-max-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Basic cases of block-size with max-content and min-content in a table</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
|
||||
<link rel="match" href="block-size-with-min-or-max-content-table-1-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 2px solid lime;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
.container {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.small { block-size: 1px; }
|
||||
.big { block-size: 150px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<table class="big max-block-min-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
<table class="big max-block-max-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
|
||||
<table class="small min-block-min-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
<table class="small min-block-max-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<table class="big max-block-min-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
<table class="big max-block-max-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
|
||||
<table class="small min-block-min-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
<table class="small min-block-max-content">
|
||||
<td><div class="item"></div></td>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Referece Case: Different values of block sizing properties in horizontal wm
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 120px;
|
||||
height: 200px;
|
||||
border: 2px solid blue;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
border: 2px solid lime;
|
||||
padding: inherit;
|
||||
display: inline-block;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.too-big {
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div>height: min-content<br>on this box.</div>
|
||||
<div>height: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-small">min-height: min-content<br>on this box.</div>
|
||||
<div class="too-small">min-height: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big">max-height: min-content<br>on this box.</div>
|
||||
<div class="too-big">max-height: max-content<br>on this box.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="container">
|
||||
<div>block: min-content<br>on this box.</div>
|
||||
<div>block: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-small">min-block: min-content<br>on this box.</div>
|
||||
<div class="too-small">min-block: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big">max-block: min-content<br>on this box.</div>
|
||||
<div class="too-big">max-block: max-content<br>on this box.</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: Different values of block sizing properties with max-content and min-content in horizontal wm
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
|
||||
<link rel="match" href="hori-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 120px;
|
||||
height: 200px;
|
||||
border: 2px solid blue;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
border: 2px solid lime;
|
||||
display: inline-block;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.too-big {
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="height-min-content">height: min-content<br>on this box.</div>
|
||||
<div class="height-max-content">height: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-small min-height-min-content">
|
||||
min-height: min-content<br>on this box.
|
||||
</div>
|
||||
<div class="too-small min-height-max-content">
|
||||
min-height: max-content<br>on this box.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big max-height-min-content">
|
||||
max-height: min-content<br>on this box.
|
||||
</div>
|
||||
<div class="too-big max-height-max-content">
|
||||
max-height: max-content<br>on this box.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="block-min-content">block: min-content<br>on this box.</div>
|
||||
<div class="block-max-content">block: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-small min-block-min-content">
|
||||
min-block: min-content<br>on this box.
|
||||
</div>
|
||||
<div class="too-small min-block-max-content">
|
||||
min-block: max-content<br>on this box.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big max-block-min-content">
|
||||
max-block: min-content<br>on this box.
|
||||
</div>
|
||||
<div class="too-big max-block-max-content">
|
||||
max-block: max-content<br>on this box.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Reference Case: Different values of height:auto container in horizontal wm
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.outer * {
|
||||
border: 2px solid lime;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 80px;
|
||||
border-color: blue;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.too-big {
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="container">
|
||||
<div>auto<br>container: min-content.</div>
|
||||
<div>auto<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-big">100px<br>container: min-content.</div>
|
||||
<div class="too-big">100px<br>container: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>auto<br>container: max-content.</div>
|
||||
<div>auto<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<div class="container">
|
||||
<div>auto<br>container: auto.</div>
|
||||
<div>auto<br>container: auto.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: min-content and max-content for 'height' on a container, with various heights on children
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
|
||||
<link rel="match" href="hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.outer * {
|
||||
border: 2px solid lime;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 80px;
|
||||
border-color: blue;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.too-big {
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="container height-min-content">
|
||||
<div>auto<br>container: min-content.</div>
|
||||
<div>auto<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container height-min-content">
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container height-min-content">
|
||||
<div class="too-big">100px<br>container: min-content.</div>
|
||||
<div class="too-big">100px<br>container: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container height-max-content">
|
||||
<div>auto<br>container: max-content.</div>
|
||||
<div>auto<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container height-max-content">
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container height-max-content">
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<div class="container">
|
||||
<div>auto<br>container: auto.</div>
|
||||
<div>auto<br>container: auto.</div>
|
||||
</div>
|
||||
|
||||
<div class="container min-height-min-content">
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
</div>
|
||||
<div class="container min-height-max-content">
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container max-height-min-content">
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
</div>
|
||||
<div class="container max-height-max-content">
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: min-content and max-content for 'block-size' on a container, with various block-sizes on children
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
|
||||
<link rel="match" href="hori-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.outer * {
|
||||
border: 2px solid lime;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 80px;
|
||||
border-color: blue;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
block-size: 10px;
|
||||
}
|
||||
|
||||
.too-big {
|
||||
block-size: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="container block-min-content">
|
||||
<div>auto<br>container: min-content.</div>
|
||||
<div>auto<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container block-min-content">
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container block-min-content">
|
||||
<div class="too-big">100px<br>container: min-content.</div>
|
||||
<div class="too-big">100px<br>container: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container block-max-content">
|
||||
<div>auto<br>container: max-content.</div>
|
||||
<div>auto<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container block-max-content">
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container block-max-content">
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<div class="container">
|
||||
<div>auto<br>container: auto.</div>
|
||||
<div>auto<br>container: auto.</div>
|
||||
</div>
|
||||
|
||||
<div class="container min-block-min-content">
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
</div>
|
||||
<div class="container min-block-max-content">
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container max-block-min-content">
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
</div>
|
||||
<div class="container max-block-max-content">
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
/*
|
||||
* All classes here intentionally declare height/width/block-size
|
||||
* twice. Just reveals if keyword is supported.
|
||||
*
|
||||
* According to the spec, for the sizing properties,
|
||||
* height/min-height/max-height, and width/min-width/max-width,
|
||||
* if specified for the inline axis, use the min-content/max-content inline
|
||||
* size; otherwise behaves as the property’s initial value.
|
||||
*
|
||||
* The 'block-size' property (and its max-/min- properties) is just an alias
|
||||
* for height (or width) and accepts the same values. Since it's not
|
||||
* inline-axis, by definition, it always treats the 'min-content' and
|
||||
* 'max-content' values as the initial value.
|
||||
*
|
||||
* https://drafts.csswg.org/css-sizing/#sizing-values
|
||||
*
|
||||
*/
|
||||
|
||||
.height-min-content {
|
||||
height: 0px;
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
.height-max-content {
|
||||
height: 0px;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.min-height-min-content {
|
||||
min-height: 600px;
|
||||
min-height: min-content;
|
||||
}
|
||||
|
||||
.min-height-max-content {
|
||||
min-height: 600px;
|
||||
min-height: max-content;
|
||||
}
|
||||
|
||||
.max-height-min-content {
|
||||
max-height: 0px;
|
||||
max-height: min-content;
|
||||
}
|
||||
|
||||
.max-height-max-content {
|
||||
max-height: 0px;
|
||||
max-height: max-content;
|
||||
}
|
||||
|
||||
.width-min-content {
|
||||
width: 0px;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
.width-max-content {
|
||||
width: 0px;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.min-width-min-content {
|
||||
min-width: 600px;
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
.min-width-max-content {
|
||||
min-width: 600px;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
.max-width-min-content {
|
||||
max-width: 0px;
|
||||
max-width: min-content;
|
||||
}
|
||||
|
||||
.max-width-max-content {
|
||||
max-width: 0px;
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
.block-min-content {
|
||||
block-size: 0px;
|
||||
block-size: min-content;
|
||||
}
|
||||
|
||||
.block-max-content {
|
||||
block-size: 0px;
|
||||
block-size: max-content;
|
||||
}
|
||||
|
||||
.min-block-min-content {
|
||||
min-block-size: 600px;
|
||||
min-block-size: min-content;
|
||||
}
|
||||
|
||||
.min-block-max-content {
|
||||
min-block-size: 600px;
|
||||
min-block-size: max-content;
|
||||
}
|
||||
|
||||
.max-block-min-content {
|
||||
max-block-size: 0px;
|
||||
max-block-size: min-content;
|
||||
}
|
||||
|
||||
.max-block-max-content {
|
||||
max-block-size: 0px;
|
||||
max-block-size: max-content;
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Reference Case: Different values of block sizing properties in vertical wm
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
border-color: blue;
|
||||
border: 2px solid blue;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
border: 2px solid lime;
|
||||
font-size: 15px;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.too-big {
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: inline-block;">
|
||||
<div class="container">
|
||||
<div>width: min-content<br>on this box.</div>
|
||||
<div>width: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-small">min-width: min-content<br>on this box.</div>
|
||||
<div class="too-small">min-width: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big">max-width: min-content<br>on this box.</div>
|
||||
<div class="too-big">max-width: max-content<br>on this box.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: inline-block;">
|
||||
<div class="container">
|
||||
<div>block: min-content<br>on this box.</div>
|
||||
<div>block: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-small">min-block: min-content<br>on this box.</div>
|
||||
<div class="too-small">min-block: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big">max-block: min-content<br>on this box.</div>
|
||||
<div class="too-big">max-block: max-content<br>on this box.</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: Different values of block sizing properties with max-content and min-content in vertical wm
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
|
||||
<link rel="match" href="vert-block-size-small-or-larger-than-container-with-min-or-max-content-1-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
border: 2px solid blue;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
border: 2px solid lime;
|
||||
font-size: 15px;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.too-big {
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: inline-block;">
|
||||
<div class="container">
|
||||
<div class="width-min-content">width: min-content<br>on this box.</div>
|
||||
<div class="width-max-content">width: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-small min-width-min-content">
|
||||
min-width: min-content<br>on this box.
|
||||
</div>
|
||||
<div class="too-small min-width-max-content">
|
||||
min-width: max-content<br>on this box.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big max-width-min-content">
|
||||
max-width: min-content<br>on this box.
|
||||
</div>
|
||||
|
||||
<div class="too-big max-width-max-content">
|
||||
max-width: max-content<br>on this box.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: inline-block;">
|
||||
<div class="container">
|
||||
<div class="block-min-content">block: min-content<br>on this box.</div>
|
||||
<div class="block-max-content">block: max-content<br>on this box.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-small min-block-min-content">
|
||||
min-block: min-content<br>on this box.
|
||||
</div>
|
||||
<div class="too-small min-block-max-content">
|
||||
min-block: max-content<br>on this box.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big max-block-min-content">
|
||||
max-block: min-content<br>on this box.
|
||||
</div>
|
||||
|
||||
<div class="too-big max-block-max-content">
|
||||
max-block: max-content<br>on this box.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Reference Case: Different values of width:auto container in vertical wm
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.outer {
|
||||
writing-mode: vertical-lr;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.outer * {
|
||||
border: 2px solid lime;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 80px;
|
||||
border-color: blue;
|
||||
vertical-align: bottom;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.too-big {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="container">
|
||||
<div>auto<br>container: min-content.</div>
|
||||
<div>auto<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-big">150px<br>container: min-content.</div>
|
||||
<div class="too-big">150px<br>container: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>auto<br>container: max-content.</div>
|
||||
<div>auto<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<div class="container">
|
||||
<div>auto<br>container: auto.</div>
|
||||
<div>auto<br>container: auto.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: min-content and max-content for 'width' on a container, with various widths on children
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
|
||||
<link rel="match" href="vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.outer {
|
||||
writing-mode: vertical-lr;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.outer * {
|
||||
border: 2px solid lime;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 80px;
|
||||
border-color: blue;
|
||||
vertical-align: bottom;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.too-big {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="container width-min-content">
|
||||
<div>auto<br>container: min-content.</div>
|
||||
<div>auto<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container width-min-content">
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container width-min-content">
|
||||
<div class="too-big">100px<br>container: min-content.</div>
|
||||
<div class="too-big">100px<br>container: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container width-max-content">
|
||||
<div>auto<br>container: max-content.</div>
|
||||
<div>auto<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container width-max-content">
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container width-max-content">
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<div class="container">
|
||||
<div>auto<br>container: auto.</div>
|
||||
<div>auto<br>container: auto.</div>
|
||||
</div>
|
||||
|
||||
<div class="container min-width-min-content">
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container min-width-max-content">
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container max-width-min-content">
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container max-width-max-content">
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: min-content and max-content for 'block-size' on a container, with various block-sizes on children
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values">
|
||||
<link rel="match" href="vert-block-size-small-or-larger-than-container-with-min-or-max-content-2-ref.html">
|
||||
<meta name="flags" content="ahem">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<link rel="stylesheet" type="text/css" href="support/min-content-max-content.css">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.outer {
|
||||
writing-mode: vertical-lr;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.outer * {
|
||||
border: 2px solid lime;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 80px;
|
||||
border-color: blue;
|
||||
vertical-align: bottom;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
block-size: 10px;
|
||||
}
|
||||
|
||||
.too-big {
|
||||
block-size: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="container block-min-content">
|
||||
<div>auto<br>container: min-content.</div>
|
||||
<div>auto<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container block-min-content">
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container block-min-content">
|
||||
<div class="too-big">100px<br>container: min-content.</div>
|
||||
<div class="too-big">100px<br>container: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container block-max-content">
|
||||
<div>auto<br>container: max-content.</div>
|
||||
<div>auto<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container block-max-content">
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container block-max-content">
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="outer">
|
||||
<div class="container">
|
||||
<div>auto<br>container: auto.</div>
|
||||
<div>auto<br>container: auto.</div>
|
||||
</div>
|
||||
|
||||
<div class="container min-block-min-content">
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container min-block-max-content">
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
<div class="too-small">10px<br>container min-size: max-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container max-block-min-content">
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container max-block-max-content">
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">100px<br>container max-size: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue