mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
layout: Ignore indefinite stretch on min and max sizing properties (#35630)
We were always treating an indefinite `stretch` as the automatic size. This instead treats it as `0px` on min sizing properties, and as `none` on max sizing properties, aligning with Blink and this recent CSSWG resolution: https://github.com/w3c/csswg-drafts/issues/11006 Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau
GitHub
parent
e74bb8de15
commit
41c2422a66
15 changed files with 266 additions and 145 deletions
10
tests/wpt/meta/MANIFEST.json
vendored
10
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -592760,35 +592760,35 @@
|
|||
]
|
||||
],
|
||||
"keyword-sizes-on-flex-item-001.html": [
|
||||
"5989de812e6a17bb4fa2f9ea5df634a3bfbaaccc",
|
||||
"04c4bddbbd19c3a2942e56d54dba9a3f4a3dd44e",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"keyword-sizes-on-flex-item-002.html": [
|
||||
"4a8cf76b253d2302da59c4020d370f870fa4a0c7",
|
||||
"73c6cb0c3d50b37488ed1d2a4cdaa8e434b0093d",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"keyword-sizes-on-floated-element.html": [
|
||||
"e3da8bee7eb7b613e457d00eb88a677c35698d08",
|
||||
"44f75194794f0495febeecf02418fa5d023db35e",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"keyword-sizes-on-inline-block.html": [
|
||||
"519081349c61e63da5f0a261da74dc985afb7c49",
|
||||
"e80df2343843220c97d6c760fcf595a7e9c4936a",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"keyword-sizes-on-replaced-element.html": [
|
||||
"8863ef491570c4d194bbb4b1d03a6e12367d4ff3",
|
||||
"497f87ca5fca68e6423c6aba94a34d3de938c1b1",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
|
|
|
|||
|
|
@ -125,20 +125,29 @@
|
|||
[.test 59]
|
||||
expected: FAIL
|
||||
|
||||
[.test 60]
|
||||
[.test 66]
|
||||
expected: FAIL
|
||||
|
||||
[.test 61]
|
||||
[.test 67]
|
||||
expected: FAIL
|
||||
|
||||
[.test 62]
|
||||
[.test 68]
|
||||
expected: FAIL
|
||||
|
||||
[.test 63]
|
||||
[.test 69]
|
||||
expected: FAIL
|
||||
|
||||
[.test 64]
|
||||
[.test 70]
|
||||
expected: FAIL
|
||||
|
||||
[.test 65]
|
||||
[.test 71]
|
||||
expected: FAIL
|
||||
|
||||
[.test 72]
|
||||
expected: FAIL
|
||||
|
||||
[.test 73]
|
||||
expected: FAIL
|
||||
|
||||
[.test 74]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -131,20 +131,20 @@
|
|||
[.test 54]
|
||||
expected: FAIL
|
||||
|
||||
[.test 60]
|
||||
[.test 69]
|
||||
expected: FAIL
|
||||
|
||||
[.test 61]
|
||||
[.test 70]
|
||||
expected: FAIL
|
||||
|
||||
[.test 62]
|
||||
[.test 71]
|
||||
expected: FAIL
|
||||
|
||||
[.test 63]
|
||||
[.test 72]
|
||||
expected: FAIL
|
||||
|
||||
[.test 64]
|
||||
[.test 73]
|
||||
expected: FAIL
|
||||
|
||||
[.test 65]
|
||||
[.test 74]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
[indefinite-2.html]
|
||||
[[data-expected-client-height\] 1]
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[indefinite-3.html]
|
||||
[[data-expected-client-height\] 1]
|
||||
expected: FAIL
|
||||
|
|
@ -129,20 +129,34 @@
|
|||
<div class="test height min-height max-height stretch" data-expected-height="10"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Indefinite stretch -->
|
||||
<div class="wrapper" style="width: 100px; max-height: 100px">
|
||||
<div class="test height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test height stretch indefinite" data-expected-height="30">XXX XXX</div>
|
||||
<div class="test height stretch indefinite" data-expected-height="30">XXXXX XXXXX</div>
|
||||
<div class="test height stretch" data-expected-height="30">X X</div>
|
||||
<div class="test height stretch" data-expected-height="30">XXX XXX</div>
|
||||
<div class="test height stretch" data-expected-height="30">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test min-height stretch indefinite" data-expected-height="30">XXX XXX</div>
|
||||
<div class="test min-height stretch indefinite" data-expected-height="30">XXXXX XXXXX</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">X X</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test max-height stretch indefinite" data-expected-height="30">XXX XXX</div>
|
||||
<div class="test max-height stretch indefinite" data-expected-height="30">XXXXX XXXXX</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">X X</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
|
||||
</div>
|
||||
|
||||
<!-- Fit-content with indefinite stretch -->
|
||||
<div class="wrapper" style="width: 100px; max-height: 100px">
|
||||
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test height" style="height: fit-content" data-expected-height="30">XXX XXX</div>
|
||||
<div class="test height" style="height: fit-content" data-expected-height="30">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">XXX XXX</div>
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">XXX XXX</div>
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">XXXXX XXXXX</div>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,10 @@
|
|||
|
||||
<style>
|
||||
.wrapper {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
vertical-align: top;
|
||||
margin-right: 150px;
|
||||
}
|
||||
.test {
|
||||
flex: none;
|
||||
|
|
@ -129,20 +131,34 @@
|
|||
<div class="test height min-height max-height stretch" data-expected-height="10"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Indefinite stretch -->
|
||||
<div class="wrapper" style="width: 100px; max-height: 100px">
|
||||
<div class="test height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test height stretch indefinite" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
|
||||
<div class="test height stretch" data-expected-height="30">X X</div>
|
||||
<div class="test height stretch" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test height stretch" data-expected-height="50">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test min-height stretch indefinite" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test min-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">X X</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test max-height stretch indefinite" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test max-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">X X</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
|
||||
</div>
|
||||
|
||||
<!-- Fit-content with indefinite stretch -->
|
||||
<div class="wrapper" style="width: 100px; max-height: 100px">
|
||||
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test height" style="height: fit-content" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test height" style="height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,12 @@
|
|||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: 150px;
|
||||
}
|
||||
|
||||
.test {
|
||||
float: left;
|
||||
margin: 5px;
|
||||
|
|
@ -36,7 +42,7 @@
|
|||
<div id="log"></div>
|
||||
|
||||
<!-- Intrinsic keywords -->
|
||||
<div style="width: 100px; height: 100px">
|
||||
<div class="wrapper" style="width: 100px; height: 100px">
|
||||
<div class="test width" style="width: min-content" data-expected-width="30">X X</div>
|
||||
<div class="test width" style="width: fit-content" data-expected-width="70">X X</div>
|
||||
<div class="test width" style="width: max-content" data-expected-width="70">X X</div>
|
||||
|
|
@ -93,7 +99,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Definite stretch -->
|
||||
<div style="width: 100px; height: 100px">
|
||||
<div class="wrapper" style="width: 100px; height: 100px">
|
||||
<div class="test width stretch" data-expected-width="90">X X</div>
|
||||
<div class="test width stretch" data-expected-width="90">XXX XXX</div>
|
||||
<div class="test width stretch" data-expected-width="90">XXXXX XXXXX</div>
|
||||
|
|
@ -126,18 +132,33 @@
|
|||
</div>
|
||||
|
||||
<!-- Indefinite stretch -->
|
||||
<div style="width: 100px; max-height: 100px">
|
||||
<div class="test height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test height stretch indefinite" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
|
||||
<div class="wrapper" style="width: 100px; max-height: 100px">
|
||||
<div class="test height stretch" data-expected-height="30">X X</div>
|
||||
<div class="test height stretch" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test height stretch" data-expected-height="50">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test min-height stretch indefinite" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test min-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">X X</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test max-height stretch indefinite" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test max-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">X X</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
|
||||
</div>
|
||||
|
||||
<!-- Fit-content with indefinite stretch -->
|
||||
<div class="wrapper" style="width: 100px; max-height: 100px">
|
||||
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test height" style="height: fit-content" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test height" style="height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
|
|||
|
|
@ -133,17 +133,32 @@
|
|||
|
||||
<!-- Indefinite stretch -->
|
||||
<div class="wrapper" style="width: 100px; max-height: 100px">
|
||||
<div class="test height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test height stretch indefinite" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
|
||||
<div class="test height stretch" data-expected-height="30">X X</div>
|
||||
<div class="test height stretch" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test height stretch" data-expected-height="50">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test min-height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test min-height stretch indefinite" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test min-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">X X</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">XXX XXX</div>
|
||||
<div class="test min-height stretch" data-expected-height="10">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test max-height stretch indefinite" data-expected-height="30">X X</div>
|
||||
<div class="test max-height stretch indefinite" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test max-height stretch indefinite" data-expected-height="50">XXXXX XXXXX</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">X X</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">XXX XXX</div>
|
||||
<div class="test max-height stretch" data-expected-height="510">XXXXX XXXXX</div>
|
||||
</div>
|
||||
|
||||
<!-- Fit-content with indefinite stretch -->
|
||||
<div class="wrapper" style="width: 100px; max-height: 100px">
|
||||
<div class="test height" style="height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test height" style="height: fit-content" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test height" style="height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test min-height" style="min-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
|
||||
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="30">X X</div>
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXX XXX</div>
|
||||
<div class="test max-height" style="max-height: fit-content" data-expected-height="50">XXXXX XXXXX</div>
|
||||
</div>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@
|
|||
<meta assert="The various keyword sizes work as expected on replaced elements.">
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-right: 150px;
|
||||
}
|
||||
|
||||
.test {
|
||||
margin: 5px;
|
||||
border: 3px solid;
|
||||
|
|
@ -35,7 +41,7 @@
|
|||
<div id="log"></div>
|
||||
|
||||
<!-- Intrinsic keywords -->
|
||||
<div style="width: 200px; height: 100px">
|
||||
<div class="wrapper" style="width: 200px; height: 100px">
|
||||
<canvas width="100" height="100" class="test width height" style="width: 50px; height: 50px"
|
||||
data-expected-width="60" data-expected-height="60"></canvas>
|
||||
<canvas width="100" height="100" class="test width height" style="width: 50px; height: min-content"
|
||||
|
|
@ -141,7 +147,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Definite stretch -->
|
||||
<div style="width: 200px; height: 100px">
|
||||
<div class="wrapper" style="width: 200px; height: 100px">
|
||||
<canvas width="100" height="100" class="test width stretch"
|
||||
data-expected-width="190" data-expected-height="190"></canvas>
|
||||
<canvas width="100" height="100" class="test min-width stretch"
|
||||
|
|
@ -167,26 +173,50 @@
|
|||
</div>
|
||||
|
||||
<!-- Indefinite stretch -->
|
||||
<div style="width: 200px; max-height: 100px">
|
||||
<canvas width="100" height="100" class="test height stretch indefinite"
|
||||
<div class="wrapper" style="width: 200px; max-height: 100px">
|
||||
<canvas width="100" height="100" class="test height stretch"
|
||||
data-expected-width="110" data-expected-height="110"></canvas>
|
||||
<canvas width="100" height="100" class="test min-height stretch indefinite"
|
||||
<canvas width="100" height="100" class="test min-height stretch"
|
||||
data-expected-width="10" data-expected-height="10"></canvas>
|
||||
<canvas width="100" height="100" class="test max-height stretch"
|
||||
data-expected-width="510" data-expected-height="510"></canvas>
|
||||
|
||||
<canvas width="100" height="100" class="test height stretch" style="max-width: 50px"
|
||||
data-expected-width="60" data-expected-height="60"></canvas>
|
||||
<canvas width="100" height="100" class="test min-height stretch" style="min-width: 50px"
|
||||
data-expected-width="60" data-expected-height="10"></canvas>
|
||||
<canvas width="100" height="100" class="test max-height stretch" style="max-width: 50px"
|
||||
data-expected-width="60" data-expected-height="510"></canvas>
|
||||
|
||||
<canvas width="100" height="100" class="test height stretch" style="min-width: 150px"
|
||||
data-expected-width="160" data-expected-height="160"></canvas>
|
||||
<canvas width="100" height="100" class="test min-height stretch" style="min-width: 150px"
|
||||
data-expected-width="160" data-expected-height="10"></canvas>
|
||||
<canvas width="100" height="100" class="test max-height stretch" style="max-width: 150px"
|
||||
data-expected-width="160" data-expected-height="510"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- Fit-content with indefinite stretch -->
|
||||
<div class="wrapper" style="width: 200px; max-height: 100px">
|
||||
<canvas width="100" height="100" class="test height" style="height: fit-content"
|
||||
data-expected-width="110" data-expected-height="110"></canvas>
|
||||
<canvas width="100" height="100" class="test min-height" style="min-height: fit-content"
|
||||
data-expected-width="10" data-expected-height="110"></canvas>
|
||||
<canvas width="100" height="100" class="test max-height stretch indefinite"
|
||||
<canvas width="100" height="100" class="test max-height" style="max-height: fit-content"
|
||||
data-expected-width="510" data-expected-height="110"></canvas>
|
||||
|
||||
<canvas width="100" height="100" class="test height stretch indefinite" style="max-width: 50px"
|
||||
<canvas width="100" height="100" class="test height" style="max-width: 50px; height: fit-content"
|
||||
data-expected-width="60" data-expected-height="60"></canvas>
|
||||
<canvas width="100" height="100" class="test min-height stretch indefinite" style="min-width: 50px"
|
||||
<canvas width="100" height="100" class="test min-height" style="min-width: 50px; min-height: fit-content"
|
||||
data-expected-width="60" data-expected-height="110"></canvas>
|
||||
<canvas width="100" height="100" class="test max-height stretch indefinite" style="max-width: 50px"
|
||||
<canvas width="100" height="100" class="test max-height" style="max-width: 50px; max-height: fit-content"
|
||||
data-expected-width="60" data-expected-height="60"></canvas>
|
||||
|
||||
<canvas width="100" height="100" class="test height stretch indefinite" style="min-width: 150px"
|
||||
<canvas width="100" height="100" class="test height" style="min-width: 150px; height: fit-content"
|
||||
data-expected-width="160" data-expected-height="160"></canvas>
|
||||
<canvas width="100" height="100" class="test min-height stretch indefinite" style="min-width: 150px"
|
||||
<canvas width="100" height="100" class="test min-height" style="min-width: 150px; min-height: fit-content"
|
||||
data-expected-width="160" data-expected-height="160"></canvas>
|
||||
<canvas width="100" height="100" class="test max-height stretch indefinite" style="max-width: 150px"
|
||||
<canvas width="100" height="100" class="test max-height" style="max-width: 150px; max-height: fit-content"
|
||||
data-expected-width="160" data-expected-height="110"></canvas>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue