forked from mirrors/gecko-dev
1d32990775
Automatic update from web-platform-tests [css-grid] Fixed a few errors in some tests and rebaseline expectations The following tests are now passing thanks to the fix for the issue https://crbug.com/779105. alignment/grid-self-alignment-non-static-positioned-items-009.html alignment/grid-self-alignment-non-static-positioned-items-010.html alignment/grid-self-alignment-non-static-positioned-items-012.html These tests are still failing in Legacy layout, though, since the above mentioned fix affected only LayoutNG. There are still some failures for one of the tests, but they seem unrelated to the root cause described in the issue 779105. Hence, this test still has some failing expected results: alignment/grid-self-alignment-non-static-positioned-items-011.html I've filed issue 1156225 as root cause of these failures: Bug: 1152497 Change-Id: I2ffa920951fb340418939dae53d2a3b12a9d14c2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2577222 Reviewed-by: Oriol Brufau <obrufau@igalia.com> Commit-Queue: Javier Fernandez <jfernandez@igalia.com> Cr-Commit-Position: refs/heads/master@{#834376} -- wpt-commits: 8c317250a78e2bd178373528a1e61d550485159d wpt-pr: 26778
103 lines
4.8 KiB
HTML
103 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 borders.">
|
|
<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 {
|
|
border-color: silver;
|
|
border-style: solid;
|
|
border-width: 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="5" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
|
|
<div data-offset-x="180" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="0" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
|
|
<div data-offset-x="105" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid RTL">
|
|
<div data-offset-x="155" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
|
|
<div data-offset-x="80" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
|
|
<div data-offset-x="5" data-offset-y="160" data-expected-width="70" data-expected-height="80" 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="5" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
|
|
<div data-offset-x="40" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="180" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
|
|
<div data-offset-x="155" data-offset-y="110" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid verticalRL">
|
|
<div data-offset-x="105" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
|
|
<div data-offset-x="140" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="5" data-offset-y="10" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
|
<div data-offset-x="5" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
|
</div>
|
|
</body>
|