mirror of
https://github.com/servo/servo.git
synced 2025-08-07 22:45:34 +01:00
Handle all white-space values when intrinsically sizing an IFC (#33343)
There were various cases like `text-wrap-mode: nowrap` and `white-space-collapse: break-spaces` that weren't handled well. Fixes #33335 flexbox_flex-formatting-interop.html fails now because we don't support `table-layout: fixed`. Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau
GitHub
parent
777fb81260
commit
d9be9d6bd4
10 changed files with 351 additions and 45 deletions
7
tests/wpt/meta/MANIFEST.json
vendored
7
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -566837,6 +566837,13 @@
|
|||
null,
|
||||
{}
|
||||
]
|
||||
],
|
||||
"white-space-intrinsic-size-021.html": [
|
||||
"a209f72c30a5a48ed4c185f9d3962abeb68399fb",
|
||||
[
|
||||
null,
|
||||
{}
|
||||
]
|
||||
]
|
||||
},
|
||||
"word-break": {
|
||||
|
|
|
|||
2
tests/wpt/meta/css/css-flexbox/flexbox_flex-formatting-interop.html.ini
vendored
Normal file
2
tests/wpt/meta/css/css-flexbox/flexbox_flex-formatting-interop.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
[flexbox_flex-formatting-interop.html]
|
||||
expected: FAIL
|
||||
|
|
@ -2,8 +2,5 @@
|
|||
[table 1]
|
||||
expected: FAIL
|
||||
|
||||
[table 3]
|
||||
expected: FAIL
|
||||
|
||||
[table 6]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
[white-space-intrinsic-size-002.html]
|
||||
expected: FAIL
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
[white_space_intrinsic_sizes_a.html]
|
||||
expected: FAIL
|
||||
266
tests/wpt/tests/css/css-text/white-space/white-space-intrinsic-size-021.html
vendored
Normal file
266
tests/wpt/tests/css/css-text/white-space/white-space-intrinsic-size-021.html
vendored
Normal file
|
|
@ -0,0 +1,266 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Text level 4 Test: intrinsic sizes of block containers with various 'white-space' values</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-4/#white-space-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes">
|
||||
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
.container {
|
||||
font: 10px / 1 Ahem;
|
||||
color: gray;
|
||||
}
|
||||
.container.narrow {
|
||||
float: left;
|
||||
width: 0;
|
||||
margin-right: 50px;
|
||||
}
|
||||
.container.wide {
|
||||
width: 800px;
|
||||
}
|
||||
.container > div {
|
||||
display: inline-block;
|
||||
border: solid black;
|
||||
}
|
||||
hr {
|
||||
clear: both;
|
||||
}
|
||||
.collapse.wrap {
|
||||
white-space: normal;
|
||||
}
|
||||
.collapse.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.preserve.wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.preserve.nowrap {
|
||||
white-space: pre;
|
||||
}
|
||||
.preserve-breaks.wrap {
|
||||
white-space: preserve-breaks;
|
||||
}
|
||||
.preserve-breaks.nowrap {
|
||||
white-space: preserve-breaks nowrap;
|
||||
}
|
||||
.break-spaces.wrap {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
.break-spaces.nowrap {
|
||||
white-space: break-spaces nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container narrow">
|
||||
<div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="preserve wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="preserve nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="break-spaces wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
</div>
|
||||
<div class="container narrow">
|
||||
<div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="preserve wrap" data-expected-client-width= "0" data-expected-client-height="10"> </div>
|
||||
<div class="preserve nowrap" data-expected-client-width="10" data-expected-client-height="10"> </div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="10"> </div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="10" data-expected-client-height="10"> </div>
|
||||
</div>
|
||||
<div class="container narrow">
|
||||
<div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="preserve wrap" data-expected-client-width= "0" data-expected-client-height="10"> </div>
|
||||
<div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10"> </div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="20"> </div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10"> </div>
|
||||
</div>
|
||||
<div class="container narrow">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="preserve nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
</div>
|
||||
<div class="container narrow">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="20"> X</div>
|
||||
<div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="20"> X</div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10"> X</div>
|
||||
</div>
|
||||
<div class="container narrow">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="20"> X</div>
|
||||
<div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="30"> X</div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10"> X</div>
|
||||
</div>
|
||||
<div class="container narrow">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10">X </div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="10">X </div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10">X </div>
|
||||
</div>
|
||||
<div class="container narrow">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10">X </div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="20">X </div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10">X </div>
|
||||
</div>
|
||||
<div class="container narrow">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div>
|
||||
<div class="collapse nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div>
|
||||
<div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="20">X É</div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
</div>
|
||||
<div class="container narrow">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div>
|
||||
<div class="collapse nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div>
|
||||
<div class="preserve nowrap" data-expected-client-width="40" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="20">X É</div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="20">X É</div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="40" data-expected-client-height="10">X É</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="container wide">
|
||||
<div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="preserve wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="preserve nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="break-spaces wrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width= "0" data-expected-client-height= "0"></div>
|
||||
</div>
|
||||
<div class="container wide">
|
||||
<div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="10"> </div>
|
||||
<div class="preserve nowrap" data-expected-client-width="10" data-expected-client-height="10"> </div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="10"> </div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="10" data-expected-client-height="10"> </div>
|
||||
</div>
|
||||
<div class="container wide">
|
||||
<div class="collapse wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="collapse nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="preserve wrap" data-expected-client-width="20" data-expected-client-height="10"> </div>
|
||||
<div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10"> </div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width= "0" data-expected-client-height= "0"> </div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="10"> </div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10"> </div>
|
||||
</div>
|
||||
<div class="container wide">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="preserve wrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="preserve nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="10" data-expected-client-height="10">X</div>
|
||||
</div>
|
||||
<div class="container wide">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve wrap" data-expected-client-width="20" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="10"> X</div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10"> X</div>
|
||||
</div>
|
||||
<div class="container wide">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve wrap" data-expected-client-width="30" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10"> X</div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="30" data-expected-client-height="10"> X</div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10"> X</div>
|
||||
</div>
|
||||
<div class="container wide">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="preserve wrap" data-expected-client-width="20" data-expected-client-height="10">X </div>
|
||||
<div class="preserve nowrap" data-expected-client-width="20" data-expected-client-height="10">X </div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="20" data-expected-client-height="10">X </div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="20" data-expected-client-height="10">X </div>
|
||||
</div>
|
||||
<div class="container wide">
|
||||
<div class="collapse wrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="collapse nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="preserve wrap" data-expected-client-width="30" data-expected-client-height="10">X </div>
|
||||
<div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10">X </div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="10" data-expected-client-height="10">X </div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="30" data-expected-client-height="10">X </div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10">X </div>
|
||||
</div>
|
||||
<div class="container wide">
|
||||
<div class="collapse wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="collapse nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
</div>
|
||||
<div class="container wide">
|
||||
<div class="collapse wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="collapse nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve wrap" data-expected-client-width="40" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve nowrap" data-expected-client-width="40" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve-breaks wrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="preserve-breaks nowrap" data-expected-client-width="30" data-expected-client-height="10">X É</div>
|
||||
<div class="break-spaces wrap" data-expected-client-width="40" data-expected-client-height="10">X É</div>
|
||||
<div class="break-spaces nowrap" data-expected-client-width="40" data-expected-client-height="10">X É</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script>
|
||||
checkLayout(".container > div");
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue