1
Fork 0
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:
Aliaksandr Kalenik 2023-10-22 18:48:35 +02:00 committed by Andreas Kling
parent 8eab44896a
commit 122d847720
8 changed files with 194 additions and 24 deletions

View 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>

View 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>

View 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>