Bug 1623813 [wpt PR 22347] - css-grid: Use documents.font.ready() for…

… tests with Ahem font., a=testonly 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 UltraBlame original commit: 6ecf4cf5f694976506259cf0870c665099a692cd
marco-c · Apr 1, 2020 · de5a20b · de5a20b
1 parent a7ed5cb
commit de5a20b
Show file tree

Hide file tree

Showing 236 changed files with 844 additions and 247 deletions.
diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-definite-sizes-001.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-definite-sizes-001.html
@@ -35,8 +35,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 

diff --git a/...m/tests/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html b/...m/tests/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html
@@ -114,7 +114,10 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 

diff --git a/...eb-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html b/...eb-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html
@@ -36,7 +36,10 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
-<body onload="checkLayout('.container')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.container'); })">
 
 <div id="log"></div>
 

diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-001.html
@@ -32,8 +32,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 

diff --git a/.../web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-line-001.html b/.../web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-line-001.html
@@ -53,8 +53,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 

diff --git a/...platform/tests/css/css-grid/abspos/grid-positioned-items-unknown-named-grid-line-001.html b/...platform/tests/css/css-grid/abspos/grid-positioned-items-unknown-named-grid-line-001.html
@@ -46,8 +46,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 

diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-sizing-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-sizing-positioned-items-001.html
@@ -57,8 +57,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 

diff --git a/...ests/css/css-grid/abspos/positioned-grid-items-should-not-create-implicit-tracks-001.html b/...ests/css/css-grid/abspos/positioned-grid-items-should-not-create-implicit-tracks-001.html
@@ -31,8 +31,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 

diff --git a/...latform/tests/css/css-grid/abspos/positioned-grid-items-should-not-take-up-space-001.html b/...latform/tests/css/css-grid/abspos/positioned-grid-items-should-not-take-up-space-001.html
@@ -35,8 +35,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 

diff --git a/...eb-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html b/...eb-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html
@@ -44,8 +44,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that the align-content property is applied correctly when using content-distribution values in vertical-lr writing mode.</p>
 

diff --git a/...eb-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html b/...eb-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html
@@ -44,8 +44,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that the align-content property is applied correctly when using content-distribution values for vertical-rl mode.</p>
 

diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html
@@ -39,8 +39,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that the align-content property is applied correctly when using content-distribution values.</p>
 

diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html
@@ -31,8 +31,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div style="position: relative">
     <p>direction: LTR | align-content: 'center'</p>

diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html
@@ -31,8 +31,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div style="position: relative">
     <p>direction: LTR | align-content: 'center'</p>

diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html
@@ -36,8 +36,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div style="position: relative">
     <p>direction: LTR | align-content: 'center'</p>

diff --git a/...rm/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html b/...rm/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html
@@ -33,8 +33,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-LR grids.</p>
 

diff --git a/...rm/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html b/...rm/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html
@@ -33,8 +33,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties on vertical-RL grids.</p>
 

diff --git a/...g/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html b/...g/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html
@@ -32,8 +32,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that the 'margin', 'border' and 'padding' properties are applied together correctly for 'align' and 'justify' properties.</p>
 

diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html
@@ -34,8 +34,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.</p>
 

diff --git a/...atform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html b/...atform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html
@@ -41,8 +41,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that stretching alignment works as expected with orthogonal flows.</p>
 

diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html
@@ -39,8 +39,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div style="position: relative">
     <div class="grid fit-content" data-expected-width="200" data-expected-height="400">

diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html
@@ -29,8 +29,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
     <p>This test checks that the alignment properties align-self and justify-self apply the 'stretch' value correctly on replaced elements.</p>
 

diff --git a/testing/web-platform/tests/css/css-grid/alignment/grid-align.html b/testing/web-platform/tests/css/css-grid/alignment/grid-align.html
@@ -35,8 +35,11 @@
 <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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div style="position: relative">
     <div class="grid fit-content" data-expected-width="200" data-expected-height="400">

diff --git a/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html b/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html
@@ -29,14 +29,15 @@
 <script src="/resources/check-layout-th.js"></script>
 <script src="support/style-change.js"></script>
 <script>
+setup({ explicit_done: true });
 function runTest() {
   evaluateStyleChange(item, "before", "data-expected-height", 200);
   grid.style.alignItems = "start";
   evaluateStyleChange(item, "after", "data-expected-height", 100);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>

diff --git a/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html b/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html
@@ -29,14 +29,15 @@
 <script src="/resources/check-layout-th.js"></script>
 <script src="support/style-change.js"></script>
 <script>
+setup({ explicit_done: true });
 function runTest() {
   evaluateStyleChange(item, "before", "data-expected-height", 100);
   grid.style.alignItems = "stretch";
   evaluateStyleChange(item, "after", "data-expected-height", 200);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>

diff --git a/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html b/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html
@@ -29,14 +29,15 @@
 <script src="/resources/check-layout-th.js"></script>
 <script src="support/style-change.js"></script>
 <script>
+setup({ explicit_done: true });
 function runTest() {
   evaluateStyleChange(item, "before", "data-expected-height", 200);
   grid.style.alignItems = "normal";
   evaluateStyleChange(item, "after", "data-expected-height", 200);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>

diff --git a/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html b/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html
@@ -29,14 +29,15 @@
 <script src="/resources/check-layout-th.js"></script>
 <script src="support/style-change.js"></script>
 <script>
+setup({ explicit_done: true });
 function runTest() {
   evaluateStyleChange(item, "before", "data-expected-height", 200);
   grid.style.alignItems = "stretch";
   evaluateStyleChange(item, "after", "data-expected-height", 200);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>

diff --git a/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html b/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html
@@ -29,14 +29,15 @@
 <script src="/resources/check-layout-th.js"></script>
 <script src="support/style-change.js"></script>
 <script>
+setup({ explicit_done: true });
 function runTest() {
   evaluateStyleChange(item, "before", "data-expected-height", 100);
   grid.style.alignItems = "normal";
   evaluateStyleChange(item, "after", "data-expected-height", 200);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>

diff --git a/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html b/...ing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html
@@ -29,14 +29,15 @@
 <script src="/resources/check-layout-th.js"></script>
 <script src="support/style-change.js"></script>
 <script>
+setup({ explicit_done: true });
 function runTest() {
   evaluateStyleChange(item, "before", "data-expected-height", 200);
   grid.style.alignItems = "start";
   evaluateStyleChange(item, "after", "data-expected-height", 100);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>