forked from mirrors/gecko-dev
d901471049
Automatic update from web-platform-tests [css-grid] Consider container's writing mode to get grid item's margin When computing the logical offset of non-static absolute positioned grid items, we were using the child's MarginLineLeft logical function to get the margin based on its writing-mode. Although we are looking for the left/top margin to compute the offset, when the item has flipped block writing mode (vertical-rl) we need to switch to the right/bottom margin, hence we'll need to pass the container's style to resolve the margin appropriately. This CL changes the LayoutBoxModelObject api to allow passing the container's style to the MarginLineLeft and MarginLineRight functions. Bug: 1156225 Change-Id: I03796f65178f931df11c16d4187c6708f758d1b1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2577365 Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Reviewed-by: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#876693} -- wpt-commits: 83cad95b45cb08084f59911bdb98e08a0ff05341 wpt-pr: 27233
99 lines
4.8 KiB
HTML
99 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
|
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
|
<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with margins.">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<style>
|
|
.grid {
|
|
position: relative;
|
|
display: inline-grid;
|
|
grid-template-columns: 100px 150px;
|
|
grid-template-rows: 150px 100px;
|
|
font: 10px/1 Ahem;
|
|
background: grey;
|
|
}
|
|
.grid > div { position: absolute; }
|
|
.grid > :nth-child(1) { background: green; }
|
|
.grid > :nth-child(2) { background: blue; }
|
|
.grid > :nth-child(3) { background: yellow; }
|
|
.grid > :nth-child(4) { background: red; }
|
|
|
|
.grid > div { margin: 5px 10px 15px 20px; }
|
|
|
|
.RTL { direction: rtl; }
|
|
.verticalLR { writing-mode: vertical-lr; }
|
|
.verticalRL { writing-mode: vertical-rl; }
|
|
.horizontal { writing-mode: horizontal-tb; }
|
|
|
|
.firstRowFirstColumn {
|
|
grid-row: 1 / 2;
|
|
grid-column: 1 / 2;
|
|
align-self: start;
|
|
justify-self: right;
|
|
left: 5px;
|
|
}
|
|
.firstRowSecondColumn {
|
|
grid-row: 1 / 2;
|
|
grid-column: 2 / 3;
|
|
align-self: end;
|
|
justify-self: center;
|
|
right: 10px;
|
|
}
|
|
.secondRowFirstColumn {
|
|
grid-row: 2 / 3;
|
|
grid-column: 1 / 2;
|
|
align-self: center;
|
|
justify-self: start;
|
|
top: 10px
|
|
}
|
|
.secondRowSecondColumn {
|
|
grid-row: 2 / 3;
|
|
grid-column: 2 / 3;
|
|
align-self: end;
|
|
justify-self: left;
|
|
left: 5px;
|
|
top: 10px;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
<script type="text/javascript">
|
|
setup({ explicit_done: true });
|
|
</script>
|
|
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
|
|
<div class="grid">
|
|
<div data-offset-x="25" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
|
|
<div data-offset-x="200" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="20" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
|
|
<div data-offset-x="125" data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid RTL">
|
|
<div data-offset-x="175" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
|
|
<div data-offset-x="100" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="180" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div>
|
|
<div data-offset-x="25" data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
|
</div>
|
|
|
|
<br><br>
|
|
|
|
<div class="grid verticalLR">
|
|
<div data-offset-x="25" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
|
|
<div data-offset-x="60" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="200" data-offset-y="15" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div>
|
|
<div data-offset-x="175" data-offset-y="115" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid verticalRL">
|
|
<div data-offset-x="125" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
|
|
<div data-offset-x="160" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="25" data-offset-y="15" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
|
<div data-offset-x="25" data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
|
</div>
|
|
</body>
|