mirror of
https://github.com/RGBCube/serenity
synced 2025-05-31 15:28:11 +00:00
LibWeb/CSS: Support calc() in grid placement values
Fixes reduction in https://github.com/SerenityOS/serenity/issues/22802 but does not result in visual improvement on https://kotlinlang.org/
This commit is contained in:
parent
c254de3509
commit
a22ef086f5
3 changed files with 101 additions and 0 deletions
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html><style>
|
||||
* {
|
||||
outline: 1px solid black;
|
||||
}
|
||||
body {
|
||||
display: grid;
|
||||
width: 600px;
|
||||
}
|
||||
.column {
|
||||
display: contents;
|
||||
}
|
||||
.title {
|
||||
grid-column: var(--column-index);
|
||||
grid-row: calc(3);
|
||||
}
|
||||
.text {
|
||||
grid-column: var(--column-index);
|
||||
grid-row: calc(4);
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="column" style="--column-index: 1">
|
||||
<div class="title">title 1</div>
|
||||
<div class="text">text 1</div>
|
||||
</div>
|
||||
<div class="column" style="--column-index: 2">
|
||||
<div class="title">title 2</div>
|
||||
<div class="text">text 2</div>
|
||||
</div>
|
||||
<div class="column" style="--column-index: 3">
|
||||
<div class="title">title 3</div>
|
||||
<div class="text">text 3</div>
|
||||
</div>
|
||||
</body>
|
Loading…
Add table
Add a link
Reference in a new issue