mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 01:35:08 +02:00
9450fcb2b0
Use the absolutely positioned box's own grid placement to resolve the grid-area containing block rectangle instead of inheriting the nearest in-flow grid item's area. Keep the grid-specific static-position handling for axes with both insets auto, but resolve mixed auto and explicit grid placement axes against the augmented grid for direct children as well as descendants inside grid items. This fixes the imported abspos and alignment WPTs for values like grid-row: 1 and grid-column: auto / 1 while keeping the reduced descendant regressions passing.
76 lines
1.5 KiB
HTML
76 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<style>
|
|
#grid {
|
|
display: grid;
|
|
grid-template-columns: 200px 300px;
|
|
grid-template-rows: 150px 100px;
|
|
width: 550px;
|
|
height: 400px;
|
|
margin: 1px 2px 3px 4px;
|
|
padding: 20px 15px 10px 5px;
|
|
border-width: 9px 3px 12px 6px;
|
|
border-style: solid;
|
|
position: relative;
|
|
}
|
|
|
|
.grid-item {
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
#item1 {
|
|
grid-area: 1 / 1;
|
|
}
|
|
|
|
#item2 {
|
|
grid-area: 2 / 2;
|
|
}
|
|
|
|
.spacer {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
height: 25px;
|
|
}
|
|
|
|
.spacer.small {
|
|
width: 25px;
|
|
}
|
|
|
|
.spacer.large {
|
|
width: 50px;
|
|
}
|
|
|
|
.abspos {
|
|
position: absolute;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 50px;
|
|
height: 25px;
|
|
left: 25px;
|
|
grid-column: auto / 3;
|
|
}
|
|
</style>
|
|
<div id="grid">
|
|
<div id="item1" class="grid-item">
|
|
<span class="spacer small"></span><br>
|
|
<span class="spacer large"></span><div id="abspos1" class="abspos"></div>
|
|
</div>
|
|
<div id="item2" class="grid-item">
|
|
<span class="spacer small"></span><br>
|
|
<span class="spacer large"></span><div id="abspos2" class="abspos"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
asyncTest(async done => {
|
|
await animationFrame();
|
|
|
|
for (let id of [ "abspos1", "abspos2" ]) {
|
|
let abspos = document.getElementById(id);
|
|
println(`${id}: ${abspos.offsetLeft},${abspos.offsetTop} ${abspos.offsetWidth}x${abspos.offsetHeight}`);
|
|
}
|
|
|
|
done();
|
|
});
|
|
</script>
|