Bug 1623813 [wpt PR 22347] - css-grid: Use documents.font.ready() for tests with Ahem font., a=testonly
authorCarlos Alberto Lopez Perez <clopez@igalia.com>
Fri, 27 Mar 2020 20:42:55 +0000
changeset 521293 6ecf4cf5f694976506259cf0870c665099a692cd
parent 521292 3259346b3183723e08df97ebe15374f185075347
child 521294 401be49e000042c8161bbfc88ff20d8a493cb970
push id37269
push useraiakab@mozilla.com
push dateTue, 31 Mar 2020 22:58:23 +0000
treeherdermozilla-central@9af589864188 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1623813, 22347
milestone76.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-definite-sizes-001.html
testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html
testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html
testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-001.html
testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-line-001.html
testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-unknown-named-grid-line-001.html
testing/web-platform/tests/css/css-grid/abspos/grid-sizing-positioned-items-001.html
testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-create-implicit-tracks-001.html
testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-take-up-space-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-lr.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-content-vertical-rl.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-content.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-overflow.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch.html
testing/web-platform/tests/css/css-grid/alignment/grid-align-stretching-replaced-items.html
testing/web-platform/tests/css/css-grid/alignment/grid-align.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html
testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html
testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html
testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html
testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html
testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html
testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html
testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html
testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html
testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html
testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html
testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-001.html
testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html
testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html
testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html
testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html
testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html
testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html
--- 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
@@ -30,18 +30,21 @@
 .row2 {
   grid-row-start: 2;
   background-color: cyan;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <div class="grid">
   <div class="row1" data-expected-height="50"  data-expected-width="200">XXX X</div>
   <div class="row2" data-expected-height="150" data-expected-width="200">XX XXX XX</div>
 </div>
 
--- a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html
+++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html
@@ -109,17 +109,20 @@
 .offsetBottomMinus80 {
   bottom: -80px;
 }
 
 </style>
 <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>
 
 <div class="grid">
   <div class="sizedToGridArea absolute autoRowAutoColumn"
     data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="530">
   </div>
   <div class="sizedToGridArea absolute firstRowFirstColumn"
--- a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html
+++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html
@@ -31,17 +31,20 @@
 .absolute {
   position: absolute;
 }
 
 </style>
 <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>
 
 <div class="container relative">
   <div class="grid">
     <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div>
   </div>
 </div>
--- 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
@@ -27,18 +27,21 @@
 .absolute {
   position: absolute;
 }
 
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <div class="grid">
   <div class="sizedToGridArea absolute secondRowSecondColumn"
     data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230">
   </div>
   <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
--- a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-line-001.html
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-line-001.html
@@ -48,18 +48,21 @@
   grid-column: 1 / span 5;
   grid-row: 1 / span 8;
 }
 
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <div class="grid">
   <div class="absolute sizedToGridArea startImplicitLine"
     data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
   </div>
   <div class="absolute sizedToGridArea endImplicitLine"
--- a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-unknown-named-grid-line-001.html
+++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-unknown-named-grid-line-001.html
@@ -41,18 +41,21 @@
   grid-column: foo / bar;
   grid-row: foo / bar;
 }
 
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <div class="grid">
   <div class="absolute sizedToGridArea startAndEndUnknownLines"
     data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330">
   </div>
   <div class="absolute sizedToGridArea endUnknownLine"
--- 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
@@ -52,18 +52,21 @@
   grid-column-end: 3;
   grid-row-end: 3;
 }
 
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <div class="unconstrainedContainer">
   <div class="grid">
     <div class="absolute autoRowAutoColumn sizedToGridArea"
       data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-expected-height="1030">
     </div>
--- a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-create-implicit-tracks-001.html
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-create-implicit-tracks-001.html
@@ -26,18 +26,21 @@
   grid-column: 4;
   grid-row: 7;
 }
 
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <div class="grid">
   <div class="sizedToGridArea absolute seventhRowFourthColumn"
     data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="300">
   </div>
   <div class="autoRowAutoColumn"
--- a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-take-up-space-001.html
+++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-take-up-space-001.html
@@ -30,18 +30,21 @@
 .offsetLeft100 {
   left: 100px;
 }
 
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <p>Absolutely positioned:</p>
 
 <div class="grid">
   <div class="sizedToGridArea absolute autoRowAutoColumn"
     data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html
@@ -39,18 +39,21 @@
   	grid-row: 4;
 }
 
 </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="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>
 
 <div style="position: relative">
     <p>direction: LTR | align-content: 'space-between'</p>
     <div class="grid alignContentSpaceBetween verticalLR" data-expected-width="400" data-expected-height="300">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
         <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html
@@ -39,18 +39,21 @@
   	grid-row: 4;
 }
 
 </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="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>
 
 <div style="position: relative">
     <p>direction: LTR | align-content: 'space-between'</p>
     <div class="grid alignContentSpaceBetween verticalRL" data-expected-width="400" data-expected-height="300">
         <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
         <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="20" data-expected-width="40" data-expected-height="20"></div>
--- 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
@@ -34,18 +34,21 @@
   	grid-row: 4;
 }
 
 </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="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>
 
 <div style="position: relative">
     <p>direction: LTR | align-content: 'space-between'</p>
     <div class="grid alignContentSpaceBetween" data-expected-width="200" data-expected-height="300">
         <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
--- 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
@@ -26,18 +26,21 @@
     height: 40px;
 }
 
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div style="position: relative">
     <p>direction: LTR | align-content: 'center'</p>
     <div class="grid verticalLR alignContentCenter" data-expected-width="300" data-expected-height="200">
         <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
         <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
         <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
--- 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
@@ -26,18 +26,21 @@
     height: 40px;
 }
 
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div style="position: relative">
     <p>direction: LTR | align-content: 'center'</p>
     <div class="grid verticalRL alignContentCenter" data-expected-width="300" data-expected-height="200">
         <div class="cell firstRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
         <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
         <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
--- 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
@@ -31,18 +31,21 @@ body {
     width: 20px;
     height: 40px;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div style="position: relative">
     <p>direction: LTR | align-content: 'center'</p>
     <div class="grid alignContentCenter" data-expected-width="200" data-expected-height="300">
         <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
         <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
         <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div>
         <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-lr.html
@@ -28,18 +28,21 @@
     height: 40px;
     margin: 4px 8px 12px 16px;
 }
 </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="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>
 
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
     <div class="grid fit-content verticalLR" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding-vertical-rl.html
@@ -28,18 +28,21 @@
     height: 40px;
     margin: 4px 8px 12px 16px;
 }
 </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="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>
 
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
     <div class="grid fit-content verticalRL" data-expected-width="475" data-expected-height="350">
         <div class="cell firstRowFirstColumn"   data-offset-x="402" data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-margin-border-padding.html
@@ -27,18 +27,21 @@
     height: 40px;
     margin: 4px 8px 12px 16px;
 }
 </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="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>
 
 <div>
     <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8px 12px 16px<br>
         direction: LTR | align-items: 'auto' | justify-items: 'auto'</p>
     <div class="grid fit-content" data-expected-width="375" data-expected-height="450">
         <div class="cell firstRowFirstColumn"   data-offset-x="46"  data-offset-y="14"  data-expected-width="20" data-expected-height="40"></div>
--- 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
@@ -29,18 +29,21 @@
     width: 50px;
     height: 40px;
 }
 
 </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="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>
 
 <div style="position: relative">
     <div class="grid fit-content alignItemsCenter justifyItemsCenter" data-expected-width="300" data-expected-height="360">
         <div class="cellOverflowWidth  firstRowFirstColumn" data-offset-x="-15" data-offset-y="40" data-expected-width="180" data-expected-height="40"></div>
         <div class="cellWithNoOverflow secondRowFirstColumn" data-offset-x="50" data-offset-y="160" data-expected-width="50" data-expected-height="40"></div>
         <div class="cellWithNoOverflow thirdRowFirstColumn" data-offset-x="50" data-offset-y="280" data-expected-width="50" data-expected-height="40"></div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align-justify-stretch-with-orthogonal-flows.html
@@ -36,18 +36,21 @@
 .bottomAutoMargin { margin-bottom: auto; }
 .leftAutoMargin { margin-left: auto; }
 .rightAutoMargin { margin-right: auto; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that stretching alignment works as expected with orthogonal flows.</p>
 
 <p>HORIZONTAL vs VERTICAL-RL</p>
 <div class="container">
     <div class="grid fit-content" data-expected-width="200" data-expected-height="300">
         <div class="verticalRL firstRowFirstColumn selfStretch widthAndHeightSet" data-expected-width="20"  data-expected-height="40">XXX</div>
         <div class="verticalRL firstRowSecondColumn selfStretch onlyWidthSet" data-expected-width="20"  data-expected-height="150">XXX</div>
--- 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
@@ -34,18 +34,21 @@ body {
 .maxWidth { max-width: 90px; }
 .minWidth { min-width: 120px; }
 .minHeight { min-height: 220px; }
 </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="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">
         <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200"></div>
         <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div>
         <div class="onlyHeightSet alignSelfStretch justifySelfStart secondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="0" data-expected-height="40"></div>
     </div>
--- 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
@@ -24,18 +24,21 @@
 }
 .autoMargins {
    margin: auto;
 }
 </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="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>
 
     <div style="position: relative">
         <p>The blue image's original size is 100px x 100px, default alignment is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p>
         <div class="grid">
             <img src="/css/support/blue-100.png" data-expected-width="100" data-expected-height="100"/>
         </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-align.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-align.html
@@ -30,18 +30,21 @@
     height: 16px;
     background: black;
 }
 </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="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">
         <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
         <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
     </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-001.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-002.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-003.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-004.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-005.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-006.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-007.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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", 80);
   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>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-008.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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", 80);
   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>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-009.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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", 80);
   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>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-010.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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", 80);
   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>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-011.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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">
   <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-012.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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">
   <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-013.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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", 100);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-014.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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">
   <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-015.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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", 100);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-016.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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 = "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">
   <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-017.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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", 80);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-018.html
@@ -24,20 +24,21 @@
   align-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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", 80);
   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">
   <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-019.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 200);
   grid.style.justifyItems = "start";
   evaluateStyleChange(item, "after", "data-expected-width", 120);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-020.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 120);
   grid.style.justifyItems = "stretch";
   evaluateStyleChange(item, "after", "data-expected-width", 200);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-021.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 200);
   grid.style.alignItems = "normal";
   evaluateStyleChange(item, "after", "data-expected-width", 200);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-022.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 200);
   grid.style.justifyItems = "stretch";
   evaluateStyleChange(item, "after", "data-expected-width", 200);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-023.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 120);
   grid.style.justifyItems = "normal";
   evaluateStyleChange(item, "after", "data-expected-width", 200);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-024.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 200);
   grid.style.justifyItems = "start";
   evaluateStyleChange(item, "after", "data-expected-width", 120);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-025.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 120);
   grid.style.justifyItems = "stretch";
   evaluateStyleChange(item, "after", "data-expected-width", 80);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-026.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 80);
   grid.style.justifyItems = "start";
   evaluateStyleChange(item, "after", "data-expected-width", 120);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-027.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 120);
   grid.style.justifyItems = "normal";
   evaluateStyleChange(item, "after", "data-expected-width", 80);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-028.html
@@ -24,21 +24,22 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 80);
   grid.style.justifyItems = "start";
   evaluateStyleChange(item, "after", "data-expected-width", 120);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
 </div>
 </body>
 
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-029.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 200);
   grid.style.justifyItems = "start";
   evaluateStyleChange(item, "after", "data-expected-width", 100);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-030.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 100);
   grid.style.justifyItems = "stretch";
   evaluateStyleChange(item, "after", "data-expected-width", 200);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-031.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 200);
   grid.style.justifyItems = "normal";
   evaluateStyleChange(item, "after", "data-expected-width", 100);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-032.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 100);
   grid.style.justifyItems = "stretch";
   evaluateStyleChange(item, "after", "data-expected-width", 200);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-033.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 100);
   grid.style.justifyItems = "normal";
   evaluateStyleChange(item, "after", "data-expected-width", 100);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-034.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 100);
   grid.style.justifyItems = "start";
   evaluateStyleChange(item, "after", "data-expected-width", 100);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-035.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 100);
   grid.style.justifyItems = "stretch";
   evaluateStyleChange(item, "after", "data-expected-width", 80);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-implies-size-change-036.html
@@ -24,20 +24,21 @@
   justify-self: auto;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <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-width", 80);
   grid.style.justifyItems = "start";
   evaluateStyleChange(item, "after", "data-expected-width", 100);
   done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
 <div class="grid" id="grid">
   <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
 </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-005.html
@@ -31,16 +31,17 @@
   background: red;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <script src="support/style-change.js"></script>
 <script>
+setup({ explicit_done: true });
 function runTest() {
     let before = {
         item1: {"data-offset-y": 16 },
         item2: {"data-offset-y": 0  },
         item3: {"data-offset-y": 8  }
     }
 
     let after = {
@@ -50,16 +51,16 @@ function runTest() {
     }
 
     evaluateStyleChangeMultiple("before", before);
     item2.style.alignSelf = "end";
     evaluateStyleChangeMultiple("after", after);
     done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
     <div id="container">
         <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
         <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
         <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
     </div>
     <div id="log"></div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-006.html
@@ -32,16 +32,17 @@
   background: red;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <script src="support/style-change.js"></script>
 <script>
+setup({ explicit_done: true });
 function runTest() {
     let before = {
         item1: {"data-offset-y": 8  },
         item2: {"data-offset-y": 30 },
         item3: {"data-offset-y": 0  }
     }
 
     let after = {
@@ -51,16 +52,16 @@ function runTest() {
     }
 
     evaluateStyleChangeMultiple("before", before);
     item2.style.alignSelf = "baseline";
     evaluateStyleChangeMultiple("after", after);
     done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
     <div id="container">
         <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
         <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
         <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
     </div>
     <div id="log"></div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-007.html
@@ -33,16 +33,17 @@
   background: red;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <script src="support/style-change.js"></script>
 <script>
+setup({ explicit_done: true });
 function runTest() {
     let before = {
         item1: {"data-offset-x": 4 },
         item2: {"data-offset-x": 0 },
         item3: {"data-offset-x": 2 }
     }
 
     let after = {
@@ -52,16 +53,16 @@ function runTest() {
     }
 
     evaluateStyleChangeMultiple("before", before);
     item2.style.justifySelf = "end";
     evaluateStyleChangeMultiple("after", after);
     done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
     <div id="container">
         <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
         <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
         <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
     </div>
     <div id="log"></div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-alignment-style-changes-008.html
@@ -34,16 +34,17 @@
   background: red;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <script src="support/style-change.js"></script>
 <script>
+setup({ explicit_done: true });
 function runTest() {
     let before = {
         item1: {"data-offset-x": 2  },
         item2: {"data-offset-x": 30 },
         item3: {"data-offset-x": 0  }
     };
 
     let after = {
@@ -53,16 +54,16 @@ function runTest() {
     };
 
     evaluateStyleChangeMultiple("before", before);
     item2.style.justifySelf = "baseline";
     evaluateStyleChangeMultiple("after", after);
     done();
 }
 </script>
-<body onload="runTest()">
+<body onload="document.fonts.ready.then(() => { runTest(); })">
     <div id="container">
         <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
         <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
         <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
     </div>
     <div id="log"></div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
@@ -30,16 +30,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1"></div>
     <div id="item2"></div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "75");
     item2.setAttribute("data-offset-y", "300");
     checkLayout('#grid', false);
 
     grid.style.height = "300px";
 
     item1.setAttribute("data-offset-y", "35");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
@@ -30,16 +30,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1"></div>
     <div id="item2"></div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "75");
     item2.setAttribute("data-offset-y", "300");
     checkLayout('#grid', false);
 
     item1.style.height = "100px";
 
     item1.setAttribute("data-offset-y", "50");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
@@ -31,16 +31,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1"></div>
     <div id="item2"></div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "75");
     item2.setAttribute("data-offset-y", "300");
     checkLayout('#grid', false);
 
     item1.style.height = "100px";
 
     item1.setAttribute("data-offset-y", "50");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
@@ -31,16 +31,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1"></div>
     <div id="item2"></div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "75");
     item2.setAttribute("data-offset-y", "300");
     checkLayout('#grid', false);
 
     grid.style.height = "300px";
 
     item1.setAttribute("data-offset-y", "35");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
@@ -29,16 +29,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1">XXXXX</div>
     <div id="item2">XXXXX</div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "90");
     item2.setAttribute("data-offset-y", "345");
     checkLayout('#grid', false);
 
     item2.style.fontSize = "40px";
 
     item1.setAttribute("data-offset-y", "90");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
@@ -29,16 +29,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1">XXXXX</div>
     <div id="item2">XXXXX</div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "95");
     item2.setAttribute("data-offset-y", "345");
     checkLayout('#grid', false);
 
     grid.style.fontSize = "40px";
 
     item1.setAttribute("data-offset-y", "80");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
@@ -30,16 +30,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1"></div>
     <div id="item2"></div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-y", "75");
     item2.setAttribute("data-offset-y", "300");
     checkLayout('#grid', false);
 
     grid.style.height = "300px";
 
     item1.setAttribute("data-offset-y", "35");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: start;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: end;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: left;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: right;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: center;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="70"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="60"  data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: flex-start;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: flex-end;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: self-start;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: self-end;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html
@@ -49,17 +49,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: self-start;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html
@@ -49,17 +49,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: self-end;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html
@@ -52,17 +52,20 @@
   grid-row: auto / auto;
   grid-column: 2 / 3;
   align-self: start;
 }
 </style>
 <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 class="grid LTR">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html
@@ -52,17 +52,20 @@
   grid-row: auto / auto;
   grid-column: 2 / 3;
   align-self: end;
 }
 </style>
 <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 class="grid LTR">
   <div data-offset-x="0"   data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html
@@ -52,17 +52,20 @@
   grid-row: auto / auto;
   grid-column: 2 / 3;
   align-self: center;
 }
 </style>
 <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 class="grid LTR">
   <div data-offset-x="0"   data-offset-y="45"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html
@@ -52,17 +52,20 @@
   grid-row: auto / auto;
   grid-column: 2 / 3;
   align-self: self-start;
 }
 </style>
 <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 class="grid LTR">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="250" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html
@@ -52,17 +52,20 @@
   grid-row: auto / auto;
   grid-column: 2 / 3;
   align-self: self-end;
 }
 </style>
 <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 class="grid LTR">
   <div data-offset-x="0"   data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="440" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   align-self: baseline;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html
@@ -26,17 +26,20 @@
 .width300 { width: 300px; }
 
 .paddingLeft { padding-left: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <pre>Horizontal grid and verticalRL item</pre>
 
 <div class="grid width300 alignItemsBaseline">
   <div class="firstRowFirstColumn verticalRL" data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
   <div class="firstRowSecondColumn bigFont"   data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
   <div class="autoRowAutoColumnSpanning2 height25"></div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html
@@ -29,17 +29,20 @@
 
 .fixedHeight { height: 125px; }
 .fixedWidth  { width: 125px; }
 
 </style>
 <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'); })">
 
 <pre>Horizontal grid and item with fixed height</pre>
 
 <div class="grid width300 alignItemsBaseline">
   <div class="firstRowFirstColumn fixedHeight"  data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
   <div class="firstRowSecondColumn bigFont"     data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
   <div class="autoRowAutoColumnSpanning2 height25"></div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html
@@ -31,17 +31,20 @@
 
 .relativeHeight { height: 50%; }
 .relativeWidth  { width: 50%; }
 
 </style>
 <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'); })">
 
 <pre>Horizontal grid and item with relative height</pre>
 
 <div class="grid width300 alignItemsBaseline">
   <div class="firstRowFirstColumn relativeHeight"  data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
   <div class="firstRowSecondColumn bigFont"        data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
   <div class="autoRowAutoColumnSpanning2 height25"></div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html
@@ -29,17 +29,20 @@
 .paddingRight { padding-right: 20px; }
 
 .fixedHeight { height: 125px; }
 .fixedWidth  { width: 125px; }
 </style>
 <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'); })">
 
 <pre>Horizontal grid and item with fixed height</pre>
 
 <div class="grid width300 alignItemsBaseline">
   <div class="firstRowFirstColumn fixedHeight" data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="125"></div>
   <div class="firstRowSecondColumn bigFont"    data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
   <div class="autoRowAutoColumnSpanning2 height25"></div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-001.html
@@ -18,18 +18,21 @@
   font: 25px/1 Ahem;
   margin: 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="checkLayout('.grid');">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <div class="grid">
   <div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX X</div>
 </div>
 
 <div class="grid contentStretch">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-content-alignment-second-pass-002.html
@@ -18,18 +18,21 @@
   display: inline-grid;
   grid: 50% / 70%;
 }
 </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="checkLayout('.grid');">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <div class="grid" data-expected-width="100" data-expected-height="40">
   <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="20">XXX X</div>
 </div>
 
 <div class="grid contentStretch" data-expected-width="100" data-expected-height="40">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-fit-content-tracks-dont-stretch-001.html
@@ -34,18 +34,21 @@
 .placeContentStart {
   place-content: start;
 }
 </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="checkLayout('.grid');">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h1>1) place-content: normal</h1>
 
 <h2>1.2) Unconstrained grid container</h2>
 
 <div class="grid" data-expected-width="400" data-expected-height="200">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-gutters-and-alignment.html
@@ -82,18 +82,21 @@ div.gridWithPaddingBorder > div.cell {
     margin-bottom: 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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <!-- Check that gutters do not interfere with self alignment computation. -->
 <div class="container">
     <div class="grid grid100And200 fit-content alignItemsCenter gridRowColumnGaps" data-expected-width="220" data-expected-height="415">
         <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell firstRowSecondColumn" data-offset-x="120" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="215" data-expected-width="20" data-expected-height="40"></div>
         <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x="120" data-offset-y="375" data-expected-width="20" data-expected-height="40"></div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-001.html
@@ -30,16 +30,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1"></div>
     <div id="item2"></div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "75");
     item2.setAttribute("data-offset-x", "300");
     checkLayout('#grid', false);
 
     grid.style.width = "300px";
 
     item1.setAttribute("data-offset-x", "35");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-002.html
@@ -30,16 +30,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1"></div>
     <div id="item2"></div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "75");
     item2.setAttribute("data-offset-x", "300");
     checkLayout('#grid', false);
 
     item1.style.width = "100px";
 
     item1.setAttribute("data-offset-x", "50");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-003.html
@@ -31,16 +31,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1"></div>
     <div id="item2"></div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "75");
     item2.setAttribute("data-offset-x", "300");
     checkLayout('#grid', false);
 
     item1.style.width = "100px";
 
     item1.setAttribute("data-offset-x", "50");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-004.html
@@ -31,16 +31,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1"></div>
     <div id="item2"></div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "75");
     item2.setAttribute("data-offset-x", "300");
     checkLayout('#grid', false);
 
     grid.style.width = "300px";
 
     item1.setAttribute("data-offset-x", "35");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-005.html
@@ -31,16 +31,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1">XXXXX</div>
     <div id="item2">XXXXX</div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "50");
     item2.setAttribute("data-offset-x", "325");
     checkLayout('#grid', false);
 
     item2.style.fontSize = "30px";
 
     item1.setAttribute("data-offset-x", "50");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-006.html
@@ -30,16 +30,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1">XXXX</div>
     <div id="item2">XX</div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "80");
     item2.setAttribute("data-offset-x", "340");
     checkLayout('#grid', false);
 
     grid.style.fontSize = "25px";
 
     item1.setAttribute("data-offset-x", "50");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-inline-axis-alignment-auto-margins-007.html
@@ -30,16 +30,17 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <div id="grid">
     <div id="item1"></div>
     <div id="item2"></div>
 </div>
 <script>
+setup({ explicit_done: true });
 document.fonts.ready.then(() => {
     item1.setAttribute("data-offset-x", "75");
     item2.setAttribute("data-offset-x", "300");
     checkLayout('#grid', false);
 
     grid.style.width = "300px";
 
     item1.setAttribute("data-offset-x", "35");
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
@@ -24,18 +24,21 @@
    width: 50px;
    height: 20px;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that grid items alignment works as expected with VERTICAL-LR vs HORIZONTAL-TB orthogonal flows.</p>
 
 <p>Direction: LTR vs LTR</p>
 <div class="container">
     <div class="grid fit-content verticalLR directionLTR">
         <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="100" data-offset-y="80">end</div>
         <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="140">center</div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
@@ -24,18 +24,21 @@
    width: 50px;
    height: 20px;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that grid items alignment works as expected with VERTICAL-RL vs HORIZONTAL-TB orthogonal flows.</p>
 
 <p>Direction: LTR vs LTR</p>
 <div class="container">
     <div class="grid fit-content verticalRL directionLTR">
         <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="300" data-offset-y="80">end</div>
         <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="350" data-offset-y="140">center</div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html
@@ -24,18 +24,21 @@
    width: 20px;
    height: 50px;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that grid items alignment works as expected with HORIZONTAL-TB vs VERTICAL-RL orthogonal flows.</p>
 
 <p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-RL</p>
 <p>Direction: LTR vs LTR</p>
 <div class="container">
     <div class="grid fit-content directionLTR">
         <div class="item firstRowFirstColumn   verticalRL selfEnd"       data-offset-x="80"   data-offset-y="100">end</div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-lr.html
@@ -28,18 +28,21 @@
 .autoMarginBottom { margin-bottom: auto; }
 .autoMarginLeft { margin-left: auto; }
 .autoMargin { margin: auto; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p>
 
 <p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
     <div class="grid fit-content verticalLR itemsCenter">
         <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment-vertical-rl.html
@@ -28,18 +28,21 @@
 .autoMarginBottom { margin-bottom: auto; }
 .autoMarginLeft { margin-left: auto; }
 .autoMargin { margin: auto; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p>
 
 <p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
     <div class="grid fit-content verticalRL itemsCenter">
         <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="290" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="200" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-item-auto-margins-alignment.html
@@ -28,18 +28,21 @@
 .autoMarginBottom { margin-bottom: auto; }
 .autoMarginLeft { margin-left: auto; }
 .autoMargin { margin: auto; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <p>This test checks that align-self and justify-self properties are not applied when there is auto-margin in the corresponding axis. Instead, auto-margin alignment should be applied.</p>
 
 <p>Direction: LTR | Self Alignment: center | fixed size items | 1 auto-margin</p>
 <div style="position: relative">
     <div class="grid fit-content itemsCenter">
         <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="40" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
         <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="100" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: start;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: end;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: left;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: right;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: center;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="20"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="140" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="20"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="145" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: flex-start;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: flex-end;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: self-start;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: self-end;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html
@@ -49,17 +49,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: self-start;
 }
 </style>
 <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 class="grid LTR">
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
   <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
   <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html
@@ -49,17 +49,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: self-end;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html
@@ -52,17 +52,20 @@
   grid-row: 2 / 3;
   grid-column: 1 / 2;
   justify-self: start;
 }
 </style>
 <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 class="grid LTR">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="200" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html
@@ -52,17 +52,20 @@
   grid-row: 2 / 3;
   grid-column: 1 / 2;
   justify-self: end;
 }
 </style>
 <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 class="grid LTR">
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="380" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html
@@ -52,17 +52,20 @@
   grid-row: 2 / 3;
   grid-column: 1 / 2;
   justify-self: center;
 }
 </style>
 <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 class="grid LTR">
   <div data-offset-x="20"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="290" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="120" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html
@@ -52,17 +52,20 @@
   grid-row: 2 / 3;
   grid-column: 1 / 2;
   justify-self: self-start;
 }
 </style>
 <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 class="grid LTR">
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
   <div data-offset-x="380" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
   <div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html
@@ -52,17 +52,20 @@
   grid-row: 2 / 3;
   grid-column: 1 / 2;
   justify-self: self-end;
 }
 </style>
 <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 class="grid LTR">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
   <div data-offset-x="200" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html
@@ -48,17 +48,20 @@
   grid-row: 2 / 3;
   grid-column: 2 / 3;
   justify-self: baseline;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html
@@ -27,17 +27,20 @@
 .width300 { width: 300px; }
 
 .paddingLeft { padding-left: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <pre>Horizontal grid and verticalRL item</pre>
 
 <div class="grid width300 justifyItemsBaseline">
   <div class="firstRowFirstColumn"                                   data-offset-x="60" data-offset-y="0"   data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
   <div class="secondRowFirstColumn bigFont paddingRight verticalRL"  data-offset-x="0"  data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
   <div class="autoRowSpanning2AutoColumn width25"></div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html
@@ -30,17 +30,20 @@
 .paddingRight { padding-right: 20px; }
 
 .fixedHeight { height: 125px; }
 .fixedWidth  { width: 125px; }
 </style>
 <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'); })">
 
 <pre>Horizontal grid and verticalLR item with fixed width</pre>
 
 <div class="grid width300 justifyItemsBaseline">
   <div class="firstRowFirstColumn fixedWidth"                       data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
   <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
   <div class="autoRowSpanning2AutoColumn width25"></div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html
@@ -30,17 +30,20 @@
 .paddingRight { padding-right: 20px; }
 
 .relativeHeight { height: 50%; }
 .relativeWidth  { width: 50%; }
 </style>
 <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'); })">
 
 <pre>Horizontal grid and verticalLR item with relative width</pre>
 
 <div class="grid width300 justifyItemsBaseline">
   <div class="firstRowFirstColumn relativeWidth"                    data-offset-x="30" data-offset-y="0"   data-expected-width="100" data-expected-height="100"></div>
   <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
   <div class="autoRowSpanning2AutoColumn width25"></div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html
@@ -30,17 +30,20 @@
 .paddingRight { padding-right: 20px; }
 
 .fixedHeight { height: 125px; }
 .fixedWidth  { width: 125px; }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
-<body onload="checkLayout('.inline-grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
 
 <pre>Horizontal grid and verticalLR item with relative width</pre>
 
 <div class="inline-grid justifyItemsBaseline" data-expected-width="180" data-expected-height="300">
   <div class="firstRowFirstColumn fixedWidth"                       data-offset-x="30" data-offset-y="0"   data-expected-width="125" data-expected-height="100"></div>
   <div class="secondRowFirstColumn bigFont paddingLeft verticalLR"  data-offset-x="0"  data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
   <div class="autoRowSpanning2AutoColumn width25"></div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-001.html
@@ -55,17 +55,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<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="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="170" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="105" data-offset-y="160" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-002.html
@@ -57,17 +57,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<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="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="160" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">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">X XX X</div>
   <div data-offset-x="125" data-offset-y="165" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-003.html
@@ -61,17 +61,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<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="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="140" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">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">X XX X</div>
   <div data-offset-x="105" data-offset-y="160" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-004.html
@@ -57,17 +57,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<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="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="140" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">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">X XX X</div>
   <div data-offset-x="105" data-offset-y="160" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-005.html
@@ -63,17 +63,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid">
   <div data-offset-x="13"  data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="150" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="8"   data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="113" data-offset-y="162" 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">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-006.html
@@ -71,17 +71,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid">
   <div data-offset-x="16"  data-offset-y="3"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="153" 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="163" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="116" data-offset-y="163" 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">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-007.html
@@ -56,17 +56,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<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="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
   <div data-offset-x="210" data-offset-y="80"  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="0"   data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
   <div data-offset-x="105" data-offset-y="160" 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">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-008.html
@@ -58,17 +58,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<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="210" 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">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-009.html
@@ -62,17 +62,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <!-- The test cases with vertical-rl wirting-mode will fail becauuse of bug 779105 -->
 <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>
 
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-010.html
@@ -58,17 +58,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <!-- The test cases with vertical-rl wirting-mode will fail becauuse of bug 779105 -->
 <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>
 
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-011.html
@@ -64,17 +64,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <!-- The test cases with vertical-rl wirting-mode will fail becauuse of bug 779105 -->
 <div class="grid">
   <div data-offset-x="13"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
   <div data-offset-x="180" data-offset-y="60"  data-expected-width="46" data-expected-height="80" 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="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
   <div data-offset-x="105" data-offset-y="160" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-non-static-positioned-items-012.html
@@ -68,17 +68,20 @@
   grid-column: 2 / 3;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <!-- The test cases with vertical-rl wirting-mode will fail becauuse of bug 779105 -->
 <div class="grid">
   <div data-offset-x="70"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
   <div data-offset-x="154" data-offset-y="64"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="20"  data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
   <div data-offset-x="108" data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-001.html
@@ -52,17 +52,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid">
   <div data-offset-x="30"  data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="145" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="20"  data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="120" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-002.html
@@ -56,17 +56,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid">
   <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="125" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-003.html
@@ -52,17 +52,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid">
   <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="125" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-004.html
@@ -58,17 +58,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid">
   <div data-offset-x="20"  data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="134" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="8"   data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="108" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="rid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-005.html
@@ -66,17 +66,20 @@
   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>
-<body onload="checkLayout('.grid')">
+<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">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-006.html
@@ -54,17 +54,20 @@
   grid-column: 2 / 3;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid">
   <div data-offset-x="80"  data-offset-y="5"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
   <div data-offset-x="165" 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="30"  data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
   <div data-offset-x="120" data-offset-y="155" 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">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-007.html
@@ -58,17 +58,20 @@
   grid-column: 2 / 3;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid">
   <div data-offset-x="60"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
   <div data-offset-x="145" 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="10"  data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" 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">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-008.html
@@ -54,17 +54,20 @@
   grid-column: 2 / 3;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid">
   <div data-offset-x="60"  data-offset-y="0"   data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
   <div data-offset-x="145" 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="10"  data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" 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">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-009.html
@@ -60,17 +60,20 @@
   grid-column: 2 / 3;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid">
   <div data-offset-x="70"  data-offset-y="2"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
   <div data-offset-x="154" data-offset-y="64"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="20"  data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
   <div data-offset-x="108" data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-010.html
@@ -68,17 +68,20 @@
   grid-column: 2 / 3;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid">
   <div data-offset-x="73"  data-offset-y="3"   data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
   <div data-offset-x="157" data-offset-y="65"  data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="23"  data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
   <div data-offset-x="111" data-offset-y="153" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-011.html
@@ -55,17 +55,20 @@
   grid-column: 1 / 2;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid LTR">
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="290" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-012.html
@@ -57,17 +57,20 @@
   grid-column: 1 / 2;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid LTR">
   <div data-offset-x="30"  data-offset-y="5"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="295" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="20"  data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="120" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-013.html
@@ -61,17 +61,20 @@
   grid-column: 1 / 2;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid LTR">
   <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="275" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-014.html
@@ -57,17 +57,20 @@
   grid-column: 1 / 2;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid LTR">
   <div data-offset-x="10"  data-offset-y="0"   data-expected-width="90"  data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="275" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="185" data-expected-width="90"  data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="190" data-expected-width="90"  data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
 
 <div class="grid RTL">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-015.html
@@ -63,17 +63,20 @@
   grid-column: 1 / 2;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid LTR">
   <div data-offset-x="20"  data-offset-y="2"   data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="284" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
   <div data-offset-x="8"   data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="108" data-offset-y="194" 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">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-positioned-items-with-margin-border-padding-016.html
@@ -71,17 +71,20 @@
   grid-column: 1 / 2;
   align-self: 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>
-<body onload="checkLayout('.grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 <div class="grid LTR">
   <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="289" 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="8"   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">
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-001.html
@@ -45,15 +45,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-002.html
@@ -49,15 +49,18 @@
   align-self: stretch;
   margin-right: 20px;
   margin-bottom: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="90"  data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90"  class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-003.html
@@ -50,15 +50,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 20px 10px 0px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-004.html
@@ -49,15 +49,18 @@
   align-self: stretch;
   padding-right: 20px;
   padding-bottom: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-005.html
@@ -46,15 +46,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-006.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   margin-right: 20px;
   margin-bottom: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="90"  data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90"  class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-007.html
@@ -51,15 +51,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 20px 10px 0px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-008.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   padding-right: 20px;
   padding-bottom: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-009.html
@@ -45,15 +45,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="125" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="125" data-offset-y="0"   data-expected-width="80"  data-expected-height="125" class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="125" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-010.html
@@ -49,15 +49,18 @@
   align-self: stretch;
   margin-right: 20px;
   margin-bottom: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="110" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="110" class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-011.html
@@ -50,15 +50,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 20px 10px 0px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-012.html
@@ -49,15 +49,18 @@
   align-self: stretch;
   padding-right: 20px;
   padding-bottom: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-013.html
@@ -46,15 +46,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="125" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="125" data-offset-y="0"   data-expected-width="20"  data-expected-height="125" class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="125" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-014.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   margin-right: 20px;
   margin-bottom: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="110" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="110" class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-015.html
@@ -51,15 +51,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 20px 10px 0px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-016.html
@@ -49,15 +49,18 @@
   align-self: stretch;
   padding-right: 20px;
   padding-bottom: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-001.html
@@ -46,15 +46,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-002.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   margin-bottom: 20px;
   margin-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="130" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="150" data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-003.html
@@ -51,15 +51,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 10px 20px 0px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-004.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   padding-bottom: 20px;
   padding-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="150" data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-005.html
@@ -47,15 +47,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-006.html
@@ -51,15 +51,18 @@
   align-self: stretch;
   margin-bottom: 20px;
   margin-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="130" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="150" data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-007.html
@@ -52,15 +52,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 10px 20px 0px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-008.html
@@ -51,15 +51,18 @@
   align-self: stretch;
   padding-bottom: 20px;
   padding-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="150" data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-009.html
@@ -46,15 +46,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="125" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-010.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   margin-bottom: 20px;
   margin-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="120" data-expected-width="110" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="00"  data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-011.html
@@ -51,15 +51,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 10px 20px 0px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-012.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   padding-bottom: 20px;
   padding-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-013.html
@@ -47,15 +47,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="125" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-014.html
@@ -51,15 +51,18 @@
   align-self: stretch;
   margin-bottom: 20px;
   margin-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="120" data-expected-width="110" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-015.html
@@ -52,15 +52,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 10px 20px 0px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-lr-016.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   padding-bottom: 20px;
   padding-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="0"   data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="130" data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-001.html
@@ -46,15 +46,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-002.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   margin-bottom: 20px;
   margin-left: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="120" data-offset-y="100" data-expected-width="130" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="10"  data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-003.html
@@ -51,15 +51,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 0px 20px 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-004.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   padding-bottom: 20px;
   padding-left: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="240" data-offset-y="0"   data-expected-width="10"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="60"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-005.html
@@ -47,15 +47,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-006.html
@@ -51,15 +51,18 @@
   align-self: stretch;
   margin-bottom: 20px;
   margin-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="90"  class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="100" data-expected-width="130" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="90"  data-expected-height="130" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-007.html
@@ -52,15 +52,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 10px 20px 0px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-008.html
@@ -51,15 +51,18 @@
   align-self: stretch;
   padding-bottom: 20px;
   padding-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="190" data-offset-y="0"   data-expected-width="60"  data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
   <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40"  class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
   <div data-offset-x="0"   data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-009.html
@@ -46,15 +46,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="105" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-010.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   margin-bottom: 20px;
   margin-left: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="140" data-offset-y="120" data-expected-width="110" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="100" data-offset-y="00"  data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="10"  data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-011.html
@@ -51,15 +51,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 0px 20px 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-012.html
@@ -50,15 +50,18 @@
   align-self: stretch;
   padding-bottom: 20px;
   padding-left: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="230" data-offset-y="0"   data-expected-width="20"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="80"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="100" data-offset-y="0"   data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-013.html
@@ -47,15 +47,18 @@
   background: red;
   justify-self: stretch;
   align-self: stretch;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="125" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="45"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-014.html
@@ -51,15 +51,18 @@
   align-self: stretch;
   margin-bottom: 20px;
   margin-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="110" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="120" data-expected-width="110" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="120" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-015.html
@@ -52,15 +52,18 @@
   justify-self: stretch;
   align-self: stretch;
   border-width: 0px 10px 20px 0px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-alignment-stretch-vertical-rl-016.html
@@ -51,15 +51,18 @@
   align-self: stretch;
   padding-bottom: 20px;
   padding-right: 10px;
 }
 </style>
 <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 class="grid">
   <div data-offset-x="170" data-offset-y="0"   data-expected-width="80"  data-expected-height="120" class="firstRowFirstColumn">XX X</div>
   <div data-offset-x="120" data-offset-y="120" data-expected-width="130" data-expected-height="20"  class="firstRowSecondColumn">XX X</div>
   <div data-offset-x="40"  data-offset-y="0"   data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
   <div data-offset-x="0"   data-offset-y="120" data-expected-width="120" data-expected-height="130" class="secondRowSecondColumn">XX X</div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html
@@ -44,17 +44,20 @@
 .width200  { width: 200px; }
 
 .height200Percent { height: 200%; }
 .width200Percent  { width: 200%; }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
-<body onload="checkLayout('.inline-grid')">
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })">
 
 <div style="height: 125px">
     <pre>auto-sized rows - items with relative height</pre>
     <div class="inline-grid alignItemsBaseline columns">
         <div class="firstRowFirstColumn height50"          data-offset-x="0"   data-offset-y="0"  data-expected-width="100" data-expected-height="50"></div>
         <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="100"></div>
         <div class="autoRowAutoColumnSpanning2 height25"   data-offset-x="0"   data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
     </div>
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html
@@ -46,17 +46,20 @@
 .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>
-<body onload="checkLayout('.inline-grid')">
+<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>
 
--- a/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
+++ b/testing/web-platform/tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-003.html
@@ -38,17 +38,20 @@
 }
 .height50 { height: 50px; }
 .relativeHeight { height: 50%; }
 .relativeWidth  { width: 50%; }
 </style>
 <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'); })">
 
 <pre>flex rows - column-axis baseline - the blue orthogonal item didn't participate in the first iteration</pre>
 <div class="grid row alignItemsBaseline">
   <div class="item1 verticalLR" data-offset-x="0"   data-offset-y="34" data-expected-width="50"  data-expected-height="30">É</div>
   <div class="item2"            data-offset-x="50"  data-offset-y="48" data-expected-width="50"  data-expected-height="20">É</div>
   <div class="item3"            data-offset-x="100" data-offset-y="0"  data-expected-width="100" data-expected-height="80">É</div>
 </div>
 
--- a/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html
@@ -20,16 +20,17 @@
 .verticalLR {
   writing-mode: vertical-lr;
 }
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/resources/check-layout-th.js"></script>
 <script>
+setup({ explicit_done: true });
 function setGridTemplate(id, gridTemplateRows, gridTemplateColumns)
 {
   var gridElement = document.getElementById(id);
   gridElement.style.gridTemplateRows = gridTemplateRows;
   gridElement.style.gridTemplateColumns = gridTemplateColumns;
 }
 
 function testGridItemDefinitions(gridItemData)
@@ -55,19 +56,19 @@ function testChangingGridDefinitions()
   setGridTemplate("grid2", "fit-content(100px)", "none");
   testGridItemDefinitions({"id": "item2", "width": "100", "height": "100", "x": "0", "y": "0" });
 
   setGridTemplate("grid2", "fit-content(150px)", "none");
   testGridItemDefinitions({"id": "item2", "width": "75", "height": "150", "x": "0", "y": "0" });
 
   done();
 }
-
-window.addEventListener("load", testChangingGridDefinitions, false);
 </script>
 
+<body onload="document.fonts.ready.then(() => { testChangingGridDefinitions(); })">
 <div id="grid1" class="grid">
   <div id="item1" class="autoRowAutoColumn">XXXX XXX XX X X</div>
 </div>
 
 <div id="grid2" class="grid">
   <div id="item2" class="autoRowAutoColumn verticalLR">XXXX XXX XX X X</div>
 </div>
+</body>
--- a/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
@@ -21,17 +21,20 @@
 
 .padding {
   padding: 5px;
 }
 </style>
 <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>
 
 <p>grid-template-rows: 60%;</p>
 
 <div class="grid" style="grid-template-rows: 60%;" data-expected-height="0">
   <div class="firstRowFirstColumn" data-expected-height="0"></div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html
@@ -14,17 +14,20 @@
   position: relative;
   font: 25px/1 Ahem;
   margin: 50px 0;
 }
 </style>
 <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>
 
 <div class="grid" style="grid-template-rows: auto 60% auto;" data-expected-height="35">
   <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="5" data-offset-top="0"></div>
   <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="25" data-offset-top="0">X</div>
   <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="5" data-offset-top="20"></div>
 </div>
--- a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-002.html
+++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-002.html
@@ -20,47 +20,51 @@
 
 <div id="grid">
   <div>GRID ITEM</div>
 </div>
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script>
+setup({explicit_done: true});
 var {style} = document.getElementById("grid");
 
 function testGridTemplateColumnsRows(assignedValue, expectedValue = assignedValue) {
   test(function() {
       style.gridTemplateColumns = assignedValue;
       style.gridTemplateRows = assignedValue;
       assert_equals(style.gridTemplateColumns, expectedValue, "gridTemplateColumns");
       assert_equals(style.gridTemplateRows, expectedValue, "gridTemplateRows");
   }, `grid-template-columns: ${assignedValue}; and grid-template-rows: ${assignedValue};`);
 }
 
-// Valid values.
-testGridTemplateColumnsRows("repeat(1, auto)");
-testGridTemplateColumnsRows("repeat(2, auto)");
-testGridTemplateColumnsRows("repeat(2, minmax(50px, calc(50% + 50px)))");
-testGridTemplateColumnsRows("repeat(5, 10%)");
-testGridTemplateColumnsRows("max-content repeat(2, 25%) 1fr");
-testGridTemplateColumnsRows("repeat(2, min-content 50px)");
-testGridTemplateColumnsRows("repeat(2, [a] minmax(50px, 100px) [b] 25em [c])");
-testGridTemplateColumnsRows("[a] repeat(2, auto [b] 100px) [c]");
-testGridTemplateColumnsRows("[a] auto repeat(2, [b] 100px) [c]");
-testGridTemplateColumnsRows("[a] repeat(2, auto [b]) 100px [c]");
-testGridTemplateColumnsRows("[a] repeat(2, [b] 100px)");
-testGridTemplateColumnsRows("[a] repeat(2, [b] auto [c]) [d]");
-testGridTemplateColumnsRows("[a] min-content repeat(2, [b] 1fr [c] calc(10% + 20px)) [d] minmax(30em, 50em) [e]");
+document.fonts.ready.then(() => {
+  // Valid values.
+  testGridTemplateColumnsRows("repeat(1, auto)");
+  testGridTemplateColumnsRows("repeat(2, auto)");
+  testGridTemplateColumnsRows("repeat(2, minmax(50px, calc(50% + 50px)))");
+  testGridTemplateColumnsRows("repeat(5, 10%)");
+  testGridTemplateColumnsRows("max-content repeat(2, 25%) 1fr");
+  testGridTemplateColumnsRows("repeat(2, min-content 50px)");
+  testGridTemplateColumnsRows("repeat(2, [a] minmax(50px, 100px) [b] 25em [c])");
+  testGridTemplateColumnsRows("[a] repeat(2, auto [b] 100px) [c]");
+  testGridTemplateColumnsRows("[a] auto repeat(2, [b] 100px) [c]");
+  testGridTemplateColumnsRows("[a] repeat(2, auto [b]) 100px [c]");
+  testGridTemplateColumnsRows("[a] repeat(2, [b] 100px)");
+  testGridTemplateColumnsRows("[a] repeat(2, [b] auto [c]) [d]");
+  testGridTemplateColumnsRows("[a] min-content repeat(2, [b] 1fr [c] calc(10% + 20px)) [d] minmax(30em, 50em) [e]");
 
-// Reset values.
-style.gridTemplateColumns = "";
-style.gridTemplateRows = "";
+  // Reset values.
+  style.gridTemplateColumns = "";
+  style.gridTemplateRows = "";
 
-// Wrong values.
-testGridTemplateColumnsRows("repeat(-1, auto)", "");
-testGridTemplateColumnsRows("repeat(auto, 2)", "");
-testGridTemplateColumnsRows("repeat 2, auto", "");
-testGridTemplateColumnsRows("repeat(2 auto)", "");
-testGridTemplateColumnsRows("100px (repeat 2, auto)", "");
-testGridTemplateColumnsRows("repeat(2, 50px repeat(2, 100px))", "");
-testGridTemplateColumnsRows("100px repeat(2, [a])", "");
+  // Wrong values.
+  testGridTemplateColumnsRows("repeat(-1, auto)", "");
+  testGridTemplateColumnsRows("repeat(auto, 2)", "");
+  testGridTemplateColumnsRows("repeat 2, auto", "");
+  testGridTemplateColumnsRows("repeat(2 auto)", "");
+  testGridTemplateColumnsRows("100px (repeat 2, auto)", "");
+  testGridTemplateColumnsRows("repeat(2, 50px repeat(2, 100px))", "");
+  testGridTemplateColumnsRows("100px repeat(2, [a])", "");
+  done();
+});
 </script>
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-001.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-001.html
@@ -25,18 +25,21 @@
 .marginLeft50Percent { margin-left: 50%; }
 .marginRight50Percent { margin-right: 50%; }
 .marginTop50Percent { margin-top: 50%; }
 .marginBottom50Percent { margin-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item margin-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-002.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-002.html
@@ -25,18 +25,21 @@
 .marginLeft50Percent { margin-left: 50%; }
 .marginRight50Percent { margin-right: 50%; }
 .marginTop50Percent { margin-top: 50%; }
 .marginBottom50Percent { margin-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item margin-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html
@@ -26,18 +26,21 @@
 .marginLeft50Percent { margin-left: 50%; }
 .marginRight50Percent { margin-right: 50%; }
 .marginTop50Percent { margin-top: 50%; }
 .marginBottom50Percent { margin-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item margin-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html
@@ -26,18 +26,21 @@
 .marginLeft50Percent { margin-left: 50%; }
 .marginRight50Percent { margin-right: 50%; }
 .marginTop50Percent { margin-top: 50%; }
 .marginBottom50Percent { margin-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item margin-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html
@@ -26,18 +26,21 @@
 .marginLeft50Percent { margin-left: 50%; }
 .marginRight50Percent { margin-right: 50%; }
 .marginTop50Percent { margin-top: 50%; }
 .marginBottom50Percent { margin-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item margin-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html
@@ -26,18 +26,21 @@
 .marginLeft50Percent { margin-left: 50%; }
 .marginRight50Percent { margin-right: 50%; }
 .marginTop50Percent { margin-top: 50%; }
 .marginBottom50Percent { margin-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item margin-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-001.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-001.html
@@ -25,18 +25,21 @@
 .paddingLeft50Percent { padding-left: 50%; }
 .paddingRight50Percent { padding-right: 50%; }
 .paddingTop50Percent { padding-top: 50%; }
 .paddingBottom50Percent { padding-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item padding-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-002.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-002.html
@@ -25,18 +25,21 @@
 .paddingLeft50Percent { padding-left: 50%; }
 .paddingRight50Percent { padding-right: 50%; }
 .paddingTop50Percent { padding-top: 50%; }
 .paddingBottom50Percent { padding-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item padding-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html
@@ -26,18 +26,21 @@
 .paddingLeft50Percent { padding-left: 50%; }
 .paddingRight50Percent { padding-right: 50%; }
 .paddingTop50Percent { padding-top: 50%; }
 .paddingBottom50Percent { padding-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item padding-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html
@@ -26,18 +26,21 @@
 .paddingLeft50Percent { padding-left: 50%; }
 .paddingRight50Percent { padding-right: 50%; }
 .paddingTop50Percent { padding-top: 50%; }
 .paddingBottom50Percent { padding-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item padding-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html
@@ -26,18 +26,21 @@
 .paddingLeft50Percent { padding-left: 50%; }
 .paddingRight50Percent { padding-right: 50%; }
 .paddingTop50Percent { padding-top: 50%; }
 .paddingBottom50Percent { padding-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item padding-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html
@@ -26,18 +26,21 @@
 .paddingLeft50Percent { padding-left: 50%; }
 .paddingRight50Percent { padding-right: 50%; }
 .paddingTop50Percent { padding-top: 50%; }
 .paddingBottom50Percent { padding-bottom: 50%; }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>Direction LTR</h3>
 
 <pre>Item padding-left: 50%;</pre>
 
 <div class="grid">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-021.html
@@ -65,17 +65,16 @@
       }, imgId + ".width");
     test(
       function() {
         assert_equals(imgStyle.height, imgHeight);
       }, imgId + ".height");
   }
 
   setup({ explicit_done: true });
-  window.addEventListener("load", runTests);
 
   function runTests() {
     checkGridSizeTracksAndImageSize("grid-1", "img-1", "200px", "200px", "200px", "200px", "200px", "200px");
     checkGridSizeTracksAndImageSize("grid-2", "img-2", "10px", "10px", "200px", "200px", "200px", "200px");
     checkGridSizeTracksAndImageSize("grid-3", "img-3", "200px", "200px", "200px", "200px", "200px", "200px");
     checkGridSizeTracksAndImageSize("grid-4", "img-4", "200px", "10px", "200px", "200px", "200px", "200px");
     checkGridSizeTracksAndImageSize("grid-5", "img-5", "200px", "50px", "50px", "50px", "50px", "50px");
     checkGridSizeTracksAndImageSize("grid-6", "img-6", "200px", "10px", "50px", "50px", "50px", "50px");
@@ -97,16 +96,17 @@
     checkGridSizeTracksAndImageSize("grid-22", "img-22", "200px", "10px", "200px", "200px 25px", "200px", "200px");
     checkGridSizeTracksAndImageSize("grid-23", "img-23", "200px", "225px", "200px", "200px 25px", "200px", "200px");
     checkGridSizeTracksAndImageSize("grid-24", "img-24", "200px", "10px", "200px", "200px 25px", "200px", "200px");
 
     done();
   }
 </script>
 
+<body onload="document.fonts.ready.then(() => { runTests(); })">
 <div id=log></div>
 
 <!-- Grids with only a 50x50 image as grid item. -->
 
 <div id="grid-1" class="grid">
   <img id="img-1" class="width200px" src="support/50x50-green.png">
 </div>
 
@@ -214,8 +214,9 @@
   <img id="img-23" class="width100percent" src="support/500x500-green.png">
   <div>ITEM</div>
 </div>
 
 <div id="grid-24" class="grid grid2rows width200px constrainedGrid justifyContentStart">
   <img id="img-24" class="width100percent" src="support/500x500-green.png">
   <div>ITEM</div>
 </div>
+</body>
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-022.html
@@ -22,18 +22,21 @@
 
 .grid > div:nth-child(2) {
   background: magenta;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <pre>grid-template-columns: auto;</pre>
 
 <div class="grid" style="grid-template-columns: auto;">
   <div data-expected-width="100">XXXXXXXXXX</div>
   <div data-expected-width="100"></div>
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-023.html
@@ -23,18 +23,21 @@
 
 .grid > div:nth-child(2) {
   background: magenta;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>item writing-mode: vertical-lr;</h3>
 
 <pre>grid-template-rows: auto;</pre>
 
 <div class="grid" style="grid-template-rows: auto;">
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-024.html
@@ -26,18 +26,21 @@
 
 .grid > div:nth-child(2) {
   background: magenta;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <pre>grid-template-columns: auto auto;</pre>
 
 <div class="grid" style="grid-template-columns: auto auto;">
   <div data-expected-width="100">XXXXXXXXXX</div>
   <div data-expected-width="100"></div>
--- a/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html
+++ b/testing/web-platform/tests/css/css-grid/grid-items/grid-minimum-size-grid-items-025.html
@@ -27,18 +27,21 @@
 
 .grid > div:nth-child(2) {
   background: magenta;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
 
 <div id="log"></div>
 
 <h3>item writing-mode: vertical-lr;</h3>
 
 <pre>grid-template-rows: auto auto;</pre>
 
 <div class="grid" style="grid-template-rows: auto auto;">
--- a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-001.html
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-001.html
@@ -21,14 +21,17 @@
 .item {
   grid-column: span 2;
   background: green;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
     <div class="grid justifyContentSpaceBetween" data-expected-width="200" data-expected-height="40">
         <div class="item" data-expected-width="200" data-expected-height="40">XXX XX X XX X XXX</div>
     </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html
@@ -22,17 +22,20 @@
   grid-row: span 2;
   background: green;
   writing-mode: vertical-lr;
 }
 </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>
 
 <!-- Heuristic for estimating row-size for orthogonal items should
 also consider Content Alignment, so that grid container width is 40px.
 https://github.com/w3c/csswg-drafts/issues/2697 -->
-<body onload="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
     <div class="grid justifyContentStart alignContentSpaceBetween" data-expected-width="80" data-expected-height="200">
         <div class="item" data-expected-width="40" data-expected-height="200">XXX XX X XX X XXX</div>
     </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html
@@ -26,15 +26,18 @@
   background: blue;
   grid-column: 1;
   grid-row: 2;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
     <div class="grid justifyContentSpaceAround" data-expected-width="200" data-expected-height="60">
         <div class="item1" data-expected-width="100" data-expected-height="40">XXXX XXX</div>
         <div class="item2" data-expected-width="100" data-expected-height="20">XXX</div>
     </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html
@@ -26,15 +26,18 @@
   background: blue;
   grid-column: 2;
   grid-row: 1;
 }
 </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="checkLayout('.grid')">
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
     <div class="grid justifyContentSpaceBetween" data-expected-width="220" data-expected-height="40">
         <div class="item1" data-expected-width="110" data-expected-height="40">XXXX XXX</div>
         <div class="item2" data-expected-width="60" data-expected-height="40">XXX</div>
     </div>
 </body>
--- a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html
@@ -28,17 +28,20 @@
 .grid div:nth-child(1) { background: magenta; }
 .grid div:nth-child(2) { background: cyan; }
 .grid div:nth-child(3) { background: yellow; }
 .grid div:nth-child(4) { background: lime; }
 </style>
 <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>
 
 <div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;">
   <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
   <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div>
   <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div>
   <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div>
--- a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html
@@ -15,17 +15,20 @@
   margin: 50px;
 }
 
 .grid div:nth-child(1) { background: magenta; }
 </style>
 <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>
 
 <div class="grid" style="grid: 50px 1fr / 100px 1fr;">
   <div style="grid-column: span 2;"
     data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">X</div>
 </div>
 
--- a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html
+++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html
@@ -21,17 +21,20 @@
 .minmax-auto-100 { grid: minmax(auto, 100px) / auto; }
 .minmax-100-auto { grid: minmax(100px, auto) / auto; }
 .minmax-100-fitcontent { grid: minmax(100px, fit-content) / auto; }
 .minmax-100-1fr { grid: minmax(100px, 1fr) / auto; }
 </style>
 <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'); })">
 
 <pre>rows: auto</pre>
 
 <div class="grid" data-expected-width="25" data-expected-height="150">
     <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div>
 </div>
 
 <pre>rows: minmax(100px, 200px)</pre>