mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 21:58:41 +02:00
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
231 lines
20 KiB
HTML
231 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</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/#alignment">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
|
|
<link rel="stylesheet" href="/css/support/grid.css">
|
|
<link rel="stylesheet" href="../../support/alignment.css">
|
|
<meta name="assert" content="Grid items orthogonal to the Baseline Context along the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<style>
|
|
.inline-grid {
|
|
position: relative;
|
|
border: solid;
|
|
text-orientation: sideways;
|
|
font-family: Ahem;
|
|
}
|
|
|
|
.columns { grid-template-columns: 100px 100px; }
|
|
.rows { grid-template-rows: 100px 100px; }
|
|
|
|
.min-content-columns { grid-template-columns: min-content; }
|
|
.max-content-columns { grid-template-columns: max-content; }
|
|
.fit-content-columns { grid-template-columns: fit-content; }
|
|
.flex-columns { grid-template-columns: 1fr; }
|
|
.max-flex-columns { grid-template-columns: minmax(0px, 1fr); }
|
|
|
|
.min-content-rows { grid-template-rows: min-content; }
|
|
.max-content-rows { grid-template-rows: max-content; }
|
|
.fit-content-rows { grid-template-rows: fit-content; }
|
|
.flex-rows { grid-template-rows: 1fr; }
|
|
.max-flex-rows { grid-template-rows: minmax(0px, 1fr); }
|
|
|
|
.height25 { height: 25px; }
|
|
.height50 { height: 50px; }
|
|
.height200 { height: 200px; }
|
|
.width25 { width: 25px; }
|
|
.width50 { width: 50px; }
|
|
.width200 { width: 200px; }
|
|
|
|
.bigFont { font-size: 50px; }
|
|
.paddingLeft { padding-left: 25px; }
|
|
.paddingBottom { padding-bottom: 25px; }
|
|
.paddingRight { padding-right: 25px; }
|
|
</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('.inline-grid'); })">
|
|
|
|
<pre>auto-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
|
|
<div class="inline-grid alignItemsBaseline columns height200">
|
|
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
|
|
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="175">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="175" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
|
|
<pre>min-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
|
|
<div class="inline-grid alignItemsBaseline columns min-content-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
|
|
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="75" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
|
|
<pre>max-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
|
|
<div class="inline-grid alignItemsBaseline columns max-content-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
|
|
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
|
|
<pre>fit-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
|
|
<div class="inline-grid alignItemsBaseline columns fit-content-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
|
|
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
|
|
<pre>flex-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
|
|
<div class="inline-grid alignItemsBaseline columns flex-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
|
|
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
|
|
<pre>max-flex-sized rows - horizonal grid and verticalLR item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
|
|
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
|
|
<div class="inline-grid alignItemsBaseline columns max-flex-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="376" data-expected-width="100" data-expected-height="75">É</div>
|
|
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
|
|
</div>
|
|
|
|
<pre>auto-sized columns - horizontal grid item - row-axis baseline</pre>
|
|
<div class="inline-grid justifyItemsBaseline rows width200">
|
|
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>min-content-sized columns - horizontal grid item - row-axis baseline</pre>
|
|
<div class="inline-grid justifyItemsBaseline rows min-content-columns">
|
|
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>max-content-sized columns - horizontal grid item - row-axis baseline</pre>
|
|
<div class="inline-grid justifyItemsBaseline rows max-content-columns">
|
|
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>fit-content-sized columns - horizontal grid item - row-axis baseline</pre>
|
|
<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
|
|
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>flex-sized columns - horizontal grid item - row-axis baseline</pre>
|
|
<div class="inline-grid justifyItemsBaseline rows flex-columns">
|
|
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>max-flex-sized columns - horizontal grid item - row-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
|
|
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
|
|
<div class="inline-grid justifyItemsBaseline rows max-flex-columns">
|
|
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>auto-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
|
|
<div class="inline-grid verticalLR alignItemsBaseline columns width200">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>min-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
|
|
<div class="inline-grid verticalLR alignItemsBaseline columns min-content-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>max-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
|
|
<div class="inline-grid verticalLR alignItemsBaseline columns max-content-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>fit-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
|
|
<div class="inline-grid verticalLR alignItemsBaseline columns fit-content-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>flex-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
|
|
<div class="inline-grid verticalLR alignItemsBaseline columns flex-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>max-flex-sized rows - verticalLR grid and horizontal item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
|
|
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
|
|
<div class="inline-grid verticalLR alignItemsBaseline columns max-flex-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
|
<div class="inline-grid verticalRL alignItemsBaseline columns width200">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>min-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
|
<div class="inline-grid verticalRL alignItemsBaseline columns min-content-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="25" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>max-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
|
<div class="inline-grid verticalRL alignItemsBaseline columns max-content-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>fit-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
|
<div class="inline-grid verticalRL alignItemsBaseline columns fit-content-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
|
|
<div class="inline-grid verticalRL alignItemsBaseline columns flex-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
<pre>max-flex-sized rows - verticalRL grid and horizontal item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre>
|
|
<!-- https://github.com/w3c/csswg-drafts/issues/3046 -->
|
|
<div class="inline-grid verticalRL alignItemsBaseline columns max-flex-rows">
|
|
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
|
|
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
|
|
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
|
|
</div>
|
|
|
|
</body>
|