зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1322780 - Part 5: Adjust reftests to be fitted into 600x600. r=dholbert
If the size is larger than 600x600, we cannot test all the rendering results, and it seems there is a bug related the inactive windows, https://github.com/web-platform-tests/wpt/issues/13563, which may causes that the scroll bar has different color. Differential Revision: https://phabricator.services.mozilla.com/D15055 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Boris Chiou
Родитель
12c3c11f23
Коммит
0605a25f5e
|
|
@ -6,6 +6,9 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/ahem.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
.container {
|
||||
width: max-content;
|
||||
height: 50px;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/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;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/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;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
<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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@
|
|||
<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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@
|
|||
<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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,11 +9,14 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/ahem.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 120px;
|
||||
height: 200px;
|
||||
border: 2px solid blue;
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -24,8 +27,8 @@
|
|||
display: inline-block;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
|
|
@ -33,11 +36,12 @@
|
|||
}
|
||||
|
||||
.too-big {
|
||||
height: 150px;
|
||||
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>
|
||||
|
|
@ -52,7 +56,9 @@
|
|||
<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>
|
||||
|
|
@ -67,5 +73,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -12,23 +12,25 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/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;
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
border: 2px solid lime;
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
|
|
@ -36,11 +38,12 @@
|
|||
}
|
||||
|
||||
.too-big {
|
||||
height: 150px;
|
||||
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>
|
||||
|
|
@ -63,7 +66,9 @@
|
|||
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>
|
||||
|
|
@ -86,5 +91,6 @@
|
|||
max-block: max-content<br>on this box.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,22 +9,23 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/ahem.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.outer * {
|
||||
border: 2px solid lime;
|
||||
padding: 5px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 160px;
|
||||
width: 80px;
|
||||
border-color: blue;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
|
|
@ -32,7 +33,7 @@
|
|||
}
|
||||
|
||||
.too-big {
|
||||
height: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -47,8 +48,8 @@
|
|||
<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 class="too-big">100px<br>container: min-content.</div>
|
||||
<div class="too-big">100px<br>container: min-content.</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
|
@ -60,8 +61,8 @@
|
|||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -81,12 +82,12 @@
|
|||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<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">150px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: max-content.</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -12,22 +12,23 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/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;
|
||||
padding: 5px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 160px;
|
||||
width: 80px;
|
||||
border-color: blue;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
|
|
@ -35,7 +36,7 @@
|
|||
}
|
||||
|
||||
.too-big {
|
||||
height: 150px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -50,8 +51,8 @@
|
|||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container height-min-content">
|
||||
<div class="too-big">150px<br>container: min-content.</div>
|
||||
<div class="too-big">150px<br>container: min-content.</div>
|
||||
<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">
|
||||
|
|
@ -63,8 +64,8 @@
|
|||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container height-max-content">
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -84,12 +85,12 @@
|
|||
</div>
|
||||
|
||||
<div class="container max-height-min-content">
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<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">150px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: max-content.</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -12,22 +12,23 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/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;
|
||||
padding: 5px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 160px;
|
||||
width: 80px;
|
||||
border-color: blue;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
|
|
@ -35,7 +36,7 @@
|
|||
}
|
||||
|
||||
.too-big {
|
||||
block-size: 150px;
|
||||
block-size: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -50,8 +51,8 @@
|
|||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container block-min-content">
|
||||
<div class="too-big">150px<br>container: min-content.</div>
|
||||
<div class="too-big">150px<br>container: min-content.</div>
|
||||
<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">
|
||||
|
|
@ -63,8 +64,8 @@
|
|||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container block-max-content">
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -84,12 +85,12 @@
|
|||
</div>
|
||||
|
||||
<div class="container max-block-min-content">
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<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">150px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: max-content.</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -9,23 +9,25 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/ahem.css">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
border-color: blue;
|
||||
border: 2px solid blue;
|
||||
padding: 5px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
border: 2px solid lime;
|
||||
padding: 5px;
|
||||
font-size: 15px;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
|
|
@ -33,11 +35,12 @@
|
|||
}
|
||||
|
||||
.too-big {
|
||||
width: 150px;
|
||||
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>
|
||||
|
|
@ -52,7 +55,9 @@
|
|||
<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>
|
||||
|
|
@ -67,5 +72,6 @@
|
|||
<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>
|
||||
|
|
|
|||
|
|
@ -12,22 +12,24 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/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;
|
||||
padding: 5px;
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
border: 2px solid lime;
|
||||
padding: 5px;
|
||||
font-size: 15px;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
font-size: 10px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
|
|
@ -35,11 +37,12 @@
|
|||
}
|
||||
|
||||
.too-big {
|
||||
width: 150px;
|
||||
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>
|
||||
|
|
@ -63,7 +66,9 @@
|
|||
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>
|
||||
|
|
@ -87,5 +92,6 @@
|
|||
max-block: max-content<br>on this box.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,26 +9,28 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/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;
|
||||
padding: 5px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 160px;
|
||||
height: 80px;
|
||||
border-color: blue;
|
||||
vertical-align: bottom;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
|
|
@ -36,7 +38,7 @@
|
|||
}
|
||||
|
||||
.too-big {
|
||||
width: 150px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -64,8 +66,8 @@
|
|||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -86,13 +88,13 @@
|
|||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<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">150px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: max-content.</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -12,26 +12,28 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/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;
|
||||
padding: 5px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 160px;
|
||||
height: 80px;
|
||||
border-color: blue;
|
||||
vertical-align: bottom;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
|
|
@ -39,7 +41,7 @@
|
|||
}
|
||||
|
||||
.too-big {
|
||||
width: 150px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -54,8 +56,8 @@
|
|||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container width-min-content">
|
||||
<div class="too-big">150px<br>container: min-content.</div>
|
||||
<div class="too-big">150px<br>container: min-content.</div>
|
||||
<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">
|
||||
|
|
@ -67,8 +69,8 @@
|
|||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container width-max-content">
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -89,13 +91,13 @@
|
|||
</div>
|
||||
|
||||
<div class="container max-width-min-content">
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<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">150px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: max-content.</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -12,26 +12,28 @@
|
|||
<link rel="stylesheet" type="text/css" href="support/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;
|
||||
padding: 5px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 160px;
|
||||
height: 80px;
|
||||
border-color: blue;
|
||||
vertical-align: bottom;
|
||||
|
||||
font-family: Ahem;
|
||||
font-size: 15px;
|
||||
line-height: 21px;
|
||||
font-size: 8px;
|
||||
line-height: 13px;
|
||||
}
|
||||
|
||||
.too-small {
|
||||
|
|
@ -39,7 +41,7 @@
|
|||
}
|
||||
|
||||
.too-big {
|
||||
block-size: 150px;
|
||||
block-size: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -54,8 +56,8 @@
|
|||
<div class="too-small">10px<br>container: min-content.</div>
|
||||
</div>
|
||||
<div class="container block-min-content">
|
||||
<div class="too-big">150px<br>container: min-content.</div>
|
||||
<div class="too-big">150px<br>container: min-content.</div>
|
||||
<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">
|
||||
|
|
@ -67,8 +69,8 @@
|
|||
<div class="too-small">10px<br>container: max-content.</div>
|
||||
</div>
|
||||
<div class="container block-max-content">
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">150px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
<div class="too-big">100px<br>container: max-content.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -89,13 +91,13 @@
|
|||
</div>
|
||||
|
||||
<div class="container max-block-min-content">
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: min-content.</div>
|
||||
<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">150px<br>container max-size: max-content.</div>
|
||||
<div class="too-big">150px<br>container max-size: max-content.</div>
|
||||
<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>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче