LibWeb: Add support for the inline-size CSS property

lanmonster · Mar 9, 2024 · 18fe86a · 18fe86a
1 parent dd593d1
commit 18fe86a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 7 deletions.
diff --git a/Tests/LibWeb/Layout/expected/inline-size.txt b/Tests/LibWeb/Layout/expected/inline-size.txt
@@ -1,6 +1,6 @@
 Viewport <#document> at (0,0) content-size 800x600 children: not-inline
- BlockContainer <html> at (0,0) content-size 800x570 [BFC] children: not-inline
- BlockContainer <body> at (8,70) content-size 784x492 children: not-inline
+ BlockContainer <html> at (0,0) content-size 800x986 [BFC] children: not-inline
+ BlockContainer <body> at (8,70) content-size 784x908 children: not-inline
  BlockContainer <p.min-inline-test> at (8,70) content-size 784x200 children: inline
  frag 0 from TextNode start: 0, length: 2, rect: [8,70 85.859375x76] baseline: 58.984375
  "KK"
@@ -13,15 +13,26 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
  frag 0 from TextNode start: 0, length: 2, rect: [8,486 85.859375x76] baseline: 58.984375
  "KK"
  TextNode <#text>
- BlockContainer <(anonymous)> at (8,632) content-size 784x0 children: inline
+ BlockContainer <(anonymous)> at (8,632) content-size 784x76 children: inline
+ TextNode <#text>
+ BreakNode <br>
+ TextNode <#text>
+ BlockContainer <p.inline-size-test> at (8,778) content-size 400x200 children: inline
+ frag 0 from TextNode start: 0, length: 2, rect: [8,778 85.859375x76] baseline: 58.984375
+ "KK"
+ TextNode <#text>
+ BlockContainer <(anonymous)> at (8,1048) content-size 784x0 children: inline
  TextNode <#text>
 
-ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x632]
- PaintableWithLines (BlockContainer<HTML>) [0,0 800x570] overflow: [0,0 800x632]
- PaintableWithLines (BlockContainer<BODY>) [8,70 784x492] overflow: [8,70 784x562]
+ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1048]
+ PaintableWithLines (BlockContainer<HTML>) [0,0 800x986] overflow: [0,0 800x1048]
+ PaintableWithLines (BlockContainer<BODY>) [8,70 784x908] overflow: [8,70 784x978]
  PaintableWithLines (BlockContainer<P>.min-inline-test) [8,70 784x200]
  TextPaintable (TextNode<#text>)
  PaintableWithLines (BlockContainer(anonymous)) [8,340 784x76]
  PaintableWithLines (BlockContainer<P>.max-inline-test) [8,486 100x76]
  TextPaintable (TextNode<#text>)
- PaintableWithLines (BlockContainer(anonymous)) [8,632 784x0]
+ PaintableWithLines (BlockContainer(anonymous)) [8,632 784x76]
+ PaintableWithLines (BlockContainer<P>.inline-size-test) [8,778 400x200]
+ TextPaintable (TextNode<#text>)
+ PaintableWithLines (BlockContainer(anonymous)) [8,1048 784x0]
diff --git a/Tests/LibWeb/Layout/input/inline-size.html b/Tests/LibWeb/Layout/input/inline-size.html
@@ -19,7 +19,14 @@
  max-inline-size: 100px;
  writing-mode: horizontal-tb;
 }
+.inline-size-test {
+ background: blue;
+ inline-size: 400px;
+ height: 200px;
+}
 </style>
 <p class="min-inline-test">KK</p>
 <br>
 <p class="max-inline-test">KK</p>
+<br>
+<p class="inline-size-test">KK</p>
diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
@@ -85,6 +85,7 @@ grid-template-columns:
 grid-template-rows: 
 height: 1445px
 image-rendering: auto
+inline-size: auto
 inset-block-end: auto
 inset-block-start: auto
 inset-inline-end: auto

diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json
@@ -1307,6 +1307,13 @@
  "image-rendering"
  ]
  },
+ "inline-size": {
+ "logical-alias-for": [
+ "width"
+ ],
+ "initial": "auto",
+ "max-values": 1
+ },
  "inset": {
  "inherited": false,
  "initial": "auto",

diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -375,6 +375,8 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
  return PropertyID::PaddingLeft;
  case PropertyID::PaddingInlineEnd:
  return PropertyID::PaddingRight;
+ case PropertyID::InlineSize:
+ return PropertyID::Width;
  case PropertyID::InsetBlockStart:
  return PropertyID::Top;
  case PropertyID::InsetBlockEnd: