RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 17:57:35 +00:00
Code Issues Activity Actions

LibWeb: Add support for the inline-size CSS property

Browse source
This commit is contained in:
implicitfield 2024-03-06 18:12:09 +04:00 • committed by Andreas Kling
parent dd593d16c4
commit 18fe86adc3
5 changed files with 35 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

25
Tests/LibWeb/Layout/expected/inline-size.txt
View file

@ -1,6 +1,6 @@
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 (0,0) content-size 800x570 [BFC] children: not-inline BlockContainer <html> at (0,0) content-size 800x986 [BFC] children: not-inline
BlockContainer <body> at (8,70) content-size 784x492 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 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 frag 0 from TextNode start: 0, length: 2, rect: [8,70 85.859375x76] baseline: 58.984375
"KK" "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 frag 0 from TextNode start: 0, length: 2, rect: [8,486 85.859375x76] baseline: 58.984375
"KK" "KK"
TextNode <#text> 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> TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x632] ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x1048]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x570] overflow: [0,0 800x632] PaintableWithLines (BlockContainer<HTML>) [0,0 800x986] overflow: [0,0 800x1048]
PaintableWithLines (BlockContainer<BODY>) [8,70 784x492] overflow: [8,70 784x562] PaintableWithLines (BlockContainer<BODY>) [8,70 784x908] overflow: [8,70 784x978]
PaintableWithLines (BlockContainer<P>.min-inline-test) [8,70 784x200] PaintableWithLines (BlockContainer<P>.min-inline-test) [8,70 784x200]
TextPaintable (TextNode<#text>) TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,340 784x76] PaintableWithLines (BlockContainer(anonymous)) [8,340 784x76]
PaintableWithLines (BlockContainer<P>.max-inline-test) [8,486 100x76] PaintableWithLines (BlockContainer<P>.max-inline-test) [8,486 100x76]
TextPaintable (TextNode<#text>) 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]

7
Tests/LibWeb/Layout/input/inline-size.html
View file

@ -19,7 +19,14 @@
max-inline-size: 100px; max-inline-size: 100px;
writing-mode: horizontal-tb; writing-mode: horizontal-tb;
} }
.inline-size-test {
background: blue;
inline-size: 400px;
height: 200px;
}
</style> </style>
<p class="min-inline-test">KK</p> <p class="min-inline-test">KK</p>
<br> <br>
<p class="max-inline-test">KK</p> <p class="max-inline-test">KK</p>
<br>
<p class="inline-size-test">KK</p>

1
Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
View file

@ -85,6 +85,7 @@ grid-template-columns:
grid-template-rows: grid-template-rows:
height: 1445px height: 1445px
image-rendering: auto image-rendering: auto
inline-size: auto
inset-block-end: auto inset-block-end: auto
inset-block-start: auto inset-block-start: auto
inset-inline-end: auto inset-inline-end: auto

7
Userland/Libraries/LibWeb/CSS/Properties.json
View file

@ -1307,6 +1307,13 @@
"image-rendering" "image-rendering"
] ]
}, },
"inline-size": {
"logical-alias-for": [
"width"
],
"initial": "auto",
"max-values": 1
},
"inset": { "inset": {
"inherited": false, "inherited": false,
"initial": "auto", "initial": "auto",

2
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -375,6 +375,8 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
return PropertyID::PaddingLeft; return PropertyID::PaddingLeft;
case PropertyID::PaddingInlineEnd: case PropertyID::PaddingInlineEnd:
return PropertyID::PaddingRight; return PropertyID::PaddingRight;
case PropertyID::InlineSize:
return PropertyID::Width;
case PropertyID::InsetBlockStart: case PropertyID::InsetBlockStart:
return PropertyID::Top; return PropertyID::Top;
case PropertyID::InsetBlockEnd: case PropertyID::InsetBlockEnd: