beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-22 07:30:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Don't mark heights as definite in set_content_height()

Browse source 
Height definiteness is now preserved as intended by CSS-SIZING-3
(assuming I've understood it correctly) and not implicitly granted by
layout algorithms when they assign height.

For the specific special/magical cases where some sizes become definite
during layout, the preceding commits have made them explicit in code.

This fixes a number of flex layout issues where we were previously
resolving percentage values against post-layout flex container heights,
but other browsers don't.
This commit is contained in:
Andreas Kling 2024-01-29 16:03:44 +01:00
parent 0dd8458683
commit f963bb4f36
Notes: sideshowbarker 2024-07-17 07:11:12 +09:00 
Author: https://github.com/awesomekling
Commit: https://github.com/SerenityOS/serenity/commit/f963bb4f36
Pull-request: https://github.com/SerenityOS/serenity/pull/23290
7 changed files with 106 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
Tests/LibWeb/Layout/expected/flex-item-with-cyclic-percentage-height.txt
View file

@ -2,7 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x39 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x21 children: not-inline
Box <div.flexrow> at (11,11) content-size 778x19 flex-container(row) [FFC] children: not-inline
Box <div.project> at (12,12) content-size 44.03125x19 flex-container(column) flex-item [FFC] children: not-inline
Box <div.project> at (12,12) content-size 44.03125x17 flex-container(column) flex-item [FFC] children: not-inline
BlockContainer <(anonymous)> at (12,12) content-size 44.03125x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 6, rect: [12,12 44.03125x17] baseline: 13.296875
"pillow"
@ -10,8 +10,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x41]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x23] overflow: [10,10 780x22]
PaintableBox (Box<DIV>.flexrow) [10,10 780x21] overflow: [11,11 778x21]
PaintableBox (Box<DIV>.project) [11,11 46.03125x21]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x23]
PaintableBox (Box<DIV>.flexrow) [10,10 780x21]
PaintableBox (Box<DIV>.project) [11,11 46.03125x19]
PaintableWithLines (BlockContainer(anonymous)) [12,12 44.03125x17]
TextPaintable (TextNode<#text>)

4
Tests/LibWeb/Layout/expected/flex/flex-item-with-intrinsic-aspect-ratio-and-max-height.txt
View file

@ -1,11 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x69.984375 [BFC] children: not-inline
Box <body> at (10,10) content-size 780x51.984375 flex-container(row) [FFC] children: not-inline
ImageBox <img> at (11,11) content-size 64x49.984375 flex-item children: not-inline
ImageBox <img> at (11,11) content-size 66.65625x49.984375 flex-item children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x71.984375]
PaintableBox (Box<BODY>) [9,9 782x53.984375]
ImagePaintable (ImageBox<IMG>) [10,10 66x51.984375]
ImagePaintable (ImageBox<IMG>) [10,10 68.65625x51.984375]

37
Tests/LibWeb/Layout/expected/flex/percentage-flex-basis-with-indefinite-reference-value.txt Normal file
View file

@ -0,0 +1,37 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x153 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x137 children: not-inline
Box <div.outer> at (8,8) content-size 784x137 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div.item> at (8,8) content-size 784x120 flex-item [BFC] children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.spacer> at (8,8) content-size 120x120 children: not-inline
BlockContainer <(anonymous)> at (8,128) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <div> at (8,128) content-size 784x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 1, length: 14, rect: [8,128 112.421875x17] baseline: 13.296875
"text text text"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,145) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div> at (8,145) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x153]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x137]
PaintableBox (Box<DIV>.outer) [8,8 784x137]
PaintableWithLines (BlockContainer<DIV>.item) [8,8 784x120]
PaintableWithLines (BlockContainer(anonymous)) [8,8 784x0]
PaintableWithLines (BlockContainer<DIV>.spacer) [8,8 120x120]
PaintableWithLines (BlockContainer(anonymous)) [8,128 784x0]
PaintableWithLines (BlockContainer<DIV>) [8,128 784x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,145 784x0]
PaintableWithLines (BlockContainer<DIV>) [8,145 784x0]

13
Tests/LibWeb/Layout/expected/flex/percentage-flex-item-height-with-indefinite-containing-block-height.txt Normal file
View file

@ -0,0 +1,13 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x136 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x120 children: not-inline
Box <div.flexContainer> at (8,8) content-size 784x120 flex-container(column) [FFC] children: not-inline
BlockContainer <div.item> at (8,8) content-size 784x120 flex-item [BFC] children: not-inline
BlockContainer <div.green> at (8,8) content-size 120x120 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x136]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x120]
PaintableBox (Box<DIV>.flexContainer) [8,8 784x120]
PaintableWithLines (BlockContainer<DIV>.item) [8,8 784x120]
PaintableWithLines (BlockContainer<DIV>.green) [8,8 120x120]

30
Tests/LibWeb/Layout/input/flex/percentage-flex-basis-with-indefinite-reference-value.html Normal file
View file

@ -0,0 +1,30 @@
<!doctype html><style type="text/css">
* {
outline: 1px solid black;
}
.outer {
display: flex;
flex-direction: column;
background: pink;
}
.item {
flex-shrink: 0;
flex-grow: 0;
flex-basis: 100%;
background: orange;
}
.spacer {
width: 120px;
height: 120px;
background: wheat;
}
</style>
<div class="outer">
<div class="item">
<div class="spacer"></div>
</div>
<div>
text text text
</div>
</div>
<div>

20
Tests/LibWeb/Layout/input/flex/percentage-flex-item-height-with-indefinite-containing-block-height.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html><style>
* {
outline: 1px solid black;
}
.flexContainer {
display: flex;
flex-direction: column;
background: pink;
}
.item {
flex-shrink: 0;
height: 50%;
background: orange;
}
.green {
width: 120px;
height: 120px;
background: green;
}
</style><div class="flexContainer"><div class="item"><div class="green">

1
Userland/Libraries/LibWeb/Layout/LayoutState.cpp
View file

@ -509,7 +509,6 @@ void LayoutState::UsedValues::set_content_height(CSSPixels height)
height = 0;
}
m_content_height = height;
m_has_definite_height = true;
}
void LayoutState::UsedValues::set_temporary_content_width(CSSPixels width)