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 2024-09-12 01:50:45 +02:00 committed by GitHub
parent 777fb81260
commit d9be9d6bd4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 351 additions and 45 deletions

View file

@ -566837,6 +566837,13 @@
null,
{}
]
],
"white-space-intrinsic-size-021.html": [
"a209f72c30a5a48ed4c185f9d3962abeb68399fb",
[
null,
{}
]
]
},
"word-break": {

View file

@ -0,0 +1,2 @@
[flexbox_flex-formatting-interop.html]
expected: FAIL

View file

@ -2,8 +2,5 @@
[table 1]
expected: FAIL
[table 3]
expected: FAIL
[table 6]
expected: FAIL

View file

@ -1,2 +0,0 @@
[white-space-intrinsic-size-002.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[white_space_intrinsic_sizes_a.html]
expected: FAIL

View 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>