mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 17:57:35 +00:00
LibWeb: Fix building of areas spanning multiple rows in GFC
Rewrites the grid area building to accurately identify areas that span multiple rows. Also now we can recognize invalid areas but do not handle them yet.
This commit is contained in:
parent
8eab44896a
commit
122d847720
8 changed files with 194 additions and 24 deletions
22
Tests/LibWeb/Layout/input/grid/template-areas-1.html
Normal file
22
Tests/LibWeb/Layout/input/grid/template-areas-1.html
Normal file
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html><head><style type="text/css">
|
||||
* {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-rows: 100px 100px 100px;
|
||||
grid-template-columns: 100px 100px 100px;
|
||||
grid-template-areas: "a a a" "a a a" "b b b";
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-area: a / a / a / a;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-area: b / b / b / b;
|
||||
background-color: blueviolet;
|
||||
}
|
||||
</style></head><body><div class="grid"><div class="a">a</div><div class="b">b</div>
|
22
Tests/LibWeb/Layout/input/grid/template-areas-2.html
Normal file
22
Tests/LibWeb/Layout/input/grid/template-areas-2.html
Normal file
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html><head><style type="text/css">
|
||||
* {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-rows: 100px 100px 100px;
|
||||
grid-template-columns: 100px 100px 100px;
|
||||
grid-template-areas: "a a b" "a a b" "a a b";
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-area: a / a / a / a;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-area: b / b / b / b;
|
||||
background-color: blueviolet;
|
||||
}
|
||||
</style></head><body><div class="grid"><div class="a">a</div><div class="b">b</div>
|
33
Tests/LibWeb/Layout/input/grid/template-areas-3.html
Normal file
33
Tests/LibWeb/Layout/input/grid/template-areas-3.html
Normal file
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html><head><style type="text/css">
|
||||
* {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(4, 25%);
|
||||
grid-template-columns: repeat(3, 33.3333%);
|
||||
height: 672px;
|
||||
grid-template-areas: "a a a" "a a a" "b c d" "b c e";
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-area: a / a / a / a;
|
||||
}
|
||||
|
||||
.b {
|
||||
grid-area: b / b / b / b;
|
||||
}
|
||||
|
||||
.c {
|
||||
grid-area: c / c / c / c;
|
||||
}
|
||||
|
||||
.d {
|
||||
grid-area: d / d / d / d;
|
||||
}
|
||||
|
||||
.e {
|
||||
grid-area: e / e / e / e;
|
||||
}
|
||||
</style></head><body><div class="grid"><div class="a">a</div><div class="b">b</div><div class="c">c</div><div class="d">d</div><div class="e">e</div></div></body>
|
Loading…
Add table
Add a link
Reference in a new issue