layout: Implement proper absolute child position for flexbox (#33346)

This implements the requirements outlined in the [flexbox specification]
about how to position absolute children of flex containers. We must
establish a static position rectangle (to use if all insets are auto)
and also align the child into that rectangle.

[flebox specification]: https://drafts.csswg.org/css-flexbox/#abspos-items

Signed-off-by: Martin Robinson <mrobinson@igalia.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Martin Robinson 2024-09-09 07:44:16 -07:00 committed by GitHub
parent a3a86d5913
commit d169a82d2e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 678 additions and 724 deletions

View file

@ -1,36 +0,0 @@
[safe-align-self-htb.html]
[.item 7]
expected: FAIL
[.item 8]
expected: FAIL
[.item 9]
expected: FAIL
[.item 10]
expected: FAIL
[.item 11]
expected: FAIL
[.item 12]
expected: FAIL
[.item 19]
expected: FAIL
[.item 20]
expected: FAIL
[.item 21]
expected: FAIL
[.item 22]
expected: FAIL
[.item 23]
expected: FAIL
[.item 24]
expected: FAIL

View file

@ -1,2 +0,0 @@
[flex-abspos-staticpos-fallback-justify-content-001.html]
expected: FAIL

View file

@ -8,24 +8,12 @@
[.flexbox 34]
expected: FAIL
[.flexbox 35]
expected: FAIL
[.flexbox 36]
expected: FAIL
[.flexbox 37]
expected: FAIL
[.flexbox 30]
expected: FAIL
[.flexbox 31]
expected: FAIL
[.flexbox 33]
expected: FAIL
[.flexbox 89]
expected: FAIL
@ -53,18 +41,6 @@
[.flexbox 17]
expected: FAIL
[.flexbox 15]
expected: FAIL
[.flexbox 12]
expected: FAIL
[.flexbox 13]
expected: FAIL
[.flexbox 10]
expected: FAIL
[.flexbox 18]
expected: FAIL
@ -116,9 +92,6 @@
[.flexbox 67]
expected: FAIL
[.flexbox 66]
expected: FAIL
[.flexbox 65]
expected: FAIL
@ -149,9 +122,6 @@
[.flexbox 75]
expected: FAIL
[.flexbox 76]
expected: FAIL
[.flexbox 77]
expected: FAIL
@ -188,9 +158,6 @@
[.flexbox 44]
expected: FAIL
[.flexbox 47]
expected: FAIL
[.flexbox 46]
expected: FAIL
@ -227,21 +194,9 @@
[.flexbox 104]
expected: FAIL
[.flexbox 5]
expected: FAIL
[.flexbox 6]
expected: FAIL
[.flexbox 2]
expected: FAIL
[.flexbox 3]
expected: FAIL
[.flexbox 8]
expected: FAIL
[.flexbox 9]
expected: FAIL
@ -263,35 +218,38 @@
[.flexbox 56]
expected: FAIL
[.flexbox 57]
expected: FAIL
[.flexbox 54]
expected: FAIL
[.flexbox 55]
expected: FAIL
[.flexbox 28]
expected: FAIL
[.flexbox 27]
expected: FAIL
[.flexbox 25]
expected: FAIL
[.flexbox 24]
expected: FAIL
[.flexbox 23]
expected: FAIL
[.flexbox 21]
expected: FAIL
[.flexbox 20]
expected: FAIL
[.flexbox 120]
expected: FAIL
[.flexbox 7]
expected: FAIL
[.flexbox 26]
expected: FAIL
[.flexbox 52]
expected: FAIL
[.flexbox 71]
expected: FAIL
[.flexbox 87]
expected: FAIL
[.flexbox 106]
expected: FAIL

View file

@ -5,12 +5,6 @@
[.flexbox 4]
expected: FAIL
[.flexbox 3]
expected: FAIL
[.flexbox 2]
expected: FAIL
[.flexbox 8]
expected: FAIL

View file

@ -1,10 +1,4 @@
[position-absolute-012.html]
[.flexbox 38]
expected: FAIL
[.flexbox 39]
expected: FAIL
[.flexbox 35]
expected: FAIL
@ -38,9 +32,6 @@
[.flexbox 85]
expected: FAIL
[.flexbox 84]
expected: FAIL
[.flexbox 86]
expected: FAIL
@ -50,33 +41,15 @@
[.flexbox 14]
expected: FAIL
[.flexbox 12]
expected: FAIL
[.flexbox 13]
expected: FAIL
[.flexbox 10]
expected: FAIL
[.flexbox 11]
expected: FAIL
[.flexbox 18]
expected: FAIL
[.flexbox 19]
expected: FAIL
[.flexbox 96]
expected: FAIL
[.flexbox 94]
expected: FAIL
[.flexbox 92]
expected: FAIL
[.flexbox 93]
expected: FAIL
@ -86,12 +59,6 @@
[.flexbox 91]
expected: FAIL
[.flexbox 63]
expected: FAIL
[.flexbox 62]
expected: FAIL
[.flexbox 61]
expected: FAIL
@ -107,9 +74,6 @@
[.flexbox 69]
expected: FAIL
[.flexbox 68]
expected: FAIL
[.flexbox 70]
expected: FAIL
@ -122,9 +86,6 @@
[.flexbox 75]
expected: FAIL
[.flexbox 76]
expected: FAIL
[.flexbox 77]
expected: FAIL
@ -137,12 +98,6 @@
[.flexbox 44]
expected: FAIL
[.flexbox 47]
expected: FAIL
[.flexbox 46]
expected: FAIL
[.flexbox 41]
expected: FAIL
@ -152,21 +107,12 @@
[.flexbox 49]
expected: FAIL
[.flexbox 4]
expected: FAIL
[.flexbox 5]
expected: FAIL
[.flexbox 6]
expected: FAIL
[.flexbox 2]
expected: FAIL
[.flexbox 3]
expected: FAIL
[.flexbox 8]
expected: FAIL
@ -185,24 +131,9 @@
[.flexbox 57]
expected: FAIL
[.flexbox 54]
expected: FAIL
[.flexbox 55]
expected: FAIL
[.flexbox 29]
expected: FAIL
[.flexbox 28]
expected: FAIL
[.flexbox 27]
expected: FAIL
[.flexbox 26]
expected: FAIL
[.flexbox 24]
expected: FAIL
@ -212,5 +143,50 @@
[.flexbox 21]
expected: FAIL
[.flexbox 20]
[.flexbox 7]
expected: FAIL
[.flexbox 15]
expected: FAIL
[.flexbox 23]
expected: FAIL
[.flexbox 31]
expected: FAIL
[.flexbox 34]
expected: FAIL
[.flexbox 40]
expected: FAIL
[.flexbox 42]
expected: FAIL
[.flexbox 48]
expected: FAIL
[.flexbox 50]
expected: FAIL
[.flexbox 56]
expected: FAIL
[.flexbox 58]
expected: FAIL
[.flexbox 64]
expected: FAIL
[.flexbox 71]
expected: FAIL
[.flexbox 79]
expected: FAIL
[.flexbox 87]
expected: FAIL
[.flexbox 95]
expected: FAIL

View file

@ -5,9 +5,6 @@
[.flexbox 302]
expected: FAIL
[.flexbox 305]
expected: FAIL
[.flexbox 304]
expected: FAIL
@ -17,12 +14,6 @@
[.flexbox 306]
expected: FAIL
[.flexbox 38]
expected: FAIL
[.flexbox 39]
expected: FAIL
[.flexbox 34]
expected: FAIL
@ -32,9 +23,6 @@
[.flexbox 36]
expected: FAIL
[.flexbox 37]
expected: FAIL
[.flexbox 32]
expected: FAIL
@ -53,9 +41,6 @@
[.flexbox 393]
expected: FAIL
[.flexbox 390]
expected: FAIL
[.flexbox 391]
expected: FAIL
@ -65,21 +50,9 @@
[.flexbox 275]
expected: FAIL
[.flexbox 274]
expected: FAIL
[.flexbox 277]
expected: FAIL
[.flexbox 276]
expected: FAIL
[.flexbox 272]
expected: FAIL
[.flexbox 374]
expected: FAIL
[.flexbox 375]
expected: FAIL
@ -95,9 +68,6 @@
[.flexbox 373]
expected: FAIL
[.flexbox 89]
expected: FAIL
[.flexbox 80]
expected: FAIL
@ -107,27 +77,15 @@
[.flexbox 82]
expected: FAIL
[.flexbox 85]
expected: FAIL
[.flexbox 84]
expected: FAIL
[.flexbox 87]
expected: FAIL
[.flexbox 86]
expected: FAIL
[.flexbox 182]
expected: FAIL
[.flexbox 180]
expected: FAIL
[.flexbox 187]
expected: FAIL
[.flexbox 186]
expected: FAIL
@ -137,33 +95,15 @@
[.flexbox 184]
expected: FAIL
[.flexbox 189]
expected: FAIL
[.flexbox 118]
expected: FAIL
[.flexbox 119]
expected: FAIL
[.flexbox 111]
expected: FAIL
[.flexbox 112]
expected: FAIL
[.flexbox 113]
expected: FAIL
[.flexbox 114]
expected: FAIL
[.flexbox 116]
expected: FAIL
[.flexbox 239]
expected: FAIL
[.flexbox 238]
expected: FAIL
@ -176,15 +116,9 @@
[.flexbox 232]
expected: FAIL
[.flexbox 235]
expected: FAIL
[.flexbox 234]
expected: FAIL
[.flexbox 237]
expected: FAIL
[.flexbox 331]
expected: FAIL
@ -212,9 +146,6 @@
[.flexbox 46]
expected: FAIL
[.flexbox 41]
expected: FAIL
[.flexbox 43]
expected: FAIL
@ -224,9 +155,6 @@
[.flexbox 248]
expected: FAIL
[.flexbox 249]
expected: FAIL
[.flexbox 244]
expected: FAIL
@ -236,9 +164,6 @@
[.flexbox 246]
expected: FAIL
[.flexbox 247]
expected: FAIL
[.flexbox 240]
expected: FAIL
@ -302,21 +227,9 @@
[.flexbox 389]
expected: FAIL
[.flexbox 388]
expected: FAIL
[.flexbox 200]
expected: FAIL
[.flexbox 201]
expected: FAIL
[.flexbox 202]
expected: FAIL
[.flexbox 204]
expected: FAIL
[.flexbox 205]
expected: FAIL
@ -335,24 +248,15 @@
[.flexbox 363]
expected: FAIL
[.flexbox 362]
expected: FAIL
[.flexbox 361]
expected: FAIL
[.flexbox 360]
expected: FAIL
[.flexbox 99]
expected: FAIL
[.flexbox 96]
expected: FAIL
[.flexbox 97]
expected: FAIL
[.flexbox 94]
expected: FAIL
@ -368,9 +272,6 @@
[.flexbox 72]
expected: FAIL
[.flexbox 73]
expected: FAIL
[.flexbox 428]
expected: FAIL
@ -380,15 +281,9 @@
[.flexbox 420]
expected: FAIL
[.flexbox 421]
expected: FAIL
[.flexbox 422]
expected: FAIL
[.flexbox 423]
expected: FAIL
[.flexbox 424]
expected: FAIL
@ -398,27 +293,12 @@
[.flexbox 427]
expected: FAIL
[.flexbox 293]
expected: FAIL
[.flexbox 109]
expected: FAIL
[.flexbox 108]
expected: FAIL
[.flexbox 103]
expected: FAIL
[.flexbox 102]
expected: FAIL
[.flexbox 101]
expected: FAIL
[.flexbox 100]
expected: FAIL
[.flexbox 106]
expected: FAIL
@ -440,9 +320,6 @@
[.flexbox 327]
expected: FAIL
[.flexbox 326]
expected: FAIL
[.flexbox 325]
expected: FAIL
@ -455,30 +332,15 @@
[.flexbox 59]
expected: FAIL
[.flexbox 52]
expected: FAIL
[.flexbox 53]
expected: FAIL
[.flexbox 50]
expected: FAIL
[.flexbox 56]
expected: FAIL
[.flexbox 57]
expected: FAIL
[.flexbox 54]
expected: FAIL
[.flexbox 55]
expected: FAIL
[.flexbox 259]
expected: FAIL
[.flexbox 258]
expected: FAIL
@ -494,12 +356,6 @@
[.flexbox 253]
expected: FAIL
[.flexbox 251]
expected: FAIL
[.flexbox 411]
expected: FAIL
[.flexbox 410]
expected: FAIL
@ -524,63 +380,30 @@
[.flexbox 171]
expected: FAIL
[.flexbox 177]
expected: FAIL
[.flexbox 174]
expected: FAIL
[.flexbox 175]
expected: FAIL
[.flexbox 178]
expected: FAIL
[.flexbox 179]
expected: FAIL
[.flexbox 16]
expected: FAIL
[.flexbox 17]
expected: FAIL
[.flexbox 14]
expected: FAIL
[.flexbox 11]
expected: FAIL
[.flexbox 18]
expected: FAIL
[.flexbox 19]
expected: FAIL
[.flexbox 213]
expected: FAIL
[.flexbox 212]
expected: FAIL
[.flexbox 211]
expected: FAIL
[.flexbox 217]
expected: FAIL
[.flexbox 216]
expected: FAIL
[.flexbox 214]
expected: FAIL
[.flexbox 352]
expected: FAIL
[.flexbox 353]
expected: FAIL
[.flexbox 219]
expected: FAIL
@ -599,21 +422,9 @@
[.flexbox 358]
expected: FAIL
[.flexbox 62]
expected: FAIL
[.flexbox 67]
expected: FAIL
[.flexbox 66]
expected: FAIL
[.flexbox 65]
expected: FAIL
[.flexbox 64]
expected: FAIL
[.flexbox 280]
expected: FAIL
@ -623,12 +434,6 @@
[.flexbox 282]
expected: FAIL
[.flexbox 284]
expected: FAIL
[.flexbox 286]
expected: FAIL
[.flexbox 287]
expected: FAIL
@ -641,42 +446,21 @@
[.flexbox 359]
expected: FAIL
[.flexbox 288]
expected: FAIL
[.flexbox 136]
expected: FAIL
[.flexbox 134]
expected: FAIL
[.flexbox 135]
expected: FAIL
[.flexbox 132]
expected: FAIL
[.flexbox 133]
expected: FAIL
[.flexbox 130]
expected: FAIL
[.flexbox 131]
expected: FAIL
[.flexbox 138]
expected: FAIL
[.flexbox 139]
expected: FAIL
[.flexbox 317]
expected: FAIL
[.flexbox 314]
expected: FAIL
[.flexbox 315]
expected: FAIL
@ -695,18 +479,6 @@
[.flexbox 69]
expected: FAIL
[.flexbox 29]
expected: FAIL
[.flexbox 27]
expected: FAIL
[.flexbox 26]
expected: FAIL
[.flexbox 25]
expected: FAIL
[.flexbox 24]
expected: FAIL
@ -722,15 +494,9 @@
[.flexbox 269]
expected: FAIL
[.flexbox 263]
expected: FAIL
[.flexbox 260]
expected: FAIL
[.flexbox 261]
expected: FAIL
[.flexbox 266]
expected: FAIL
@ -749,21 +515,12 @@
[.flexbox 404]
expected: FAIL
[.flexbox 402]
expected: FAIL
[.flexbox 400]
expected: FAIL
[.flexbox 401]
expected: FAIL
[.flexbox 190]
expected: FAIL
[.flexbox 191]
expected: FAIL
[.flexbox 192]
expected: FAIL
@ -788,18 +545,9 @@
[.flexbox 169]
expected: FAIL
[.flexbox 168]
expected: FAIL
[.flexbox 165]
expected: FAIL
[.flexbox 164]
expected: FAIL
[.flexbox 166]
expected: FAIL
[.flexbox 161]
expected: FAIL
@ -812,18 +560,9 @@
[.flexbox 226]
expected: FAIL
[.flexbox 227]
expected: FAIL
[.flexbox 225]
expected: FAIL
[.flexbox 222]
expected: FAIL
[.flexbox 223]
expected: FAIL
[.flexbox 220]
expected: FAIL
@ -836,9 +575,6 @@
[.flexbox 347]
expected: FAIL
[.flexbox 341]
expected: FAIL
[.flexbox 340]
expected: FAIL
@ -857,15 +593,6 @@
[.flexbox 299]
expected: FAIL
[.flexbox 74]
expected: FAIL
[.flexbox 75]
expected: FAIL
[.flexbox 77]
expected: FAIL
[.flexbox 292]
expected: FAIL
@ -887,33 +614,15 @@
[.flexbox 368]
expected: FAIL
[.flexbox 4]
expected: FAIL
[.flexbox 5]
expected: FAIL
[.flexbox 6]
expected: FAIL
[.flexbox 7]
expected: FAIL
[.flexbox 2]
expected: FAIL
[.flexbox 8]
expected: FAIL
[.flexbox 9]
expected: FAIL
[.flexbox 154]
expected: FAIL
[.flexbox 156]
expected: FAIL
[.flexbox 157]
expected: FAIL
@ -923,9 +632,6 @@
[.flexbox 151]
expected: FAIL
[.flexbox 152]
expected: FAIL
[.flexbox 153]
expected: FAIL
@ -938,29 +644,221 @@
[.flexbox 408]
expected: FAIL
[.flexbox 409]
expected: FAIL
[.flexbox 121]
expected: FAIL
[.flexbox 120]
expected: FAIL
[.flexbox 123]
expected: FAIL
[.flexbox 122]
expected: FAIL
[.flexbox 124]
expected: FAIL
[.flexbox 127]
expected: FAIL
[.flexbox 126]
expected: FAIL
[.flexbox 129]
expected: FAIL
[.flexbox 10]
expected: FAIL
[.flexbox 12]
expected: FAIL
[.flexbox 20]
expected: FAIL
[.flexbox 31]
expected: FAIL
[.flexbox 33]
expected: FAIL
[.flexbox 47]
expected: FAIL
[.flexbox 58]
expected: FAIL
[.flexbox 60]
expected: FAIL
[.flexbox 68]
expected: FAIL
[.flexbox 79]
expected: FAIL
[.flexbox 81]
expected: FAIL
[.flexbox 95]
expected: FAIL
[.flexbox 107]
expected: FAIL
[.flexbox 115]
expected: FAIL
[.flexbox 117]
expected: FAIL
[.flexbox 128]
expected: FAIL
[.flexbox 142]
expected: FAIL
[.flexbox 144]
expected: FAIL
[.flexbox 146]
expected: FAIL
[.flexbox 155]
expected: FAIL
[.flexbox 160]
expected: FAIL
[.flexbox 162]
expected: FAIL
[.flexbox 167]
expected: FAIL
[.flexbox 173]
expected: FAIL
[.flexbox 176]
expected: FAIL
[.flexbox 181]
expected: FAIL
[.flexbox 183]
expected: FAIL
[.flexbox 188]
expected: FAIL
[.flexbox 194]
expected: FAIL
[.flexbox 203]
expected: FAIL
[.flexbox 208]
expected: FAIL
[.flexbox 210]
expected: FAIL
[.flexbox 215]
expected: FAIL
[.flexbox 221]
expected: FAIL
[.flexbox 224]
expected: FAIL
[.flexbox 229]
expected: FAIL
[.flexbox 231]
expected: FAIL
[.flexbox 236]
expected: FAIL
[.flexbox 241]
expected: FAIL
[.flexbox 243]
expected: FAIL
[.flexbox 250]
expected: FAIL
[.flexbox 252]
expected: FAIL
[.flexbox 257]
expected: FAIL
[.flexbox 262]
expected: FAIL
[.flexbox 264]
expected: FAIL
[.flexbox 268]
expected: FAIL
[.flexbox 270]
expected: FAIL
[.flexbox 271]
expected: FAIL
[.flexbox 273]
expected: FAIL
[.flexbox 278]
expected: FAIL
[.flexbox 283]
expected: FAIL
[.flexbox 285]
expected: FAIL
[.flexbox 298]
expected: FAIL
[.flexbox 300]
expected: FAIL
[.flexbox 308]
expected: FAIL
[.flexbox 319]
expected: FAIL
[.flexbox 321]
expected: FAIL
[.flexbox 335]
expected: FAIL
[.flexbox 346]
expected: FAIL
[.flexbox 348]
expected: FAIL
[.flexbox 356]
expected: FAIL
[.flexbox 367]
expected: FAIL
[.flexbox 369]
expected: FAIL
[.flexbox 383]
expected: FAIL
[.flexbox 395]
expected: FAIL
[.flexbox 403]
expected: FAIL
[.flexbox 405]
expected: FAIL
[.flexbox 416]
expected: FAIL
[.flexbox 430]
expected: FAIL
[.flexbox 432]
expected: FAIL

View file

@ -1,4 +0,0 @@
[position-absolute-015.html]
[#abspos 1]
expected: FAIL

View file

@ -1,2 +0,0 @@
[position-absolute-containing-block-001.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[position-absolute-center-003.html]
expected: FAIL

View file

@ -1,2 +0,0 @@
[position-absolute-center-004.html]
expected: FAIL