forked from mirrors/gecko-dev
ccd291baa1
Automatic update from web-platform-tests css-grid: Wait for documents.font.ready() for tests with Ahem font (#22347) web-fonts may not be ready when the window.onload signal is triggered, so to avoid flakiness or unexpected failures on the css-grid tests that use the Ahem font we should wait for the fonts to be ready before starting the test. However, that is not enough, we should also waiting for window.load before starting the tests because some tests depend on the document images to load (which may happen before or after the fonts are ready) So this patch changes the tests using Ahem to start after the load event has fired and after the fonts are ready. The tests now need to use "explicit_done: true" to avoid race conditions, so this commit also sets this tests to be explicit about when they finish. -- wpt-commits: ea0533fc00ee855b02231c8e392c3ddadb943b0f wpt-pr: 22347
108 lines
4.8 KiB
HTML
108 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</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="Absolute positioned grid items alignment works as expected when the grid and its items have margins, borders and paddings.">
|
|
<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 {
|
|
margin: 4px 2px 8px 3px;
|
|
padding: 1px 4px 2px 3px;
|
|
border-color: silver;
|
|
border-style: solid;
|
|
border-width: 5px 6px 4px 8px;
|
|
}
|
|
|
|
.grid > div {
|
|
margin: 2px 4px 6px 8px;
|
|
padding: 3px 2px 4px 5px;
|
|
border-color: silver;
|
|
border-style: solid;
|
|
border-width: 1px 6px 2px 3px;
|
|
}
|
|
|
|
.RTL { direction: rtl; }
|
|
.verticalLR { writing-mode: vertical-lr; }
|
|
.verticalRL { writing-mode: vertical-rl; }
|
|
|
|
.firstRowFirstColumn {
|
|
grid-row: 1 / 2;
|
|
grid-column: 1 / 2;
|
|
align-self: start;
|
|
justify-self: right;
|
|
}
|
|
.firstRowSecondColumn {
|
|
grid-row: 1 / 2;
|
|
grid-column: 2 / 3;
|
|
align-self: end;
|
|
justify-self: center;
|
|
}
|
|
.secondRowFirstColumn {
|
|
grid-row: 2 / 3;
|
|
grid-column: 1 / 2;
|
|
align-self: center;
|
|
justify-self: start;
|
|
}
|
|
.secondRowSecondColumn {
|
|
grid-row: 2 / 3;
|
|
grid-column: 2 / 3;
|
|
align-self: end;
|
|
justify-self: left;
|
|
}
|
|
</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="23" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
|
<div data-offset-x="137" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="11" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
|
<div data-offset-x="111" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid RTL">
|
|
<div data-offset-x="173" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
|
<div data-offset-x="37" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="173" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
|
<div data-offset-x="11" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
|
</div>
|
|
|
|
<br><br>
|
|
|
|
<div class="grid verticalLR">
|
|
<div data-offset-x="11" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
|
|
<div data-offset-x="103" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="192" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
|
|
<div data-offset-x="193" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
|
</div>
|
|
|
|
<div class="grid verticalRL">
|
|
<div data-offset-x="223" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
|
|
<div data-offset-x="111" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
|
<div data-offset-x="42" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
|
|
<div data-offset-x="11" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
|
</div>
|
|
|
|
</body>
|