system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-10-15 04:13:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Add logical CSS properties for insets

Browse source 
This patch adds the following properties:

- inset-inline
- inset-inline-start
- inset-inline-end
- inset-block
- inset-block-start
- inset-block-end
This commit is contained in:
Andreas Kling 2023-07-13 20:52:36 +02:00
parent fc065ee560
commit 1470e60800
4 changed files with 95 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Tests/LibWeb/Layout/expected/css-logical-inset-properties.txt Normal file
View file

@ -0,0 +1,6 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x0 [BFC] children: not-inline
BlockContainer <body> at (9,9) content-size 500x400 positioned [BFC] children: inline
BlockContainer <div.two-props> at (60,110) content-size 398x198 positioned [BFC] children: not-inline
BlockContainer <div.four-props> at (110,210) content-size 248x148 positioned [BFC] children: not-inline
TextNode <#text>

29
Tests/LibWeb/Layout/input/css-logical-inset-properties.html Normal file
View file

@ -0,0 +1,29 @@
<!DOCTYPE html><style>
* {
border: 1px solid black !important;
color: black !important;
background: white;
}
body {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 400px;
background: pink;
}
.two-props {
position: absolute;
inset-inline: 50px;
inset-block: 100px;
background: orange;
}
.four-props {
position: absolute;
inset-inline-start: 100px;
inset-inline-end: 150px;
inset-block-start: 200px;
inset-block-end: 50px;
background: magenta;
}
</style><body><div class="two-props"></div><div class="four-props"></div>

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

@ -1205,6 +1205,54 @@
],
"percentages-resolve-to": "length"
},
"inset-block": {
"logical-alias-for": [
"inset"
],
"max-values": 2
},
"inset-block-end": {
"logical-alias-for": [
"top",
"right",
"bottom",
"left"
],
"max-values": 1
},
"inset-block-start": {
"logical-alias-for": [
"top",
"right",
"bottom",
"left"
],
"max-values": 1
},
"inset-inline": {
"logical-alias-for": [
"inset"
],
"max-values": 2
},
"inset-inline-end": {
"logical-alias-for": [
"top",
"right",
"bottom",
"left"
],
"max-values": 1
},
"inset-inline-start": {
"logical-alias-for": [
"top",
"right",
"bottom",
"left"
],
"max-values": 1
},
"justify-content": {
"inherited": false,
"initial": "flex-start",

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

@ -304,6 +304,14 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
return PropertyID::PaddingLeft;
case PropertyID::PaddingInlineEnd:
return PropertyID::PaddingRight;
case PropertyID::InsetBlockStart:
return PropertyID::Top;
case PropertyID::InsetBlockEnd:
return PropertyID::Bottom;
case PropertyID::InsetInlineStart:
return PropertyID::Left;
case PropertyID::InsetInlineEnd:
return PropertyID::Right;
default:
return {};
}
@ -324,6 +332,10 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
return StartAndEndPropertyIDs { PropertyID::PaddingTop, PropertyID::PaddingBottom };
case PropertyID::PaddingInline:
return StartAndEndPropertyIDs { PropertyID::PaddingLeft, PropertyID::PaddingRight };
case PropertyID::InsetBlock:
return StartAndEndPropertyIDs { PropertyID::Top, PropertyID::Bottom };
case PropertyID::InsetInline:
return StartAndEndPropertyIDs { PropertyID::Left, PropertyID::Right };
default:
return {};
}