mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 16:07:46 +00:00
LibWeb: Add logical CSS properties for insets
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:
parent
fc065ee560
commit
1470e60800
4 changed files with 95 additions and 0 deletions
|
@ -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
29
Tests/LibWeb/Layout/input/css-logical-inset-properties.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue