We use cookies to ensure you get the best experience on our website
Home Explore Help
Register Sign In
0ct0pu5
/
ladybird
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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

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.
Andreas Kling 1 year ago
parent
0dd8458683
commit
f963bb4f36
7 changed files with 106 additions and 7 deletions
Unified View Show Diff Stats
  1. 4 4
      Tests/LibWeb/Layout/expected/flex-item-with-cyclic-percentage-height.txt
  2. 2 2
      Tests/LibWeb/Layout/expected/flex/flex-item-with-intrinsic-aspect-ratio-and-max-height.txt
  3. 37 0
      Tests/LibWeb/Layout/expected/flex/percentage-flex-basis-with-indefinite-reference-value.txt
  4. 13 0
      Tests/LibWeb/Layout/expected/flex/percentage-flex-item-height-with-indefinite-containing-block-height.txt
  5. 30 0
      Tests/LibWeb/Layout/input/flex/percentage-flex-basis-with-indefinite-reference-value.html
  6. 20 0
      Tests/LibWeb/Layout/input/flex/percentage-flex-item-height-with-indefinite-containing-block-height.html
  7. 0 1
      Userland/Libraries/LibWeb/Layout/LayoutState.cpp

+ 4 - 4
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 <html> at (1,1) content-size 798x39 [BFC] children: not-inline
 
     BlockContainer <body> at (10,10) content-size 780x21 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.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
 
           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
 
             frag 0 from TextNode start: 0, length: 6, rect: [12,12 44.03125x17] baseline: 13.296875
 
                 "pillow"
 
                 "pillow"
 
@@ -10,8 +10,8 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
 
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x41]
 
   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]
 
           PaintableWithLines (BlockContainer(anonymous)) [12,12 44.03125x17]
 
             TextPaintable (TextNode<#text>)
 
             TextPaintable (TextNode<#text>)

+ 2 - 2
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
 
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
 
   BlockContainer <html> at (1,1) content-size 798x69.984375 [BFC] 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
 
     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
 
       BlockContainer <(anonymous)> (not painted) [BFC] children: inline
 
         TextNode <#text>
 
         TextNode <#text>
 
 
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
 
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x71.984375]
 
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x71.984375]
 
     PaintableBox (Box<BODY>) [9,9 782x53.984375]
 
     PaintableBox (Box<BODY>) [9,9 782x53.984375]
 
-      ImagePaintable (ImageBox<IMG>) [10,10 66x51.984375]
 
+      ImagePaintable (ImageBox<IMG>) [10,10 68.65625x51.984375]

+ 37 - 0
Tests/LibWeb/Layout/expected/flex/percentage-flex-basis-with-indefinite-reference-value.txt
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 - 0
Tests/LibWeb/Layout/expected/flex/percentage-flex-item-height-with-indefinite-containing-block-height.txt
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 - 0
Tests/LibWeb/Layout/input/flex/percentage-flex-basis-with-indefinite-reference-value.html
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 - 0
Tests/LibWeb/Layout/input/flex/percentage-flex-item-height-with-indefinite-containing-block-height.html
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">

+ 0 - 1
Userland/Libraries/LibWeb/Layout/LayoutState.cpp
View File 

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

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5