From 6d6070242b835334fe195b1e980ae72658af05cc Mon Sep 17 00:00:00 2001
From: Servo WPT Sync <32481905+servo-wpt-sync@users.noreply.github.com>
Date: Sun, 16 Feb 2025 02:35:48 +0100
Subject: [PATCH] Update web-platform-tests to revision
 b'de61904887c13679551c32e5e3e70b4dc870c98a' (#35480)

Signed-off-by: WPT Sync Bot <ghbot+wpt-sync@servo.org>
---
 ...tition-navigation.tentative.https.html.ini |    2 +
 ...n-worker-creation.tentative.https.html.ini |    2 +
 .../cross-partition.tentative.https.html.ini  |    2 +
 .../margin-collapsing-dynamic.html.ini        |    2 +
 .../parsing/corner-shape-computed.html.ini    |   33 +
 .../parsing/corner-shape-valid.html.ini       |   24 +
 .../css/css-overflow/clip-006.html.ini        |    2 +
 .../css/css-overflow/clip-007.html.ini        |    2 +
 .../overflow-clip-margin-002.html.ini         |    2 +
 .../overflow-no-interpolation.html.ini        |   24 -
 .../overflow-clip-margin-computed.html.ini    |    6 -
 .../parsing/overflow-clip-margin.html.ini     |    3 -
 .../parsing/overflow-computed.html.ini        |   36 -
 .../parsing/overflow-valid.html.ini           |   12 -
 ...he-check-pseudo-element.tentative.html.ini |    2 +
 ...ct-arrow-pseudo-element.tentative.html.ini |    2 +
 .../stretch/block-height-1.html.ini           |    2 -
 .../stretch/block-height-2.html.ini           |    2 -
 ...teractivity-inert-focus.tentative.html.ini |    2 -
 .../interactivity-computed.tentative.html.ini |    2 -
 .../parsing/interactivity.tentative.html.ini  |    2 -
 ...llWidthHeight-negative-margin-001.html.ini |    3 +
 ...llWidthHeight-negative-margin-002.html.ini |  108 +
 .../element-internals-shadowroot.html.ini     |    6 -
 .../custom-element-move-reactions.html.ini    |    6 +
 .../observable-constructor.any.js.ini         |   18 +
 .../tentative/observable-from.any.js.ini      |   12 +
 .../quota.tentative.https.window.js.ini       |    2 -
 .../css-font-face.sub.tentative.html.ini      |    9 +-
 .../navigating-across-documents/008.html.ini  |    0
 .../navigating-across-documents/009.html.ini  |    3 -
 .../iframe-nosrc.html.ini                     |    6 -
 .../replace-before-load/a-click.html.ini      |    3 +
 .../getContextAttributes.html.ini             |    6 +
 ...ret-position-edge-cases.tentative.html.ini |    2 -
 ...re.caret-position-edges.tentative.html.ini |    2 -
 ....measure.caret-position.tentative.html.ini |    2 -
 ...ret-position-edge-cases.tentative.html.ini |    2 -
 ...osition-edge-cases.tentative.worker.js.ini |    2 -
 ...re.caret-position-edges.tentative.html.ini |    2 -
 ...ret-position-edges.tentative.worker.js.ini |    2 -
 ....measure.caret-position.tentative.html.ini |    2 -
 .../autofocus-dialog.html.ini                 |    3 +-
 ...-alignment-and-overflow.tentative.html.ini |   23 +-
 .../input-type-button-clip.html.ini           |    2 +
 ...rame-loading-lazy-nav-window-open.html.ini |    3 +
 ...rame_sandbox_popups_nonescaping-1.html.ini |    2 +-
 ...rame_sandbox_popups_nonescaping-2.html.ini |    2 +-
 ...rame_sandbox_popups_nonescaping-3.html.ini |    2 +-
 ...ct-value-selectedOption.tentative.html.ini |    2 -
 .../toggle-events.tentative.html.ini          |    2 +
 .../invokers/idlharness.tentative.html.ini    |    2 -
 ...terestelement-interface.tentative.html.ini |    2 -
 ...invokeelement-interface.tentative.html.ini |    2 -
 ...ype-reset-popovertarget.tentative.html.ini |    2 +
 .../popover-css-properties.tentative.html.ini |    2 -
 ...opover-types-with-hints.tentative.html.ini |    2 +
 .../fully_active_document.window.js.ini       |    2 -
 .../test-navigation-type-reload.html.ini      |    9 +
 .../constructor-basic.https.html.ini          |    9 +
 .../constructor-invalid.https.html.ini        |    3 +
 .../constructor-non-secure.html.ini           |    3 +
 .../fetch-url-resolve.https.window.js.ini     |    7 +
 ...tions-across-processes.https.window.js.ini |    2 +
 .../global-teardown-crash.html.ini            |    2 +
 .../notifications/historical.any.js.ini       |    8 +
 .../notifications/idlharness.https.any.js.ini |  353 ++
 .../instance.https.window.js.ini              |    2 +
 .../notifications/permission.html.ini         |    3 +
 .../permissions-non-secure.html.ini           |   10 +
 ...gistration-association.https.window.js.ini |    4 +
 ...ion-without-permission.https.window.js.ini |    4 +
 .../shownotification.https.window.js.ini      |    2 +
 .../notifications/tag.https.html.ini          |    4 +
 .../worker-gc.https.window.js.ini             |    4 +
 .../tentative/detached-frame.html.ini         |    2 +
 .../include-frames-originA-A-A.html.ini       |    2 +
 .../include-frames-originA-A.html.ini         |    2 +
 .../include-frames-originA-AA.html.ini        |    2 +
 .../include-frames-originA-AB.html.ini        |    2 +
 .../include-frames-originA-B-A.html.ini       |    2 +
 .../include-frames-originA-B-B.html.ini       |    2 +
 .../include-frames-originA-B.html.ini         |    2 +
 .../performance-entry-source.html.ini         |    2 +
 .../with-filter-options-originA.html.ini      |    2 +
 .../tentative/fetch.any.js.ini                |   26 -
 .../tentative/script.window.js.ini            |    8 -
 .../js-string/basic.tentative.any.js.ini      |   37 +-
 .../js-string/constants.tentative.any.js.ini  |  271 +-
 .../js-string/imports.tentative.any.js.ini    |   41 +-
 tests/wpt/meta/MANIFEST.json                  | 4246 +++++++++++++----
 .../mix-blend-mode-video-sibling.html.ini     |    2 -
 .../parsing/corner-shape-computed.html.ini    |   33 +
 .../parsing/corner-shape-valid.html.ini       |   24 +
 ...-computed-contrast-color-function.html.ini |   30 +
 ...lor-valid-contrast-color-function.html.ini |   30 +
 ...content-alignment-with-abspos-001.html.ini |    3 +
 ...tomatic-minimum-for-auto-rows-001.html.ini |    9 +
 .../css-mixins/dashed-function-eval.html.ini  |    1 +
 .../css-mixins/function-conditionals.html.ini |   27 +
 .../function-container-dynamic.html.ini       |    3 +
 .../function-container-self.html.ini          |    3 +
 .../function-container-style.html.ini         |    6 +
 .../margin-block-end-scroll-area-001.html.ini |    2 -
 .../scroll-marker-group-018.html.ini          |    2 +
 .../scroll-marker-group-019.html.ini          |    2 +
 .../scroll-marker-group-020.html.ini          |    2 +
 ...table-cell-overflow-auto-scrolled.html.ini |    2 -
 .../css/css-values/if-invalidation.html.ini   |    3 +
 .../css/css-values/if-style-query.html.ini    |   27 +
 .../custom-element-move-reactions.html.ini    |    6 +
 .../observable-constructor.any.js.ini         |   18 +
 .../tentative/observable-from.any.js.ini      |   12 +
 .../dom/xslt/encoding-single-chunk.html.ini   |    2 +
 ...css-font-face.https.sub.tentative.html.ini |    3 +
 ...tion-unload-cross-origin.sub.window.js.ini |    3 -
 ...ation-unload-same-origin-fragment.html.ini |    3 -
 .../replace-before-load/a-click.html.ini      |    3 +
 ...ml.ini => traverse_the_history_3.html.ini} |    2 +-
 ...color.type.u8p3.to.u8srgb.to.u8p3.html.ini |    3 +
 ...lor.type.u8srgb.to.u8p3.to.u8srgb.html.ini |    3 +
 .../getContextAttributes.html.ini             |    6 +
 ...color.type.u8p3.to.u8srgb.to.u8p3.html.ini |    3 +
 ....type.u8p3.to.u8srgb.to.u8p3.worker.js.ini |    3 +
 ...lor.type.u8srgb.to.u8p3.to.u8srgb.html.ini |    3 +
 ...ype.u8srgb.to.u8p3.to.u8srgb.worker.js.ini |    3 +
 .../getContextAttributes.html.ini             |    6 +
 .../option-label-whitespace.html.ini          |    2 +
 .../iframe_sandbox_popups_escaping-1.html.ini |    2 +-
 ...rame_sandbox_popups_nonescaping-1.html.ini |    2 +-
 ...mit-iframe-then-location-navigate.html.ini |    3 -
 .../button-type-popovertarget.html.ini        |   46 +
 .../button-type-reset-popovertarget.html.ini  |    3 -
 .../input-type-popovertarget.html.ini         |   37 +
 .../button-type-behavior.tentative.html.ini   |   55 +
 .../button-type-reflection.tentative.html.ini |   27 +
 .../interface.tentative.html.ini              |    9 +
 .../test-navigation-type-reload.html.ini      |    6 +
 ...ation-id-detached-frame.tentative.html.ini |    4 +
 ...lightRegistry-highlightsFromPoint.html.ini |    9 +
 .../signatures/tentative/csp.window.js.ini    |    6 +
 .../signatures/tentative/script.window.js.ini |    3 +
 .../wasm/jsapi/js-string/basic.any.js.ini     |    5 +
 .../js-string/basic.tentative.any.js.ini      |   26 -
 ...tative.any.js.ini => constants.any.js.ini} |   26 +-
 .../wasm/jsapi/js-string/imports.any.js.ini   |    8 +
 .../js-string/imports.tentative.any.js.ini    |   30 -
 tests/wpt/tests/.taskcluster.yml              |    2 +-
 .../cross-partition-navigation.https.html     |   24 +-
 .../idbcursor-continue-exception-order.any.js |   88 +
 .../idbcursor-continue-exception-order.htm    |   81 -
 .../tests/IndexedDB/idbcursor-continue.any.js |  233 +
 .../tests/IndexedDB/idbcursor-continue.htm    |  248 -
 ...-continuePrimaryKey-exception-order.any.js |  332 ++
 ...sor-continuePrimaryKey-exception-order.htm |  380 --
 ...ursor-continuePrimaryKey-exceptions.any.js |  107 +
 ...dbcursor-continuePrimaryKey-exceptions.htm |  107 -
 .../idbcursor-continuePrimaryKey.any.js       |  199 +
 .../idbcursor-continuePrimaryKey.htm          |  134 -
 .../idbcursor-delete-exception-order.any.js   |   72 +
 .../idbcursor-delete-exception-order.htm      |   76 -
 .../idbcursor-iterating-update.any.js         |   57 +
 .../IndexedDB/idbcursor-iterating-update.htm  |   58 -
 .../wpt/tests/IndexedDB/idbcursor-key.any.js  |   43 +
 tests/wpt/tests/IndexedDB/idbcursor-key.htm   |   57 -
 .../IndexedDB/idbcursor-primarykey.any.js     |   51 +
 .../tests/IndexedDB/idbcursor-primarykey.htm  |   61 -
 .../IndexedDB/idbcursor-request-source.any.js |   26 +
 .../IndexedDB/idbcursor-request-source.html   |   31 -
 .../tests/IndexedDB/idbcursor-reused.any.js   |   68 +
 .../wpt/tests/IndexedDB/idbcursor-reused.htm  |   69 -
 .../tests/IndexedDB/idbcursor-source.any.js   |   63 +
 .../wpt/tests/IndexedDB/idbcursor-source.htm  |   66 -
 .../idbcursor-update-exception-order.any.js   |  104 +
 .../idbcursor-update-exception-order.htm      |   98 -
 ...e-createObjectStore-exception-order.any.js |   88 +
 ...base-createObjectStore-exception-order.htm |   84 -
 ...e-deleteObjectStore-exception-order.any.js |   46 +
 ...base-deleteObjectStore-exception-order.htm |   45 -
 ...atabase-transaction-exception-order.any.js |   62 +
 ...bdatabase-transaction-exception-order.html |   68 -
 .../tests/IndexedDB/idbdatabase_close.any.js  |   74 +
 .../wpt/tests/IndexedDB/idbdatabase_close.htm |   44 -
 .../tests/IndexedDB/idbdatabase_close2.htm    |   39 -
 .../IndexedDB/idbtransaction_abort.any.js     |   74 +-
 ...ranslator_translate.tentative.https.any.js |   57 +-
 .../clear-cache-partitioning.sub.https.html   |   56 +-
 .../common/dispatcher/remote-executor.html    |    5 +-
 .../content-security-policy/resources/ran.js  |    1 +
 .../script-allowed-meta.https.html            |   14 +
 .../script-blocked-meta.https.html            |   13 +
 .../require-sri-for/script.https.html         |  164 +
 .../ancestor-chain-cross-site-embed.html      |    2 +-
 ...cross-site-frame-with-sandboxed-embed.html |   24 +
 .../resources/same-site-none-embed.html       |   17 +
 ...te-none-cookies-value.tentative.https.html |   41 +
 .../parsing/corner-shape-computed.html        |   13 +
 .../parsing/corner-shape-invalid.html         |    3 +
 .../tentative/parsing/corner-shape-valid.html |    9 +
 ...olor-computed-contrast-color-function.html |   51 +
 ...color-invalid-contrast-color-function.html |   37 +
 .../color-valid-contrast-color-function.html  |   49 +
 .../flexbox_justifycontent-stretch.html       |    9 +
 .../italic-oblique-fallback-ref.html          |   38 +
 .../css-fonts/italic-oblique-fallback.html    |   82 +
 .../at-font-face-font-matching.html           |   23 +-
 ...d-automatic-minimum-for-auto-rows-001.html |    4 +-
 ...HighlightRegistry-highlightsFromPoint.html |   83 +
 .../gradient/gradient-longer-hue-lch-001.html |    1 +
 .../gradient/gradient-longer-hue-lch-002.html |    1 +
 .../gradient/gradient-longer-hue-lch-006.html |    1 +
 .../css/css-inline/empty-span-scroll-ref.html |   25 +
 .../css/css-inline/empty-span-scroll.html     |   38 +
 .../css/css-mixins/dashed-function-eval.html  |   11 +
 .../css/css-mixins/function-conditionals.html |  182 +-
 .../function-container-dynamic.html           |   58 +
 .../css-mixins/function-container-self.html   |   43 +
 .../css-mixins/function-container-style.html  |   62 +
 .../tests/css/css-mixins/resources/utils.js   |   15 +-
 ...verflow-clip-margin-border-radius-ref.html |    1 +
 .../overflow-clip-margin-border-radius.html   |    1 +
 .../css-overflow/overflow-shorthand-002.html  |    2 +-
 .../scroll-marker-activation-scroll.html      |   85 +
 .../css-overflow/scroll-marker-group-018.html |   43 +
 .../css-overflow/scroll-marker-group-019.html |   43 +
 .../css-overflow/scroll-marker-group-020.html |   36 +
 .../scroll-marker-navigation-cycles.html      |   67 +
 .../scroll-marker-next-focus.html             |   90 +
 .../registered-property-parse-crash.html      |    7 +
 .../css-pseudo/highlight-painting-001.html    |    1 -
 .../highlight-painting-002-ref.html           |    2 +-
 .../css-pseudo/highlight-painting-002.html    |    2 +-
 ...highlight-painting-shadows-horizontal.html |    2 +-
 .../highlight-painting-shadows-vertical.html  |    2 +-
 .../target-text-shadow-vertical.html          |    1 -
 .../text-shadow/basic-negcoord.html           |    1 -
 .../text-shadow/basic-opacity.html            |    1 -
 .../css/css-text-decor/text-shadow/basic.html |    1 -
 .../text-shadow/color-inherit.html            |    1 -
 .../text-shadow/multiple-noblur.html          |    1 -
 .../text-shadow/standards-decor-noblur-2.html |    2 +-
 .../text-shadow/svg-fill-none.html            |    1 -
 .../text-shadow/svg-stroke-dasharray.html     |    1 -
 .../backface-visibility-hidden-001.html       |    2 +-
 .../tests/css/css-values/attr-security.html   |   50 +
 .../tests/css/css-values/if-invalidation.html |   33 +
 .../tests/css/css-values/if-style-query.html  |   86 +-
 .../progress-invalid.tentative.html           |    1 -
 .../css/css-variables/url-syntax-crash.html   |   23 +
 .../animation-name-ua-prefix.html             |   15 +
 .../tests/css/selectors/focus-within-004.html |    1 -
 .../partitioned-visited-manual.tentative.html |   59 +
 ...partitioned-visited-cross-site-iframe.html |    9 +
 .../partitioned-visited-same-site-iframe.html |    9 +
 .../default-permissions-policy.https.sub.html |   12 +-
 ...abled-by-permissions-policy.https.sub.html |   16 +-
 ...rigin-by-permissions-policy.https.sub.html |   14 +-
 .../custom-element-move-reactions.html        |   35 +
 .../tentative/observable-constructor.any.js   |  108 +
 .../tentative/observable-from.any.js          |   98 +-
 .../dom/xslt/encoding-single-chunk-ref.html   |    2 +
 .../tests/dom/xslt/encoding-single-chunk.html |    9 +
 .../wpt/tests/dom/xslt/resources/reqLine.xsl  |   16 +
 tests/wpt/tests/dom/xslt/resources/test.xml   |    4 +
 .../tests/dom/xslt/resources/testu1LINE.xml   |    2 +
 .../editing-on-newline-should-not-crash.html  |   52 +
 tests/wpt/tests/editing/data/indent.js        |    2 +-
 ...copy-elements-with-css-vars.tentative.html |  114 +
 ...aph-ending-with-non-layed-out-content.html |  298 +-
 .../private-aggregation.https.window.js       |    2 +
 ...eady-check-fullscreen-element-sibling.html |    2 +-
 .../tests/fullscreen/model/remove-first.html  |   14 +-
 .../tests/fullscreen/model/remove-last.html   |   26 +-
 ...2d.color.type.u8p3.to.f16srgb.to.u8p3.html |   45 +
 .../2d.color.type.u8p3.to.u8srgb.to.u8p3.html |   44 +
 ....color.type.u8srgb.to.f16p3.to.u8srgb.html |   45 +
 ...d.color.type.u8srgb.to.u8p3.to.u8srgb.html |   44 +
 ...d.filter.no_shadow.drawImage-expected.html |  111 +-
 ...osite.grid.filter.no_shadow.drawImage.html |   59 +-
 ...id.filter.no_shadow.fillRect-expected.html |  111 +-
 ...posite.grid.filter.no_shadow.fillRect.html |   59 +-
 ...rid.filter.no_shadow.pattern-expected.html |  111 +-
 ...mposite.grid.filter.no_shadow.pattern.html |   59 +-
 ...grid.filter.shadow.drawImage-expected.html |  111 +-
 ...omposite.grid.filter.shadow.drawImage.html |   59 +-
 ....grid.filter.shadow.fillRect-expected.html |  111 +-
 ...composite.grid.filter.shadow.fillRect.html |   59 +-
 ...e.grid.filter.shadow.pattern-expected.html |  111 +-
 ....composite.grid.filter.shadow.pattern.html |   59 +-
 ...o_filter.no_shadow.drawImage-expected.html |  111 +-
 ...te.grid.no_filter.no_shadow.drawImage.html |   59 +-
 ...no_filter.no_shadow.fillRect-expected.html |  111 +-
 ...ite.grid.no_filter.no_shadow.fillRect.html |   59 +-
 ....no_filter.no_shadow.pattern-expected.html |  111 +-
 ...site.grid.no_filter.no_shadow.pattern.html |   59 +-
 ...d.no_filter.shadow.drawImage-expected.html |  111 +-
 ...osite.grid.no_filter.shadow.drawImage.html |   59 +-
 ...id.no_filter.shadow.fillRect-expected.html |  111 +-
 ...posite.grid.no_filter.shadow.fillRect.html |   59 +-
 ...rid.no_filter.shadow.pattern-expected.html |  111 +-
 ...mposite.grid.no_filter.shadow.pattern.html |   59 +-
 ...bject.gaussianBlur.tentative-expected.html |   22 +-
 ...asFilterObject.gaussianBlur.tentative.html |   17 +-
 ...ayers.gaussianBlur.tentative-expected.html |   22 +-
 ....filter.layers.gaussianBlur.tentative.html |   17 +-
 ...ates.ctx-filter.no-transform-expected.html |   39 +-
 ...global-states.ctx-filter.no-transform.html |   39 +-
 ...l-states.ctx-filter.rotation-expected.html |   39 +-
 ...yer.global-states.ctx-filter.rotation.html |   39 +-
 ...ilter.no-transform.tentative-expected.html |   39 +-
 ...ter.ctx-filter.no-transform.tentative.html |   39 +-
 ...tx-filter.rotation.tentative-expected.html |   39 +-
 ....filter.ctx-filter.rotation.tentative.html |   39 +-
 ...ilter.no-transform.tentative-expected.html |   39 +-
 ....no-cxt-filter.no-transform.tentative.html |   39 +-
 ...xt-filter.rotation.tentative-expected.html |   39 +-
 ...lter.no-cxt-filter.rotation.tentative.html |   39 +-
 ...s.no-cxt-filter.no-transform-expected.html |   39 +-
 ...bal-states.no-cxt-filter.no-transform.html |   39 +-
 ...tates.no-cxt-filter.rotation-expected.html |   39 +-
 ....global-states.no-cxt-filter.rotation.html |   39 +-
 ...yer.globalCompositeOperation-expected.html |   59 +-
 .../2d.layer.globalCompositeOperation.html    |   59 +-
 .../getContextAttributes.html                 |   18 +-
 ...rs-rendering-align.tentative-expected.html |   13 +-
 ...xt-clusters-rendering-align.tentative.html |   13 +-
 ...rendering-baseline.tentative-expected.html |   15 +-
 ...clusters-rendering-baseline.tentative.html |   15 +-
 ...wing-styles-change.tentative-expected.html |   15 +-
 ...ering-drawing-styles-change.tentative.html |   15 +-
 .../2d.color.space.p3.to.p3.html              |    2 +-
 .../2d.color.space.p3.to.srgb.html            |    2 +-
 ...2d.color.type.u8p3.to.f16srgb.to.u8p3.html |   46 +
 ...lor.type.u8p3.to.f16srgb.to.u8p3.worker.js |   40 +
 .../2d.color.type.u8p3.to.u8srgb.to.u8p3.html |   45 +
 ...olor.type.u8p3.to.u8srgb.to.u8p3.worker.js |   39 +
 ....color.type.u8srgb.to.f16p3.to.u8srgb.html |   46 +
 ...r.type.u8srgb.to.f16p3.to.u8srgb.worker.js |   40 +
 ...d.color.type.u8srgb.to.u8p3.to.u8srgb.html |   45 +
 ...or.type.u8srgb.to.u8p3.to.u8srgb.worker.js |   39 +
 ...d.filter.no_shadow.drawImage-expected.html |  111 +-
 ...osite.grid.filter.no_shadow.drawImage.html |   59 +-
 ...ite.grid.filter.no_shadow.drawImage.w.html |   59 +-
 ...id.filter.no_shadow.fillRect-expected.html |  111 +-
 ...posite.grid.filter.no_shadow.fillRect.html |   59 +-
 ...site.grid.filter.no_shadow.fillRect.w.html |   59 +-
 ...rid.filter.no_shadow.pattern-expected.html |  111 +-
 ...mposite.grid.filter.no_shadow.pattern.html |   59 +-
 ...osite.grid.filter.no_shadow.pattern.w.html |   59 +-
 ...grid.filter.shadow.drawImage-expected.html |  111 +-
 ...omposite.grid.filter.shadow.drawImage.html |   59 +-
 ...posite.grid.filter.shadow.drawImage.w.html |   59 +-
 ....grid.filter.shadow.fillRect-expected.html |  111 +-
 ...composite.grid.filter.shadow.fillRect.html |   59 +-
 ...mposite.grid.filter.shadow.fillRect.w.html |   59 +-
 ...e.grid.filter.shadow.pattern-expected.html |  111 +-
 ....composite.grid.filter.shadow.pattern.html |   59 +-
 ...omposite.grid.filter.shadow.pattern.w.html |   59 +-
 ...o_filter.no_shadow.drawImage-expected.html |  111 +-
 ...te.grid.no_filter.no_shadow.drawImage.html |   59 +-
 ....grid.no_filter.no_shadow.drawImage.w.html |   59 +-
 ...no_filter.no_shadow.fillRect-expected.html |  111 +-
 ...ite.grid.no_filter.no_shadow.fillRect.html |   59 +-
 ...e.grid.no_filter.no_shadow.fillRect.w.html |   59 +-
 ....no_filter.no_shadow.pattern-expected.html |  111 +-
 ...site.grid.no_filter.no_shadow.pattern.html |   59 +-
 ...te.grid.no_filter.no_shadow.pattern.w.html |   59 +-
 ...d.no_filter.shadow.drawImage-expected.html |  111 +-
 ...osite.grid.no_filter.shadow.drawImage.html |   59 +-
 ...ite.grid.no_filter.shadow.drawImage.w.html |   59 +-
 ...id.no_filter.shadow.fillRect-expected.html |  111 +-
 ...posite.grid.no_filter.shadow.fillRect.html |   59 +-
 ...site.grid.no_filter.shadow.fillRect.w.html |   59 +-
 ...rid.no_filter.shadow.pattern-expected.html |  111 +-
 ...mposite.grid.no_filter.shadow.pattern.html |   59 +-
 ...osite.grid.no_filter.shadow.pattern.w.html |   59 +-
 ...bject.gaussianBlur.tentative-expected.html |   22 +-
 ...asFilterObject.gaussianBlur.tentative.html |   17 +-
 ...FilterObject.gaussianBlur.tentative.w.html |   17 +-
 ...ayers.gaussianBlur.tentative-expected.html |   22 +-
 ....filter.layers.gaussianBlur.tentative.html |   17 +-
 ...ilter.layers.gaussianBlur.tentative.w.html |   17 +-
 ...ates.ctx-filter.no-transform-expected.html |   39 +-
 ...global-states.ctx-filter.no-transform.html |   39 +-
 ...obal-states.ctx-filter.no-transform.w.html |   39 +-
 ...l-states.ctx-filter.rotation-expected.html |   39 +-
 ...yer.global-states.ctx-filter.rotation.html |   39 +-
 ...r.global-states.ctx-filter.rotation.w.html |   39 +-
 ...ilter.no-transform.tentative-expected.html |   39 +-
 ...ter.ctx-filter.no-transform.tentative.html |   39 +-
 ...r.ctx-filter.no-transform.tentative.w.html |   39 +-
 ...tx-filter.rotation.tentative-expected.html |   39 +-
 ....filter.ctx-filter.rotation.tentative.html |   39 +-
 ...ilter.ctx-filter.rotation.tentative.w.html |   39 +-
 ...ilter.no-transform.tentative-expected.html |   39 +-
 ....no-cxt-filter.no-transform.tentative.html |   39 +-
 ...o-cxt-filter.no-transform.tentative.w.html |   39 +-
 ...xt-filter.rotation.tentative-expected.html |   39 +-
 ...lter.no-cxt-filter.rotation.tentative.html |   39 +-
 ...er.no-cxt-filter.rotation.tentative.w.html |   39 +-
 ...s.no-cxt-filter.no-transform-expected.html |   39 +-
 ...bal-states.no-cxt-filter.no-transform.html |   39 +-
 ...l-states.no-cxt-filter.no-transform.w.html |   39 +-
 ...tates.no-cxt-filter.rotation-expected.html |   39 +-
 ....global-states.no-cxt-filter.rotation.html |   39 +-
 ...lobal-states.no-cxt-filter.rotation.w.html |   39 +-
 ...yer.globalCompositeOperation-expected.html |   59 +-
 .../2d.layer.globalCompositeOperation.html    |   59 +-
 .../2d.layer.globalCompositeOperation.w.html  |   59 +-
 .../getContextAttributes.html                 |   18 +-
 ...vas.2d.offscreen.worker.direction-ref.html |   27 +
 .../canvas.2d.offscreen.worker.direction.html |   24 +-
 ...2d.offscreen.worker.direction.inherit.html |   29 +-
 .../text/text-direction-worker-inherit.js     |    4 +
 .../manual/text/text-direction-worker.js      |    4 +
 ...rs-rendering-align.tentative-expected.html |   13 +-
 ...xt-clusters-rendering-align.tentative.html |   13 +-
 ...-clusters-rendering-align.tentative.w.html |   13 +-
 ...rendering-baseline.tentative-expected.html |   15 +-
 ...clusters-rendering-baseline.tentative.html |   15 +-
 ...usters-rendering-baseline.tentative.w.html |   15 +-
 ...wing-styles-change.tentative-expected.html |   15 +-
 ...ering-drawing-styles-change.tentative.html |   15 +-
 ...ing-drawing-styles-change.tentative.w.html |   15 +-
 .../2d.color.space.p3.to.p3.html              |    2 +-
 .../2d.color.space.p3.to.p3.worker.js         |    2 +-
 .../2d.color.space.p3.to.srgb.html            |    2 +-
 .../2d.color.space.p3.to.srgb.worker.js       |    2 +-
 .../canvas/resources/canvas-grid-reftest.css  |   16 +
 .../html/canvas/tools/gentestutilsunion.py    |  173 +-
 .../wpt/tests/html/canvas/tools/name2dir.yaml |    3 +-
 .../tools/templates/reftest_element_grid.html |   11 +-
 .../canvas/tools/templates/reftest_grid.html  |   11 +-
 .../tools/templates/reftest_img_grid.html     |   11 +-
 .../templates/reftest_offscreen_grid.html     |   11 +-
 .../tools/templates/reftest_worker_grid.html  |   11 +-
 .../canvas/tools/yaml-new/color_space.yaml    |    4 +-
 .../canvas/tools/yaml-new/color_type.yaml     |   93 +
 .../option-label-whitespace-ref.html          |   16 +
 .../option-label-whitespace.html              |   20 +
 .../video-transparent-controls-ref.html       |    6 +
 .../video-transparent-controls.html           |    7 +
 .../select-events.tentative.html              |   26 +-
 ...ial-focus-display-animation.tentative.html |   36 +
 .../select-keyboard-behavior.tentative.html   |    1 +
 .../select-listitems-crash.html               |   20 +
 .../select-parsing.tentative.html             |    4 +-
 ...elect-picker-exit-animation.tentative.html |   67 +
 ...r-interactive-element-focus.tentative.html |   50 +
 ...elect-picker-starting-style.tentative.html |   47 +
 .../dialog-close-via-attribute.tentative.html |   14 +-
 .../dialog-closedby-crash.html                |    5 +
 .../dialog-closedby-start-open.html           |   54 +
 .../dialog-open-add-closedby-crash.html       |    7 +-
 .../dialog-requestclose-crash.html            |    7 +-
 .../dialog-requestclose.html                  |   37 +
 .../popovers/button-type-popovertarget.html   |  215 +
 .../button-type-reset-popovertarget.html      |   43 -
 .../popovers/input-type-popovertarget.html    |  172 +
 .../semantics/popovers/popover-focus-2.html   |   32 +
 .../json-module/http-accept-header-checker.py |    6 +
 .../json-module/http-accept-header.sub.html   |   27 +
 .../button-event-dispatch.tentative.html      |    4 +-
 .../button-type-behavior.tentative.html       |  265 +
 .../button-type-reflection.tentative.html     |   64 +
 .../command-reflection.tentative.html         |   42 +
 .../interface.tentative.html                  |   12 +-
 tests/wpt/tests/interfaces/cssom-view.idl     |    3 +
 tests/wpt/tests/interfaces/html.idl           |    3 +
 .../tests/interfaces/media-capabilities.idl   |    6 +-
 .../tests/interfaces/permissions-policy.idl   |    1 +
 tests/wpt/tests/interfaces/speech-api.idl     |   21 -
 .../wpt/tests/interfaces/web-animations-2.idl |    8 +
 tests/wpt/tests/lint.ignore                   |    1 +
 .../tentative/loaf-source-location.html       |    4 +
 tests/wpt/tests/media/speech.wav              |  Bin 0 -> 95310 bytes
 ...r-transition-redirect-explicit-commit.html |   39 +
 .../after-transition-redirect-push.html       |   35 +
 .../after-transition-redirect-replace.html    |   35 +
 .../commit-behavior/redirect-throws.html      |  141 +
 ...er-transition-intercept-with-redirect.html |   66 +
 .../camera-potential-report-only.https.html   |    2 +
 .../camera-potential-reporting.https.html     |    2 +
 .../resources/digital-credentials-get.html    |   13 +-
 tests/wpt/tests/png/cicp-chunk.html           |    2 +-
 tests/wpt/tests/png/trns-chunk.html           |    2 +-
 tests/wpt/tests/preload/preload-csp.sub.html  |    2 +-
 .../sethtml-tree-construction.sub.dat         |   43 +
 .../support/html5lib-testcase-support.js      |   12 +-
 ...dia-captured-surface-resolution.https.html |  176 +
 ...ne-view-functional-notation.tentative.html |   12 +-
 ...imation-longhand-properties.tentative.html |   44 +-
 .../pseudo-on-scroller-named-timeline.html    |   64 +
 .../timeline-scope-computed.tentative.html    |   14 +-
 .../css/timeline-scope-parsing.tentative.html |   18 +-
 .../css/view-timeline-animation.html          |   19 +
 .../css/view-timeline-lookup.html             |    2 +-
 .../css/view-timeline-pseudo-on-scroller.html |   62 +
 .../intermediate-transform.html               |    4 +-
 .../serialPort_loopback-manual.https.html     |    1 +
 ...HighlightRegistry-highlightsFromPoint.html |  150 +
 .../reading-flow/tentative/flex-flow.html     |   10 +-
 .../grid-auto-flow-reading-order.html         |   56 +
 ...ageDataUint16StorageFormat.https.window.js |   39 -
 .../tests/speculation-rules/WEB_FEATURES.yml  |    3 +
 ...ing-after-clear-site-data-cache.https.html |   52 +
 ...chRecognition-availableOnDevice.https.html |   24 +
 ...ncurrentMediaStreamTrack-manual.https.html |   66 +
 ...eechRecognition-installOnDevice.https.html |   41 +
 ...nstallOnDeviceSpeechRecognition.https.html |   48 -
 ...gnition-mediaStreamTrack-manual.https.html |   55 +
 ...tion-onDeviceWebSpeechAvailable.https.html |   38 -
 tests/wpt/tests/storage-access-api/helpers.js |   13 +-
 ...s-site-sibling-iframes.sub.https.window.js |    1 -
 .../resources/embedded_responder.js           |    7 +-
 .../signatures/tentative/csp.window.js        |   47 +
 .../signatures/tentative/helper.js            |   77 +
 .../signatures/tentative/script.window.js     |   83 +-
 .../reftests/fill-fallback-currentcolor-1.svg |   10 +
 .../reftests/fill-fallback-currentcolor-2.svg |    7 +
 .../reftests/fill-fallback-invalid-uri.svg    |    5 +
 .../reftests/fill-fallback-none-1.svg         |    8 +
 .../reftests/fill-fallback-none-2.svg         |    8 +
 .../reftests/fill-fallback-none-3.svg         |    8 +
 .../reftests/stroke-fallback-invalid-uri.svg  |    5 +
 tests/wpt/tests/tools/ci/run_tc.py            |    2 +-
 tests/wpt/tests/tools/ci/taskcluster-run.py   |    6 +-
 tests/wpt/tests/tools/ci/tc/tasks/test.yml    |   20 +
 .../wpt/tests/tools/ci/tc/tests/test_valid.py |   25 +
 .../wptrunner/executors/executorwebdriver.py  |   11 +-
 ...tedTypePolicyFactory-getAttributeType.html |   22 +
 ...butes-mutations-in-callback.tentative.html |  232 +
 ...t-attributes-no-require-trusted-types.html |   25 +
 ...-require-trusted-types-default-policy.html |   91 +
 ...quire-trusted-types-no-default-policy.html |   69 +
 .../tests/trusted-types/support/attributes.js |  317 ++
 .../{basic.tentative.any.js => basic.any.js}  |    2 +-
 ...ants.tentative.any.js => constants.any.js} |    2 +-
 ...mports.tentative.any.js => imports.any.js} |    2 +-
 .../AnimationTrigger/constructor.html         |  139 +
 ...etprocessor-no-process-function.https.html |   44 +
 .../audioworkletprocessor-no-process.js       |   19 +
 tests/wpt/tests/webcodecs/utils.js            |   21 -
 ...er-codec-specific-orientation.https.any.js |   60 +
 .../videoDecoder-codec-specific-setup.js      |  209 +
 .../videoDecoder-codec-specific.https.any.js  |  212 +-
 .../webcodecs/videoFrame-drawImage.any.js     |   16 +-
 .../webcodecs/videoFrame-orientation.any.js   |   17 +-
 .../context_destroyed/context_destroyed.py    |   31 +
 .../browsing_context/navigate/navigate.py     |  106 +-
 .../bidi/browsing_context/navigate/wait.py    |   16 +-
 .../navigation_started/navigation_started.py  |   31 +-
 .../bidi/browsing_context/reload/wait.py      |   52 +-
 .../bidi/input/perform_actions/invalid.py     |    2 +-
 .../bidi/network/fetch_error/fetch_error.py   |   13 +-
 .../bidi/session/subscribe/user_contexts.py   |  292 +-
 .../bidi/session/unsubscribe/subscriptions.py |  518 +-
 .../tests/classic/add_cookie/user_prompts.py  |   14 +-
 .../tests/classic/back/user_prompts.py        |   14 +-
 .../classic/close_window/user_prompts.py      |   14 +-
 .../delete_all_cookies/user_prompts.py        |   14 +-
 .../classic/delete_cookie/user_prompts.py     |   14 +-
 .../classic/element_clear/user_prompts.py     |   14 +-
 .../classic/element_click/user_prompts.py     |   14 +-
 .../classic/element_send_keys/user_prompts.py |   14 +-
 .../execute_async_script/user_prompts.py      |   14 +-
 .../classic/execute_script/user_prompts.py    |   14 +-
 .../classic/find_element/user_prompts.py      |   14 +-
 .../find_element_from_element/user_prompts.py |   14 +-
 .../user_prompts.py                           |   14 +-
 .../classic/find_elements/user_prompts.py     |   14 +-
 .../user_prompts.py                           |   14 +-
 .../user_prompts.py                           |   14 +-
 .../tests/classic/forward/user_prompts.py     |   14 +-
 .../classic/fullscreen_window/user_prompts.py |   14 +-
 .../get_active_element/user_prompts.py        |   14 +-
 .../get_computed_label/user_prompts.py        |  120 +
 .../classic/get_computed_role/user_prompts.py |  120 +
 .../classic/get_current_url/user_prompts.py   |   14 +-
 .../get_element_attribute/user_prompts.py     |   14 +-
 .../get_element_css_value/user_prompts.py     |   14 +-
 .../get_element_property/user_prompts.py      |   14 +-
 .../classic/get_element_rect/user_prompts.py  |   14 +-
 .../get_element_shadow_root/user_prompts.py   |   14 +-
 .../get_element_tag_name/user_prompts.py      |   14 +-
 .../classic/get_element_text/user_prompts.py  |   14 +-
 .../classic/get_named_cookie/user_prompts.py  |   14 +-
 .../classic/get_page_source/user_prompts.py   |   14 +-
 .../tests/classic/get_title/user_prompts.py   |   14 +-
 .../classic/get_window_handle/user_prompts.py |    4 +-
 .../get_window_handles/user_prompts.py        |    4 +-
 .../classic/get_window_rect/user_prompts.py   |   14 +-
 .../is_element_enabled/user_prompts.py        |   14 +-
 .../is_element_selected/user_prompts.py       |   14 +-
 .../classic/maximize_window/user_prompts.py   |   14 +-
 .../classic/minimize_window/user_prompts.py   |   14 +-
 .../tests/classic/navigate_to/user_prompts.py |   14 +-
 .../tests/classic/new_window/user_prompts.py  |   14 +-
 .../classic/perform_actions/user_prompts.py   |   14 +-
 .../tests/classic/print/user_prompts.py       |   14 +-
 .../tests/classic/refresh/user_prompts.py     |   14 +-
 .../classic/set_timeouts/user_prompts.py      |    4 +-
 .../classic/set_window_rect/user_prompts.py   |   14 +-
 .../take_element_screenshot/user_prompts.py   |   14 +-
 .../classic/take_screenshot/user_prompts.py   |   14 +-
 .../tests/webdriver/tests/support/asserts.py  |   10 +-
 .../dequantizeLinear.https.any.js             |   51 +-
 .../misc/texture-video-transparent.html.ini   |    3 +
 608 files changed, 18662 insertions(+), 8348 deletions(-)
 create mode 100644 tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition-navigation.tentative.https.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition-worker-creation.tentative.https.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition.tentative.https.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/css/CSS2/normal-flow/margin-collapsing-dynamic.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/css/css-overflow/clip-006.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/css/css-overflow/clip-007.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/css/css-overflow/overflow-clip-margin-002.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-computed.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-valid.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/css/css-pseudo/parsing/the-check-pseudo-element.tentative.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/css/css-pseudo/parsing/the-select-arrow-pseudo-element.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/css/css-sizing/stretch/block-height-1.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/css/css-sizing/stretch/block-height-2.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/css/css-ui/interactivity-inert-focus.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/css/css-ui/parsing/interactivity-computed.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/css/css-ui/parsing/interactivity.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/fetch/fetch-later/quota.tentative.https.window.js.ini
 rename tests/wpt/{meta => meta-legacy-layout}/html/browsers/browsing-the-web/navigating-across-documents/008.html.ini (100%)
 delete mode 100644 tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/009.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position-edge-cases.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position-edges.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edge-cases.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edge-cases.tentative.worker.js.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edges.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edges.tentative.worker.js.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position.tentative.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/html/rendering/widgets/button-layout/input-type-button-clip.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-nav-window-open.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/select-value-selectedOption.tentative.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/html/semantics/interactive-elements/the-dialog-element/toggle-events.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/semantics/invokers/idlharness.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/semantics/invokers/interestelement-interface.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/semantics/invokers/invokeelement-interface.tentative.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/html/semantics/popovers/button-type-reset-popovertarget.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-css-properties.tentative.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-types-with-hints.tentative.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/html/webappapis/scripting/event-loops/fully_active_document.window.js.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/constructor-basic.https.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/constructor-invalid.https.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/constructor-non-secure.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/fetch-url-resolve.https.window.js.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/getnotifications-across-processes.https.window.js.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/global-teardown-crash.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/historical.any.js.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/idlharness.https.any.js.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/instance.https.window.js.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/permission.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/permissions-non-secure.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/registration-association.https.window.js.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/shownotification-without-permission.https.window.js.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/shownotification.https.window.js.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/tag.https.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/notifications/worker-gc.https.window.js.ini
 create mode 100644 tests/wpt/meta-legacy-layout/performance-timeline/tentative/detached-frame.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-A-A.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-A.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-AA.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-AB.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B-A.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B-B.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/performance-timeline/tentative/performance-entry-source.html.ini
 create mode 100644 tests/wpt/meta-legacy-layout/performance-timeline/tentative/with-filter-options-originA.html.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/subresource-integrity/identity-digest/tentative/fetch.any.js.ini
 delete mode 100644 tests/wpt/meta-legacy-layout/subresource-integrity/identity-digest/tentative/script.window.js.ini
 delete mode 100644 tests/wpt/meta/css/compositing/mix-blend-mode/mix-blend-mode-video-sibling.html.ini
 create mode 100644 tests/wpt/meta/css/css-color/parsing/color-computed-contrast-color-function.html.ini
 create mode 100644 tests/wpt/meta/css/css-color/parsing/color-valid-contrast-color-function.html.ini
 create mode 100644 tests/wpt/meta/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html.ini
 create mode 100644 tests/wpt/meta/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html.ini
 create mode 100644 tests/wpt/meta/css/css-mixins/function-container-dynamic.html.ini
 create mode 100644 tests/wpt/meta/css/css-mixins/function-container-self.html.ini
 create mode 100644 tests/wpt/meta/css/css-mixins/function-container-style.html.ini
 delete mode 100644 tests/wpt/meta/css/css-overflow/margin-block-end-scroll-area-001.html.ini
 create mode 100644 tests/wpt/meta/css/css-overflow/scroll-marker-group-018.html.ini
 create mode 100644 tests/wpt/meta/css/css-overflow/scroll-marker-group-019.html.ini
 create mode 100644 tests/wpt/meta/css/css-overflow/scroll-marker-group-020.html.ini
 delete mode 100644 tests/wpt/meta/css/css-tables/table-cell-overflow-auto-scrolled.html.ini
 create mode 100644 tests/wpt/meta/css/css-values/if-invalidation.html.ini
 create mode 100644 tests/wpt/meta/dom/xslt/encoding-single-chunk.html.ini
 delete mode 100644 tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/navigation-unload-cross-origin.sub.window.js.ini
 delete mode 100644 tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/navigation-unload-same-origin-fragment.html.ini
 create mode 100644 tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html.ini
 rename tests/wpt/meta/html/browsers/history/the-history-interface/{traverse_the_history_5.html.ini => traverse_the_history_3.html.ini} (71%)
 create mode 100644 tests/wpt/meta/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html.ini
 create mode 100644 tests/wpt/meta/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html.ini
 create mode 100644 tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html.ini
 create mode 100644 tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.worker.js.ini
 create mode 100644 tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html.ini
 create mode 100644 tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.worker.js.ini
 create mode 100644 tests/wpt/meta/html/rendering/replaced-elements/the-option-element/option-label-whitespace.html.ini
 delete mode 100644 tests/wpt/meta/html/semantics/forms/form-submission-0/form-submit-iframe-then-location-navigate.html.ini
 create mode 100644 tests/wpt/meta/html/semantics/popovers/button-type-popovertarget.html.ini
 delete mode 100644 tests/wpt/meta/html/semantics/popovers/button-type-reset-popovertarget.html.ini
 create mode 100644 tests/wpt/meta/html/semantics/popovers/input-type-popovertarget.html.ini
 create mode 100644 tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/button-type-behavior.tentative.html.ini
 create mode 100644 tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/button-type-reflection.tentative.html.ini
 create mode 100644 tests/wpt/meta/performance-timeline/navigation-id-detached-frame.tentative.html.ini
 create mode 100644 tests/wpt/meta/shadow-dom/HighlightRegistry-highlightsFromPoint.html.ini
 create mode 100644 tests/wpt/meta/subresource-integrity/signatures/tentative/csp.window.js.ini
 create mode 100644 tests/wpt/meta/wasm/jsapi/js-string/basic.any.js.ini
 delete mode 100644 tests/wpt/meta/wasm/jsapi/js-string/basic.tentative.any.js.ini
 rename tests/wpt/meta/wasm/jsapi/js-string/{constants.tentative.any.js.ini => constants.any.js.ini} (82%)
 create mode 100644 tests/wpt/meta/wasm/jsapi/js-string/imports.any.js.ini
 delete mode 100644 tests/wpt/meta/wasm/jsapi/js-string/imports.tentative.any.js.ini
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-continue-exception-order.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-continue-exception-order.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-continue.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-continue.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exception-order.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exception-order.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exceptions.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exceptions.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-delete-exception-order.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-delete-exception-order.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-iterating-update.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-iterating-update.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-key.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-key.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-primarykey.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-primarykey.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-request-source.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-request-source.html
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-reused.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-reused.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-source.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-source.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbcursor-update-exception-order.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbcursor-update-exception-order.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbdatabase-createObjectStore-exception-order.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbdatabase-createObjectStore-exception-order.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbdatabase-deleteObjectStore-exception-order.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbdatabase-deleteObjectStore-exception-order.htm
 create mode 100644 tests/wpt/tests/IndexedDB/idbdatabase-transaction-exception-order.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbdatabase-transaction-exception-order.html
 create mode 100644 tests/wpt/tests/IndexedDB/idbdatabase_close.any.js
 delete mode 100644 tests/wpt/tests/IndexedDB/idbdatabase_close.htm
 delete mode 100644 tests/wpt/tests/IndexedDB/idbdatabase_close2.htm
 create mode 100644 tests/wpt/tests/content-security-policy/resources/ran.js
 create mode 100644 tests/wpt/tests/content-security-policy/tentative/require-sri-for/script-allowed-meta.https.html
 create mode 100644 tests/wpt/tests/content-security-policy/tentative/require-sri-for/script-blocked-meta.https.html
 create mode 100644 tests/wpt/tests/content-security-policy/tentative/require-sri-for/script.https.html
 create mode 100644 tests/wpt/tests/cookies/samesite/resources/cross-site-frame-with-sandboxed-embed.html
 create mode 100644 tests/wpt/tests/cookies/samesite/resources/same-site-none-embed.html
 create mode 100644 tests/wpt/tests/cookies/samesite/sandbox-allow-same-site-none-cookies-value.tentative.https.html
 create mode 100644 tests/wpt/tests/css/css-color/parsing/color-computed-contrast-color-function.html
 create mode 100644 tests/wpt/tests/css/css-color/parsing/color-invalid-contrast-color-function.html
 create mode 100644 tests/wpt/tests/css/css-color/parsing/color-valid-contrast-color-function.html
 create mode 100644 tests/wpt/tests/css/css-flexbox/flexbox_justifycontent-stretch.html
 create mode 100644 tests/wpt/tests/css/css-fonts/italic-oblique-fallback-ref.html
 create mode 100644 tests/wpt/tests/css/css-fonts/italic-oblique-fallback.html
 create mode 100644 tests/wpt/tests/css/css-highlight-api/HighlightRegistry-highlightsFromPoint.html
 create mode 100644 tests/wpt/tests/css/css-inline/empty-span-scroll-ref.html
 create mode 100644 tests/wpt/tests/css/css-inline/empty-span-scroll.html
 create mode 100644 tests/wpt/tests/css/css-mixins/function-container-dynamic.html
 create mode 100644 tests/wpt/tests/css/css-mixins/function-container-self.html
 create mode 100644 tests/wpt/tests/css/css-mixins/function-container-style.html
 create mode 100644 tests/wpt/tests/css/css-overflow/scroll-marker-activation-scroll.html
 create mode 100644 tests/wpt/tests/css/css-overflow/scroll-marker-group-018.html
 create mode 100644 tests/wpt/tests/css/css-overflow/scroll-marker-group-019.html
 create mode 100644 tests/wpt/tests/css/css-overflow/scroll-marker-group-020.html
 create mode 100644 tests/wpt/tests/css/css-overflow/scroll-marker-navigation-cycles.html
 create mode 100644 tests/wpt/tests/css/css-overflow/scroll-marker-next-focus.html
 create mode 100644 tests/wpt/tests/css/css-properties-values-api/registered-property-parse-crash.html
 create mode 100644 tests/wpt/tests/css/css-values/if-invalidation.html
 create mode 100644 tests/wpt/tests/css/css-variables/url-syntax-crash.html
 create mode 100644 tests/wpt/tests/css/css-view-transitions/animation-name-ua-prefix.html
 create mode 100644 tests/wpt/tests/css/selectors/partitioned-visited-manual.tentative.html
 create mode 100644 tests/wpt/tests/css/selectors/resources/partitioned-visited-cross-site-iframe.html
 create mode 100644 tests/wpt/tests/css/selectors/resources/partitioned-visited-same-site-iframe.html
 create mode 100644 tests/wpt/tests/dom/xslt/encoding-single-chunk-ref.html
 create mode 100644 tests/wpt/tests/dom/xslt/encoding-single-chunk.html
 create mode 100644 tests/wpt/tests/dom/xslt/resources/reqLine.xsl
 create mode 100644 tests/wpt/tests/dom/xslt/resources/test.xml
 create mode 100644 tests/wpt/tests/dom/xslt/resources/testu1LINE.xml
 create mode 100644 tests/wpt/tests/editing/crashtests/editing-on-newline-should-not-crash.html
 create mode 100644 tests/wpt/tests/editing/other/copy-elements-with-css-vars.tentative.html
 create mode 100644 tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.html
 create mode 100644 tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html
 create mode 100644 tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.html
 create mode 100644 tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html
 create mode 100644 tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.html
 create mode 100644 tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.worker.js
 create mode 100644 tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html
 create mode 100644 tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.worker.js
 create mode 100644 tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.html
 create mode 100644 tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.worker.js
 create mode 100644 tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html
 create mode 100644 tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.worker.js
 create mode 100644 tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction-ref.html
 create mode 100644 tests/wpt/tests/html/canvas/resources/canvas-grid-reftest.css
 create mode 100644 tests/wpt/tests/html/canvas/tools/yaml-new/color_type.yaml
 create mode 100644 tests/wpt/tests/html/rendering/replaced-elements/the-option-element/option-label-whitespace-ref.html
 create mode 100644 tests/wpt/tests/html/rendering/replaced-elements/the-option-element/option-label-whitespace.html
 create mode 100644 tests/wpt/tests/html/semantics/embedded-content/the-video-element/video-transparent-controls-ref.html
 create mode 100644 tests/wpt/tests/html/semantics/embedded-content/the-video-element/video-transparent-controls.html
 create mode 100644 tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-initial-focus-display-animation.tentative.html
 create mode 100644 tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-listitems-crash.html
 create mode 100644 tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-exit-animation.tentative.html
 create mode 100644 tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-interactive-element-focus.tentative.html
 create mode 100644 tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-starting-style.tentative.html
 create mode 100644 tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-closedby-start-open.html
 create mode 100644 tests/wpt/tests/html/semantics/popovers/button-type-popovertarget.html
 delete mode 100644 tests/wpt/tests/html/semantics/popovers/button-type-reset-popovertarget.html
 create mode 100644 tests/wpt/tests/html/semantics/popovers/input-type-popovertarget.html
 create mode 100644 tests/wpt/tests/html/semantics/scripting-1/the-script-element/json-module/http-accept-header-checker.py
 create mode 100644 tests/wpt/tests/html/semantics/scripting-1/the-script-element/json-module/http-accept-header.sub.html
 create mode 100644 tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-type-behavior.tentative.html
 create mode 100644 tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-type-reflection.tentative.html
 create mode 100644 tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/command-reflection.tentative.html
 create mode 100644 tests/wpt/tests/media/speech.wav
 create mode 100644 tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-explicit-commit.html
 create mode 100644 tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-push.html
 create mode 100644 tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-replace.html
 create mode 100644 tests/wpt/tests/navigation-api/commit-behavior/redirect-throws.html
 create mode 100644 tests/wpt/tests/navigation-api/ordering-and-transition/navigate-commit-after-transition-intercept-with-redirect.html
 create mode 100644 tests/wpt/tests/screen-capture/tentative/getdisplaymedia-captured-surface-resolution.https.html
 create mode 100644 tests/wpt/tests/scroll-animations/css/pseudo-on-scroller-named-timeline.html
 create mode 100644 tests/wpt/tests/scroll-animations/css/view-timeline-pseudo-on-scroller.html
 create mode 100644 tests/wpt/tests/shadow-dom/HighlightRegistry-highlightsFromPoint.html
 create mode 100644 tests/wpt/tests/shadow-dom/focus-navigation/reading-flow/tentative/grid-auto-flow-reading-order.html
 delete mode 100644 tests/wpt/tests/shape-detection/detection-ImageDataUint16StorageFormat.https.window.js
 create mode 100644 tests/wpt/tests/speculation-rules/WEB_FEATURES.yml
 create mode 100644 tests/wpt/tests/speculation-rules/prerender/cancel-prerendering-after-clear-site-data-cache.https.html
 create mode 100644 tests/wpt/tests/speech-api/SpeechRecognition-availableOnDevice.https.html
 create mode 100644 tests/wpt/tests/speech-api/SpeechRecognition-concurrentMediaStreamTrack-manual.https.html
 create mode 100644 tests/wpt/tests/speech-api/SpeechRecognition-installOnDevice.https.html
 delete mode 100644 tests/wpt/tests/speech-api/SpeechRecognition-installOnDeviceSpeechRecognition.https.html
 create mode 100644 tests/wpt/tests/speech-api/SpeechRecognition-mediaStreamTrack-manual.https.html
 delete mode 100644 tests/wpt/tests/speech-api/SpeechRecognition-onDeviceWebSpeechAvailable.https.html
 create mode 100644 tests/wpt/tests/subresource-integrity/signatures/tentative/csp.window.js
 create mode 100644 tests/wpt/tests/svg/pservers/reftests/fill-fallback-currentcolor-1.svg
 create mode 100644 tests/wpt/tests/svg/pservers/reftests/fill-fallback-currentcolor-2.svg
 create mode 100644 tests/wpt/tests/svg/pservers/reftests/fill-fallback-invalid-uri.svg
 create mode 100644 tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-1.svg
 create mode 100644 tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-2.svg
 create mode 100644 tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-3.svg
 create mode 100644 tests/wpt/tests/svg/pservers/reftests/stroke-fallback-invalid-uri.svg
 create mode 100644 tests/wpt/tests/trusted-types/TrustedTypePolicyFactory-getAttributeType.html
 create mode 100644 tests/wpt/tests/trusted-types/set-attributes-mutations-in-callback.tentative.html
 create mode 100644 tests/wpt/tests/trusted-types/set-attributes-no-require-trusted-types.html
 create mode 100644 tests/wpt/tests/trusted-types/set-attributes-require-trusted-types-default-policy.html
 create mode 100644 tests/wpt/tests/trusted-types/set-attributes-require-trusted-types-no-default-policy.html
 create mode 100644 tests/wpt/tests/trusted-types/support/attributes.js
 rename tests/wpt/tests/wasm/jsapi/js-string/{basic.tentative.any.js => basic.any.js} (99%)
 rename tests/wpt/tests/wasm/jsapi/js-string/{constants.tentative.any.js => constants.any.js} (96%)
 rename tests/wpt/tests/wasm/jsapi/js-string/{imports.tentative.any.js => imports.any.js} (92%)
 create mode 100644 tests/wpt/tests/web-animations/interfaces/AnimationTrigger/constructor.html
 create mode 100644 tests/wpt/tests/webaudio/the-audio-api/the-audioworklet-interface/audioworkletprocessor-no-process-function.https.html
 create mode 100644 tests/wpt/tests/webaudio/the-audio-api/the-audioworklet-interface/audioworkletprocessor-no-process.js
 create mode 100644 tests/wpt/tests/webcodecs/videoDecoder-codec-specific-orientation.https.any.js
 create mode 100644 tests/wpt/tests/webcodecs/videoDecoder-codec-specific-setup.js
 create mode 100644 tests/wpt/tests/webdriver/tests/classic/get_computed_label/user_prompts.py
 create mode 100644 tests/wpt/tests/webdriver/tests/classic/get_computed_role/user_prompts.py

diff --git a/tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition-navigation.tentative.https.html.ini b/tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition-navigation.tentative.https.html.ini
new file mode 100644
index 00000000000..575e16729cb
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition-navigation.tentative.https.html.ini
@@ -0,0 +1,2 @@
+[cross-partition-navigation.tentative.https.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition-worker-creation.tentative.https.html.ini b/tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition-worker-creation.tentative.https.html.ini
new file mode 100644
index 00000000000..06d580aa061
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition-worker-creation.tentative.https.html.ini
@@ -0,0 +1,2 @@
+[cross-partition-worker-creation.tentative.https.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition.tentative.https.html.ini b/tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition.tentative.https.html.ini
new file mode 100644
index 00000000000..5f8ed6cf262
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/FileAPI/BlobURL/cross-partition.tentative.https.html.ini
@@ -0,0 +1,2 @@
+[cross-partition.tentative.https.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/css/CSS2/normal-flow/margin-collapsing-dynamic.html.ini b/tests/wpt/meta-legacy-layout/css/CSS2/normal-flow/margin-collapsing-dynamic.html.ini
new file mode 100644
index 00000000000..d1e5504226f
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/css/CSS2/normal-flow/margin-collapsing-dynamic.html.ini
@@ -0,0 +1,2 @@
+[margin-collapsing-dynamic.html]
+  expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/css/css-borders/tentative/parsing/corner-shape-computed.html.ini b/tests/wpt/meta-legacy-layout/css/css-borders/tentative/parsing/corner-shape-computed.html.ini
index 8faf718c1fe..83214054c53 100644
--- a/tests/wpt/meta-legacy-layout/css/css-borders/tentative/parsing/corner-shape-computed.html.ini
+++ b/tests/wpt/meta-legacy-layout/css/css-borders/tentative/parsing/corner-shape-computed.html.ini
@@ -55,3 +55,36 @@
 
   [Property corner-bottom-left-shape value 'superellipse(5)']
     expected: FAIL
+
+  [Property corner-shape value 'superellipse(5) round']
+    expected: FAIL
+
+  [Property corner-shape value 'bevel superellipse(0.1) round squircle']
+    expected: FAIL
+
+  [Property corner-shape value 'superellipse(0.1) superellipse(3) superellipse(7) superellipse(0.1)']
+    expected: FAIL
+
+  [Property corner-shape value 'round round round round']
+    expected: FAIL
+
+  [Property corner-shape value 'round scoop']
+    expected: FAIL
+
+  [Property corner-shape value 'round scoop round scoop']
+    expected: FAIL
+
+  [Property corner-shape value 'bevel superellipse(2)']
+    expected: FAIL
+
+  [Property corner-shape value 'superellipse(0.5) superellipse(3) straight']
+    expected: FAIL
+
+  [Property corner-shape value 'superellipse(0.5) superellipse(3) superellipse(1)']
+    expected: FAIL
+
+  [Property corner-shape value 'bevel superellipse(2) squircle     round']
+    expected: FAIL
+
+  [Property corner-shape value 'superellipse(0.5) superellipse(3) superellipse(1) superellipse(infinity)']
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/css/css-borders/tentative/parsing/corner-shape-valid.html.ini b/tests/wpt/meta-legacy-layout/css/css-borders/tentative/parsing/corner-shape-valid.html.ini
index 6bc8e7f18bf..e26a4c8d4ab 100644
--- a/tests/wpt/meta-legacy-layout/css/css-borders/tentative/parsing/corner-shape-valid.html.ini
+++ b/tests/wpt/meta-legacy-layout/css/css-borders/tentative/parsing/corner-shape-valid.html.ini
@@ -352,3 +352,27 @@
 
   [e.style['corner-end-end-shape'\] = "superellipse(calc(0.5 * 4))" should set the property value]
     expected: FAIL
+
+  [e.style['corner-shape'\] = "round round round round" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "round scoop" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "round scoop round scoop" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "bevel superellipse(2)" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "superellipse(0.5) superellipse(3) straight" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "superellipse(0.5) superellipse(3) superellipse(1)" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "bevel superellipse(2) squircle     round" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "superellipse(0.5) superellipse(3) superellipse(1) superellipse(infinity)" should set the property value]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/css/css-overflow/clip-006.html.ini b/tests/wpt/meta-legacy-layout/css/css-overflow/clip-006.html.ini
new file mode 100644
index 00000000000..dbf80db84f8
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/css/css-overflow/clip-006.html.ini
@@ -0,0 +1,2 @@
+[clip-006.html]
+  expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/css/css-overflow/clip-007.html.ini b/tests/wpt/meta-legacy-layout/css/css-overflow/clip-007.html.ini
new file mode 100644
index 00000000000..1759d3eb6e8
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/css/css-overflow/clip-007.html.ini
@@ -0,0 +1,2 @@
+[clip-007.html]
+  expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/css/css-overflow/overflow-clip-margin-002.html.ini b/tests/wpt/meta-legacy-layout/css/css-overflow/overflow-clip-margin-002.html.ini
new file mode 100644
index 00000000000..faf2fc31844
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/css/css-overflow/overflow-clip-margin-002.html.ini
@@ -0,0 +1,2 @@
+[overflow-clip-margin-002.html]
+  expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/css/css-overflow/overflow-no-interpolation.html.ini b/tests/wpt/meta-legacy-layout/css/css-overflow/overflow-no-interpolation.html.ini
index d6cb20b3a73..1143c15e68b 100644
--- a/tests/wpt/meta-legacy-layout/css/css-overflow/overflow-no-interpolation.html.ini
+++ b/tests/wpt/meta-legacy-layout/css/css-overflow/overflow-no-interpolation.html.ini
@@ -2,9 +2,6 @@
   [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (-0.3) should be [initial\]]
     expected: FAIL
 
-  [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0) should be [initial\]]
-    expected: FAIL
-
   [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0.3) should be [initial\]]
     expected: FAIL
 
@@ -14,18 +11,12 @@
   [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0.6) should be [123px\]]
     expected: FAIL
 
-  [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (1) should be [123px\]]
-    expected: FAIL
-
   [CSS Transitions with transition-behavior:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (1.5) should be [123px\]]
     expected: FAIL
 
   [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (-0.3) should be [initial\]]
     expected: FAIL
 
-  [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0) should be [initial\]]
-    expected: FAIL
-
   [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0.3) should be [initial\]]
     expected: FAIL
 
@@ -35,9 +26,6 @@
   [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (0.6) should be [123px\]]
     expected: FAIL
 
-  [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (1) should be [123px\]]
-    expected: FAIL
-
   [CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <overflow-clip-margin> from [initial\] to [123px\] at (1.5) should be [123px\]]
     expected: FAIL
 
@@ -56,9 +44,6 @@
   [CSS Transitions: property <overflow-clip-margin> from [initial\] to [123px\] at (0.6) should be [123px\]]
     expected: FAIL
 
-  [CSS Transitions: property <overflow-clip-margin> from [initial\] to [123px\] at (1) should be [123px\]]
-    expected: FAIL
-
   [CSS Transitions: property <overflow-clip-margin> from [initial\] to [123px\] at (1.5) should be [123px\]]
     expected: FAIL
 
@@ -77,18 +62,12 @@
   [CSS Transitions with transition: all: property <overflow-clip-margin> from [initial\] to [123px\] at (0.6) should be [123px\]]
     expected: FAIL
 
-  [CSS Transitions with transition: all: property <overflow-clip-margin> from [initial\] to [123px\] at (1) should be [123px\]]
-    expected: FAIL
-
   [CSS Transitions with transition: all: property <overflow-clip-margin> from [initial\] to [123px\] at (1.5) should be [123px\]]
     expected: FAIL
 
   [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (-0.3) should be [initial\]]
     expected: FAIL
 
-  [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (0) should be [initial\]]
-    expected: FAIL
-
   [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (0.3) should be [initial\]]
     expected: FAIL
 
@@ -98,9 +77,6 @@
   [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (0.6) should be [123px\]]
     expected: FAIL
 
-  [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (1) should be [123px\]]
-    expected: FAIL
-
   [CSS Animations: property <overflow-clip-margin> from [initial\] to [123px\] at (1.5) should be [123px\]]
     expected: FAIL
 
diff --git a/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-clip-margin-computed.html.ini b/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-clip-margin-computed.html.ini
index 7fc11b99b1a..ff0634d0a3a 100644
--- a/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-clip-margin-computed.html.ini
+++ b/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-clip-margin-computed.html.ini
@@ -1,10 +1,4 @@
 [overflow-clip-margin-computed.html]
-  [Property overflow-clip-margin value '0px']
-    expected: FAIL
-
-  [Property overflow-clip-margin value '10px']
-    expected: FAIL
-
   [Property overflow-clip-margin value 'content-box']
     expected: FAIL
 
diff --git a/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-clip-margin.html.ini b/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-clip-margin.html.ini
index eafd1e97a0c..624adbbde4a 100644
--- a/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-clip-margin.html.ini
+++ b/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-clip-margin.html.ini
@@ -1,7 +1,4 @@
 [overflow-clip-margin.html]
-  [e.style['overflow-clip-margin'\] = "10px" should set the property value]
-    expected: FAIL
-
   [e.style['overflow-clip-margin'\] = "content-box" should set the property value]
     expected: FAIL
 
diff --git a/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-computed.html.ini b/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-computed.html.ini
deleted file mode 100644
index 9b5caca8929..00000000000
--- a/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-computed.html.ini
+++ /dev/null
@@ -1,36 +0,0 @@
-[overflow-computed.html]
-  [Property overflow value 'clip']
-    expected: FAIL
-
-  [Property overflow value 'auto clip']
-    expected: FAIL
-
-  [Property overflow value 'clip auto']
-    expected: FAIL
-
-  [Property overflow value 'clip clip']
-    expected: FAIL
-
-  [Property overflow value 'clip hidden']
-    expected: FAIL
-
-  [Property overflow value 'clip scroll']
-    expected: FAIL
-
-  [Property overflow value 'clip visible']
-    expected: FAIL
-
-  [Property overflow value 'hidden clip']
-    expected: FAIL
-
-  [Property overflow value 'scroll clip']
-    expected: FAIL
-
-  [Property overflow value 'visible clip']
-    expected: FAIL
-
-  [Property overflow-y value 'clip']
-    expected: FAIL
-
-  [Property overflow-block value 'clip']
-    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-valid.html.ini b/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-valid.html.ini
deleted file mode 100644
index e6897a734f6..00000000000
--- a/tests/wpt/meta-legacy-layout/css/css-overflow/parsing/overflow-valid.html.ini
+++ /dev/null
@@ -1,12 +0,0 @@
-[overflow-valid.html]
-  [e.style['overflow'\] = "clip" should set the property value]
-    expected: FAIL
-
-  [e.style['overflow'\] = "clip clip" should set the property value]
-    expected: FAIL
-
-  [e.style['overflow-y'\] = "clip" should set the property value]
-    expected: FAIL
-
-  [e.style['overflow-block'\] = "clip" should set the property value]
-    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/css/css-pseudo/parsing/the-check-pseudo-element.tentative.html.ini b/tests/wpt/meta-legacy-layout/css/css-pseudo/parsing/the-check-pseudo-element.tentative.html.ini
new file mode 100644
index 00000000000..062a58a6e3f
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/css/css-pseudo/parsing/the-check-pseudo-element.tentative.html.ini
@@ -0,0 +1,2 @@
+[the-check-pseudo-element.tentative.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/css/css-pseudo/parsing/the-select-arrow-pseudo-element.tentative.html.ini b/tests/wpt/meta-legacy-layout/css/css-pseudo/parsing/the-select-arrow-pseudo-element.tentative.html.ini
new file mode 100644
index 00000000000..a4c4197b59b
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/css/css-pseudo/parsing/the-select-arrow-pseudo-element.tentative.html.ini
@@ -0,0 +1,2 @@
+[the-select-arrow-pseudo-element.tentative.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/css/css-sizing/stretch/block-height-1.html.ini b/tests/wpt/meta-legacy-layout/css/css-sizing/stretch/block-height-1.html.ini
deleted file mode 100644
index 5c9d7ecf7ea..00000000000
--- a/tests/wpt/meta-legacy-layout/css/css-sizing/stretch/block-height-1.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[block-height-1.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/css/css-sizing/stretch/block-height-2.html.ini b/tests/wpt/meta-legacy-layout/css/css-sizing/stretch/block-height-2.html.ini
deleted file mode 100644
index 8e53e770c55..00000000000
--- a/tests/wpt/meta-legacy-layout/css/css-sizing/stretch/block-height-2.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[block-height-2.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/css/css-ui/interactivity-inert-focus.tentative.html.ini b/tests/wpt/meta-legacy-layout/css/css-ui/interactivity-inert-focus.tentative.html.ini
deleted file mode 100644
index 80f1879f2bf..00000000000
--- a/tests/wpt/meta-legacy-layout/css/css-ui/interactivity-inert-focus.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[interactivity-inert-focus.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/css/css-ui/parsing/interactivity-computed.tentative.html.ini b/tests/wpt/meta-legacy-layout/css/css-ui/parsing/interactivity-computed.tentative.html.ini
deleted file mode 100644
index a2f58805782..00000000000
--- a/tests/wpt/meta-legacy-layout/css/css-ui/parsing/interactivity-computed.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[interactivity-computed.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/css/css-ui/parsing/interactivity.tentative.html.ini b/tests/wpt/meta-legacy-layout/css/css-ui/parsing/interactivity.tentative.html.ini
deleted file mode 100644
index d1821eacb4d..00000000000
--- a/tests/wpt/meta-legacy-layout/css/css-ui/parsing/interactivity.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[interactivity.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/css/cssom-view/scrollWidthHeight-negative-margin-001.html.ini b/tests/wpt/meta-legacy-layout/css/cssom-view/scrollWidthHeight-negative-margin-001.html.ini
index 4955e1dd3dc..37c6149f69f 100644
--- a/tests/wpt/meta-legacy-layout/css/cssom-view/scrollWidthHeight-negative-margin-001.html.ini
+++ b/tests/wpt/meta-legacy-layout/css/cssom-view/scrollWidthHeight-negative-margin-001.html.ini
@@ -10,3 +10,6 @@
 
   [scrollWidth/Height with negative margins: ]
     expected: FAIL
+
+  [scrollWidth/Height with negative margins: overflow: clip;]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/css/cssom-view/scrollWidthHeight-negative-margin-002.html.ini b/tests/wpt/meta-legacy-layout/css/cssom-view/scrollWidthHeight-negative-margin-002.html.ini
index 9dead3c969c..5e15ae6eabf 100644
--- a/tests/wpt/meta-legacy-layout/css/cssom-view/scrollWidthHeight-negative-margin-002.html.ini
+++ b/tests/wpt/meta-legacy-layout/css/cssom-view/scrollWidthHeight-negative-margin-002.html.ini
@@ -479,3 +479,111 @@
 
   [scrollHeight with negative margins: display: flow-root; overflow: scroll; direction: rtl; flex-direction: row;]
     expected: FAIL
+
+  [scrollWidth with negative margins: display: flow-root; overflow: clip; direction: ltr; flex-direction: row;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flow-root; overflow: clip; direction: ltr; flex-direction: row;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flow-root; overflow: clip; direction: rtl; flex-direction: row;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flow-root; overflow: clip; direction: rtl; flex-direction: row;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: row-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: row-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: row-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: row-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: row-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: row-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: column wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: column wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: column wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: column wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-direction: column-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-direction: column-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: column-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: ltr; flex-flow: column-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollWidth with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: column-reverse wrap-reverse;]
+    expected: FAIL
+
+  [scrollHeight with negative margins: display: flex; overflow: clip; direction: rtl; flex-flow: column-reverse wrap-reverse;]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/custom-elements/element-internals-shadowroot.html.ini b/tests/wpt/meta-legacy-layout/custom-elements/element-internals-shadowroot.html.ini
index 092c83cb16b..8867cf85984 100644
--- a/tests/wpt/meta-legacy-layout/custom-elements/element-internals-shadowroot.html.ini
+++ b/tests/wpt/meta-legacy-layout/custom-elements/element-internals-shadowroot.html.ini
@@ -1,16 +1,10 @@
 [element-internals-shadowroot.html]
   expected: ERROR
-  [ElementInternals cannot be called before constructor, upgrade case]
-    expected: FAIL
-
   [ElementInternals.shadowRoot allows access to open shadow root]
     expected: FAIL
 
   [ElementInternals.shadowRoot allows access to closed shadow root]
     expected: FAIL
 
-  [ElementInternals *can* be called after constructor, upgrade case]
-    expected: FAIL
-
   [ElementInternals.shadowRoot doesn't reveal pre-attached closed shadowRoot]
     expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html.ini b/tests/wpt/meta-legacy-layout/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html.ini
index d8b66a385b9..8205a1b4aa7 100644
--- a/tests/wpt/meta-legacy-layout/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html.ini
+++ b/tests/wpt/meta-legacy-layout/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html.ini
@@ -10,3 +10,9 @@
 
   [Reactions to atomic move are called in order of element, not in order of operation]
     expected: FAIL
+
+  [When connectedCallback is not defined, no crash]
+    expected: FAIL
+
+  [When disconnectedCallback is not defined, no crash]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/dom/observable/tentative/observable-constructor.any.js.ini b/tests/wpt/meta-legacy-layout/dom/observable/tentative/observable-constructor.any.js.ini
index 8221c036594..f6fc12bc3a4 100644
--- a/tests/wpt/meta-legacy-layout/dom/observable/tentative/observable-constructor.any.js.ini
+++ b/tests/wpt/meta-legacy-layout/dom/observable/tentative/observable-constructor.any.js.ini
@@ -119,6 +119,15 @@
   [Producer-initiated unsubscription in a downstream Observable fires abort events before each teardown, in downstream->upstream order]
     expected: FAIL
 
+  [Multiple subscriptions share the same producer and teardown runs only after last subscription abort]
+    expected: FAIL
+
+  [New subscription after complete creates new producer]
+    expected: FAIL
+
+  [Teardown runs after last unsubscribe regardless of unsubscription order]
+    expected: FAIL
+
 
 [observable-constructor.any.html]
   [Observable constructor]
@@ -240,3 +249,12 @@
 
   [Producer-initiated unsubscription in a downstream Observable fires abort events before each teardown, in downstream->upstream order]
     expected: FAIL
+
+  [Multiple subscriptions share the same producer and teardown runs only after last subscription abort]
+    expected: FAIL
+
+  [New subscription after complete creates new producer]
+    expected: FAIL
+
+  [Teardown runs after last unsubscribe regardless of unsubscription order]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/dom/observable/tentative/observable-from.any.js.ini b/tests/wpt/meta-legacy-layout/dom/observable/tentative/observable-from.any.js.ini
index 82405955eaa..bbc5fde7bb0 100644
--- a/tests/wpt/meta-legacy-layout/dom/observable/tentative/observable-from.any.js.ini
+++ b/tests/wpt/meta-legacy-layout/dom/observable/tentative/observable-from.any.js.ini
@@ -146,6 +146,12 @@
   [Invalid iterator protocol error is surfaced before Subscriber#signal is consulted]
     expected: FAIL
 
+  [from(): Asynchronous iterable multiple in-flight subscriptions]
+    expected: FAIL
+
+  [from(): Sync iterable multiple in-flight subscriptions]
+    expected: FAIL
+
 
 [observable-from.any.worker.html]
   [from(): Observable.from() is a function]
@@ -294,3 +300,9 @@
 
   [Invalid iterator protocol error is surfaced before Subscriber#signal is consulted]
     expected: FAIL
+
+  [from(): Asynchronous iterable multiple in-flight subscriptions]
+    expected: FAIL
+
+  [from(): Sync iterable multiple in-flight subscriptions]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/fetch/fetch-later/quota.tentative.https.window.js.ini b/tests/wpt/meta-legacy-layout/fetch/fetch-later/quota.tentative.https.window.js.ini
deleted file mode 100644
index c27d071ac18..00000000000
--- a/tests/wpt/meta-legacy-layout/fetch/fetch-later/quota.tentative.https.window.js.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[quota.tentative.https.window.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/fetch/metadata/generated/css-font-face.sub.tentative.html.ini b/tests/wpt/meta-legacy-layout/fetch/metadata/generated/css-font-face.sub.tentative.html.ini
index 3a6b179aa6e..33b1919a575 100644
--- a/tests/wpt/meta-legacy-layout/fetch/metadata/generated/css-font-face.sub.tentative.html.ini
+++ b/tests/wpt/meta-legacy-layout/fetch/metadata/generated/css-font-face.sub.tentative.html.ini
@@ -23,15 +23,9 @@
   [sec-fetch-user - Not sent to non-trustworthy cross-site destination]
     expected: FAIL
 
-  [sec-fetch-dest - Not sent to non-trustworthy cross-site destination]
-    expected: FAIL
-
   [sec-fetch-dest - Not sent to non-trustworthy same-origin destination]
     expected: FAIL
 
-  [sec-fetch-dest - Not sent to non-trustworthy same-site destination]
-    expected: FAIL
-
   [sec-fetch-storage-access - Not sent to non-trustworthy cross-site destination]
     expected: FAIL
 
@@ -40,3 +34,6 @@
 
   [sec-fetch-mode - Not sent to non-trustworthy same-site destination]
     expected: FAIL
+
+  [sec-fetch-storage-access - Not sent to non-trustworthy same-origin destination]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/008.html.ini b/tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/008.html.ini
similarity index 100%
rename from tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/008.html.ini
rename to tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/008.html.ini
diff --git a/tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/009.html.ini b/tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/009.html.ini
deleted file mode 100644
index 3fb21c9b2c6..00000000000
--- a/tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/009.html.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[009.html]
-  [Link with onclick form submit to javascript url with document.write and href navigation ]
-    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/initial-empty-document/iframe-nosrc.html.ini b/tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/initial-empty-document/iframe-nosrc.html.ini
index 2241163d563..2c06e12ce81 100644
--- a/tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/initial-empty-document/iframe-nosrc.html.ini
+++ b/tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/initial-empty-document/iframe-nosrc.html.ini
@@ -1,9 +1,3 @@
 [iframe-nosrc.html]
   [window.open]
     expected: FAIL
-
-  [form submission]
-    expected: FAIL
-
-  [link click]
-    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html.ini b/tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html.ini
new file mode 100644
index 00000000000..60a4fa51f8a
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html.ini
@@ -0,0 +1,3 @@
+[a-click.html]
+  [aElement.click() before the load event must NOT replace]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/manual/context-attributes/getContextAttributes.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/manual/context-attributes/getContextAttributes.html.ini
index 83c85188374..1db21456d90 100644
--- a/tests/wpt/meta-legacy-layout/html/canvas/element/manual/context-attributes/getContextAttributes.html.ini
+++ b/tests/wpt/meta-legacy-layout/html/canvas/element/manual/context-attributes/getContextAttributes.html.ini
@@ -25,3 +25,9 @@
 
   [Test context creation attributes willReadFrequently: false]
     expected: FAIL
+
+  [Test context creation attributes colorType: unorm8]
+    expected: FAIL
+
+  [Test context creation attributes colorType: float16]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position-edge-cases.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position-edge-cases.tentative.html.ini
deleted file mode 100644
index dc8137a3a4e..00000000000
--- a/tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position-edge-cases.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[2d.text.measure.caret-position-edge-cases.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position-edges.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position-edges.tentative.html.ini
deleted file mode 100644
index c1d026a098f..00000000000
--- a/tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position-edges.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[2d.text.measure.caret-position-edges.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position.tentative.html.ini
deleted file mode 100644
index 51ffef6397a..00000000000
--- a/tests/wpt/meta-legacy-layout/html/canvas/element/text/2d.text.measure.caret-position.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[2d.text.measure.caret-position.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edge-cases.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edge-cases.tentative.html.ini
deleted file mode 100644
index dc8137a3a4e..00000000000
--- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edge-cases.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[2d.text.measure.caret-position-edge-cases.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edge-cases.tentative.worker.js.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edge-cases.tentative.worker.js.ini
deleted file mode 100644
index 074dbcf4af4..00000000000
--- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edge-cases.tentative.worker.js.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[2d.text.measure.caret-position-edge-cases.tentative.worker.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edges.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edges.tentative.html.ini
deleted file mode 100644
index c1d026a098f..00000000000
--- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edges.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[2d.text.measure.caret-position-edges.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edges.tentative.worker.js.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edges.tentative.worker.js.ini
deleted file mode 100644
index 0133a89a2ff..00000000000
--- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position-edges.tentative.worker.js.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[2d.text.measure.caret-position-edges.tentative.worker.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position.tentative.html.ini
deleted file mode 100644
index 51ffef6397a..00000000000
--- a/tests/wpt/meta-legacy-layout/html/canvas/offscreen/text/2d.text.measure.caret-position.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[2d.text.measure.caret-position.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/interaction/focus/the-autofocus-attribute/autofocus-dialog.html.ini b/tests/wpt/meta-legacy-layout/html/interaction/focus/the-autofocus-attribute/autofocus-dialog.html.ini
index 830aeb8ae48..fdc27d37788 100644
--- a/tests/wpt/meta-legacy-layout/html/interaction/focus/the-autofocus-attribute/autofocus-dialog.html.ini
+++ b/tests/wpt/meta-legacy-layout/html/interaction/focus/the-autofocus-attribute/autofocus-dialog.html.ini
@@ -1,7 +1,6 @@
 [autofocus-dialog.html]
-  expected: TIMEOUT
   [<dialog> can contain autofocus, without stopping page autofocus content from working]
     expected: FAIL
 
   [<dialog>-contained autofocus element gets focused when the dialog is shown]
-    expected: TIMEOUT
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html.ini
index 6db14726989..5059f928f1a 100644
--- a/tests/wpt/meta-legacy-layout/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html.ini
+++ b/tests/wpt/meta-legacy-layout/html/rendering/widgets/baseline-alignment-and-overflow.tentative.html.ini
@@ -83,9 +83,6 @@
   [<input type="email" value="x" style="overflow: hidden; appearance: auto;">]
     expected: FAIL
 
-  [<input type="color" value="#000000" style="overflow: visible; appearance: none;">]
-    expected: FAIL
-
   [<input type="submit" value="x" style="overflow: scroll; appearance: auto;">]
     expected: FAIL
 
@@ -137,9 +134,6 @@
   [<input type="time" value="00:00" style="overflow: hidden; appearance: none;">]
     expected: FAIL
 
-  [<input type="color" value="#000000" style="overflow: visible; appearance: auto;">]
-    expected: FAIL
-
   [<input type="time" value="00:00" style="overflow: scroll; appearance: none;">]
     expected: FAIL
 
@@ -173,9 +167,6 @@
   [<input type="week" value="2020-W01" style="overflow: visible; appearance: auto;">]
     expected: FAIL
 
-  [<input type="range" style="overflow: visible; appearance: auto;">]
-    expected: FAIL
-
   [<input type="month" value="2020-01" style="overflow: visible; appearance: auto;">]
     expected: FAIL
 
@@ -242,9 +233,6 @@
   [<input type="password" value="x" style="overflow: hidden; appearance: none;">]
     expected: FAIL
 
-  [<input type="range" style="overflow: visible; appearance: none;">]
-    expected: FAIL
-
   [<input type="url" value="data:,x" style="overflow: visible; appearance: auto;">]
     expected: FAIL
 
@@ -299,9 +287,6 @@
   [<input type="reset" value="x" style="overflow: hidden; appearance: none;">]
     expected: FAIL
 
-  [<input type="image" src="data:(png)" alt="x" style="overflow: visible; appearance: none;">]
-    expected: FAIL
-
   [<input type="button" value="x" style="overflow: visible; appearance: none;">]
     expected: FAIL
 
@@ -314,9 +299,6 @@
   [<input type="text" value="x" style="overflow: scroll; appearance: none;">]
     expected: FAIL
 
-  [<input type="image" src="data:(png)" alt="x" style="overflow: visible; appearance: auto;">]
-    expected: FAIL
-
   [<input type="reset" value="x" style="overflow: visible; appearance: auto;">]
     expected: FAIL
 
@@ -329,3 +311,8 @@
   [<input type="url" value="data:,x" style="overflow: scroll; appearance: none;">]
     expected: FAIL
 
+  [<input type="image" src="data:,broken" alt="x" style="overflow: visible; appearance: auto;">]
+    expected: FAIL
+
+  [<input type="image" src="data:,broken" alt="x" style="overflow: visible; appearance: none;">]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/html/rendering/widgets/button-layout/input-type-button-clip.html.ini b/tests/wpt/meta-legacy-layout/html/rendering/widgets/button-layout/input-type-button-clip.html.ini
new file mode 100644
index 00000000000..1a31628240b
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/html/rendering/widgets/button-layout/input-type-button-clip.html.ini
@@ -0,0 +1,2 @@
+[input-type-button-clip.html]
+  expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-nav-window-open.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-nav-window-open.html.ini
new file mode 100644
index 00000000000..973d948efa0
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe-loading-lazy-nav-window-open.html.ini
@@ -0,0 +1,3 @@
+[iframe-loading-lazy-nav-window-open.html]
+  [Navigating iframe loading='lazy' before it is loaded: location.replace]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini
index 6f7461b9472..27d7d744d3d 100644
--- a/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini
+++ b/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini
@@ -1,4 +1,4 @@
 [iframe_sandbox_popups_nonescaping-1.html]
   type: testharness
   [Check that popups from a sandboxed iframe do not escape the sandbox]
-    expected: FAIL
+    expected: NOTRUN
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini
index f2378357bcc..76e34322dca 100644
--- a/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini
+++ b/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-2.html.ini
@@ -1,5 +1,5 @@
 [iframe_sandbox_popups_nonescaping-2.html]
   type: testharness
-  expected: CRASH
+  expected: TIMEOUT
   [Check that popups from a sandboxed iframe do not escape the sandbox]
     expected: NOTRUN
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini
index d5fd800f09d..653c5e98f2f 100644
--- a/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini
+++ b/tests/wpt/meta-legacy-layout/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-3.html.ini
@@ -1,4 +1,4 @@
 [iframe_sandbox_popups_nonescaping-3.html]
-  expected: TIMEOUT
+  expected: CRASH
   [Check that popups from a sandboxed iframe do not escape the sandbox]
     expected: NOTRUN
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/select-value-selectedOption.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/select-value-selectedOption.tentative.html.ini
deleted file mode 100644
index 32d785edfa8..00000000000
--- a/tests/wpt/meta-legacy-layout/html/semantics/forms/the-select-element/select-value-selectedOption.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[select-value-selectedOption.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/interactive-elements/the-dialog-element/toggle-events.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/interactive-elements/the-dialog-element/toggle-events.tentative.html.ini
new file mode 100644
index 00000000000..2ed41215882
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/html/semantics/interactive-elements/the-dialog-element/toggle-events.tentative.html.ini
@@ -0,0 +1,2 @@
+[toggle-events.tentative.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/invokers/idlharness.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/invokers/idlharness.tentative.html.ini
deleted file mode 100644
index 7238af7327e..00000000000
--- a/tests/wpt/meta-legacy-layout/html/semantics/invokers/idlharness.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[idlharness.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/invokers/interestelement-interface.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/invokers/interestelement-interface.tentative.html.ini
deleted file mode 100644
index 8fe4e9c2d7b..00000000000
--- a/tests/wpt/meta-legacy-layout/html/semantics/invokers/interestelement-interface.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[interestelement-interface.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/invokers/invokeelement-interface.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/invokers/invokeelement-interface.tentative.html.ini
deleted file mode 100644
index 952e7cada9b..00000000000
--- a/tests/wpt/meta-legacy-layout/html/semantics/invokers/invokeelement-interface.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[invokeelement-interface.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/popovers/button-type-reset-popovertarget.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/popovers/button-type-reset-popovertarget.tentative.html.ini
new file mode 100644
index 00000000000..8db294c3caa
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/html/semantics/popovers/button-type-reset-popovertarget.tentative.html.ini
@@ -0,0 +1,2 @@
+[button-type-reset-popovertarget.tentative.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-css-properties.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-css-properties.tentative.html.ini
deleted file mode 100644
index 5a0e2042d4a..00000000000
--- a/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-css-properties.tentative.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[popover-css-properties.tentative.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-types-with-hints.tentative.html.ini b/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-types-with-hints.tentative.html.ini
new file mode 100644
index 00000000000..b184c9f66a4
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/html/semantics/popovers/popover-types-with-hints.tentative.html.ini
@@ -0,0 +1,2 @@
+[popover-types-with-hints.tentative.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/html/webappapis/scripting/event-loops/fully_active_document.window.js.ini b/tests/wpt/meta-legacy-layout/html/webappapis/scripting/event-loops/fully_active_document.window.js.ini
deleted file mode 100644
index 4da444c3096..00000000000
--- a/tests/wpt/meta-legacy-layout/html/webappapis/scripting/event-loops/fully_active_document.window.js.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[fully_active_document.window.html]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/navigation-timing/test-navigation-type-reload.html.ini b/tests/wpt/meta-legacy-layout/navigation-timing/test-navigation-type-reload.html.ini
index 3f58e17f290..c94589149ae 100644
--- a/tests/wpt/meta-legacy-layout/navigation-timing/test-navigation-type-reload.html.ini
+++ b/tests/wpt/meta-legacy-layout/navigation-timing/test-navigation-type-reload.html.ini
@@ -10,3 +10,12 @@
 
   [Reload domContentLoadedEventEnd > Original domContentLoadedEventEnd]
     expected: FAIL
+
+  [Reload domContentLoadedEventStart > Original domContentLoadedEventStart]
+    expected: FAIL
+
+  [Reload domInteractive > Original domInteractive]
+    expected: FAIL
+
+  [Reload fetchStart > Original fetchStart]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/notifications/constructor-basic.https.html.ini b/tests/wpt/meta-legacy-layout/notifications/constructor-basic.https.html.ini
new file mode 100644
index 00000000000..e9cc5687908
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/constructor-basic.https.html.ini
@@ -0,0 +1,9 @@
+[constructor-basic.https.html]
+  [Called the notification constructor with one argument.]
+    expected: FAIL
+
+  [Constructing a notification without a NotificationOptions defaults to null.]
+    expected: FAIL
+
+  [constructing a notification with a NotificationOptions dictionary correctly sets and reflects the silent attribute.]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/notifications/constructor-invalid.https.html.ini b/tests/wpt/meta-legacy-layout/notifications/constructor-invalid.https.html.ini
new file mode 100644
index 00000000000..c9e61fa72d4
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/constructor-invalid.https.html.ini
@@ -0,0 +1,3 @@
+[constructor-invalid.https.html]
+  [Called the notification constructor with no arguments.]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/notifications/constructor-non-secure.html.ini b/tests/wpt/meta-legacy-layout/notifications/constructor-non-secure.html.ini
new file mode 100644
index 00000000000..398ddff620d
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/constructor-non-secure.html.ini
@@ -0,0 +1,3 @@
+[constructor-non-secure.html]
+  [new Notification calls onerror in non-secure contexts]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/notifications/fetch-url-resolve.https.window.js.ini b/tests/wpt/meta-legacy-layout/notifications/fetch-url-resolve.https.window.js.ini
new file mode 100644
index 00000000000..9bb35084956
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/fetch-url-resolve.https.window.js.ini
@@ -0,0 +1,7 @@
+[fetch-url-resolve.https.window.html]
+  expected: ERROR
+  [new Notification() should give a resolved icon URL]
+    expected: NOTRUN
+
+  [getNotifications() should give a resolved icon URL]
+    expected: NOTRUN
diff --git a/tests/wpt/meta-legacy-layout/notifications/getnotifications-across-processes.https.window.js.ini b/tests/wpt/meta-legacy-layout/notifications/getnotifications-across-processes.https.window.js.ini
new file mode 100644
index 00000000000..feb4af8281c
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/getnotifications-across-processes.https.window.js.ini
@@ -0,0 +1,2 @@
+[getnotifications-across-processes.https.window.html]
+  expected: ERROR
diff --git a/tests/wpt/meta-legacy-layout/notifications/global-teardown-crash.html.ini b/tests/wpt/meta-legacy-layout/notifications/global-teardown-crash.html.ini
new file mode 100644
index 00000000000..b8f68bcc916
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/global-teardown-crash.html.ini
@@ -0,0 +1,2 @@
+[global-teardown-crash.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/notifications/historical.any.js.ini b/tests/wpt/meta-legacy-layout/notifications/historical.any.js.ini
new file mode 100644
index 00000000000..30e578ac510
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/historical.any.js.ini
@@ -0,0 +1,8 @@
+[historical.any.html]
+  [Notification.get is obsolete]
+    expected: FAIL
+
+
+[historical.any.worker.html]
+  [Notification.get is obsolete]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/notifications/idlharness.https.any.js.ini b/tests/wpt/meta-legacy-layout/notifications/idlharness.https.any.js.ini
new file mode 100644
index 00000000000..15fff7cc0b8
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/idlharness.https.any.js.ini
@@ -0,0 +1,353 @@
+[idlharness.https.any.worker.html]
+  [idl_test setup]
+    expected: FAIL
+
+  [Notification interface: existence and properties of interface object]
+    expected: FAIL
+
+  [Notification interface object length]
+    expected: FAIL
+
+  [Notification interface object name]
+    expected: FAIL
+
+  [Notification interface: existence and properties of interface prototype object]
+    expected: FAIL
+
+  [Notification interface: existence and properties of interface prototype object's "constructor" property]
+    expected: FAIL
+
+  [Notification interface: existence and properties of interface prototype object's @@unscopables property]
+    expected: FAIL
+
+  [Notification interface: attribute permission]
+    expected: FAIL
+
+  [Notification interface: member requestPermission]
+    expected: FAIL
+
+  [Notification interface: attribute maxActions]
+    expected: FAIL
+
+  [Notification interface: attribute onclick]
+    expected: FAIL
+
+  [Notification interface: attribute onshow]
+    expected: FAIL
+
+  [Notification interface: attribute onerror]
+    expected: FAIL
+
+  [Notification interface: attribute onclose]
+    expected: FAIL
+
+  [Notification interface: attribute title]
+    expected: FAIL
+
+  [Notification interface: attribute dir]
+    expected: FAIL
+
+  [Notification interface: attribute lang]
+    expected: FAIL
+
+  [Notification interface: attribute body]
+    expected: FAIL
+
+  [Notification interface: attribute tag]
+    expected: FAIL
+
+  [Notification interface: attribute image]
+    expected: FAIL
+
+  [Notification interface: attribute icon]
+    expected: FAIL
+
+  [Notification interface: attribute badge]
+    expected: FAIL
+
+  [Notification interface: attribute vibrate]
+    expected: FAIL
+
+  [Notification interface: attribute timestamp]
+    expected: FAIL
+
+  [Notification interface: attribute renotify]
+    expected: FAIL
+
+  [Notification interface: attribute silent]
+    expected: FAIL
+
+  [Notification interface: attribute requireInteraction]
+    expected: FAIL
+
+  [Notification interface: attribute data]
+    expected: FAIL
+
+  [Notification interface: attribute actions]
+    expected: FAIL
+
+  [Notification interface: operation close()]
+    expected: FAIL
+
+  [Notification must be primary interface of notification]
+    expected: FAIL
+
+  [Stringification of notification]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "permission" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must not have property "requestPermission"]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "maxActions" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "onclick" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "onshow" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "onerror" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "onclose" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "title" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "dir" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "lang" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "body" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "tag" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "image" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "icon" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "badge" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "vibrate" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "timestamp" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "renotify" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "silent" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "requireInteraction" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "data" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "actions" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "close()" with the proper type]
+    expected: FAIL
+
+  [ServiceWorkerRegistration interface: operation showNotification(DOMString, optional NotificationOptions)]
+    expected: FAIL
+
+  [ServiceWorkerRegistration interface: operation getNotifications(optional GetNotificationOptions)]
+    expected: FAIL
+
+
+[idlharness.https.any.sharedworker.html]
+  expected: ERROR
+
+[idlharness.https.any.serviceworker.html]
+  expected: ERROR
+
+[idlharness.https.any.html]
+  [idl_test setup]
+    expected: FAIL
+
+  [Notification interface: existence and properties of interface object]
+    expected: FAIL
+
+  [Notification interface object length]
+    expected: FAIL
+
+  [Notification interface object name]
+    expected: FAIL
+
+  [Notification interface: existence and properties of interface prototype object]
+    expected: FAIL
+
+  [Notification interface: existence and properties of interface prototype object's "constructor" property]
+    expected: FAIL
+
+  [Notification interface: existence and properties of interface prototype object's @@unscopables property]
+    expected: FAIL
+
+  [Notification interface: attribute permission]
+    expected: FAIL
+
+  [Notification interface: operation requestPermission(optional NotificationPermissionCallback)]
+    expected: FAIL
+
+  [Notification interface: attribute maxActions]
+    expected: FAIL
+
+  [Notification interface: attribute onclick]
+    expected: FAIL
+
+  [Notification interface: attribute onshow]
+    expected: FAIL
+
+  [Notification interface: attribute onerror]
+    expected: FAIL
+
+  [Notification interface: attribute onclose]
+    expected: FAIL
+
+  [Notification interface: attribute title]
+    expected: FAIL
+
+  [Notification interface: attribute dir]
+    expected: FAIL
+
+  [Notification interface: attribute lang]
+    expected: FAIL
+
+  [Notification interface: attribute body]
+    expected: FAIL
+
+  [Notification interface: attribute tag]
+    expected: FAIL
+
+  [Notification interface: attribute image]
+    expected: FAIL
+
+  [Notification interface: attribute icon]
+    expected: FAIL
+
+  [Notification interface: attribute badge]
+    expected: FAIL
+
+  [Notification interface: attribute vibrate]
+    expected: FAIL
+
+  [Notification interface: attribute timestamp]
+    expected: FAIL
+
+  [Notification interface: attribute renotify]
+    expected: FAIL
+
+  [Notification interface: attribute silent]
+    expected: FAIL
+
+  [Notification interface: attribute requireInteraction]
+    expected: FAIL
+
+  [Notification interface: attribute data]
+    expected: FAIL
+
+  [Notification interface: attribute actions]
+    expected: FAIL
+
+  [Notification interface: operation close()]
+    expected: FAIL
+
+  [Notification must be primary interface of notification]
+    expected: FAIL
+
+  [Stringification of notification]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "permission" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "requestPermission(optional NotificationPermissionCallback)" with the proper type]
+    expected: FAIL
+
+  [Notification interface: calling requestPermission(optional NotificationPermissionCallback) on notification with too few arguments must throw TypeError]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "maxActions" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "onclick" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "onshow" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "onerror" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "onclose" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "title" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "dir" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "lang" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "body" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "tag" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "image" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "icon" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "badge" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "vibrate" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "timestamp" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "renotify" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "silent" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "requireInteraction" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "data" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "actions" with the proper type]
+    expected: FAIL
+
+  [Notification interface: notification must inherit property "close()" with the proper type]
+    expected: FAIL
+
+  [ServiceWorkerRegistration interface: operation showNotification(DOMString, optional NotificationOptions)]
+    expected: FAIL
+
+  [ServiceWorkerRegistration interface: operation getNotifications(optional GetNotificationOptions)]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/notifications/instance.https.window.js.ini b/tests/wpt/meta-legacy-layout/notifications/instance.https.window.js.ini
new file mode 100644
index 00000000000..a9ef626f55c
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/instance.https.window.js.ini
@@ -0,0 +1,2 @@
+[instance.https.window.html]
+  expected: ERROR
diff --git a/tests/wpt/meta-legacy-layout/notifications/permission.html.ini b/tests/wpt/meta-legacy-layout/notifications/permission.html.ini
new file mode 100644
index 00000000000..b9b5d759f7c
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/permission.html.ini
@@ -0,0 +1,3 @@
+[permission.html]
+  [Checked the Notification.permission property.]
+    expected: FAIL
diff --git a/tests/wpt/meta-legacy-layout/notifications/permissions-non-secure.html.ini b/tests/wpt/meta-legacy-layout/notifications/permissions-non-secure.html.ini
new file mode 100644
index 00000000000..adceb650578
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/permissions-non-secure.html.ini
@@ -0,0 +1,10 @@
+[permissions-non-secure.html]
+  expected: ERROR
+  [Notification.requestPermission must be called from a secure context]
+    expected: FAIL
+
+  [Notification.permission must be called from a secure context]
+    expected: FAIL
+
+  [Notification.permission must be called from a secure worker]
+    expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/notifications/registration-association.https.window.js.ini b/tests/wpt/meta-legacy-layout/notifications/registration-association.https.window.js.ini
new file mode 100644
index 00000000000..b762845e0ae
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/registration-association.https.window.js.ini
@@ -0,0 +1,4 @@
+[registration-association.https.window.html]
+  expected: ERROR
+  [A new SW registration gets no previous notification]
+    expected: NOTRUN
diff --git a/tests/wpt/meta-legacy-layout/notifications/shownotification-without-permission.https.window.js.ini b/tests/wpt/meta-legacy-layout/notifications/shownotification-without-permission.https.window.js.ini
new file mode 100644
index 00000000000..0cef35ee46a
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/shownotification-without-permission.https.window.js.ini
@@ -0,0 +1,4 @@
+[shownotification-without-permission.https.window.html]
+  expected: ERROR
+  [showNotificaiton should not be listed with permission=default]
+    expected: NOTRUN
diff --git a/tests/wpt/meta-legacy-layout/notifications/shownotification.https.window.js.ini b/tests/wpt/meta-legacy-layout/notifications/shownotification.https.window.js.ini
new file mode 100644
index 00000000000..f852259e614
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/shownotification.https.window.js.ini
@@ -0,0 +1,2 @@
+[shownotification.https.window.html]
+  expected: ERROR
diff --git a/tests/wpt/meta-legacy-layout/notifications/tag.https.html.ini b/tests/wpt/meta-legacy-layout/notifications/tag.https.html.ini
new file mode 100644
index 00000000000..fa3a0576e2d
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/tag.https.html.ini
@@ -0,0 +1,4 @@
+[tag.https.html]
+  expected: ERROR
+  [Opening two notifications with the same tag should close the first one]
+    expected: NOTRUN
diff --git a/tests/wpt/meta-legacy-layout/notifications/worker-gc.https.window.js.ini b/tests/wpt/meta-legacy-layout/notifications/worker-gc.https.window.js.ini
new file mode 100644
index 00000000000..8dcee2fe7c8
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/notifications/worker-gc.https.window.js.ini
@@ -0,0 +1,4 @@
+[worker-gc.https.window.html]
+  expected: ERROR
+  [An active notification should prevent worker cycle collection]
+    expected: NOTRUN
diff --git a/tests/wpt/meta-legacy-layout/performance-timeline/tentative/detached-frame.html.ini b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/detached-frame.html.ini
new file mode 100644
index 00000000000..c5aac72fad4
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/detached-frame.html.ini
@@ -0,0 +1,2 @@
+[detached-frame.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-A-A.html.ini b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-A-A.html.ini
new file mode 100644
index 00000000000..3a52ab8c6bb
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-A-A.html.ini
@@ -0,0 +1,2 @@
+[include-frames-originA-A-A.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-A.html.ini b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-A.html.ini
new file mode 100644
index 00000000000..be55d35736e
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-A.html.ini
@@ -0,0 +1,2 @@
+[include-frames-originA-A.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-AA.html.ini b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-AA.html.ini
new file mode 100644
index 00000000000..53d60ea5e29
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-AA.html.ini
@@ -0,0 +1,2 @@
+[include-frames-originA-AA.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-AB.html.ini b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-AB.html.ini
new file mode 100644
index 00000000000..f2edd3bd1d8
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-AB.html.ini
@@ -0,0 +1,2 @@
+[include-frames-originA-AB.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B-A.html.ini b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B-A.html.ini
new file mode 100644
index 00000000000..f9edb91a6d9
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B-A.html.ini
@@ -0,0 +1,2 @@
+[include-frames-originA-B-A.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B-B.html.ini b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B-B.html.ini
new file mode 100644
index 00000000000..fe446b62c4c
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B-B.html.ini
@@ -0,0 +1,2 @@
+[include-frames-originA-B-B.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B.html.ini b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B.html.ini
new file mode 100644
index 00000000000..c37ba79c265
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/include-frames-originA-B.html.ini
@@ -0,0 +1,2 @@
+[include-frames-originA-B.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/performance-timeline/tentative/performance-entry-source.html.ini b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/performance-entry-source.html.ini
new file mode 100644
index 00000000000..9590b722a6d
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/performance-entry-source.html.ini
@@ -0,0 +1,2 @@
+[performance-entry-source.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/performance-timeline/tentative/with-filter-options-originA.html.ini b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/with-filter-options-originA.html.ini
new file mode 100644
index 00000000000..8f143701190
--- /dev/null
+++ b/tests/wpt/meta-legacy-layout/performance-timeline/tentative/with-filter-options-originA.html.ini
@@ -0,0 +1,2 @@
+[with-filter-options-originA.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/subresource-integrity/identity-digest/tentative/fetch.any.js.ini b/tests/wpt/meta-legacy-layout/subresource-integrity/identity-digest/tentative/fetch.any.js.ini
deleted file mode 100644
index 088777c8ee7..00000000000
--- a/tests/wpt/meta-legacy-layout/subresource-integrity/identity-digest/tentative/fetch.any.js.ini
+++ /dev/null
@@ -1,26 +0,0 @@
-[fetch.any.worker.html?include=integrity-pass]
-  expected: TIMEOUT
-
-[fetch.any.worker.html?include=integrity-none]
-  expected: TIMEOUT
-
-[fetch.any.sharedworker.html?include=integrity-pass]
-  expected: TIMEOUT
-
-[fetch.any.worker.html?include=integrity-fail]
-  expected: TIMEOUT
-
-[fetch.any.html?include=integrity-pass]
-  expected: TIMEOUT
-
-[fetch.any.sharedworker.html?include=integrity-fail]
-  expected: TIMEOUT
-
-[fetch.any.sharedworker.html?include=integrity-none]
-  expected: TIMEOUT
-
-[fetch.any.html?include=integrity-fail]
-  expected: TIMEOUT
-
-[fetch.any.html?include=integrity-none]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/subresource-integrity/identity-digest/tentative/script.window.js.ini b/tests/wpt/meta-legacy-layout/subresource-integrity/identity-digest/tentative/script.window.js.ini
deleted file mode 100644
index 6a9720578d3..00000000000
--- a/tests/wpt/meta-legacy-layout/subresource-integrity/identity-digest/tentative/script.window.js.ini
+++ /dev/null
@@ -1,8 +0,0 @@
-[script.window.html?include=integrity-pass]
-  expected: TIMEOUT
-
-[script.window.html?include=integrity-none]
-  expected: TIMEOUT
-
-[script.window.html?include=integrity-fail]
-  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/basic.tentative.any.js.ini b/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/basic.tentative.any.js.ini
index 011ab5071f8..df78ffbd91e 100644
--- a/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/basic.tentative.any.js.ini
+++ b/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/basic.tentative.any.js.ini
@@ -1,26 +1,23 @@
-[basic.tentative.any.html]
-  expected: ERROR
+[basic.tentative.any.shadowrealm-in-sharedworker.html]
+  expected: TIMEOUT
 
-[basic.tentative.any.shadowrealm.html]
+[basic.tentative.any.html]
+  expected: TIMEOUT
+
+[basic.tentative.https.any.shadowrealm-in-serviceworker.html]
+  expected: TIMEOUT
+
+[basic.tentative.https.any.shadowrealm-in-audioworklet.html]
+  expected: TIMEOUT
+
+[basic.tentative.any.shadowrealm-in-shadowrealm.html]
+  expected: TIMEOUT
+
+[basic.tentative.any.shadowrealm-in-dedicatedworker.html]
   expected: TIMEOUT
 
 [basic.tentative.any.worker.html]
-  expected: ERROR
-
-[basic.tentative.any.shadowrealm-in-dedicatedworker.html]
-  expected: ERROR
-
-[basic.tentative.any.shadowrealm-in-shadowrealm.html]
-  expected: ERROR
-
-[basic.tentative.https.any.shadowrealm-in-audioworklet.html]
-  expected: ERROR
+  expected: TIMEOUT
 
 [basic.tentative.any.shadowrealm-in-window.html]
-  expected: ERROR
-
-[basic.tentative.any.shadowrealm-in-sharedworker.html]
-  expected: ERROR
-
-[basic.tentative.https.any.shadowrealm-in-serviceworker.html]
-  expected: ERROR
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/constants.tentative.any.js.ini b/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/constants.tentative.any.js.ini
index 30f84a64c54..e78b97c51f7 100644
--- a/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/constants.tentative.any.js.ini
+++ b/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/constants.tentative.any.js.ini
@@ -1,264 +1,23 @@
+[constants.tentative.any.shadowrealm-in-window.html]
+  expected: TIMEOUT
+
+[constants.tentative.https.any.shadowrealm-in-audioworklet.html]
+  expected: TIMEOUT
+
 [constants.tentative.any.html]
-  [constants]
-    expected: FAIL
+  expected: TIMEOUT
 
-  [constants 1]
-    expected: FAIL
+[constants.tentative.https.any.shadowrealm-in-serviceworker.html]
+  expected: TIMEOUT
 
-  [constants 2]
-    expected: FAIL
+[constants.tentative.any.shadowrealm-in-sharedworker.html]
+  expected: TIMEOUT
 
-  [constants 3]
-    expected: FAIL
+[constants.tentative.any.shadowrealm-in-dedicatedworker.html]
+  expected: TIMEOUT
 
-  [constants 4]
-    expected: FAIL
-
-  [constants 5]
-    expected: FAIL
-
-  [constants 6]
-    expected: FAIL
-
-  [constants 7]
-    expected: FAIL
-
-  [constants 8]
-    expected: FAIL
-
-  [constants 9]
-    expected: FAIL
-
-  [constants 10]
-    expected: FAIL
-
-  [constants 11]
-    expected: FAIL
-
-  [constants 12]
-    expected: FAIL
-
-  [constants 13]
-    expected: FAIL
-
-  [constants 14]
-    expected: FAIL
-
-  [constants 15]
-    expected: FAIL
-
-  [constants 16]
-    expected: FAIL
-
-  [constants 17]
-    expected: FAIL
-
-  [constants 18]
-    expected: FAIL
-
-  [constants 19]
-    expected: FAIL
-
-  [constants 20]
-    expected: FAIL
-
-  [constants 21]
-    expected: FAIL
-
-  [constants 22]
-    expected: FAIL
-
-  [constants 23]
-    expected: FAIL
-
-  [constants 24]
-    expected: FAIL
-
-  [constants 25]
-    expected: FAIL
-
-  [constants 26]
-    expected: FAIL
-
-  [constants 27]
-    expected: FAIL
-
-  [constants 28]
-    expected: FAIL
-
-  [constants 29]
-    expected: FAIL
-
-  [constants 30]
-    expected: FAIL
-
-  [constants 31]
-    expected: FAIL
-
-  [constants 32]
-    expected: FAIL
-
-  [constants 33]
-    expected: FAIL
-
-  [constants 34]
-    expected: FAIL
-
-  [constants 35]
-    expected: FAIL
-
-  [constants 36]
-    expected: FAIL
-
-  [constants 37]
-    expected: FAIL
-
-  [constants 38]
-    expected: FAIL
-
-  [constants 39]
-    expected: FAIL
-
-
-[constants.tentative.any.shadowrealm.html]
+[constants.tentative.any.shadowrealm-in-shadowrealm.html]
   expected: TIMEOUT
 
 [constants.tentative.any.worker.html]
-  [constants]
-    expected: FAIL
-
-  [constants 1]
-    expected: FAIL
-
-  [constants 2]
-    expected: FAIL
-
-  [constants 3]
-    expected: FAIL
-
-  [constants 4]
-    expected: FAIL
-
-  [constants 5]
-    expected: FAIL
-
-  [constants 6]
-    expected: FAIL
-
-  [constants 7]
-    expected: FAIL
-
-  [constants 8]
-    expected: FAIL
-
-  [constants 9]
-    expected: FAIL
-
-  [constants 10]
-    expected: FAIL
-
-  [constants 11]
-    expected: FAIL
-
-  [constants 12]
-    expected: FAIL
-
-  [constants 13]
-    expected: FAIL
-
-  [constants 14]
-    expected: FAIL
-
-  [constants 15]
-    expected: FAIL
-
-  [constants 16]
-    expected: FAIL
-
-  [constants 17]
-    expected: FAIL
-
-  [constants 18]
-    expected: FAIL
-
-  [constants 19]
-    expected: FAIL
-
-  [constants 20]
-    expected: FAIL
-
-  [constants 21]
-    expected: FAIL
-
-  [constants 22]
-    expected: FAIL
-
-  [constants 23]
-    expected: FAIL
-
-  [constants 24]
-    expected: FAIL
-
-  [constants 25]
-    expected: FAIL
-
-  [constants 26]
-    expected: FAIL
-
-  [constants 27]
-    expected: FAIL
-
-  [constants 28]
-    expected: FAIL
-
-  [constants 29]
-    expected: FAIL
-
-  [constants 30]
-    expected: FAIL
-
-  [constants 31]
-    expected: FAIL
-
-  [constants 32]
-    expected: FAIL
-
-  [constants 33]
-    expected: FAIL
-
-  [constants 34]
-    expected: FAIL
-
-  [constants 35]
-    expected: FAIL
-
-  [constants 36]
-    expected: FAIL
-
-  [constants 37]
-    expected: FAIL
-
-  [constants 38]
-    expected: FAIL
-
-  [constants 39]
-    expected: FAIL
-
-
-[constants.tentative.any.shadowrealm-in-sharedworker.html]
-  expected: ERROR
-
-[constants.tentative.any.shadowrealm-in-window.html]
-  expected: ERROR
-
-[constants.tentative.any.shadowrealm-in-shadowrealm.html]
-  expected: ERROR
-
-[constants.tentative.any.shadowrealm-in-dedicatedworker.html]
-  expected: ERROR
-
-[constants.tentative.https.any.shadowrealm-in-serviceworker.html]
-  expected: ERROR
-
-[constants.tentative.https.any.shadowrealm-in-audioworklet.html]
-  expected: ERROR
+  expected: TIMEOUT
diff --git a/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/imports.tentative.any.js.ini b/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/imports.tentative.any.js.ini
index 43680ccc3fc..a74efd3d8cf 100644
--- a/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/imports.tentative.any.js.ini
+++ b/tests/wpt/meta-legacy-layout/wasm/jsapi/js-string/imports.tentative.any.js.ini
@@ -1,30 +1,23 @@
-[imports.tentative.any.shadowrealm.html]
+[imports.tentative.any.shadowrealm-in-shadowrealm.html]
+  expected: TIMEOUT
+
+[imports.tentative.https.any.shadowrealm-in-audioworklet.html]
+  expected: TIMEOUT
+
+[imports.tentative.any.shadowrealm-in-dedicatedworker.html]
+  expected: TIMEOUT
+
+[imports.tentative.any.shadowrealm-in-window.html]
+  expected: TIMEOUT
+
+[imports.tentative.any.html]
   expected: TIMEOUT
 
 [imports.tentative.any.worker.html]
-  [imports]
-    expected: FAIL
-
-
-[imports.tentative.any.html]
-  [imports]
-    expected: FAIL
-
-
-[imports.tentative.https.any.shadowrealm-in-serviceworker.html]
-  expected: ERROR
+  expected: TIMEOUT
 
 [imports.tentative.any.shadowrealm-in-sharedworker.html]
-  expected: ERROR
+  expected: TIMEOUT
 
-[imports.tentative.any.shadowrealm-in-dedicatedworker.html]
-  expected: ERROR
-
-[imports.tentative.any.shadowrealm-in-shadowrealm.html]
-  expected: ERROR
-
-[imports.tentative.any.shadowrealm-in-window.html]
-  expected: ERROR
-
-[imports.tentative.https.any.shadowrealm-in-audioworklet.html]
-  expected: ERROR
+[imports.tentative.https.any.shadowrealm-in-serviceworker.html]
+  expected: TIMEOUT
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index 466711e22c8..ba197a1f837 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -4379,7 +4379,14 @@
         {}
        ]
       ]
-     }
+     },
+     "registered-property-parse-crash.html": [
+      "51b583a980658c0a80c81287dfd7586233a41bc7",
+      [
+       null,
+       {}
+      ]
+     ]
     },
     "css-pseudo": {
      "chrome-bug-1299142-crash.html": [
@@ -5490,6 +5497,13 @@
        {}
       ]
      ],
+     "url-syntax-crash.html": [
+      "e7ef1b0aa293845857ebbf35f4aa44c0d807be9e",
+      [
+       null,
+       {}
+      ]
+     ],
      "whitespace-in-fallback-crash.html": [
       "7e150e8453e4d7875ad4bce08aa3af4385d4ffa4",
       [
@@ -6388,6 +6402,13 @@
        {}
       ]
      ],
+     "editing-on-newline-should-not-crash.html": [
+      "9c2f6ccaf4ffadac9a04adf4dcca687a3041f9c8",
+      [
+       null,
+       {}
+      ]
+     ],
      "enableInlineTableEditing-after-updating-selection-range-cross-shadow-dom-boundary.html": [
       "b248e03ea05fb85b89ab50e782d37ffec9075ea9",
       [
@@ -7670,6 +7691,15 @@
           {}
          ]
         ],
+        "select-listitems-crash.html": [
+         "cdda243877f1e3c699410dd67e25548880b868b9",
+         [
+          null,
+          {
+           "testdriver": true
+          }
+         ]
+        ],
         "selected-option-parser-crash.html": [
          "09dc02596922f688c058ec0de5f5489727a6e59c",
          [
@@ -7806,7 +7836,7 @@
         ]
        ],
        "dialog-closedby-crash.html": [
-        "d85f4e2c8489ba92239ab38a3955286f2fd39fb8",
+        "9c4fc11daeca9927638ca45bf9c98b882a52cd5e",
         [
          null,
          {}
@@ -7827,7 +7857,7 @@
         ]
        ],
        "dialog-open-add-closedby-crash.html": [
-        "028874d29ce13ae8152ba32ce4adda52d03b85e2",
+        "4255cf706f10c218b652b5a7335f50a1d3f5720d",
         [
          null,
          {}
@@ -7841,7 +7871,7 @@
         ]
        ],
        "dialog-requestclose-crash.html": [
-        "bfa400a7524ff50e0c862732a66ca7d1a400b4f3",
+        "c4c4850a2d3c66c189c1e81810a856f5b6c86ff2",
         [
          null,
          {}
@@ -21585,7 +21615,14 @@
         {}
        ]
       ]
-     }
+     },
+     "partitioned-visited-manual.tentative.html": [
+      "a97fe7cf6f0a781b53087969cd2981117eb10642",
+      [
+       null,
+       {}
+      ]
+     ]
     }
    },
    "document-picture-in-picture": {
@@ -25751,7 +25788,7 @@
      ]
     ],
     "serialPort_loopback-manual.https.html": [
-     "bf876b6610b77cc83170b8e97204c4aafc46058d",
+     "95dc2498d2ad984b6dbd5c76b785710b95dd128e",
      [
       null,
       {}
@@ -25833,6 +25870,20 @@
       {}
      ]
     ],
+    "SpeechRecognition-concurrentMediaStreamTrack-manual.https.html": [
+     "9da5cc6347830d76febcb516776e4b2fcbc7d9f4",
+     [
+      null,
+      {}
+     ]
+    ],
+    "SpeechRecognition-mediaStreamTrack-manual.https.html": [
+     "01a5cd0825e7bf50b009928e26c2d32ab67398d9",
+     [
+      null,
+      {}
+     ]
+    ],
     "SpeechRecognition-onerror-manual.https.html": [
      "b0d5d5ebed059c92941af734d6e9d317aa6eda87",
      [
@@ -176489,6 +176540,19 @@
        {}
       ]
      ],
+     "flexbox_justifycontent-stretch.html": [
+      "d49689d1dc03b2fc7a4b7f1121bec1031ebaeb53",
+      [
+       null,
+       [
+        [
+         "/css/reference/ref-filled-green-100px-square-only.html",
+         "=="
+        ]
+       ],
+       {}
+      ]
+     ],
      "flexbox_margin-auto-overflow.html": [
       "8d7860f8866a14861a736119c3169d3b6d2d53f5",
       [
@@ -183102,6 +183166,19 @@
        {}
       ]
      ],
+     "italic-oblique-fallback.html": [
+      "48187ea0f7e2556d563ee2d5c817818a8769bf11",
+      [
+       null,
+       [
+        [
+         "/css/css-fonts/italic-oblique-fallback-ref.html",
+         "=="
+        ]
+       ],
+       {}
+      ]
+     ],
      "lang-attribute-affects-rendering.html": [
       "041fd8f5abdc1524b585673e919de83126efe49a",
       [
@@ -196542,7 +196619,7 @@
        ]
       ],
       "gradient-longer-hue-lch-001.html": [
-       "f4217e8467bf026c1627cdba51ba132a63744878",
+       "c22151b2b02238d19f64900a20f5ae0ba3ec1b18",
        [
         null,
         [
@@ -196551,11 +196628,27 @@
           "=="
          ]
         ],
-        {}
+        {
+         "fuzzy": [
+          [
+           null,
+           [
+            [
+             0,
+             1
+            ],
+            [
+             0,
+             70
+            ]
+           ]
+          ]
+         ]
+        }
        ]
       ],
       "gradient-longer-hue-lch-002.html": [
-       "adb54a0dd661886e5a15b4bdea9706991c12e47e",
+       "448f09033ef2b8940c3321cc7840d95ae525ec61",
        [
         null,
         [
@@ -196564,7 +196657,23 @@
           "=="
          ]
         ],
-        {}
+        {
+         "fuzzy": [
+          [
+           null,
+           [
+            [
+             0,
+             1
+            ],
+            [
+             0,
+             50
+            ]
+           ]
+          ]
+         ]
+        }
        ]
       ],
       "gradient-longer-hue-lch-003.html": [
@@ -196655,7 +196764,7 @@
        ]
       ],
       "gradient-longer-hue-lch-006.html": [
-       "d44c9c4b9610383f00c8e6df3239c8b5fb91da05",
+       "4cd257b8bf8c5c8ae4bf399bd3d7ed560ced92e5",
        [
         null,
         [
@@ -196664,7 +196773,23 @@
           "=="
          ]
         ],
-        {}
+        {
+         "fuzzy": [
+          [
+           null,
+           [
+            [
+             0,
+             1
+            ],
+            [
+             0,
+             20
+            ]
+           ]
+          ]
+         ]
+        }
        ]
       ],
       "gradient-longer-hue-lch-007.html": [
@@ -202268,6 +202393,19 @@
        ]
       ]
      },
+     "empty-span-scroll.html": [
+      "a7bb092660246ab370ffd04d16e13a11e20c803e",
+      [
+       null,
+       [
+        [
+         "/css/css-inline/empty-span-scroll-ref.html",
+         "=="
+        ]
+       ],
+       {}
+      ]
+     ],
      "empty-span-size-001.html": [
       "bbb33c6fc59221c6df2dd678bd401dac404863f1",
       [
@@ -223591,7 +223729,7 @@
       ]
      ],
      "overflow-clip-margin-border-radius.html": [
-      "723b7c0e9ee3162bae1fe09feb472f97a18abc00",
+      "52edf802404cebd11976c24e043ea069252312cd",
       [
        null,
        [
@@ -224584,6 +224722,45 @@
        {}
       ]
      ],
+     "scroll-marker-group-018.html": [
+      "927d8ba61b80b6a264c3c4b577a249e32029dc88",
+      [
+       null,
+       [
+        [
+         "/css/reference/ref-filled-green-100px-square.xht",
+         "=="
+        ]
+       ],
+       {}
+      ]
+     ],
+     "scroll-marker-group-019.html": [
+      "9c2c5a0c0dc3360ab3a9ecde998a52277831ec0e",
+      [
+       null,
+       [
+        [
+         "/css/reference/ref-filled-green-100px-square.xht",
+         "=="
+        ]
+       ],
+       {}
+      ]
+     ],
+     "scroll-marker-group-020.html": [
+      "1f69fc80d3d991cfef992992702fc5b1b2b9f274",
+      [
+       null,
+       [
+        [
+         "/css/reference/ref-filled-green-100px-square.xht",
+         "=="
+        ]
+       ],
+       {}
+      ]
+     ],
      "scroll-marker-group-add-dynamic-001.html": [
       "b12fcdef1b1259e916c3670223289b26b02cce22",
       [
@@ -231107,7 +231284,7 @@
       ]
      ],
      "highlight-painting-001.html": [
-      "1263be8f887c803d6bfd16dc99fb5ba2e621debd",
+      "ef253e6117c94ef63f9be97eaac0d94667c9fce3",
       [
        null,
        [
@@ -231116,27 +231293,11 @@
          "=="
         ]
        ],
-       {
-        "fuzzy": [
-         [
-          null,
-          [
-           [
-            0,
-            23
-           ],
-           [
-            0,
-            3
-           ]
-          ]
-         ]
-        ]
-       }
+       {}
       ]
      ],
      "highlight-painting-002.html": [
-      "55d30af7c633c0ea137710c5d8cae94fd0562a65",
+      "a00f64d5b659f59945b7b6d7586f7fbdbfcb2149",
       [
        null,
        [
@@ -231547,7 +231708,7 @@
       ]
      ],
      "highlight-painting-shadows-horizontal.html": [
-      "6ddff5b32e7d30dd5fe3cbf9f33d3aaafcd5fc4d",
+      "b1762e85ae31fc6dc640fd038ec0edf7ee7d4e25",
       [
        null,
        [
@@ -231567,7 +231728,7 @@
            ],
            [
             0,
-            30
+            20
            ]
           ]
          ]
@@ -231576,7 +231737,7 @@
       ]
      ],
      "highlight-painting-shadows-vertical.html": [
-      "bd1e328ca7b1817ca75ac5e4a41eabb1c4e5254a",
+      "7187c34da4495fbaded9b9986e5a26889fde6beb",
       [
        null,
        [
@@ -231596,7 +231757,7 @@
            ],
            [
             0,
-            8
+            4
            ]
           ]
          ]
@@ -233153,7 +233314,7 @@
       ]
      ],
      "target-text-shadow-vertical.html": [
-      "3ba2d41a2be17ef9cb0d7cde4f494271b491e080",
+      "088f6fc175e7a581b74709c7214e22401098cd52",
       [
        null,
        [
@@ -233162,23 +233323,7 @@
          "=="
         ]
        ],
-       {
-        "fuzzy": [
-         [
-          null,
-          [
-           [
-            0,
-            20
-           ],
-           [
-            0,
-            6100
-           ]
-          ]
-         ]
-        ]
-       }
+       {}
       ]
      ],
      "target-text-text-decoration-001.html": [
@@ -271010,7 +271155,7 @@
      ],
      "text-shadow": {
       "basic-negcoord.html": [
-       "52a6d42945d99b85092d5acc61a2212a85241112",
+       "1e29b42f733ff7b2f76f4dd20a34d9a3528cb84d",
        [
         null,
         [
@@ -271019,23 +271164,7 @@
           "=="
          ]
         ],
-        {
-         "fuzzy": [
-          [
-           null,
-           [
-            [
-             0,
-             100
-            ],
-            [
-             0,
-             180
-            ]
-           ]
-          ]
-         ]
-        }
+        {}
        ]
       ],
       "basic-opacity-near-zero.html": [
@@ -271065,7 +271194,7 @@
        ]
       ],
       "basic-opacity.html": [
-       "daaa0b6c5ab0f46deda82c686a7bee617708547a",
+       "a8cea6ad0e64d4e2e185d45c9a49262d33e59da0",
        [
         null,
         [
@@ -271074,27 +271203,11 @@
           "=="
          ]
         ],
-        {
-         "fuzzy": [
-          [
-           null,
-           [
-            [
-             0,
-             30
-            ],
-            [
-             0,
-             210
-            ]
-           ]
-          ]
-         ]
-        }
+        {}
        ]
       ],
       "basic.html": [
-       "289d78c2a2f9d62e86c6db646c15fa9336d215c0",
+       "fc470ea6d0356702f593699cf7019be11bff11d7",
        [
         null,
         [
@@ -271103,23 +271216,7 @@
           "=="
          ]
         ],
-        {
-         "fuzzy": [
-          [
-           null,
-           [
-            [
-             0,
-             70
-            ],
-            [
-             0,
-             560
-            ]
-           ]
-          ]
-         ]
-        }
+        {}
        ]
       ],
       "blur.html": [
@@ -271136,7 +271233,7 @@
        ]
       ],
       "color-inherit.html": [
-       "e19df003f74027d1e059d1295909ed4ff00e7294",
+       "abb2cffd0ac24796c06b7225dc94528f7d6efd72",
        [
         null,
         [
@@ -271145,23 +271242,7 @@
           "=="
          ]
         ],
-        {
-         "fuzzy": [
-          [
-           null,
-           [
-            [
-             0,
-             100
-            ],
-            [
-             0,
-             170
-            ]
-           ]
-          ]
-         ]
-        }
+        {}
        ]
       ],
       "color-parserorder.html": [
@@ -271230,7 +271311,7 @@
        ]
       ],
       "multiple-noblur.html": [
-       "5adbb49eb54708ea3b72f31eeba99d7794ec663f",
+       "cf86e4bb71e8e7a730e8aa95df8d1be3022a7fe6",
        [
         null,
         [
@@ -271239,23 +271320,7 @@
           "=="
          ]
         ],
-        {
-         "fuzzy": [
-          [
-           null,
-           [
-            [
-             0,
-             140
-            ],
-            [
-             0,
-             480
-            ]
-           ]
-          ]
-         ]
-        }
+        {}
        ]
       ],
       "overflow-not-scrollable-1.html": [
@@ -271315,7 +271380,7 @@
        ]
       ],
       "standards-decor-noblur-2.html": [
-       "cb92ae11a6e6939f3c776247685658fd909aa800",
+       "75d95b578dcf08d073576940c7a7a06f6458909e",
        [
         null,
         [
@@ -271335,7 +271400,7 @@
             ],
             [
              0,
-             1100
+             14
             ]
            ]
           ]
@@ -271357,7 +271422,7 @@
        ]
       ],
       "svg-fill-none.html": [
-       "6ddf2f0d9674d097f003bc8eb587b642777ed0a8",
+       "389db4a3426e0a98bf0e90d62ef94fdc8facc4f7",
        [
         null,
         [
@@ -271366,23 +271431,7 @@
           "=="
          ]
         ],
-        {
-         "fuzzy": [
-          [
-           null,
-           [
-            [
-             0,
-             100
-            ],
-            [
-             1000,
-             2000
-            ]
-           ]
-          ]
-         ]
-        }
+        {}
        ]
       ],
       "svg-fill-opacity.html": [
@@ -271399,7 +271448,7 @@
        ]
       ],
       "svg-stroke-dasharray.html": [
-       "e8c98fd08526c53d634c75cae254d1764acccfd0",
+       "bd77d85edf4f7a4f2bc13afc9ae72e06d991b8e7",
        [
         null,
         [
@@ -271408,23 +271457,7 @@
           "=="
          ]
         ],
-        {
-         "fuzzy": [
-          [
-           null,
-           [
-            [
-             0,
-             100
-            ],
-            [
-             2000,
-             2300
-            ]
-           ]
-          ]
-         ]
-        }
+        {}
        ]
       ],
       "svg-stroke.html": [
@@ -272313,7 +272346,7 @@
       ]
      ],
      "backface-visibility-hidden-001.html": [
-      "2476f5b4e44c128f03f9358c9ad58ad642ae4d91",
+      "476eb289b86785b075338feecaabc785fc39dedf",
       [
        null,
        [
@@ -272329,11 +272362,11 @@
           [
            [
             0,
-            79
+            100
            ],
            [
             0,
-            200
+            300
            ]
           ]
          ]
@@ -300461,6 +300494,19 @@
        {}
       ]
      ],
+     "animation-name-ua-prefix.html": [
+      "4d31c551d92775e4a8659ae2ccf34f547598a1a1",
+      [
+       null,
+       [
+        [
+         "/css/reference/blank.html",
+         "=="
+        ]
+       ],
+       {}
+      ]
+     ],
      "auto-name-from-id-shadow.html": [
       "b5020d658eca8797925d04bb7fb78401d738f147",
       [
@@ -329214,7 +329260,7 @@
       ]
      ],
      "focus-within-004.html": [
-      "bec71d017a2df1d05ac45bfc9a35d92a0ac67db7",
+      "169af9e0706aa993a64ce64d6b198679e2e5dcdf",
       [
        null,
        [
@@ -329223,23 +329269,7 @@
          "=="
         ]
        ],
-       {
-        "fuzzy": [
-         [
-          null,
-          [
-           [
-            0,
-            100
-           ],
-           [
-            0,
-            600
-           ]
-          ]
-         ]
-        ]
-       }
+       {}
       ]
      ],
      "focus-within-005.html": [
@@ -333331,6 +333361,19 @@
      ]
     ],
     "xslt": {
+     "encoding-single-chunk.html": [
+      "5e6af833ded0472b70d77c89198e6325dfcbb855",
+      [
+       null,
+       [
+        [
+         "/dom/xslt/encoding-single-chunk-ref.html",
+         "=="
+        ]
+       ],
+       {}
+      ]
+     ],
      "large-cdata.html": [
       "9c83b731bd0bec908f520fd8d71381f6592aa490",
       [
@@ -334325,7 +334368,7 @@
         ]
        ],
        "2d.composite.grid.filter.no_shadow.drawImage.html": [
-        "acf9892ec37555645872fc61f225e053a9d98b4e",
+        "3b55b2e923fb713989a7f8a851bcc2b35c07159e",
         [
          null,
          [
@@ -334354,7 +334397,7 @@
         ]
        ],
        "2d.composite.grid.filter.no_shadow.fillRect.html": [
-        "be37d492581c7147c239c3b009bc07c2a6b64ce5",
+        "7addb60d333672f55affdc369c4326918a3a4485",
         [
          null,
          [
@@ -334383,7 +334426,7 @@
         ]
        ],
        "2d.composite.grid.filter.no_shadow.pattern.html": [
-        "7e68be70eaa9ccbc2ff6ba9a44af57bd842e2b74",
+        "415b0b78b7eee8cd846b642e3ae08cc84345faaf",
         [
          null,
          [
@@ -334412,7 +334455,7 @@
         ]
        ],
        "2d.composite.grid.filter.shadow.drawImage.html": [
-        "918debe2e4097230a7b0e2adb9966614f1cabec0",
+        "e9784a3dc700e07268142b71e6e63723c72018fd",
         [
          null,
          [
@@ -334441,7 +334484,7 @@
         ]
        ],
        "2d.composite.grid.filter.shadow.fillRect.html": [
-        "363f9ed454efa0ab4fc5409fe907bb477041793a",
+        "784a068b7174476d5ce9cce77cb43b283e086249",
         [
          null,
          [
@@ -334470,7 +334513,7 @@
         ]
        ],
        "2d.composite.grid.filter.shadow.pattern.html": [
-        "18ea3a473d8c9b001e3ee455d734c4ebd52e1559",
+        "e13bf471b94c47a64f664a4d886ad06f79c6a0e4",
         [
          null,
          [
@@ -334499,7 +334542,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.no_shadow.drawImage.html": [
-        "cd9ad95b92c2913f03dacfeb4f9170956dcabc0f",
+        "42a331f7c9bac63123479d027db9c5c7dc2ddc1e",
         [
          null,
          [
@@ -334528,7 +334571,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.no_shadow.fillRect.html": [
-        "f007fd3fc7e16a3c52937295c5bbbb270b2128e9",
+        "8a01e7abb0cdd9e4dd8e2e03ede3dd955339f3e9",
         [
          null,
          [
@@ -334557,7 +334600,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.no_shadow.pattern.html": [
-        "5362b2f1f5348b6f340b3d7224f132c746e42c0c",
+        "6c8d0e69cac01bf49a9f3b15942c493426aee37a",
         [
          null,
          [
@@ -334586,7 +334629,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.shadow.drawImage.html": [
-        "e77309135d69d819e08a3f695b0567b166f9b325",
+        "625a613253f267d96b7dc2e9516718aa0f79b0e5",
         [
          null,
          [
@@ -334615,7 +334658,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.shadow.fillRect.html": [
-        "c82ca80cadfb0519051ef0762fc4388773b10286",
+        "d01e7bc0ed67f63e02e5ae54c54f5bf9e9516495",
         [
          null,
          [
@@ -334644,7 +334687,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.shadow.pattern.html": [
-        "bc7d0134b344a0fb6cf108a2c35bf848e2557182",
+        "7512b21b06913daac65846eea678bf880d8cdfd6",
         [
          null,
          [
@@ -334817,7 +334860,7 @@
         ]
        ],
        "2d.filter.canvasFilterObject.gaussianBlur.tentative.html": [
-        "1de72acd6a201d7c49122a747edc1afbfbe5f4d7",
+        "5aff8fd31c39402b1cf18227a9647684c02690b6",
         [
          null,
          [
@@ -334985,7 +335028,7 @@
         ]
        ],
        "2d.filter.layers.gaussianBlur.tentative.html": [
-        "0bfd704ca1dea73145fffe7a6cfb3c0ec8c9113f",
+        "1dfc5eae449ad4180c76b5ce1fafd55e1b33e0db",
         [
          null,
          [
@@ -335390,7 +335433,7 @@
         ]
        ],
        "2d.layer.global-states.ctx-filter.no-transform.html": [
-        "5925870ce2eac2759fd9f29767175ba34bca59aa",
+        "811666fc3fd338130984a836b47891d57cc21306",
         [
          null,
          [
@@ -335403,7 +335446,7 @@
         ]
        ],
        "2d.layer.global-states.ctx-filter.rotation.html": [
-        "548b010800508e24b901697bb80df1b039e1eaab",
+        "bbb0790d2beafd9bb7c08c2eccbec0c60f4fe533",
         [
          null,
          [
@@ -335416,7 +335459,7 @@
         ]
        ],
        "2d.layer.global-states.filter.ctx-filter.no-transform.tentative.html": [
-        "415cf0360af02ece8c2c4b859098d71ad93024d9",
+        "91e298b18b002d4c8ba1d3bebf9445a219c07017",
         [
          null,
          [
@@ -335429,7 +335472,7 @@
         ]
        ],
        "2d.layer.global-states.filter.ctx-filter.rotation.tentative.html": [
-        "0573cd7f3bea33771baff10e818f50d23363633c",
+        "27c85cbfa40d4682c462c1b8922153ea1eaad1c0",
         [
          null,
          [
@@ -335442,7 +335485,7 @@
         ]
        ],
        "2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.html": [
-        "591c58acc97dfe6dd660491316c61e565633802d",
+        "03d4d5ec595872616b6928e919ae7038abb58f64",
         [
          null,
          [
@@ -335455,7 +335498,7 @@
         ]
        ],
        "2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.html": [
-        "ca75d4d1515a9b84b180ac4c8a874203e324dd51",
+        "9bc61e6ddcf9ba6b1193f7d58057209506737afe",
         [
          null,
          [
@@ -335468,7 +335511,7 @@
         ]
        ],
        "2d.layer.global-states.no-cxt-filter.no-transform.html": [
-        "4da6758c9f42e0d5cc84c32f86478c3d8fb80206",
+        "de8510b47f1bc10c64ae9e4a292df97859f00bd3",
         [
          null,
          [
@@ -335481,7 +335524,7 @@
         ]
        ],
        "2d.layer.global-states.no-cxt-filter.rotation.html": [
-        "9ffa680aca3559109171bbf40c58663d07932368",
+        "37ed61ea955f8b55dfd03694489c244154f97728",
         [
          null,
          [
@@ -335494,7 +335537,7 @@
         ]
        ],
        "2d.layer.globalCompositeOperation.html": [
-        "29a163260ded0cfa0148d86f044cfbf1a11e90c5",
+        "3dfe1df7956b02446470d972f5874d7387210523",
         [
          null,
          [
@@ -337124,7 +337167,7 @@
         ]
        ],
        "2d.text.measure.text-clusters-rendering-align.tentative.html": [
-        "159efb4fee4dd290f35faa76d86b407418a4680b",
+        "08523af5e7e66a2b76746127874802407c1169ed",
         [
          null,
          [
@@ -337137,7 +337180,7 @@
         ]
        ],
        "2d.text.measure.text-clusters-rendering-baseline.tentative.html": [
-        "c20e076a3514921f6a82b10304c04fdb01c1da0e",
+        "ec65e3c2301baf61e89e140a5a792632360f9772",
         [
          null,
          [
@@ -337150,7 +337193,7 @@
         ]
        ],
        "2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.html": [
-        "fac5f6f2b67163d652e4ddca6680c39dea3ae754",
+        "1eb9169dc104476f79ca6a19da791adbdd88c153",
         [
          null,
          [
@@ -337232,7 +337275,7 @@
      "offscreen": {
       "compositing": {
        "2d.composite.grid.filter.no_shadow.drawImage.html": [
-        "5a90053e8f681b2daf00bf143f46d729b748ce50",
+        "33cdebbaf9a1e81d131c160f9ec9a0faaaec836c",
         [
          null,
          [
@@ -337261,7 +337304,7 @@
         ]
        ],
        "2d.composite.grid.filter.no_shadow.drawImage.w.html": [
-        "d010912cd06d497633726f0cdc9c7bb993b72615",
+        "1dd45863376dfa6cbf402878a71783d9f0ef394c",
         [
          null,
          [
@@ -337290,7 +337333,7 @@
         ]
        ],
        "2d.composite.grid.filter.no_shadow.fillRect.html": [
-        "6bad129784f26b485759f0ae5bf66c3a14c129e2",
+        "b0e8021079ed0b548c686b5e30a924eda3f702c4",
         [
          null,
          [
@@ -337319,7 +337362,7 @@
         ]
        ],
        "2d.composite.grid.filter.no_shadow.fillRect.w.html": [
-        "0c93086b54c89cdcb5d1e7ea58006cd85ad13494",
+        "ad95af2f11abfc0a9fb7c0237a57e2542927b65d",
         [
          null,
          [
@@ -337348,7 +337391,7 @@
         ]
        ],
        "2d.composite.grid.filter.no_shadow.pattern.html": [
-        "47cd363f06ee8c030c7e85c38292f268c97ba519",
+        "cb5578b33303b95b29bfe5c2e1fdd75d289a6f92",
         [
          null,
          [
@@ -337377,7 +337420,7 @@
         ]
        ],
        "2d.composite.grid.filter.no_shadow.pattern.w.html": [
-        "7f07a2c76451122e9ccb531f0839ebf8676f3976",
+        "cba6b24442c8cfc930f71c418a3b63a93c255f4d",
         [
          null,
          [
@@ -337406,7 +337449,7 @@
         ]
        ],
        "2d.composite.grid.filter.shadow.drawImage.html": [
-        "fc8f2e20162c69328476d9041129595041353493",
+        "b7366604f1eabcc4843fd416766c6386d9b70b62",
         [
          null,
          [
@@ -337435,7 +337478,7 @@
         ]
        ],
        "2d.composite.grid.filter.shadow.drawImage.w.html": [
-        "fb417b9c57610a1a13c89ee18f67cf9486465af3",
+        "1ab054dc4926284ef16bf7e4552987095db95ad5",
         [
          null,
          [
@@ -337464,7 +337507,7 @@
         ]
        ],
        "2d.composite.grid.filter.shadow.fillRect.html": [
-        "995bc9d65e62fe85fc4adec2b556ee3e8ec62541",
+        "b3d10c8fdd3b730d6fb2e03cb765ef1acee3ef6a",
         [
          null,
          [
@@ -337493,7 +337536,7 @@
         ]
        ],
        "2d.composite.grid.filter.shadow.fillRect.w.html": [
-        "78c509f40f3c0c125d93f9b54a33feb972f8e4fa",
+        "cad533fb31fd55b01d7ff68588ae82253e4e5223",
         [
          null,
          [
@@ -337522,7 +337565,7 @@
         ]
        ],
        "2d.composite.grid.filter.shadow.pattern.html": [
-        "f1bc4c64be79f6e25eebd61c634fd1ce8109e296",
+        "ce9ec1859db061f9bb8414ed12feb1571cd41584",
         [
          null,
          [
@@ -337551,7 +337594,7 @@
         ]
        ],
        "2d.composite.grid.filter.shadow.pattern.w.html": [
-        "de144bfaa6410a9130276e7639020bd83fe80114",
+        "6ea16577b035a87e1902fff69c67463511522912",
         [
          null,
          [
@@ -337580,7 +337623,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.no_shadow.drawImage.html": [
-        "5aac6d6b212d3910bc465d2755ffeeb6d8842c1c",
+        "3f3e9aa20f9ae9b7d4bb0bfea46b39cae620ecd5",
         [
          null,
          [
@@ -337609,7 +337652,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.no_shadow.drawImage.w.html": [
-        "67fdbabce2ea11eaa40e7ff8f94701c617b481cd",
+        "a71fa1898d816f8527dec97d73ea99b8c290484e",
         [
          null,
          [
@@ -337638,7 +337681,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.no_shadow.fillRect.html": [
-        "c1001d778158c9de4d95176917321141c2a4f01a",
+        "5d4cd718736b6078b69709d0381941bfda8b7170",
         [
          null,
          [
@@ -337667,7 +337710,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.no_shadow.fillRect.w.html": [
-        "fcc39718c39980b1c0e1c376f737d1d5e39016a0",
+        "b65d0781feac0309806344f649983c638910ba82",
         [
          null,
          [
@@ -337696,7 +337739,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.no_shadow.pattern.html": [
-        "b977eb0bec3e239ebd7cfc8ab925fe0f1ecc729c",
+        "9fdc10468049daba8853064dc600dccc99b6fafd",
         [
          null,
          [
@@ -337725,7 +337768,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.no_shadow.pattern.w.html": [
-        "9e9eb0229157b2315dfbe83e90e756cd5d42ae4b",
+        "c3b242623f932e263647ac39d41c75adf2d0cd0c",
         [
          null,
          [
@@ -337754,7 +337797,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.shadow.drawImage.html": [
-        "382f3abeb195fe5575cfa5f4980262ad0c9f960e",
+        "edbcce1044996f48ec8e9ab2579e59bd200208d1",
         [
          null,
          [
@@ -337783,7 +337826,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.shadow.drawImage.w.html": [
-        "56db72864d3f1e5af63a5a55392b588b62313c96",
+        "65563217ebf8c553d93f47d9f0b976dd33267884",
         [
          null,
          [
@@ -337812,7 +337855,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.shadow.fillRect.html": [
-        "bb58344fcbd6c3410cd3f6021e91cf2a446d5571",
+        "faac7dcaf6444a2d17a8186d81c15fd3f9d5a745",
         [
          null,
          [
@@ -337841,7 +337884,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.shadow.fillRect.w.html": [
-        "3586c806cd4e32efd891b4b6a638635d7106caf9",
+        "68170021c0b37d9fe87b250c13a44ab802c69570",
         [
          null,
          [
@@ -337870,7 +337913,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.shadow.pattern.html": [
-        "9703ea138d0baac48fc5e21f2addb4c40c47f77f",
+        "f92d1b8ac7a7a51455cf7877111a3d55dff7ad07",
         [
          null,
          [
@@ -337899,7 +337942,7 @@
         ]
        ],
        "2d.composite.grid.no_filter.shadow.pattern.w.html": [
-        "318d2b971e446693cc616090c15427659a68981b",
+        "898b5ff601e97e0ce15d31ec3b5f0f4b86f64fe8",
         [
          null,
          [
@@ -338214,7 +338257,7 @@
         ]
        ],
        "2d.filter.canvasFilterObject.gaussianBlur.tentative.html": [
-        "204fa615d4ed4a9316e2ed6229ee66c153c06220",
+        "809f8f0fa6c90cb3af2afea7e8cfd5630a640253",
         [
          null,
          [
@@ -338227,7 +338270,7 @@
         ]
        ],
        "2d.filter.canvasFilterObject.gaussianBlur.tentative.w.html": [
-        "8545306c0c6d68001ae5ed9fb95737b6499e4036",
+        "205fd8df30fa56f21ef4f01a0976744121f799b5",
         [
          null,
          [
@@ -338550,7 +338593,7 @@
         ]
        ],
        "2d.filter.layers.gaussianBlur.tentative.html": [
-        "f4bbfd8bf2ce0d6a3f2d905fcc70472a3ed08cc5",
+        "fe5df35cccbf786f679abd2cfc6f45b2c23fc128",
         [
          null,
          [
@@ -338563,7 +338606,7 @@
         ]
        ],
        "2d.filter.layers.gaussianBlur.tentative.w.html": [
-        "ffbed3f53b77b5692efb420aa090c70ef989b051",
+        "e76401dc037b4b0493742e0abf6141d639592d62",
         [
          null,
          [
@@ -339306,7 +339349,7 @@
         ]
        ],
        "2d.layer.global-states.ctx-filter.no-transform.html": [
-        "6d3f95cc7306b0be90217cc0e83f3ad41cae9a01",
+        "889ed5f8532d4f85bbb6250bf41ce5447c359142",
         [
          null,
          [
@@ -339319,7 +339362,7 @@
         ]
        ],
        "2d.layer.global-states.ctx-filter.no-transform.w.html": [
-        "d20c6332618d76d2d115c414c1808e36a68f95fa",
+        "86aba29eaaa7138fa246e1071b1145c8de5e4e6c",
         [
          null,
          [
@@ -339332,7 +339375,7 @@
         ]
        ],
        "2d.layer.global-states.ctx-filter.rotation.html": [
-        "f974aaf6969937130933402df74cee2cb86caeed",
+        "7493ffd76daaee8b9fe7d0ca6972417a76497c81",
         [
          null,
          [
@@ -339345,7 +339388,7 @@
         ]
        ],
        "2d.layer.global-states.ctx-filter.rotation.w.html": [
-        "93e88ea0076a02aa6a5976a3e646dd98fa5245b2",
+        "9d56f233f045cfce84e6a127c55313c755d62879",
         [
          null,
          [
@@ -339358,7 +339401,7 @@
         ]
        ],
        "2d.layer.global-states.filter.ctx-filter.no-transform.tentative.html": [
-        "0dd8471feb29d939582cf466878afd1837dc09f9",
+        "ae2f9768245fb92b8a128155c9d97de2c33d152b",
         [
          null,
          [
@@ -339371,7 +339414,7 @@
         ]
        ],
        "2d.layer.global-states.filter.ctx-filter.no-transform.tentative.w.html": [
-        "24613ffafa624b59dbd2e18045d9b90305523043",
+        "54805ece1d317f2141e42e14f5459aa117e48414",
         [
          null,
          [
@@ -339384,7 +339427,7 @@
         ]
        ],
        "2d.layer.global-states.filter.ctx-filter.rotation.tentative.html": [
-        "ba26f9106955a006acf90ccd0bf416c4d46a6f36",
+        "251eb4508d6bf34191301daddf0acab421418720",
         [
          null,
          [
@@ -339397,7 +339440,7 @@
         ]
        ],
        "2d.layer.global-states.filter.ctx-filter.rotation.tentative.w.html": [
-        "59ebb65e7ad0eebe8d364f3754692d6b3009ca8d",
+        "37ac320b6defbe45f743557461b19b35e0406a6a",
         [
          null,
          [
@@ -339410,7 +339453,7 @@
         ]
        ],
        "2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.html": [
-        "388a98f20f7700c079ea0b3bf5cb1e5302f6391f",
+        "bcbecc6d3381824eb3072a2ca11b16a3210b6548",
         [
          null,
          [
@@ -339423,7 +339466,7 @@
         ]
        ],
        "2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.w.html": [
-        "ab1be4924dd87db252ada00d0584f767b2f636c2",
+        "25904862f9bbedb055e0e10e70fd31c2b99f2add",
         [
          null,
          [
@@ -339436,7 +339479,7 @@
         ]
        ],
        "2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.html": [
-        "95ce14186d32ad40e1a86d0f77b56334aae09191",
+        "af24b0d2fc34f3de1dcd325ab6a5f407399a2dbd",
         [
          null,
          [
@@ -339449,7 +339492,7 @@
         ]
        ],
        "2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.w.html": [
-        "0e0644a45ea8a77a00820d9b653337aebc2200e8",
+        "a9863a4c2ff918fcaae7bcfdaac1cf64c2eb14f0",
         [
          null,
          [
@@ -339462,7 +339505,7 @@
         ]
        ],
        "2d.layer.global-states.no-cxt-filter.no-transform.html": [
-        "baaac6e685cf99a370885d1fbb8ab351997865f3",
+        "207f40b3f27981606e9a7b15883ff6e9f24cb753",
         [
          null,
          [
@@ -339475,7 +339518,7 @@
         ]
        ],
        "2d.layer.global-states.no-cxt-filter.no-transform.w.html": [
-        "ce1dd2abf1a418f303bf77ee94d54d5fa42a8925",
+        "83577baa328bc59c3458754883d098db88ae88f6",
         [
          null,
          [
@@ -339488,7 +339531,7 @@
         ]
        ],
        "2d.layer.global-states.no-cxt-filter.rotation.html": [
-        "77c61a190f2cf8776ed642bb01952c1e9b43174f",
+        "5c6e4790213455a64ac2960ecb2088a0541feebe",
         [
          null,
          [
@@ -339501,7 +339544,7 @@
         ]
        ],
        "2d.layer.global-states.no-cxt-filter.rotation.w.html": [
-        "ef4999fa51455bfae5840a86e28c3e81ec4868ba",
+        "3944e882def2ca5df8b64e2bb5d3fbf102a2c5f0",
         [
          null,
          [
@@ -339514,7 +339557,7 @@
         ]
        ],
        "2d.layer.globalCompositeOperation.html": [
-        "b9bf19b7e38f9bbd66bf2f66f2ede7993c843c44",
+        "f6638614144ae9dfd3cc71d66497f4f922b46713",
         [
          null,
          [
@@ -339527,7 +339570,7 @@
         ]
        ],
        "2d.layer.globalCompositeOperation.w.html": [
-        "6620ee7232a03d5ad293728db04f3083f0e59902",
+        "16b81441d09c3acd1f48d5ba9bf5bad5f66a9ca9",
         [
          null,
          [
@@ -340246,12 +340289,12 @@
          ]
         ],
         "canvas.2d.offscreen.worker.direction.html": [
-         "73df0a94fc0ad31c497604e70ca0746430323bdb",
+         "56c7dc00f2174fe5d707d68f90b6ec4aab2aed71",
          [
           null,
           [
            [
-            "/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction-ref.html",
+            "/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction-ref.html",
             "=="
            ]
           ],
@@ -340259,12 +340302,12 @@
          ]
         ],
         "canvas.2d.offscreen.worker.direction.inherit.html": [
-         "518ae0aed5f1f81252b2fc0b73326c7f193fe5bc",
+         "a7b7ec66e17ec8ba835376a524ea663c701b7f31",
          [
           null,
           [
            [
-            "/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction-ref.html",
+            "/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction-ref.html",
             "=="
            ]
           ],
@@ -340667,7 +340710,7 @@
         ]
        ],
        "2d.text.measure.text-clusters-rendering-align.tentative.html": [
-        "4fc41c79cc44eba408bba38829ee42e1c7ead945",
+        "20e80988d258cc6e3c3fb0a7945e6e71ce8a37f1",
         [
          null,
          [
@@ -340680,7 +340723,7 @@
         ]
        ],
        "2d.text.measure.text-clusters-rendering-align.tentative.w.html": [
-        "35ddd54bfd78bad7f43ac91d0dfff53a541dbd49",
+        "244c2428fcab5efe9c4e2ba47e846c39711a9db9",
         [
          null,
          [
@@ -340693,7 +340736,7 @@
         ]
        ],
        "2d.text.measure.text-clusters-rendering-baseline.tentative.html": [
-        "84def142a9ba38c3901d4fb45d53f9ec9ffecc8c",
+        "de7f89f57fbe56f10bf2279a4ea2ffd3ff5b5620",
         [
          null,
          [
@@ -340706,7 +340749,7 @@
         ]
        ],
        "2d.text.measure.text-clusters-rendering-baseline.tentative.w.html": [
-        "9227776d8c8f5c274638be3c4acd0cfec4632ed9",
+        "3e5fc419ce617878c63058b957e5076105236d04",
         [
          null,
          [
@@ -340719,7 +340762,7 @@
         ]
        ],
        "2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.html": [
-        "8d304cb1a78dbae42ff19aeb83926570198396aa",
+        "36596171a93e9bcaad25a4badfad89b785aa19b6",
         [
          null,
          [
@@ -340732,7 +340775,7 @@
         ]
        ],
        "2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.w.html": [
-        "76f61dad315a125da4b096c1181ef1b8d0aa30fd",
+        "6c316b4b0ad5686c9fec5451857f3e16ef737a67",
         [
          null,
          [
@@ -345161,6 +345204,19 @@
        ]
       },
       "the-option-element": {
+       "option-label-whitespace.html": [
+        "185d3ec1f49ede4415a1265b26d0745afe6ac29c",
+        [
+         null,
+         [
+          [
+           "/html/rendering/replaced-elements/the-option-element/option-label-whitespace-ref.html",
+           "=="
+          ]
+         ],
+         {}
+        ]
+       ],
        "option-with-br.html": [
         "3b8d992cc2a07dfd902dbb1011e2c348e862baaa",
         [
@@ -346883,6 +346939,19 @@
          {}
         ]
        ],
+       "video-transparent-controls.html": [
+        "ede1f1da786efdc6bcba448d3bf38451a1773483",
+        [
+         null,
+         [
+          [
+           "/html/semantics/embedded-content/the-video-element/video-transparent-controls-ref.html",
+           "=="
+          ]
+         ],
+         {}
+        ]
+       ],
        "video_content_image.htm": [
         "0808d894aa70d122f84975403d9f56c493d685d4",
         [
@@ -359534,6 +359603,84 @@
     },
     "pservers": {
      "reftests": {
+      "fill-fallback-currentcolor-1.svg": [
+       "81d12ba4ddcff22ffc5ea2ecda358b44a0e87f23",
+       [
+        null,
+        [
+         [
+          "/svg/pservers/reftests/reference/green-100x100.svg",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
+      "fill-fallback-currentcolor-2.svg": [
+       "12d4ce2876c631badd444c614ef50e63ecf2565e",
+       [
+        null,
+        [
+         [
+          "/svg/pservers/reftests/reference/green-100x100.svg",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
+      "fill-fallback-invalid-uri.svg": [
+       "5522eb1c4c40581dc7ca1a73aedc1985b6d64737",
+       [
+        null,
+        [
+         [
+          "/svg/pservers/reftests/reference/green-100x100.svg",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
+      "fill-fallback-none-1.svg": [
+       "ea3ae30251674a628cdc9294443477fcd9cb7318",
+       [
+        null,
+        [
+         [
+          "/svg/pservers/reftests/reference/green-100x100.svg",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
+      "fill-fallback-none-2.svg": [
+       "9f786e150f2062f521d83d60056aaa0a9ffedbd9",
+       [
+        null,
+        [
+         [
+          "/svg/pservers/reftests/reference/green-100x100.svg",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
+      "fill-fallback-none-3.svg": [
+       "6652243e1eacd707b03e2aec02677b57a484e7b0",
+       [
+        null,
+        [
+         [
+          "/svg/pservers/reftests/reference/green-100x100.svg",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
       "gradient-color-interpolation.svg": [
        "f7959437734230d394197d1837be2ba6ffaa7d3c",
        [
@@ -359822,6 +359969,19 @@
         ],
         {}
        ]
+      ],
+      "stroke-fallback-invalid-uri.svg": [
+       "38b34b8ed9a0ee052ea7c5339168df02cf16f818",
+       [
+        null,
+        [
+         [
+          "/svg/pservers/reftests/reference/green-100x100.svg",
+          "=="
+         ]
+        ],
+        {}
+       ]
       ]
      },
      "scripted": {
@@ -365147,7 +365307,7 @@
     []
    ],
    ".taskcluster.yml": [
-    "85204ee17b9255ebd7dcd08716acd7da59b75d57",
+    "18c82321f92862ef9a7e04c5088eafa663cc58f2",
     []
    ],
    ".well-known": {
@@ -369265,7 +369425,7 @@
       []
      ],
      "remote-executor.html": [
-      "8b0030390d0d196aa4bfc4ce70d6b6ade1915a10",
+      "f87f566be960fdd9242a072d147a3d1c369ac01b",
       []
      ]
     },
@@ -389315,6 +389475,12 @@
       ]
      }
     },
+    "resources": {
+     "ran.js": [
+      "8beb22733df9139dc3a29551344a0eaa35f7710f",
+      []
+     ]
+    },
     "sandbox": {
      "support": {
       "empty.html": [
@@ -390064,7 +390230,7 @@
     "partitioned-cookies": {
      "resources": {
       "ancestor-chain-cross-site-embed.html": [
-       "fbe2906737d5c4bf543022e2c443908e4a5159b5",
+       "ecf1aff1844d527d4b82b9d0b67571e27f766fa6",
        []
       ],
       "ancestor-chain-same-site-embed.html": [
@@ -390209,6 +390375,10 @@
     },
     "samesite": {
      "resources": {
+      "cross-site-frame-with-sandboxed-embed.html": [
+       "b00b1e268320b4c2a9278b35646f5869ccb89de5",
+       []
+      ],
       "echo-cookies.html": [
        "a1b29b9b03c198c46c4b1e78094acc4a2f0d157e",
        []
@@ -390236,6 +390406,10 @@
       "puppet.html": [
        "6d36132d3a89abea2f707e520e83a41590dac67a",
        []
+      ],
+      "same-site-none-embed.html": [
+       "1dcb97d988ea6095bf5a8cc8d693ef65f673515d",
+       []
       ]
      }
     },
@@ -418072,6 +418246,10 @@
       "89d41d42252b0998174bd77f47fbaca12984f2bd",
       []
      ],
+     "italic-oblique-fallback-ref.html": [
+      "6dd1a7bac2210e6c4ebe5ff89ec6bfb02344cd45",
+      []
+     ],
      "lang-attribute-affects-rendering-ref.html": [
       "f832a1ef61fe39141c9566f1d76d52161607d83d",
       []
@@ -428042,6 +428220,10 @@
        []
       ]
      },
+     "empty-span-scroll-ref.html": [
+      "28b7f6e2df48fe2124ed8c623cabb56c1aecb35e",
+      []
+     ],
      "empty-span-size-001-ref.html": [
       "7cdb84a5bb048620b56087b52d3b3172c7c34f1a",
       []
@@ -430090,7 +430272,7 @@
     "css-mixins": {
      "resources": {
       "utils.js": [
-       "0e196b725733449b00b4dba13e9be9cae8a2736d",
+       "cc9f008916b20a1e1d230d96301c469999ff56fc",
        []
       ]
      }
@@ -431777,7 +431959,7 @@
       []
      ],
      "overflow-clip-margin-border-radius-ref.html": [
-      "10301224070288628eb6b61291c08a99dd5eec24",
+      "1611180e637c7dbb6cad372ac4fb61118fdc17d0",
       []
      ],
      "overflow-clip-margin-invalidation-ref.html": [
@@ -434119,7 +434301,7 @@
       []
      ],
      "highlight-painting-002-ref.html": [
-      "7fc1b543b660847b913dca00053cc4c95ae09ee7",
+      "1582318382658117572ce66810338a3c2547608b",
       []
      ],
      "highlight-painting-003-ref.html": [
@@ -451994,6 +452176,14 @@
       "blue15x15.png": [
        "89de32fdb8a4e48b1320f40f5a75352773077cee",
        []
+      ],
+      "partitioned-visited-cross-site-iframe.html": [
+       "7239017b73d3863463ee145a5d6227174c5dc79f",
+       []
+      ],
+      "partitioned-visited-same-site-iframe.html": [
+       "bdc1a983bcdc62485edc4805af2c2d4e1a0f5fef",
+       []
       ]
      },
      "selector-placeholder-shown-type-change-001-ref.html": [
@@ -453582,6 +453772,10 @@
       "ac713ce1798e3366a6aa8aaadf47348312592dcd",
       []
      ],
+     "encoding-single-chunk-ref.html": [
+      "572516f9902df269f032f335f1017560eb10f426",
+      []
+     ],
      "externalScript.js": [
       "7a2bf3622554937bf483a3b3afa9f16187fdabf6",
       []
@@ -453599,6 +453793,18 @@
        "3c68a6fc53b070eff800d41a528e55c9119e3f48",
        []
       ],
+      "reqLine.xsl": [
+       "fabb742fc4669c70d0f09551bb47caf8728a1560",
+       []
+      ],
+      "test.xml": [
+       "4a1a43c408282fd9938f0ae256a5fa25a0500acf",
+       []
+      ],
+      "testu1LINE.xml": [
+       "01fa6bf9426646c5a5ef3566fd479c67fb8ef7ff",
+       []
+      ],
       "xml2html.xsl": [
        "88b74a9620f8093dcd5ff2afa4d1604793f049d9",
        []
@@ -453781,7 +453987,7 @@
       []
      ],
      "indent.js": [
-      "0265552f0939e3c803b452f965c2a2ce85000dc5",
+      "100da577458de26ee57e4dbb704e0f08bbe23bc7",
       []
      ],
      "insert-list-items-in-table-cells.js": [
@@ -462539,7 +462745,7 @@
         []
        ],
        "2d.composite.grid.filter.no_shadow.drawImage-expected.html": [
-        "eea78248a836f217a93d176c60b45ca202ea43ed",
+        "6f7bf8e8fe705e97ca9750b2db87c923775b905d",
         []
        ],
        "2d.composite.grid.filter.no_shadow.drawImage.png": [
@@ -462547,7 +462753,7 @@
         []
        ],
        "2d.composite.grid.filter.no_shadow.fillRect-expected.html": [
-        "08ed3566fd11df66e8d9e6ec4c84150be8e683bc",
+        "ec67b35c95963aa344f82119f445d5c2d486c844",
         []
        ],
        "2d.composite.grid.filter.no_shadow.fillRect.png": [
@@ -462555,7 +462761,7 @@
         []
        ],
        "2d.composite.grid.filter.no_shadow.pattern-expected.html": [
-        "22c84f42e89b91df473f435c3c10b3399215eb72",
+        "420cab82fbe6cf99f2d9f115f4d3bc6b1bf3baae",
         []
        ],
        "2d.composite.grid.filter.no_shadow.pattern.png": [
@@ -462563,7 +462769,7 @@
         []
        ],
        "2d.composite.grid.filter.shadow.drawImage-expected.html": [
-        "2072348f904966cd1630efc1243aadddfbfe11e9",
+        "1976dfc466387c2414676024e196623032901a5a",
         []
        ],
        "2d.composite.grid.filter.shadow.drawImage.png": [
@@ -462571,7 +462777,7 @@
         []
        ],
        "2d.composite.grid.filter.shadow.fillRect-expected.html": [
-        "1e119bcbde5a2996567214e864ad33d00cc0d877",
+        "72cd6c78da4dda4f903c24447d1e51cd207ed69d",
         []
        ],
        "2d.composite.grid.filter.shadow.fillRect.png": [
@@ -462579,7 +462785,7 @@
         []
        ],
        "2d.composite.grid.filter.shadow.pattern-expected.html": [
-        "f45fe82c302917293852ced72f3dd53628f398c2",
+        "b7a4f59f84beebf42fcbc79c8063a81058fea9e4",
         []
        ],
        "2d.composite.grid.filter.shadow.pattern.png": [
@@ -462587,7 +462793,7 @@
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.drawImage-expected.html": [
-        "923d8360a9d73c9c336e8c460090b0e197e33a12",
+        "36578e14d4d000e8f19bd16a7487d1a3a4b7cfef",
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.drawImage.png": [
@@ -462595,7 +462801,7 @@
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.fillRect-expected.html": [
-        "c809e56cac391699d5f4bd284424164833d09419",
+        "ae85679c221aadcb1d3d4136a4cafa3fd4f8ec2c",
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.fillRect.png": [
@@ -462603,7 +462809,7 @@
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.pattern-expected.html": [
-        "f052442a637ed64db37ad12ea7f799f667ff9cd8",
+        "5f7f12c9c8a5f4833db5da0a1be53d11310345ad",
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.pattern.png": [
@@ -462611,7 +462817,7 @@
         []
        ],
        "2d.composite.grid.no_filter.shadow.drawImage-expected.html": [
-        "ad07c35d3101c61b1e1ac4df2ec05348af251439",
+        "19439211ddeaa538e89b30bdee6049ce3e5f1192",
         []
        ],
        "2d.composite.grid.no_filter.shadow.drawImage.png": [
@@ -462619,7 +462825,7 @@
         []
        ],
        "2d.composite.grid.no_filter.shadow.fillRect-expected.html": [
-        "e16a5fcf4582efd0e691da4057f501e4be3702d3",
+        "42266582be21d2daa89e5b9ab81d646e3ab552af",
         []
        ],
        "2d.composite.grid.no_filter.shadow.fillRect.png": [
@@ -462627,7 +462833,7 @@
         []
        ],
        "2d.composite.grid.no_filter.shadow.pattern-expected.html": [
-        "01e1d4d7b264624b94066ddd3b9e0f696b8c8517",
+        "8d6d2492b9beaeb50ddbe2c39686372ba78e8882",
         []
        ],
        "2d.composite.grid.no_filter.shadow.pattern.png": [
@@ -463195,7 +463401,7 @@
         []
        ],
        "2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html": [
-        "9c85dfec907e2dd6b1158002e6f8b6ed151b8852",
+        "6e9ebb5b2e13525bfb7f697b4300998d43daa93a",
         []
        ],
        "2d.filter.drop-shadow-globalAlpha-expected.html": [
@@ -463227,7 +463433,7 @@
         []
        ],
        "2d.filter.layers.gaussianBlur.tentative-expected.html": [
-        "f02f08d5f83665159887729d86caa97da645fc5e",
+        "88d38a8c0c8e1237eeccfc7c23f1d1f04f22c0b8",
         []
        ]
       },
@@ -463353,39 +463559,39 @@
         []
        ],
        "2d.layer.global-states.ctx-filter.no-transform-expected.html": [
-        "0472b8f012ed37c7e3801ada30d3acfab923036d",
+        "1413ae16143911cf056fff18a6dbe92b00066340",
         []
        ],
        "2d.layer.global-states.ctx-filter.rotation-expected.html": [
-        "3290077de1ea57141ae7524d5071315d2bb1c0d6",
+        "4ea9b7bbc29c66133e47fdd4490827fc8f058ff5",
         []
        ],
        "2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html": [
-        "dae68b3ad7301e5f46a60b7ea466d2931969b24c",
+        "339c87bff21f7e609f653bcc90a81eb120dc956e",
         []
        ],
        "2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html": [
-        "b18ae7f357ac829d17228e15fc490b1b6243cf37",
+        "d5e03796eb34ace3703c470187e48c886edb25b2",
         []
        ],
        "2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html": [
-        "6263d26333a0ddc08abb05de71a4332e25c6944f",
+        "9908b53716c0737b0b4e4674b5c6d0a0f3a24c22",
         []
        ],
        "2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html": [
-        "0236c9a5d93681627eb813c43250cfc4a39dcced",
+        "949a28b82dcb3b8616fd26ffc168786a83256b14",
         []
        ],
        "2d.layer.global-states.no-cxt-filter.no-transform-expected.html": [
-        "fd33e3e4659a2df1fc46afaaa565885d32416026",
+        "aed32f49cf83e6a33598f0efbc7edca707a9c4c4",
         []
        ],
        "2d.layer.global-states.no-cxt-filter.rotation-expected.html": [
-        "7bee2f7e38ca3ff267e54eaac9847225b806100b",
+        "26b4bbaafda4063bdcc48f015927be4b11c03675",
         []
        ],
        "2d.layer.globalCompositeOperation-expected.html": [
-        "e00136f6106ecc04161c92c5807bccffaf6b7129",
+        "d80bae7a559d3e49c162693023f78973c83bf1ed",
         []
        ],
        "2d.layer.nested-ctx-filter-expected.html": [
@@ -464315,15 +464521,15 @@
         []
        ],
        "2d.text.measure.text-clusters-rendering-align.tentative-expected.html": [
-        "967ae7e46365ff181f4323b39f9ff13bb62a34c7",
+        "c983823a3ed190845f3b87a8c6ec543e0017744f",
         []
        ],
        "2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html": [
-        "2dffe90aadc57ae07067fa7decab24fd43fc8728",
+        "9e184f34de22258d1c5decfa1f84b73d0e976574",
         []
        ],
        "2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html": [
-        "6d109c3ffcd3ed269cd68638a4a722ac7d4a5c58",
+        "484aaf5f7c59f367a85f45ca8c6a467b904b48a2",
         []
        ],
        "2d.text.measure.text-clusters-rendering-font-change.tentative-expected.html": [
@@ -464361,7 +464567,7 @@
       ],
       "compositing": {
        "2d.composite.grid.filter.no_shadow.drawImage-expected.html": [
-        "eea78248a836f217a93d176c60b45ca202ea43ed",
+        "6f7bf8e8fe705e97ca9750b2db87c923775b905d",
         []
        ],
        "2d.composite.grid.filter.no_shadow.drawImage.png": [
@@ -464369,7 +464575,7 @@
         []
        ],
        "2d.composite.grid.filter.no_shadow.fillRect-expected.html": [
-        "08ed3566fd11df66e8d9e6ec4c84150be8e683bc",
+        "ec67b35c95963aa344f82119f445d5c2d486c844",
         []
        ],
        "2d.composite.grid.filter.no_shadow.fillRect.png": [
@@ -464377,7 +464583,7 @@
         []
        ],
        "2d.composite.grid.filter.no_shadow.pattern-expected.html": [
-        "22c84f42e89b91df473f435c3c10b3399215eb72",
+        "420cab82fbe6cf99f2d9f115f4d3bc6b1bf3baae",
         []
        ],
        "2d.composite.grid.filter.no_shadow.pattern.png": [
@@ -464385,7 +464591,7 @@
         []
        ],
        "2d.composite.grid.filter.shadow.drawImage-expected.html": [
-        "2072348f904966cd1630efc1243aadddfbfe11e9",
+        "1976dfc466387c2414676024e196623032901a5a",
         []
        ],
        "2d.composite.grid.filter.shadow.drawImage.png": [
@@ -464393,7 +464599,7 @@
         []
        ],
        "2d.composite.grid.filter.shadow.fillRect-expected.html": [
-        "1e119bcbde5a2996567214e864ad33d00cc0d877",
+        "72cd6c78da4dda4f903c24447d1e51cd207ed69d",
         []
        ],
        "2d.composite.grid.filter.shadow.fillRect.png": [
@@ -464401,7 +464607,7 @@
         []
        ],
        "2d.composite.grid.filter.shadow.pattern-expected.html": [
-        "f45fe82c302917293852ced72f3dd53628f398c2",
+        "b7a4f59f84beebf42fcbc79c8063a81058fea9e4",
         []
        ],
        "2d.composite.grid.filter.shadow.pattern.png": [
@@ -464409,7 +464615,7 @@
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.drawImage-expected.html": [
-        "923d8360a9d73c9c336e8c460090b0e197e33a12",
+        "36578e14d4d000e8f19bd16a7487d1a3a4b7cfef",
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.drawImage.png": [
@@ -464417,7 +464623,7 @@
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.fillRect-expected.html": [
-        "c809e56cac391699d5f4bd284424164833d09419",
+        "ae85679c221aadcb1d3d4136a4cafa3fd4f8ec2c",
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.fillRect.png": [
@@ -464425,7 +464631,7 @@
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.pattern-expected.html": [
-        "f052442a637ed64db37ad12ea7f799f667ff9cd8",
+        "5f7f12c9c8a5f4833db5da0a1be53d11310345ad",
         []
        ],
        "2d.composite.grid.no_filter.no_shadow.pattern.png": [
@@ -464433,7 +464639,7 @@
         []
        ],
        "2d.composite.grid.no_filter.shadow.drawImage-expected.html": [
-        "ad07c35d3101c61b1e1ac4df2ec05348af251439",
+        "19439211ddeaa538e89b30bdee6049ce3e5f1192",
         []
        ],
        "2d.composite.grid.no_filter.shadow.drawImage.png": [
@@ -464441,7 +464647,7 @@
         []
        ],
        "2d.composite.grid.no_filter.shadow.fillRect-expected.html": [
-        "e16a5fcf4582efd0e691da4057f501e4be3702d3",
+        "42266582be21d2daa89e5b9ab81d646e3ab552af",
         []
        ],
        "2d.composite.grid.no_filter.shadow.fillRect.png": [
@@ -464449,7 +464655,7 @@
         []
        ],
        "2d.composite.grid.no_filter.shadow.pattern-expected.html": [
-        "01e1d4d7b264624b94066ddd3b9e0f696b8c8517",
+        "8d6d2492b9beaeb50ddbe2c39686372ba78e8882",
         []
        ],
        "2d.composite.grid.no_filter.shadow.pattern.png": [
@@ -464483,7 +464689,7 @@
         []
        ],
        "2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html": [
-        "9c85dfec907e2dd6b1158002e6f8b6ed151b8852",
+        "6e9ebb5b2e13525bfb7f697b4300998d43daa93a",
         []
        ],
        "2d.filter.drop-shadow-globalAlpha-expected.html": [
@@ -464515,7 +464721,7 @@
         []
        ],
        "2d.filter.layers.gaussianBlur.tentative-expected.html": [
-        "f02f08d5f83665159887729d86caa97da645fc5e",
+        "88d38a8c0c8e1237eeccfc7c23f1d1f04f22c0b8",
         []
        ]
       },
@@ -464633,39 +464839,39 @@
         []
        ],
        "2d.layer.global-states.ctx-filter.no-transform-expected.html": [
-        "0472b8f012ed37c7e3801ada30d3acfab923036d",
+        "1413ae16143911cf056fff18a6dbe92b00066340",
         []
        ],
        "2d.layer.global-states.ctx-filter.rotation-expected.html": [
-        "3290077de1ea57141ae7524d5071315d2bb1c0d6",
+        "4ea9b7bbc29c66133e47fdd4490827fc8f058ff5",
         []
        ],
        "2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html": [
-        "dae68b3ad7301e5f46a60b7ea466d2931969b24c",
+        "339c87bff21f7e609f653bcc90a81eb120dc956e",
         []
        ],
        "2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html": [
-        "b18ae7f357ac829d17228e15fc490b1b6243cf37",
+        "d5e03796eb34ace3703c470187e48c886edb25b2",
         []
        ],
        "2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html": [
-        "6263d26333a0ddc08abb05de71a4332e25c6944f",
+        "9908b53716c0737b0b4e4674b5c6d0a0f3a24c22",
         []
        ],
        "2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html": [
-        "0236c9a5d93681627eb813c43250cfc4a39dcced",
+        "949a28b82dcb3b8616fd26ffc168786a83256b14",
         []
        ],
        "2d.layer.global-states.no-cxt-filter.no-transform-expected.html": [
-        "fd33e3e4659a2df1fc46afaaa565885d32416026",
+        "aed32f49cf83e6a33598f0efbc7edca707a9c4c4",
         []
        ],
        "2d.layer.global-states.no-cxt-filter.rotation-expected.html": [
-        "7bee2f7e38ca3ff267e54eaac9847225b806100b",
+        "26b4bbaafda4063bdcc48f015927be4b11c03675",
         []
        ],
        "2d.layer.globalCompositeOperation-expected.html": [
-        "e00136f6106ecc04161c92c5807bccffaf6b7129",
+        "d80bae7a559d3e49c162693023f78973c83bf1ed",
         []
        ],
        "2d.layer.nested-ctx-filter-expected.html": [
@@ -464775,12 +464981,16 @@
          "8949caa8486848a4d8f820752e1d73d26e2fc07d",
          []
         ],
+        "canvas.2d.offscreen.worker.direction-ref.html": [
+         "23e70313cdbfd65535e5d16297ae5a074ee645ed",
+         []
+        ],
         "text-direction-worker-inherit.js": [
-         "14eaf588694bf2e52bc567950ff90e0c027c733d",
+         "a300048d10f59a8e42631edfd968d115f2e3b211",
          []
         ],
         "text-direction-worker.js": [
-         "9375ec16f231ec6f6d7d082fcd1b46ebf72a624f",
+         "d85504f524e66fce864ab284da961624e2e3c3a5",
          []
         ]
        },
@@ -464863,15 +465073,15 @@
         []
        ],
        "2d.text.measure.text-clusters-rendering-align.tentative-expected.html": [
-        "967ae7e46365ff181f4323b39f9ff13bb62a34c7",
+        "c983823a3ed190845f3b87a8c6ec543e0017744f",
         []
        ],
        "2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html": [
-        "2dffe90aadc57ae07067fa7decab24fd43fc8728",
+        "9e184f34de22258d1c5decfa1f84b73d0e976574",
         []
        ],
        "2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html": [
-        "6d109c3ffcd3ed269cd68638a4a722ac7d4a5c58",
+        "484aaf5f7c59f367a85f45ca8c6a467b904b48a2",
         []
        ],
        "2d.text.measure.text-clusters-rendering-font-change.tentative-expected.html": [
@@ -464901,6 +465111,10 @@
        "e13897f157263b83b2d69e3e187cb890ff394f6c",
        []
       ],
+      "canvas-grid-reftest.css": [
+       "368a06fbb371fa56850453b0ef05c2241d7be0dd",
+       []
+      ],
       "canvas-index.css": [
        "ef35864bc03faff124dbdcc8ce623217c2cd69a6",
        []
@@ -464948,7 +465162,7 @@
        []
       ],
       "gentestutilsunion.py": [
-       "d1bafced0e2151654a77217e51fd909fb3a4c83b",
+       "62b355f37432da95cf5c7885d8ea5de03b6dcb93",
        []
       ],
       "name2dir-canvas.yaml": [
@@ -464960,7 +465174,7 @@
        []
       ],
       "name2dir.yaml": [
-       "a62fab3a04e68bfa30cd1dbefcef358504aebb43",
+       "bd032d4541a410126c27a2839a11a8f234b619d8",
        []
       ],
       "templates": {
@@ -464973,11 +465187,11 @@
         []
        ],
        "reftest_element_grid.html": [
-        "559610160c4ec0c6ca770dd9cb1a438654c9525b",
+        "f2bbb183358a274db1e37282ff33d94befa9f363",
         []
        ],
        "reftest_grid.html": [
-        "f3e5aa745857491cf6096439c053a33179e25a02",
+        "68a4f507cdc1952a77b11ccf425fcaead78729ae",
         []
        ],
        "reftest_img.html": [
@@ -464985,7 +465199,7 @@
         []
        ],
        "reftest_img_grid.html": [
-        "c222ccfc589fb0a5a599356cf67c5d37b75a6cca",
+        "227184db2ea05349e5d1be398234ad29d1cd1123",
         []
        ],
        "reftest_offscreen.html": [
@@ -464993,7 +465207,7 @@
         []
        ],
        "reftest_offscreen_grid.html": [
-        "d79b12e2d16dbf84d4058e48c9cb91a9cea05570",
+        "a9553e824198db2b414c669f5c2f20c5e20b0fd0",
         []
        ],
        "reftest_worker.html": [
@@ -465001,7 +465215,7 @@
         []
        ],
        "reftest_worker_grid.html": [
-        "06143d5da63475e14212e8c5cd3f07d6afc99e62",
+        "7cbe19775174d1f57d99d839503b65985c378875",
         []
        ],
        "testharness_element.html": [
@@ -465049,7 +465263,11 @@
       },
       "yaml-new": {
        "color_space.yaml": [
-        "56f6d01d308de00869b438e7fa6515161345354b",
+        "0582f4953470c05d1b0f0704d40e778ebfc4dff1",
+        []
+       ],
+       "color_type.yaml": [
+        "58d7038af823d54e06c87152b737bd15a8fa871e",
         []
        ],
        "compositing.yaml": [
@@ -471116,6 +471334,10 @@
        ]
       },
       "the-option-element": {
+       "option-label-whitespace-ref.html": [
+        "442e3479fbb05fdd1360d6058bce9417ead7eb84",
+        []
+       ],
        "option-with-br-ref.html": [
         "954840f389b00529b3b977aaf23884c59b37c88b",
         []
@@ -472728,6 +472950,10 @@
         "66b42e40253f1a47c90ac781e9a13cc94996f52b",
         []
        ],
+       "video-transparent-controls-ref.html": [
+        "4664cbfe2fdd7091e4b7c758076acca848a6355d",
+        []
+       ],
        "video_content-ref.htm": [
         "c02abb1236d3a2883d6e451fdb05d16b1d03157d",
         []
@@ -474135,6 +474361,10 @@
          "c508d5366f70bba37fcc09d128b6537c4adb2c79",
          []
         ],
+        "http-accept-header-checker.py": [
+         "b7ecbb5f352f3635e06e93eb7321f10fce417412",
+         []
+        ],
         "integrity-matches.js": [
          "20459c17e3bb665ba8fa27d02520a35d862bdb4c",
          []
@@ -478890,7 +479120,7 @@
      []
     ],
     "cssom-view.idl": [
-     "f922bc81486442108d566645b31c4dd24f257b5b",
+     "88abb078485fc2159c15b5401dc9944d47a47940",
      []
     ],
     "cssom.idl": [
@@ -479050,7 +479280,7 @@
      []
     ],
     "html.idl": [
-     "77e41b6eb9e88dc0784edfcbc0b62961d6656408",
+     "f10bb72e913eaed514b75cb5178712dfad84505c",
      []
     ],
     "idle-detection.idl": [
@@ -479146,7 +479376,7 @@
      []
     ],
     "media-capabilities.idl": [
-     "94339b6d1dd0b80cec63754782852075cb9fb1f6",
+     "7bd8aca90c32027af67001afa3d33059b0f0f87b",
      []
     ],
     "media-playback-quality.idl": [
@@ -479270,7 +479500,7 @@
      []
     ],
     "permissions-policy.idl": [
-     "806d2eb80f6562300ad4cc664d13a968995e0012",
+     "b17304de8d090fb280a89b6b264ddab8bc0a4003",
      []
     ],
     "permissions-request.idl": [
@@ -479438,7 +479668,7 @@
      []
     ],
     "speech-api.idl": [
-     "e4ca6df5c4331c5c66aabb249dcb9fdb7323dc6f",
+     "025f9424f0120fec097ea7551b5b1ead2fd99144",
      []
     ],
     "storage-access.idl": [
@@ -479534,7 +479764,7 @@
      []
     ],
     "web-animations-2.idl": [
-     "ad047f5733a9552251147ccc59cdd88059fa4fe8",
+     "c4a0c2532d97806eeead38d1e1924c485d775491",
      []
     ],
     "web-animations.idl": [
@@ -480135,7 +480365,7 @@
     ]
    },
    "lint.ignore": [
-    "4dd0b96460ca5f6212ff2c25a0b324f5cffb9790",
+    "a91efc0cf1ab543a9ae4e99df1ac5ad396029269",
     []
    ],
    "loading": {
@@ -481935,6 +482165,10 @@
      "239ad2bd08c21ca783b83cd0245951fecdab6a64",
      []
     ],
+    "speech.wav": [
+     "fd5e2f78d5c4762664d78c3d2f958b61002e7649",
+     []
+    ],
     "test-1s.mp4": [
      "76d6820007c2334e8abdbb65b7410fc1d38dfc19",
      []
@@ -484157,7 +484391,7 @@
       []
      ],
      "digital-credentials-get.html": [
-      "543417f230a59b3d09705b20775a38cbabaf7a22",
+      "12a450a1ae41c806c6023d0ef17e3ae55236e931",
       []
      ],
      "nested-sandbox.html": [
@@ -487982,7 +488216,7 @@
      []
     ],
     "sethtml-tree-construction.sub.dat": [
-     "c5c30f613134d29030a7dbd8b03ac0f181b630bb",
+     "c4bb74e9693a0675d7a66929800e2939315cb475",
      []
     ],
     "sethtml-unsafety.sub.dat": [
@@ -487991,7 +488225,7 @@
     ],
     "support": {
      "html5lib-testcase-support.js": [
-      "fbfe81a1780080dce4c5b8fa78ae08ed5f826a96",
+      "4d07af87f86efc2aac45e5e58bf254dfb1637cea",
       []
      ]
     }
@@ -492117,6 +492351,10 @@
     }
    },
    "speculation-rules": {
+    "WEB_FEATURES.yml": [
+     "bfdb07c4e1e47d4428d203d2e6277987fbab5225",
+     []
+    ],
     "prefetch": {
      "no-vary-search": {
       "README.txt": [
@@ -492746,7 +492984,7 @@
      []
     ],
     "helpers.js": [
-     "a698fac6491a172f8da9fc0a11519d567385b333",
+     "3c03ead13b92896277ab3f6215a52228264bf0d5",
      []
     ],
     "resources": {
@@ -492763,7 +493001,7 @@
       []
      ],
      "embedded_responder.js": [
-      "fb3bef40b2d9245508ce99bad5f5990c5b9615ab",
+      "8710bfe8d78d3c418182c446db391561b98d12b1",
       []
      ],
      "embedded_worker.py": [
@@ -492996,7 +493234,7 @@
     "signatures": {
      "tentative": {
       "helper.js": [
-       "51d57eec059f9c5fb1d904bbddf6110f4d8ca308",
+       "29ed6449c26f3f87a2fd70429e148d121da35a9b",
        []
       ],
       "resource.py": [
@@ -494515,11 +494753,11 @@
       []
      ],
      "run_tc.py": [
-      "25cfaee2fc10487796510d026e0fea4a7d78e98f",
+      "a729bc8878cf4fdb1ffebbf5340c4ead23eba66f",
       []
      ],
      "taskcluster-run.py": [
-      "3badcf3b496a3483d2dcc9d9725805af5e3c579e",
+      "3affde80c7ef9133aad0e7d535ff787065b1e638",
       []
      ],
      "tc": {
@@ -494553,7 +494791,7 @@
       ],
       "tasks": {
        "test.yml": [
-        "727b6083bd1b78bfc222bb33f1bd8fea3a764e2a",
+        "947ecff2592cce57b1b735f4c61456afc801578e",
         []
        ]
       },
@@ -494589,7 +494827,7 @@
         []
        ],
        "test_valid.py": [
-        "3e7150c70977315f95a09de21ae98d36b4e759aa",
+        "3b5f7c3e89cd0c01c7b6e45488fed01fb811bc26",
         []
        ]
       }
@@ -505917,7 +506155,7 @@
         []
        ],
        "executorwebdriver.py": [
-        "7513887998d6cdbcec736ebfb885108c015fd0a7",
+        "32c61f045ad6a5a993ce7f9412cbe1122ba00d8c",
         []
        ],
        "executorwktr.py": [
@@ -506806,6 +507044,10 @@
       "af6596b29a8080e5cd8d688d0d6933caf49a2090",
       []
      ],
+     "attributes.js": [
+      "7c373ae9e58044025a931fc156e5c0c3f7814aa8",
+      []
+     ],
      "block-eval-function-constructor-worker.js": [
       "0a74a1cdef31c93cd854f6abe0220319002d0303",
       []
@@ -509633,6 +509875,10 @@
        "63b60e490f47f4db77d33d7a4ca2f5b9a4181de8",
        []
       ],
+      "audioworkletprocessor-no-process.js": [
+       "0b856a20b1262ff194d397e205061dbf57752f96",
+       []
+      ],
       "processors": {
        "active-processing.js": [
         "ef497733cafb471f74ace33045c4b4d43f3ce4f2",
@@ -510148,7 +510394,7 @@
      []
     ],
     "utils.js": [
-     "f09334677a6a42385949c262a163066d41f750d9",
+     "d2d7195d6b052a9a3ee03d1e3e12f7a18365c15b",
      []
     ],
     "video-decoder.crossOriginIsolated.https.any.js.headers": [
@@ -510159,6 +510405,10 @@
      "916f995156e51d7fed083d9ab175cc44d974dc6b",
      []
     ],
+    "videoDecoder-codec-specific-setup.js": [
+     "19d1a10cb2235341cba14db21fdcf3280b6394a5",
+     []
+    ],
     "videoFrame-construction.crossOriginIsolated.https.any.js.headers": [
      "985da71a2b6ea4da09f38642752d10e888e2c756",
      []
@@ -511260,7 +511510,7 @@
        []
       ],
       "asserts.py": [
-       "b87a7eb46cf3a060220bca9137f484e5fcd1ca21",
+       "1c626a735d53f5540c6f683ae04b0f2d606a8b61",
        []
       ],
       "defaults.py": [
@@ -516474,7 +516724,7 @@
     ],
     "BlobURL": {
      "cross-partition-navigation.https.html": [
-      "37cb3dc452d8ec1d4d3395126775a279ef79ab96",
+      "0529cde79e2c5ac4315dee7f0b9a8b0b24933be7",
       [
        null,
        {
@@ -519540,48 +519790,498 @@
       }
      ]
     ],
-    "idbcursor-continue-exception-order.htm": [
-     "6561ec396c23e13df200ed43c7515305ccb7d2ad",
+    "idbcursor-continue-exception-order.any.js": [
+     "794ec8e32e6d71b312f2efd35ed2c8bd7370a010",
      [
-      null,
-      {}
-     ]
-    ],
-    "idbcursor-continue.htm": [
-     "bcb099f309edbb159814ab296a02ebb4bd3e9f3e",
-     [
-      null,
-      {}
-     ]
-    ],
-    "idbcursor-continuePrimaryKey-exception-order.htm": [
-     "477dabc60e800ac4744b604488170c9fd522f96c",
-     [
-      null,
+      "IndexedDB/idbcursor-continue-exception-order.any.html",
       {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor continue() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continue-exception-order.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor continue() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continue-exception-order.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor continue() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continue-exception-order.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor continue() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ]
+    ],
+    "idbcursor-continue.any.js": [
+     "767d5a4fae4add87b46084de32423c3c17b2b1e6",
+     [
+      "IndexedDB/idbcursor-continue.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.continue()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continue.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.continue()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continue.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.continue()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continue.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.continue()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ]
+    ],
+    "idbcursor-continuePrimaryKey-exception-order.any.js": [
+     "b4ea9ca5bb59b1312260c705c19b27dd2b10ddeb",
+     [
+      "IndexedDB/idbcursor-continuePrimaryKey-exception-order.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.continuePrimaryKey() - Exception Orders"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ],
+        [
+         "timeout",
+         "long"
+        ]
+       ],
+       "timeout": "long"
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continuePrimaryKey-exception-order.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.continuePrimaryKey() - Exception Orders"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ],
+        [
+         "timeout",
+         "long"
+        ]
+       ],
+       "timeout": "long"
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continuePrimaryKey-exception-order.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.continuePrimaryKey() - Exception Orders"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ],
+        [
+         "timeout",
+         "long"
+        ]
+       ],
+       "timeout": "long"
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continuePrimaryKey-exception-order.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.continuePrimaryKey() - Exception Orders"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ],
+        [
+         "timeout",
+         "long"
+        ]
+       ],
        "timeout": "long"
       }
      ]
     ],
-    "idbcursor-continuePrimaryKey-exceptions.htm": [
-     "862c9c951b5e7976fc8a48ef8677451358c4096b",
+    "idbcursor-continuePrimaryKey-exceptions.any.js": [
+     "581aff2300fe901845a5a20324bd6ccf32df02a7",
      [
-      null,
-      {}
+      "IndexedDB/idbcursor-continuePrimaryKey-exceptions.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor continuePrimaryKey() exception throwing"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continuePrimaryKey-exceptions.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor continuePrimaryKey() exception throwing"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continuePrimaryKey-exceptions.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor continuePrimaryKey() exception throwing"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continuePrimaryKey-exceptions.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor continuePrimaryKey() exception throwing"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
-    "idbcursor-continuePrimaryKey.htm": [
-     "b45bba7c22138d6f29f980b9a2c1bb87ff5e453d",
+    "idbcursor-continuePrimaryKey.any.js": [
+     "38ab750e36e7a7343bf82179f0c3e1de330e74ec",
      [
-      null,
-      {}
+      "IndexedDB/idbcursor-continuePrimaryKey.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor method continuePrimaryKey()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continuePrimaryKey.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor method continuePrimaryKey()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continuePrimaryKey.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor method continuePrimaryKey()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-continuePrimaryKey.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor method continuePrimaryKey()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
-    "idbcursor-delete-exception-order.htm": [
-     "72d565749718a624344480d4d336cf23776f71e3",
+    "idbcursor-delete-exception-order.any.js": [
+     "84b7c867d1bbc3b7079e26c0d3704d1b76709394",
      [
-      null,
-      {}
+      "IndexedDB/idbcursor-delete-exception-order.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor delete() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-delete-exception-order.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor delete() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-delete-exception-order.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor delete() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-delete-exception-order.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor delete() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
     "idbcursor-direction-index-keyrange.any.js": [
@@ -519979,32 +520679,320 @@
       }
      ]
     ],
-    "idbcursor-iterating-update.htm": [
-     "00fdb5a0c008bcc1d2f5ebcef8c2bbc0ba517f4b",
+    "idbcursor-iterating-update.any.js": [
+     "c88b4124669136c6b6c1ed39d3a117f57f9942ec",
      [
-      null,
-      {}
+      "IndexedDB/idbcursor-iterating-update.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: Index iteration with cursor updates/deletes"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-iterating-update.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: Index iteration with cursor updates/deletes"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-iterating-update.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: Index iteration with cursor updates/deletes"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-iterating-update.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: Index iteration with cursor updates/deletes"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
-    "idbcursor-key.htm": [
-     "c1dbbe15038d782575504b5d84b94a4883ab4731",
+    "idbcursor-key.any.js": [
+     "d8d2848377e4cc81c90d99a9d55eb52a3ed358ae",
      [
-      null,
-      {}
+      "IndexedDB/idbcursor-key.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.key"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-key.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.key"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-key.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.key"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-key.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.key"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
-    "idbcursor-primarykey.htm": [
-     "c32973874870c89b4b0f669f93b4186437fd04aa",
+    "idbcursor-primarykey.any.js": [
+     "8b9afc677605b786b14d8a13c5562a871656095d",
      [
-      null,
-      {}
+      "IndexedDB/idbcursor-primarykey.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.primaryKey"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-primarykey.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.primaryKey"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-primarykey.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.primaryKey"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-primarykey.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.primaryKey"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
-    "idbcursor-request-source.html": [
-     "9e2f72b4d45beb6941783a08e69a59dafbde5366",
+    "idbcursor-request-source.any.js": [
+     "2fe8c66f2e590b170a1456648e1dca74077464d8",
      [
-      null,
-      {}
+      "IndexedDB/idbcursor-request-source.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: The source of requests made against cursors"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-request-source.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: The source of requests made against cursors"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-request-source.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: The source of requests made against cursors"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-request-source.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: The source of requests made against cursors"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
     "idbcursor-request.any.js": [
@@ -520032,25 +521020,241 @@
       }
      ]
     ],
-    "idbcursor-reused.htm": [
-     "30414584fee577a860b01b5b0ca8857738e6494a",
+    "idbcursor-reused.any.js": [
+     "d98b95193ae199587ffb1013c13c52e98d197599",
      [
-      null,
-      {}
+      "IndexedDB/idbcursor-reused.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor is reused"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-reused.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor is reused"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-reused.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor is reused"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-reused.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor is reused"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
-    "idbcursor-source.htm": [
-     "1882f092942565f927e7bc0eb39ee59ea6809c58",
+    "idbcursor-source.any.js": [
+     "5f0dfa39e6a5bc431b940f12d592eebd05cd3223",
      [
-      null,
-      {}
+      "IndexedDB/idbcursor-source.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.source"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-source.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.source"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-source.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.source"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-source.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBCursor.source"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
-    "idbcursor-update-exception-order.htm": [
-     "9324752d5eb7f4d3ccd8c63fd660627a9890f46b",
+    "idbcursor-update-exception-order.any.js": [
+     "f7af4152024ff7bf10128e143f7e4ad85d128394",
      [
-      null,
-      {}
+      "IndexedDB/idbcursor-update-exception-order.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor update() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-update-exception-order.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor update() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-update-exception-order.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor update() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbcursor-update-exception-order.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBCursor update() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
     "idbcursor_advance_index.any.js": [
@@ -520922,39 +522126,320 @@
       }
      ]
     ],
-    "idbdatabase-createObjectStore-exception-order.htm": [
-     "1ca2ce1d7ccb9915c616645e626e5d0c417cdc2b",
+    "idbdatabase-createObjectStore-exception-order.any.js": [
+     "783ae41dd2f1be2d0ac990c6970af8ee9729fc99",
      [
-      null,
-      {}
+      "IndexedDB/idbdatabase-createObjectStore-exception-order.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase createObjectStore() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbdatabase-createObjectStore-exception-order.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase createObjectStore() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbdatabase-createObjectStore-exception-order.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase createObjectStore() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbdatabase-createObjectStore-exception-order.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase createObjectStore() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
-    "idbdatabase-deleteObjectStore-exception-order.htm": [
-     "4d98a31f120af4503a92d1e695199485e552d887",
+    "idbdatabase-deleteObjectStore-exception-order.any.js": [
+     "061c84c0029dc9d6fd70a7efa4d5199090f7a837",
      [
-      null,
-      {}
+      "IndexedDB/idbdatabase-deleteObjectStore-exception-order.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase deleteObjectStore() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbdatabase-deleteObjectStore-exception-order.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase deleteObjectStore() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbdatabase-deleteObjectStore-exception-order.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase deleteObjectStore() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbdatabase-deleteObjectStore-exception-order.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase deleteObjectStore() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
-    "idbdatabase-transaction-exception-order.html": [
-     "d06efe1d2f91e7bc77a8c0ade62c9bc62d6d1702",
+    "idbdatabase-transaction-exception-order.any.js": [
+     "c5b31f28852339b44ee0662a05d2afd0fbb2cc52",
      [
-      null,
-      {}
+      "IndexedDB/idbdatabase-transaction-exception-order.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase transaction() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbdatabase-transaction-exception-order.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase transaction() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbdatabase-transaction-exception-order.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase transaction() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbdatabase-transaction-exception-order.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IndexedDB: IDBDatabase transaction() Exception Ordering"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
-    "idbdatabase_close.htm": [
-     "8ebebaf1b8816d0beaec02899114d7c60a442b89",
+    "idbdatabase_close.any.js": [
+     "1fa105171a7f7f0325cf6edff3923a4cc9ad9f28",
      [
-      null,
-      {}
-     ]
-    ],
-    "idbdatabase_close2.htm": [
-     "26bc4ce6383ec8d7abdec06c7cfbd112f9b5afc0",
+      "IndexedDB/idbdatabase_close.any.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBDatabase.close()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
      [
-      null,
-      {}
+      "IndexedDB/idbdatabase_close.any.serviceworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBDatabase.close()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbdatabase_close.any.sharedworker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBDatabase.close()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
+     ],
+     [
+      "IndexedDB/idbdatabase_close.any.worker.html",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,worker"
+        ],
+        [
+         "title",
+         "IDBDatabase.close()"
+        ],
+        [
+         "script",
+         "resources/support.js"
+        ]
+       ]
+      }
      ]
     ],
     "idbdatabase_createObjectStore.any.js": [
@@ -526150,7 +527635,7 @@
      ]
     ],
     "idbtransaction_abort.any.js": [
-     "7bc27dc3d6941e0aeb0b4f37ac76a2f2c3c4b712",
+     "1f14bbe4d5dd7c82a9fea8dc96cc6e63362d2104",
      [
       "IndexedDB/idbtransaction_abort.any.html",
       {
@@ -540436,7 +541921,7 @@
       ]
      ],
      "ai_translator_translate.tentative.https.any.js": [
-      "2041ad82b5aadb44f3073cacfa041c658921c0f0",
+      "5cd8cb86b22b80f2c96b91fd35663231853c48e7",
       [
        "ai/translator/ai_translator_translate.tentative.https.any.html",
        {
@@ -540447,7 +541932,7 @@
          ],
          [
           "global",
-          "window,worker"
+          "window"
          ],
          [
           "timeout",
@@ -540456,78 +541941,14 @@
          [
           "script",
           "../resources/util.js"
-         ]
-        ],
-        "timeout": "long"
-       }
-      ],
-      [
-       "ai/translator/ai_translator_translate.tentative.https.any.serviceworker.html",
-       {
-        "script_metadata": [
-         [
-          "title",
-          "Translate from English to Japanese"
-         ],
-         [
-          "global",
-          "window,worker"
-         ],
-         [
-          "timeout",
-          "long"
          ],
          [
           "script",
-          "../resources/util.js"
-         ]
-        ],
-        "timeout": "long"
-       }
-      ],
-      [
-       "ai/translator/ai_translator_translate.tentative.https.any.sharedworker.html",
-       {
-        "script_metadata": [
-         [
-          "title",
-          "Translate from English to Japanese"
-         ],
-         [
-          "global",
-          "window,worker"
-         ],
-         [
-          "timeout",
-          "long"
+          "../resources/language_codes.js"
          ],
          [
           "script",
-          "../resources/util.js"
-         ]
-        ],
-        "timeout": "long"
-       }
-      ],
-      [
-       "ai/translator/ai_translator_translate.tentative.https.any.worker.html",
-       {
-        "script_metadata": [
-         [
-          "title",
-          "Translate from English to Japanese"
-         ],
-         [
-          "global",
-          "window,worker"
-         ],
-         [
-          "timeout",
-          "long"
-         ],
-         [
-          "script",
-          "../resources/util.js"
+          "/resources/testdriver.js"
          ]
         ],
         "timeout": "long"
@@ -548467,7 +549888,7 @@
    },
    "clear-site-data": {
     "clear-cache-partitioning.sub.https.html": [
-     "35640785662d4e77ac9e5679ca3a108d3155027c",
+     "b3841450b5a3fcfbe79857cebd7da8855754597a",
      [
       null,
       {
@@ -560885,6 +562306,31 @@
       ]
      ]
     },
+    "tentative": {
+     "require-sri-for": {
+      "script-allowed-meta.https.html": [
+       "087498f0c573da8a7212f31348898769e070bb7d",
+       [
+        null,
+        {}
+       ]
+      ],
+      "script-blocked-meta.https.html": [
+       "fe69c61f5b6c68bfefc4c88a18c6f48b6466060e",
+       [
+        null,
+        {}
+       ]
+      ],
+      "script.https.html": [
+       "65553e523ccac1764b957dbe7af34f42acdfc551",
+       [
+        null,
+        {}
+       ]
+      ]
+     }
+    },
     "unsafe-eval": {
      "eval-allowed.sub.html": [
       "186996311b707e1fc646885c847e082797847a9b",
@@ -563260,6 +564706,13 @@
        }
       ]
      ],
+     "sandbox-allow-same-site-none-cookies-value.tentative.https.html": [
+      "77c1386ffb4432987e10215b69385ec83c22af44",
+      [
+       null,
+       {}
+      ]
+     ],
      "sandbox-iframe-nested.https.html": [
       "310f86a44687d5b715106c382afcc246808f5fc7",
       [
@@ -569350,21 +570803,21 @@
         ]
        ],
        "corner-shape-computed.html": [
-        "402c4b6659e124a095b15f13862a34471708cae1",
+        "1d084e23397b3bd34764c8dd874aa69bd8678a89",
         [
          null,
          {}
         ]
        ],
        "corner-shape-invalid.html": [
-        "490b8613945607db1756fca94a9dba9f01cdbbc9",
+        "582617a634afe223aa7f7aca5974b4b58a5a54f6",
         [
          null,
          {}
         ]
        ],
        "corner-shape-valid.html": [
-        "61005759d1258d5e808fa15aef21f7b79555a64e",
+        "32aaa89fc5b18ae332e983852f61d84397f5cae4",
         [
          null,
          {}
@@ -570987,6 +572440,13 @@
         {}
        ]
       ],
+      "color-computed-contrast-color-function.html": [
+       "57537dd929fc2d4e6fe0fe9f544037825df2ee71",
+       [
+        null,
+        {}
+       ]
+      ],
       "color-computed-hex-color.html": [
        "7485b34a1df318a25cfaafdf762f6977594f0d69",
        [
@@ -571064,6 +572524,13 @@
         {}
        ]
       ],
+      "color-invalid-contrast-color-function.html": [
+       "0c5741e239737afb7c70e729f4115d4804f04e8c",
+       [
+        null,
+        {}
+       ]
+      ],
       "color-invalid-hex-color.html": [
        "f879f334a1e69680f4bb7957aa39747eb43da279",
        [
@@ -571148,6 +572615,13 @@
         {}
        ]
       ],
+      "color-valid-contrast-color-function.html": [
+       "85a133b78e985449ee18a26f72beae9fae23581d",
+       [
+        null,
+        {}
+       ]
+      ],
       "color-valid-hsl.html": [
        "a9d2a7b887015cdbdff8f0268549ae4c197abe0c",
        [
@@ -577275,7 +578749,7 @@
        ]
       ],
       "at-font-face-font-matching.html": [
-       "ba18f9d5ab2e1ea7982b4a9fff468421f8c344e4",
+       "7511a83c4251729ea69788d810e8ba8f125e86d1",
        [
         null,
         {
@@ -580608,6 +582082,13 @@
         {}
        ]
       ],
+      "grid-automatic-minimum-for-auto-rows-001.html": [
+       "6c73370937c4fdb074da98158835ebfe0a6cfe7b",
+       [
+        null,
+        {}
+       ]
+      ],
       "grid-container-percentage-001.html": [
        "511e0cd99ead89649884ab7cc0852bfab09eb7da",
        [
@@ -581295,6 +582776,13 @@
        {}
       ]
      ],
+     "HighlightRegistry-highlightsFromPoint.html": [
+      "5bb81bea69ac5960db16e3f9ec3bb208f43a7200",
+      [
+       null,
+       {}
+      ]
+     ],
      "HighlightRegistry-iteration-with-modifications.html": [
       "7e1a0c08f3c795fa7d71cc77f531a10d865e0506",
       [
@@ -583485,14 +584973,35 @@
       ]
      ],
      "dashed-function-eval.html": [
-      "7726e832e0267b57852d099349c779d920aaa2e3",
+      "1eaad4e3cf01b27d66b6bf9c18ba614f51b116d8",
       [
        null,
        {}
       ]
      ],
      "function-conditionals.html": [
-      "e6113703d70f11ce26e1a630f67e6e3c1118ad96",
+      "18e82e53b61a339f21034d30d4c6de2da5d879ec",
+      [
+       null,
+       {}
+      ]
+     ],
+     "function-container-dynamic.html": [
+      "f05c347a2ab69752e57a5c4a07850f48119b55ca",
+      [
+       null,
+       {}
+      ]
+     ],
+     "function-container-self.html": [
+      "39a65986a8048229c517316bd5ca185642cc1035",
+      [
+       null,
+       {}
+      ]
+     ],
+     "function-container-style.html": [
+      "260f3d08d1e0ef3a62cabf5910e5c6bc3c49e0c0",
       [
        null,
        {}
@@ -584385,7 +585894,7 @@
       ]
      ],
      "overflow-shorthand-002.html": [
-      "6d5006497b784bb5eee4ff95f6733080a372b2e7",
+      "a27694887000ab7ffcd55206319d6a4203c269d4",
       [
        null,
        {}
@@ -584681,6 +586190,15 @@
        }
       ]
      ],
+     "scroll-marker-activation-scroll.html": [
+      "2a8be10d5a4f0553bb077e5cf1aead329972d4ed",
+      [
+       null,
+       {
+        "testdriver": true
+       }
+      ]
+     ],
      "scroll-marker-controls-scroll-tracking-001.html": [
       "42dff1a7800176a6d5de9ecbf07d59dd47350e76",
       [
@@ -584763,6 +586281,24 @@
        }
       ]
      ],
+     "scroll-marker-navigation-cycles.html": [
+      "d41b720ed9252b78845efb473d566f447ce71991",
+      [
+       null,
+       {
+        "testdriver": true
+       }
+      ]
+     ],
+     "scroll-marker-next-focus.html": [
+      "48a86a920262f4fdd6507aa30244a6dffd079632",
+      [
+       null,
+       {
+        "testdriver": true
+       }
+      ]
+     ],
      "scroll-marker-selection-in-padded-scroller.html": [
       "94e84d278f2b53b475e6d072cb6f520916bdb283",
       [
@@ -600447,7 +601983,7 @@
       ]
      ],
      "attr-security.html": [
-      "e8c041671ed5cf8a7589108f8c9b22363ddf545c",
+      "ee9b030d56f2e4f84dda2a97915c1819e0c15e9a",
       [
        null,
        {}
@@ -601042,8 +602578,15 @@
        {}
       ]
      ],
+     "if-invalidation.html": [
+      "feec1e526d17081c08f163ea7676cc06127a6693",
+      [
+       null,
+       {}
+      ]
+     ],
      "if-style-query.html": [
-      "fa9e91d7d8fa6ba28cf400103689c8b69b7391b0",
+      "2bfe6536fc0e37fd6a3e504c87e1b0418f97d44c",
       [
        null,
        {}
@@ -601274,7 +602817,7 @@
       ]
      ],
      "progress-invalid.tentative.html": [
-      "4e6f2e8a7bbf1de78b8c1af1ca3dfa19013b07d1",
+      "f135487e1c4dd0cef9d99652c7c10a8ebe44070a",
       [
        null,
        {}
@@ -609855,7 +611398,7 @@
      ]
     ],
     "default-permissions-policy.https.sub.html": [
-     "742a94ec4eb8ff079b1b24f17179962818fb3868",
+     "b4696293a287cfa8ad027e3f0116829052cd267f",
      [
       null,
       {
@@ -609871,7 +611414,7 @@
      ]
     ],
     "disabled-by-permissions-policy.https.sub.html": [
-     "616a3beb0b3cd2a8345ca268adeddeb87a0919fe",
+     "5c634b1b66d7974f41a2c803037231c0e58f403a",
      [
       null,
       {
@@ -609880,7 +611423,7 @@
      ]
     ],
     "enabled-on-self-origin-by-permissions-policy.https.sub.html": [
-     "a59c5c72fa0efba26775461ab34562d17d138d7d",
+     "ec70461e3857b5c1111d3b947c45527386569ff6",
      [
       null,
       {
@@ -614171,7 +615714,7 @@
         ]
        ],
        "custom-element-move-reactions.html": [
-        "ce0302cd7342d1222746645331f79a57099c0bec",
+        "a561180f9457c00a615ba6464751f4bd1ec825dd",
         [
          null,
          {}
@@ -614414,7 +615957,7 @@
        ]
       ],
       "observable-constructor.any.js": [
-       "ea79a82c65fc4bf3482f75c37f971b48ffb15f7b",
+       "d065c7f04431135f0243bd502bd2008807907411",
        [
         "dom/observable/tentative/observable-constructor.any.html",
         {}
@@ -614534,7 +616077,7 @@
        ]
       ],
       "observable-from.any.js": [
-       "f32ce2dd4829f34def27a28cefe3e41ae8fe1720",
+       "b5fcb5ed1fc6c89725d3bd26f2702b8156fb159d",
        [
         "dom/observable/tentative/observable-from.any.html",
         {}
@@ -615689,6 +617232,15 @@
        }
       ]
      ],
+     "copy-elements-with-css-vars.tentative.html": [
+      "d903d5a0017fefb56d2333cd529e05001b2d6f30",
+      [
+       null,
+       {
+        "testdriver": true
+       }
+      ]
+     ],
      "copy-paste-before-non-editable.html": [
       "14bd40bc1827d8cba199f1d4cd9b5f3cb293dc0e",
       [
@@ -618855,10 +620407,12 @@
       ]
      ],
      "plain-text-copy-paste-of-paragraph-ending-with-non-layed-out-content.html": [
-      "4b053e37706c2ed0e044caf5166f1f07fe59fa7e",
+      "c6f2e3adb5e833ac2d52ff05474d546217df251d",
       [
        null,
-       {}
+       {
+        "testdriver": true
+       }
       ]
      ],
      "recursive-exec-command-calls.tentative.html": [
@@ -661918,7 +663472,7 @@
       ]
      ],
      "private-aggregation.https.window.js": [
-      "4386610abb34bc2b0b5316724a9282dbfa57ad17",
+      "a1c261b6291495ffb778753f1444dac5f414b910",
       [
        "fledge/tentative/private-aggregation.https.window.html?1-5",
        {
@@ -669338,7 +670892,7 @@
       ]
      ],
      "element-ready-check-fullscreen-element-sibling.html": [
-      "6394c13ee331417d49a06a21e1067615a82bae59",
+      "3b2781cc4ffaf0ecaf1f73c3b2baa6aca6a840bc",
       [
        null,
        {
@@ -669740,7 +671294,7 @@
       ]
      ],
      "remove-first.html": [
-      "b4058db320cbe5eed6000e42029f08d1d3dd74e2",
+      "ff1b251271c9cfd9b9ef2dbe432e7cb41d97c737",
       [
        null,
        {
@@ -669749,7 +671303,7 @@
       ]
      ],
      "remove-last.html": [
-      "760ccaa0bab7d2b218ade41aa950b9454037c7c1",
+      "72e7ed850aeef510642cac2ac546bd66698d9870",
       [
        null,
        {
@@ -680070,6 +681624,38 @@
         ]
        ]
       },
+      "color-type": {
+       "color-type": {
+        "2d.color.type.u8p3.to.f16srgb.to.u8p3.html": [
+         "e30d3f7905c288c8b8d41ba79c851dc30306c26f",
+         [
+          null,
+          {}
+         ]
+        ],
+        "2d.color.type.u8p3.to.u8srgb.to.u8p3.html": [
+         "b1cfb4552b92093d7515fb6ec092d277c4089e7b",
+         [
+          null,
+          {}
+         ]
+        ],
+        "2d.color.type.u8srgb.to.f16p3.to.u8srgb.html": [
+         "3ce75d314bc4d1b9b33bf94d90d69f1ac4077167",
+         [
+          null,
+          {}
+         ]
+        ],
+        "2d.color.type.u8srgb.to.u8p3.to.u8srgb.html": [
+         "6d13b8d3c1aaba5358aed11d4414c2b6457fe0fe",
+         [
+          null,
+          {}
+         ]
+        ]
+       }
+      },
       "compositing": {
        "2d.composite.canvas.clear.html": [
         "c91536c8e82c08d64f5b3dc4ccbc76dc2d965b0a",
@@ -683512,7 +685098,7 @@
          ]
         ],
         "getContextAttributes.html": [
-         "6963faa5385898214f26bf9903c6d3a5372b0843",
+         "3bf7187d5c6f33f4f657fbe4d83cb1077c14e614",
          [
           null,
           {}
@@ -687407,14 +688993,14 @@
         ]
        ],
        "2d.color.space.p3.to.p3.html": [
-        "d917f583bed4cc6383db2b026ad75ad599356375",
+        "a8841066873199d18fe86cc0f936b6a434c1442d",
         [
          null,
          {}
         ]
        ],
        "2d.color.space.p3.to.srgb.html": [
-        "48f7bd63ecc898f3947a5b172053a1a10bcee9ba",
+        "8320a2948517ce39da51a6e89c6b289414a539da",
         [
          null,
          {}
@@ -688205,6 +689791,66 @@
         ]
        ]
       },
+      "color-type": {
+       "color-type": {
+        "2d.color.type.u8p3.to.f16srgb.to.u8p3.html": [
+         "1cc4808a73771cb020fcedefc7771d75723a05f2",
+         [
+          null,
+          {}
+         ]
+        ],
+        "2d.color.type.u8p3.to.f16srgb.to.u8p3.worker.js": [
+         "7b8eb3d687f8413542db20a1f4e08c339a1ace48",
+         [
+          "html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.worker.html",
+          {}
+         ]
+        ],
+        "2d.color.type.u8p3.to.u8srgb.to.u8p3.html": [
+         "1d573b34a199dd6b661c0feeba311741b4ff55b0",
+         [
+          null,
+          {}
+         ]
+        ],
+        "2d.color.type.u8p3.to.u8srgb.to.u8p3.worker.js": [
+         "0d03eacf4b6cffe8bb4dcd94069bbf6ecf1ce95f",
+         [
+          "html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.worker.html",
+          {}
+         ]
+        ],
+        "2d.color.type.u8srgb.to.f16p3.to.u8srgb.html": [
+         "4120dafdaf954c8b7678a33abeb1a201062d2339",
+         [
+          null,
+          {}
+         ]
+        ],
+        "2d.color.type.u8srgb.to.f16p3.to.u8srgb.worker.js": [
+         "85f48acf251dbd201ed04dcc5b513f93476baf21",
+         [
+          "html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.worker.html",
+          {}
+         ]
+        ],
+        "2d.color.type.u8srgb.to.u8p3.to.u8srgb.html": [
+         "1edbc9293f4500e12221f02b1154b05fe41b5f2c",
+         [
+          null,
+          {}
+         ]
+        ],
+        "2d.color.type.u8srgb.to.u8p3.to.u8srgb.worker.js": [
+         "f4d0ebacbcc35c8b14a20ff1172f5fcb00dda7a2",
+         [
+          "html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.worker.html",
+          {}
+         ]
+        ]
+       }
+      },
       "compositing": {
        "2d.composite.canvas.clear.html": [
         "4e81c6a82645732b0db7ce37a9150bb9ef4d5d21",
@@ -694625,7 +696271,7 @@
       "manual": {
        "context-attributes": {
         "getContextAttributes.html": [
-         "82edf974e0d91e380b5eaea381e5a81c2b1b88f6",
+         "c60e15ec0aed56366735bb02d65201137f131d56",
          [
           null,
           {}
@@ -701454,28 +703100,28 @@
       },
       "wide-gamut-canvas": {
        "2d.color.space.p3.to.p3.html": [
-        "04823819fa9e82c5c183bfd74b64c8f0aee7f599",
+        "b05056939bb81fc2c74422d9cf892b6d07e155f8",
         [
          null,
          {}
         ]
        ],
        "2d.color.space.p3.to.p3.worker.js": [
-        "844cd93f81348b4c089b4e8b567f3631f83c1d87",
+        "1dcd0c0b522736b8215f7a920a12c6352c5348e1",
         [
          "html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.p3.worker.html",
          {}
         ]
        ],
        "2d.color.space.p3.to.srgb.html": [
-        "60b90f4c0a51577549367342490c2554e10e98cb",
+        "0197c10ad2882fae964b8963e32961791816a2ed",
         [
          null,
          {}
         ]
        ],
        "2d.color.space.p3.to.srgb.worker.js": [
-        "619c59076da638d66beb848fe1fbd99c9ff31874",
+        "da84a683bcfadaae54c5f31cf63a0bf50b661514",
         [
          "html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.worker.html",
          {}
@@ -719736,7 +721382,7 @@
          ]
         ],
         "select-events.tentative.html": [
-         "a1f98bc05301f69e6d5029f21fdd27e0aef18dfc",
+         "28abf1534c1ccb7e4ad93e26987e78652c428459",
          [
           null,
           {
@@ -719773,6 +721419,15 @@
           }
          ]
         ],
+        "select-initial-focus-display-animation.tentative.html": [
+         "b02225bc8ace3a6de3572c0cfb24630024a4470e",
+         [
+          null,
+          {
+           "testdriver": true
+          }
+         ]
+        ],
         "select-innertext.tentative.html": [
          "a3e0482d3ed50ffb188d5ccb2093e2d78ff0c127",
          [
@@ -719801,7 +721456,7 @@
          ]
         ],
         "select-keyboard-behavior.tentative.html": [
-         "f6722a70637d4cb0447512775a38236c9326d4be",
+         "444a95e85283efe9e00dfc36d1c174f87a18259b",
          [
           null,
           {
@@ -719858,12 +721513,21 @@
          ]
         ],
         "select-parsing.tentative.html": [
-         "780f2743f7c487fa36c363b7c3bd5289e321b8f3",
+         "cc6596b42fe80caa895e2997dcc86533558fb87a",
          [
           null,
           {}
          ]
         ],
+        "select-picker-exit-animation.tentative.html": [
+         "c7acfaefe678d602062b6b0a05ea2c811668aa13",
+         [
+          null,
+          {
+           "testdriver": true
+          }
+         ]
+        ],
         "select-picker-hover-active-pseudo.tentative.html": [
          "4f3570b065ff674072294095948e63db859399dd",
          [
@@ -719873,6 +721537,24 @@
           }
          ]
         ],
+        "select-picker-interactive-element-focus.tentative.html": [
+         "39fa568aa25fc2fb96138ead60cd0d3a450e4da1",
+         [
+          null,
+          {
+           "testdriver": true
+          }
+         ]
+        ],
+        "select-picker-starting-style.tentative.html": [
+         "c653016875a6455367d337a9e914a7d21bac0dbb",
+         [
+          null,
+          {
+           "testdriver": true
+          }
+         ]
+        ],
         "select-pseudo-open.tentative.html": [
          "21dd0aef2aa3afb5b07ebff6ddf7e71366f49c31",
          [
@@ -720600,7 +722282,7 @@
         ]
        ],
        "dialog-close-via-attribute.tentative.html": [
-        "4ccac5b31cf2e7610397ba2a0763e4b025fbe16b",
+        "fd4d0ba2a288d659aa0577ccb4ac548713b346c0",
         [
          null,
          {
@@ -720615,6 +722297,16 @@
          {}
         ]
        ],
+       "dialog-closedby-start-open.html": [
+        "52432ff1b2c48ad7e366572a1d545ce5413a941e",
+        [
+         null,
+         {
+          "testdriver": true,
+          "timeout": "long"
+         }
+        ]
+       ],
        "dialog-closedby.html": [
         "65902ed2d5ffc2ee45e367b188012f2da87e0c36",
         [
@@ -720764,7 +722456,7 @@
         ]
        ],
        "dialog-requestclose.html": [
-        "5cbad9c651935e8296d1fad3c94433965b9303db",
+        "3790926dda42c13b191c258695bc41cefa8a8de8",
         [
          null,
          {
@@ -721386,8 +723078,8 @@
       ]
      },
      "popovers": {
-      "button-type-reset-popovertarget.html": [
-       "975eab0d66eabd7216c51a999d87a0cd145898b4",
+      "button-type-popovertarget.html": [
+       "c495a8d911501f49edcd915f452ab45876d2fb05",
        [
         null,
         {}
@@ -721407,6 +723099,13 @@
         {}
        ]
       ],
+      "input-type-popovertarget.html": [
+       "00e2e87e78edaae9f87b55c0c37f8580afef2973",
+       [
+        null,
+        {}
+       ]
+      ],
       "label-in-invoker.html": [
        "bf8ab9710dce07085b930b1a48a656a565703f3c",
        [
@@ -721529,7 +723228,7 @@
        ]
       ],
       "popover-focus-2.html": [
-       "552c8d8206b7b682f422bc8a5e2017f66983d198",
+       "5fc8e7adf9804027a6a5a87bec15cd4a5c26b99f",
        [
         null,
         {
@@ -723400,6 +725099,13 @@
           {}
          ]
         ],
+        "http-accept-header.sub.html": [
+         "f29719d09a20951747ce53a679c5052e01ed2148",
+         [
+          null,
+          {}
+         ]
+        ],
         "integrity.html": [
          "0aa92d9fdcbc7625a54572f5c257313074afbe2c",
          [
@@ -726338,7 +728044,31 @@
      "the-button-element": {
       "command-and-commandfor": {
        "button-event-dispatch.tentative.html": [
-        "54216fdcdeb961070ac638072cafcd324d7dcd3b",
+        "be90823325b8cce51fafc1dac658c9591b07c476",
+        [
+         null,
+         {
+          "testdriver": true,
+          "timeout": "long"
+         }
+        ]
+       ],
+       "button-type-behavior.tentative.html": [
+        "f179ceb653f5fa2ff349b770d49a70328baf0793",
+        [
+         null,
+         {}
+        ]
+       ],
+       "button-type-reflection.tentative.html": [
+        "972861486e86bcf569c5ea9f348285a5d67520fa",
+        [
+         null,
+         {}
+        ]
+       ],
+       "command-reflection.tentative.html": [
+        "cac07b732d71aba3fa3e9ab7db13f7edadada82e",
         [
          null,
          {
@@ -726383,7 +728113,7 @@
         ]
        ],
        "interface.tentative.html": [
-        "6821adf71fee0c0e84376d8c02f34d5556177c06",
+        "58f0b110c8b7087fa329bf47a44fffbf6ab0583d",
         [
          null,
          {}
@@ -738443,7 +740173,7 @@
       ]
      ],
      "loaf-source-location.html": [
-      "b5982ea339e9c97672660596bf86d24fb94a4efc",
+      "59c026db69a6d1a0224eb8d4b45d0c07866ab01d",
       [
        null,
        {
@@ -744733,6 +746463,27 @@
        {}
       ]
      ],
+     "after-transition-redirect-explicit-commit.html": [
+      "7fa356760870c4d519e9d53f92bbebe6b4849a79",
+      [
+       null,
+       {}
+      ]
+     ],
+     "after-transition-redirect-push.html": [
+      "79b46ea475087c0ba16783899d2af93addc5b033",
+      [
+       null,
+       {}
+      ]
+     ],
+     "after-transition-redirect-replace.html": [
+      "e31f5884a2762630abfc2974c3a2dbcd3871b4d3",
+      [
+       null,
+       {}
+      ]
+     ],
      "after-transition-reload.html": [
       "203150eb0516f2eea57f9e398f5bb50a972f0569",
       [
@@ -744795,6 +746546,13 @@
        null,
        {}
       ]
+     ],
+     "redirect-throws.html": [
+      "4bb6f9660711e853d35d9aef41eab04cf80a1a18",
+      [
+       null,
+       {}
+      ]
      ]
     },
     "currententrychange-event": {
@@ -747070,6 +748828,17 @@
        {}
       ]
      ],
+     "navigate-commit-after-transition-intercept-with-redirect.html": [
+      "1d7c47b5e73f7306fbf68a21233caae8310f123e",
+      [
+       "navigation-api/ordering-and-transition/navigate-commit-after-transition-intercept-with-redirect.html?currententrychange",
+       {}
+      ],
+      [
+       "navigation-api/ordering-and-transition/navigate-commit-after-transition-intercept-with-redirect.html?no-currententrychange",
+       {}
+      ]
+     ],
      "navigate-commit-after-transition-intercept.html": [
       "16c8796d6f45ce94f594280339596464e60b49cf",
       [
@@ -753851,14 +755620,14 @@
       ]
      ],
      "camera-potential-report-only.https.html": [
-      "9305f072559141527e5b7ee5b217a19088853709",
+      "e3b459390c73204aae50edc6594e018189a9ffe6",
       [
        null,
        {}
       ]
      ],
      "camera-potential-reporting.https.html": [
-      "7376f71db625b9b5a3197c6a143a33732a5de2c6",
+      "daaf1ea86a3f4c02f02582eb34d27fd41cd19659",
       [
        null,
        {}
@@ -754357,7 +756126,7 @@
    },
    "png": {
     "cicp-chunk.html": [
-     "8add5d602ea0c3478b27fd627e9ad5e9eb465083",
+     "8d0a1a41adc0f152be846aed8835701c77bf8566",
      [
       null,
       {}
@@ -754371,7 +756140,7 @@
      ]
     ],
     "trns-chunk.html": [
-     "3a24753382b20b4a1d5803ee64c730427dd62c54",
+     "249903aa6e3a0f86843cae5b120cdaf5b8da7a32",
      [
       null,
       {}
@@ -756475,7 +758244,7 @@
      ]
     ],
     "preload-csp.sub.html": [
-     "524844df2e094ebdfed2eada872421863e9075ab",
+     "a1b57b78b415f76678064ff9e00d32a4f6d14f6c",
      [
       null,
       {}
@@ -772834,7 +774603,19 @@
        "testdriver": true
       }
      ]
-    ]
+    ],
+    "tentative": {
+     "getdisplaymedia-captured-surface-resolution.https.html": [
+      "00a5c9bec8330f08954bbb0efa6040d0c754d29c",
+      [
+       null,
+       {
+        "testdriver": true,
+        "timeout": "long"
+       }
+      ]
+     ]
+    }
    },
    "screen-details": {
     "getScreenDetails.tentative.https.window.js": [
@@ -773352,7 +775133,7 @@
       ]
      ],
      "animation-timeline-view-functional-notation.tentative.html": [
-      "d91dfe924b7756e111bdc9ef6a2fc8fefa5245d4",
+      "04d8a8a3cb2d59d54b2c3f86458c8914bea6047e",
       [
        null,
        {}
@@ -773380,7 +775161,7 @@
       ]
      ],
      "progress-based-animation-animation-longhand-properties.tentative.html": [
-      "25ce1675533de7643eb0ac2863a7ed88b35322b2",
+      "0997908ae9526cb83511eba21880248a465ce3cd",
       [
        null,
        {}
@@ -773393,6 +775174,13 @@
        {}
       ]
      ],
+     "pseudo-on-scroller-named-timeline.html": [
+      "be93144a458c4bbd7bd8797075d921b8b9c8b14b",
+      [
+       null,
+       {}
+      ]
+     ],
      "pseudo-on-scroller.html": [
       "bdeb140a041e27e04d81c40e1cfc88f033f1a250",
       [
@@ -773604,14 +775392,14 @@
       ]
      ],
      "timeline-scope-computed.tentative.html": [
-      "814933f726658493581a00157a660417ebf367c0",
+      "2e0a024a60007652daa90aaed2125a6dbbb6f051",
       [
        null,
        {}
       ]
      ],
      "timeline-scope-parsing.tentative.html": [
-      "2885cb758ded6f4ad95f2f0603a977970b519ac7",
+      "61bf6975a81447024d5e814229fdbd987b7c8223",
       [
        null,
        {}
@@ -773632,7 +775420,7 @@
       ]
      ],
      "view-timeline-animation.html": [
-      "1bf034a742f3b30be5070b78536614c1b53823fe",
+      "af78b08439fd9ed66c563a1a632bc46819782375",
       [
        null,
        {}
@@ -773688,7 +775476,7 @@
       ]
      ],
      "view-timeline-lookup.html": [
-      "067ac1fa969f119e252d3415f172cbb6e6129d82",
+      "aaef959d99265557f39d1d58bb9c44511abd28c8",
       [
        null,
        {}
@@ -773715,6 +775503,13 @@
        {}
       ]
      ],
+     "view-timeline-pseudo-on-scroller.html": [
+      "1cd0e021d2f066b17f81485a1cf52032079ddb05",
+      [
+       null,
+       {}
+      ]
+     ],
      "view-timeline-range-animation.html": [
       "9e5993b63a8792077c8e67302cea16671b8521b5",
       [
@@ -774052,7 +775847,7 @@
       ]
      ],
      "intermediate-transform.html": [
-      "8d332eaf264e67faacbe8a21630b820266308580",
+      "24d1ea5c43fcc52633336872df15815bcc84d7b9",
       [
        null,
        {}
@@ -779072,6 +780867,13 @@
       {}
      ]
     ],
+    "HighlightRegistry-highlightsFromPoint.html": [
+     "5244f923e3404064987ce16d0fd1e9215ad768c3",
+     [
+      null,
+      {}
+     ]
+    ],
     "MouseEvent-prototype-offsetX-offsetY.html": [
      "643736b85c4899126fffda956fe94a40a9fb2ffc",
      [
@@ -779804,7 +781606,7 @@
      "reading-flow": {
       "tentative": {
        "flex-flow.html": [
-        "e6998105608c99e3a3dca3de610018bebda81172",
+        "a956ae476fae8febccf32054d50f6b550ac4bbd6",
         [
          null,
          {
@@ -779822,6 +781624,16 @@
          }
         ]
        ],
+       "grid-auto-flow-reading-order.html": [
+        "66741122ef4532b82eecccd77f9e989e0c117817",
+        [
+         null,
+         {
+          "testdriver": true,
+          "timeout": "long"
+         }
+        ]
+       ],
        "grid-columns.html": [
         "ad9bd81c7a7967fbe582843e02a5c4e2749d477f",
         [
@@ -780766,20 +782578,6 @@
       {}
      ]
     ],
-    "detection-ImageDataUint16StorageFormat.https.window.js": [
-     "1afe087abf06a2cffdfab46d3dd99f28d31bc7b9",
-     [
-      "shape-detection/detection-ImageDataUint16StorageFormat.https.window.html",
-      {
-       "script_metadata": [
-        [
-         "script",
-         "/shape-detection/resources/shapedetection-helpers.js"
-        ]
-       ]
-      }
-     ]
-    ],
     "detection-SVGImageElement.https.window.js": [
      "22f1629eccb1954c0385f3833b744b606749c87b",
      [
@@ -783475,6 +785273,15 @@
        }
       ]
      ],
+     "cancel-prerendering-after-clear-site-data-cache.https.html": [
+      "cb6dc281d89dadbb6f139dba6d06674c94550920",
+      [
+       null,
+       {
+        "timeout": "long"
+       }
+      ]
+     ],
      "clients-matchall.https.html": [
       "b86a18161ae88036a5357b35b5655b9051d62830",
       [
@@ -785030,6 +786837,13 @@
     }
    },
    "speech-api": {
+    "SpeechRecognition-availableOnDevice.https.html": [
+     "5b395976b96f8792742a87243bf0037c687ebd4a",
+     [
+      null,
+      {}
+     ]
+    ],
     "SpeechRecognition-basics.https.html": [
      "d4dfc5edd093d5fc431341a54c66a2f0b7a0adec",
      [
@@ -785037,15 +786851,8 @@
       {}
      ]
     ],
-    "SpeechRecognition-installOnDeviceSpeechRecognition.https.html": [
-     "05d8b424c39c27cd46bed62d8372d0fa0d311f7a",
-     [
-      null,
-      {}
-     ]
-    ],
-    "SpeechRecognition-onDeviceWebSpeechAvailable.https.html": [
-     "f04bfead92a212f71f720bfd8112052a018fad31",
+    "SpeechRecognition-installOnDevice.https.html": [
+     "6c6fa37b6cde9e36fd7b1baec6fe9110257b494f",
      [
       null,
       {}
@@ -786307,7 +788114,7 @@
      ]
     ],
     "requestStorageAccess-cross-site-sibling-iframes.sub.https.window.js": [
-     "528b1616368a16b9629f441ee7d9de7cfe54a392",
+     "8ffa9e178b1b7cb46fa009cacaa2eeeb45bb511b",
      [
       "storage-access-api/requestStorageAccess-cross-site-sibling-iframes.sub.https.window.html",
       {
@@ -798284,6 +800091,20 @@
    "subresource-integrity": {
     "signatures": {
      "tentative": {
+      "csp.window.js": [
+       "e72e49dd20931eecb2d6a03983dfa0fa6e035e17",
+       [
+        "subresource-integrity/signatures/tentative/csp.window.html",
+        {
+         "script_metadata": [
+          [
+           "script",
+           "helper.js"
+          ]
+         ]
+        }
+       ]
+      ],
       "fetch.any.js": [
        "e14ed8b38a2c372081b213024fbda92f77adf804",
        [
@@ -798354,7 +800175,7 @@
        ]
       ],
       "script.window.js": [
-       "f8a2572535f0f7bea8a967eb03928d96329b4f95",
+       "d4c4e57b270ad807bb46306509121469b6627001",
        [
         "subresource-integrity/signatures/tentative/script.window.html",
         {
@@ -802880,6 +804701,13 @@
       {}
      ]
     ],
+    "TrustedTypePolicyFactory-getAttributeType.html": [
+     "c59798e7090852d86df5324c52bcfef80f264bee",
+     [
+      null,
+      {}
+     ]
+    ],
     "TrustedTypePolicyFactory-getPropertyType.tentative.html": [
      "06428582f456785106be89604a7ebe7f5f9c6150",
      [
@@ -803257,6 +805085,34 @@
       {}
      ]
     ],
+    "set-attributes-mutations-in-callback.tentative.html": [
+     "76ea84cf2543a11269983c871be09c8ec1fb18ea",
+     [
+      null,
+      {}
+     ]
+    ],
+    "set-attributes-no-require-trusted-types.html": [
+     "6733eab9d34bd1df4ce43f068860def61571d463",
+     [
+      null,
+      {}
+     ]
+    ],
+    "set-attributes-require-trusted-types-default-policy.html": [
+     "b2b4b386d1eeb34ee704b81e787bd77af37d5402",
+     [
+      null,
+      {}
+     ]
+    ],
+    "set-attributes-require-trusted-types-no-default-policy.html": [
+     "6f909bbc042d3d476b194742e0c0da9d8baccbe5",
+     [
+      null,
+      {}
+     ]
+    ],
     "set-event-handlers-content-attributes.tentative.html": [
      "bd1b91ec91f68d9fb0c5fc08e6a9d55636d1c0c0",
      [
@@ -813514,8 +815370,8 @@
       ]
      ],
      "js-string": {
-      "basic.tentative.any.js": [
-       "de4a21c976b5837445c3cff7bcdadb56185198a1",
+      "basic.any.js": [
+       "174bab32eb171b3153fd01de3419efe702d540bc",
        [
         null,
         {
@@ -813523,7 +815379,7 @@
          "script_metadata": [
           [
            "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
+           "window,dedicatedworker,jsshell"
           ],
           [
            "script",
@@ -813541,12 +815397,12 @@
         }
        ],
        [
-        "wasm/jsapi/js-string/basic.tentative.any.html",
+        "wasm/jsapi/js-string/basic.any.html",
         {
          "script_metadata": [
           [
            "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
+           "window,dedicatedworker,jsshell"
           ],
           [
            "script",
@@ -813564,150 +815420,12 @@
         }
        ],
        [
-        "wasm/jsapi/js-string/basic.tentative.any.shadowrealm-in-dedicatedworker.html",
+        "wasm/jsapi/js-string/basic.any.worker.html",
         {
          "script_metadata": [
           [
            "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/assertions.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/js-string/polyfill.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/basic.tentative.any.shadowrealm-in-shadowrealm.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/assertions.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/js-string/polyfill.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/basic.tentative.any.shadowrealm-in-sharedworker.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/assertions.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/js-string/polyfill.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/basic.tentative.any.shadowrealm-in-window.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/assertions.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/js-string/polyfill.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/basic.tentative.any.worker.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/assertions.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/js-string/polyfill.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/basic.tentative.https.any.shadowrealm-in-audioworklet.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/assertions.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/js-string/polyfill.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/basic.tentative.https.any.shadowrealm-in-serviceworker.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
+           "window,dedicatedworker,jsshell"
           ],
           [
            "script",
@@ -813725,8 +815443,8 @@
         }
        ]
       ],
-      "constants.tentative.any.js": [
-       "ef391a90b7ae7c646a03eb67ef13bfcd5100befa",
+      "constants.any.js": [
+       "90cf94df76efcbd93ed749f6caf324007831090d",
        [
         null,
         {
@@ -813734,7 +815452,7 @@
          "script_metadata": [
           [
            "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
+           "window,dedicatedworker,jsshell"
           ],
           [
            "script",
@@ -813744,12 +815462,12 @@
         }
        ],
        [
-        "wasm/jsapi/js-string/constants.tentative.any.html",
+        "wasm/jsapi/js-string/constants.any.html",
         {
          "script_metadata": [
           [
            "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
+           "window,dedicatedworker,jsshell"
           ],
           [
            "script",
@@ -813759,102 +815477,12 @@
         }
        ],
        [
-        "wasm/jsapi/js-string/constants.tentative.any.shadowrealm-in-dedicatedworker.html",
+        "wasm/jsapi/js-string/constants.any.worker.html",
         {
          "script_metadata": [
           [
            "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/constants.tentative.any.shadowrealm-in-shadowrealm.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/constants.tentative.any.shadowrealm-in-sharedworker.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/constants.tentative.any.shadowrealm-in-window.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/constants.tentative.any.worker.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/constants.tentative.https.any.shadowrealm-in-audioworklet.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/constants.tentative.https.any.shadowrealm-in-serviceworker.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
+           "window,dedicatedworker,jsshell"
           ],
           [
            "script",
@@ -813864,8 +815492,8 @@
         }
        ]
       ],
-      "imports.tentative.any.js": [
-       "c357760befb6c386ef2fb7a7e972a0e55f72faf0",
+      "imports.any.js": [
+       "d4e16dc47d060b22cee32bf241fc9c9c17a04827",
        [
         null,
         {
@@ -813873,7 +815501,7 @@
          "script_metadata": [
           [
            "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
+           "window,dedicatedworker,jsshell"
           ],
           [
            "script",
@@ -813883,12 +815511,12 @@
         }
        ],
        [
-        "wasm/jsapi/js-string/imports.tentative.any.html",
+        "wasm/jsapi/js-string/imports.any.html",
         {
          "script_metadata": [
           [
            "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
+           "window,dedicatedworker,jsshell"
           ],
           [
            "script",
@@ -813898,102 +815526,12 @@
         }
        ],
        [
-        "wasm/jsapi/js-string/imports.tentative.any.shadowrealm-in-dedicatedworker.html",
+        "wasm/jsapi/js-string/imports.any.worker.html",
         {
          "script_metadata": [
           [
            "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/imports.tentative.any.shadowrealm-in-shadowrealm.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/imports.tentative.any.shadowrealm-in-sharedworker.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/imports.tentative.any.shadowrealm-in-window.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/imports.tentative.any.worker.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/imports.tentative.https.any.shadowrealm-in-audioworklet.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
-          ],
-          [
-           "script",
-           "/wasm/jsapi/wasm-module-builder.js"
-          ]
-         ]
-        }
-       ],
-       [
-        "wasm/jsapi/js-string/imports.tentative.https.any.shadowrealm-in-serviceworker.html",
-        {
-         "script_metadata": [
-          [
-           "global",
-           "window,dedicatedworker,jsshell,shadowrealm"
+           "window,dedicatedworker,jsshell"
           ],
           [
            "script",
@@ -819249,6 +820787,15 @@
        ]
       ]
      },
+     "AnimationTrigger": {
+      "constructor.html": [
+       "e7b632fd90f1224ea1ceb90acbcca73763eb87b6",
+       [
+        null,
+        {}
+       ]
+      ]
+     },
      "Document": {
       "timeline.html": [
        "b8b4d74d5e536a111449fd0268424ac06a151b95",
@@ -822541,6 +824088,13 @@
         {}
        ]
       ],
+      "audioworkletprocessor-no-process-function.https.html": [
+       "e5578c6f97c504fc6a4acd7c018b0d373abb9d6a",
+       [
+        null,
+        {}
+       ]
+      ],
       "audioworkletprocessor-options.https.html": [
        "ea840ed11ad59bdcbb62773b43c4e404a2903233",
        [
@@ -830386,8 +831940,613 @@
       }
      ]
     ],
+    "videoDecoder-codec-specific-orientation.https.any.js": [
+     "9fb1714a7b1126ccec08de98effec7dfa95673c9",
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.html?av1",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.html?h264_annexb",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.html?h264_avc",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.html?h265_annexb",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.html?h265_hevc",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.html?vp8",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.html?vp9",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.worker.html?av1",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.worker.html?h264_annexb",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.worker.html?h264_avc",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.worker.html?h265_annexb",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.worker.html?h265_hevc",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.worker.html?vp8",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ],
+     [
+      "webcodecs/videoDecoder-codec-specific-orientation.https.any.worker.html?vp9",
+      {
+       "script_metadata": [
+        [
+         "global",
+         "window,dedicatedworker"
+        ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
+        [
+         "variant",
+         "?av1"
+        ],
+        [
+         "variant",
+         "?vp8"
+        ],
+        [
+         "variant",
+         "?vp9"
+        ],
+        [
+         "variant",
+         "?h264_avc"
+        ],
+        [
+         "variant",
+         "?h264_annexb"
+        ],
+        [
+         "variant",
+         "?h265_hevc"
+        ],
+        [
+         "variant",
+         "?h265_annexb"
+        ]
+       ]
+      }
+     ]
+    ],
     "videoDecoder-codec-specific.https.any.js": [
-     "1c3b8f120dbf8843d6cb61d9b82812a2ced04631",
+     "21beaa0f4b757792c8ca39e5991b1b87acdee6bc",
      [
       "webcodecs/videoDecoder-codec-specific.https.any.html?av1",
       {
@@ -830396,6 +832555,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830435,6 +832598,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830474,6 +832641,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830513,6 +832684,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830552,6 +832727,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830591,6 +832770,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830630,6 +832813,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830669,6 +832856,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830708,6 +832899,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830747,6 +832942,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830786,6 +832985,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830825,6 +833028,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830864,6 +833071,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -830903,6 +833114,10 @@
          "global",
          "window,dedicatedworker"
         ],
+        [
+         "script",
+         "videoDecoder-codec-specific-setup.js"
+        ],
         [
          "variant",
          "?av1"
@@ -831277,7 +833492,7 @@
      ]
     ],
     "videoFrame-drawImage.any.js": [
-     "9830181c4f50a83a36c74453f58b403d91f75493",
+     "8fcd38a807cd49e8edaecdc078703cd5b57a34de",
      [
       "webcodecs/videoFrame-drawImage.any.html",
       {
@@ -831343,7 +833558,7 @@
      ]
     ],
     "videoFrame-orientation.any.js": [
-     "f4b3d9f10f82fc3543c228f14c42328d775707c5",
+     "28405764c90783abe7d0097031375edb11c742f0",
      [
       "webcodecs/videoFrame-orientation.any.html",
       {
@@ -836929,7 +839144,7 @@
       ]
      ],
      "dequantizeLinear.https.any.js": [
-      "5ac15593e4e1ea3d4921cd198166154c8628b548",
+      "ecca03660f42b9da3922f9b6d3164c5eb27662ef",
       [
        "webnn/conformance_tests/dequantizeLinear.https.any.html?cpu",
        {
@@ -911658,15 +913873,6 @@
        ]
       ]
      },
-     "layout-algorithm": {
-      "grid-automatic-minimum-for-auto-rows-001.html": [
-       "77e9c22294d9dd11ac5977630696325bc76b913e",
-       [
-        null,
-        {}
-       ]
-      ]
-     },
      "subgrid": {
       "repeat-auto-fill-009.html": [
        "086a4769d426a6aad48045672231615ec8e72657",
@@ -914291,7 +916497,7 @@
        },
        "context_destroyed": {
         "context_destroyed.py": [
-         "ac964b67687805fa53d75e97e1cdc8f24c718479",
+         "254708c725a6394b1e094290c30c613e20104932",
          [
           null,
           {}
@@ -914526,14 +916732,14 @@
          ]
         ],
         "navigate.py": [
-         "8f2fd4822abc88e614fab629f7879ce95744f55a",
+         "83e5f776316ed3e9e4b215ba70fcff21a057d9f3",
          [
           null,
           {}
          ]
         ],
         "wait.py": [
-         "3a351e108908d949a276535bed4eeaa041dcd576",
+         "e19e516baf3fab4bd31c2c6ac2e3219688dac652",
          [
           null,
           {}
@@ -914560,7 +916766,7 @@
        },
        "navigation_started": {
         "navigation_started.py": [
-         "599708a5de8e49fd865f4bcfb6c2d742b703b90b",
+         "80d6907acfaa3b251d4ebcdc16ec6b5584487442",
          [
           null,
           {}
@@ -914666,7 +916872,7 @@
          ]
         ],
         "wait.py": [
-         "a9f113a2a9a4e4c8cca932b942d13ca1da507cf5",
+         "30e44e1f7c0eb5d22913ca7ba02f41a6aace0a21",
          [
           null,
           {
@@ -914825,7 +917031,7 @@
       "input": {
        "perform_actions": {
         "invalid.py": [
-         "ad7dab399350c01771a6f4238bdd64bf2985d3d6",
+         "c78090d2c678fc472540c748b5d968240c749d8d",
          [
           null,
           {
@@ -915313,7 +917519,7 @@
        },
        "fetch_error": {
         "fetch_error.py": [
-         "bdb66722ce9d231d0214d177f107a1dd3c5288cd",
+         "ea08c99a5ef1efa5222fd8b7147be02ad6677198",
          [
           null,
           {}
@@ -915896,7 +918102,7 @@
          ]
         ],
         "user_contexts.py": [
-         "ee7c65ca44d06c392695bccfeccdc013b020855e",
+         "f98221ba7e3ed267023e3ac4638a3107a3ededbc",
          [
           null,
           {}
@@ -915926,7 +918132,7 @@
          ]
         ],
         "subscriptions.py": [
-         "b79621ff5a1cac9d5f3bb50eedb4e1f2429f5e15",
+         "1012229f469519a00f9105a7d862e0555ad858da",
          [
           null,
           {}
@@ -916081,7 +918287,7 @@
         ]
        ],
        "user_prompts.py": [
-        "f58aacd02a71d73112fcb6140c6b766919f9b85f",
+        "3a819f196662d782411e7fdd48b17458ff93f4b9",
         [
          null,
          {
@@ -916099,7 +918305,7 @@
         ]
        ],
        "user_prompts.py": [
-        "1020a6aaa613889c3e032510e9eb21b76ca13f1c",
+        "1b4bf0bbc5395e99603368c8b2a4c343ee5152bb",
         [
          null,
          {
@@ -916117,7 +918323,7 @@
         ]
        ],
        "user_prompts.py": [
-        "37928f97589dee7f966824103b1396f16c8b5f5a",
+        "090b3d281f01151c2597443adc065ac3c5773fb4",
         [
          null,
          {
@@ -916135,7 +918341,7 @@
         ]
        ],
        "user_prompts.py": [
-        "03f34d9f6f949610567f72cfc5c8b09b2c52a551",
+        "91d3ab3844cbb11214ba208b20e4e3be41549ba1",
         [
          null,
          {
@@ -916153,7 +918359,7 @@
         ]
        ],
        "user_prompts.py": [
-        "1ed7db6e8e320575ffa99ec2f7b7cf2cfeb0ee6a",
+        "62f41dbdb5d2f943857cd4b64761a2265e93a5e8",
         [
          null,
          {
@@ -916196,7 +918402,7 @@
         ]
        ],
        "user_prompts.py": [
-        "ccf048bc0a5135c499d0683f8c4818474cd0785f",
+        "5ac2052fc4e27500fd040aa88b7732a1b705aa9c",
         [
          null,
          {
@@ -916277,7 +918483,7 @@
         ]
        ],
        "user_prompts.py": [
-        "a4c62cbca7784fe8303dad8f5f78d2a72a404aa6",
+        "e8fc892c5c709162f1a3825643f6c8c183098be4",
         [
          null,
          {
@@ -916337,7 +918543,7 @@
         ]
        ],
        "user_prompts.py": [
-        "c1046840fa4ef24a5e063d09aee8c58803e835f7",
+        "1ed3c7cbdac2a6735b7adc63bf25985b1f2bb5e8",
         [
          null,
          {
@@ -916404,7 +918610,7 @@
         ]
        ],
        "user_prompts.py": [
-        "5243b372e5a5ca81f17b741ab73639be64e68e3e",
+        "805157fbc3a2741f3686b95240f288e210bfef0e",
         [
          null,
          {
@@ -916478,7 +918684,7 @@
         ]
        ],
        "user_prompts.py": [
-        "74d4c47fc064f7b498def6a838ce36d3d5604ccf",
+        "a92f908f2cb8d894147d3597c690aa2dcd69b461",
         [
          null,
          {
@@ -916503,7 +918709,7 @@
         ]
        ],
        "user_prompts.py": [
-        "ada8e8ebee33a6ce9fcfb4871093ce1eef1d1dae",
+        "e7193d110719ae9aa07f4bdc82b83bef5c2d2503",
         [
          null,
          {
@@ -916521,7 +918727,7 @@
         ]
        ],
        "user_prompts.py": [
-        "0537a786189c41420f50e6c3b747482c331fdaa3",
+        "1fb6fa18749dd00db51800c00cb56dd88c4c14a9",
         [
          null,
          {
@@ -916539,7 +918745,7 @@
         ]
        ],
        "user_prompts.py": [
-        "3e3381e7853b25577a0f465542c848c9429e3099",
+        "f1e96f64afbef781d640fe89df9473114d4900e8",
         [
          null,
          {
@@ -916557,7 +918763,7 @@
         ]
        ],
        "user_prompts.py": [
-        "f9a45e527515fc7448162a86dca69d3f95e76491",
+        "767e9b5bbc33c4d2c4fc2b693a9ce1074748c95c",
         [
          null,
          {
@@ -916575,7 +918781,7 @@
         ]
        ],
        "user_prompts.py": [
-        "467bec09a1bd61346b3df2fa5b0b8c16e02fe975",
+        "b9332b433cde349d5419c19eb848094d6a2d13b4",
         [
          null,
          {
@@ -916593,7 +918799,7 @@
         ]
        ],
        "user_prompts.py": [
-        "45986ad6dab9322ca7126050d623904d2542e338",
+        "41dc75227d981fad1c2faac141a1a9152a60eaf3",
         [
          null,
          {
@@ -916611,7 +918817,7 @@
         ]
        ],
        "user_prompts.py": [
-        "dfcba6469d5e6b7101976faa9a836733f13ec710",
+        "1bf8a54e4314a09a9356d72d1481a841b001bc47",
         [
          null,
          {
@@ -916645,7 +918851,7 @@
         ]
        ],
        "user_prompts.py": [
-        "106bc457f0c18769afe1d9f76c39937d17783666",
+        "cb99c468bf10f9b2e732389f197fd6dca01e7478",
         [
          null,
          {
@@ -916663,7 +918869,7 @@
         ]
        ],
        "user_prompts.py": [
-        "1ff77697b707886bbfeaee8acf08bdb8aba2de38",
+        "a78c2ed158ac978037960094a7c3bce891d48c43",
         [
          null,
          {
@@ -916688,6 +918894,15 @@
          null,
          {}
         ]
+       ],
+       "user_prompts.py": [
+        "232ecb529261dec762a6e23931aaab92c4f6e34b",
+        [
+         null,
+         {
+          "timeout": "long"
+         }
+        ]
        ]
       },
       "get_computed_role": {
@@ -916697,6 +918912,15 @@
          null,
          {}
         ]
+       ],
+       "user_prompts.py": [
+        "1029b8a9742d8e21cf4fdcf07224552576f86d0a",
+        [
+         null,
+         {
+          "timeout": "long"
+         }
+        ]
        ]
       },
       "get_current_url": {
@@ -916722,7 +918946,7 @@
         ]
        ],
        "user_prompts.py": [
-        "d657c188241d8e0b53153d6b0e64fd386642847a",
+        "3359e7302089408d893383a55b32f8c7a3d3b9d9",
         [
          null,
          {
@@ -916740,7 +918964,7 @@
         ]
        ],
        "user_prompts.py": [
-        "009cb1e5fa1e1bdf4a9b433fe943f6ee4a97506d",
+        "872d530ffe1f46995ca237b72a70477b8b2ea7c1",
         [
          null,
          {
@@ -916758,7 +918982,7 @@
         ]
        ],
        "user_prompts.py": [
-        "b1f9a3fb0a00f17c9c5bd5b590c8628d7888ea2e",
+        "d5c942dd8716843a8f8010086f3e6ebec383b33d",
         [
          null,
          {
@@ -916776,7 +919000,7 @@
         ]
        ],
        "user_prompts.py": [
-        "e5e76947863e61ca082a66367e3ea876b8ebec73",
+        "1db033a3ebd263b83a2a92ee88d66bf54c6c0eb5",
         [
          null,
          {
@@ -916794,7 +919018,7 @@
         ]
        ],
        "user_prompts.py": [
-        "20131603381bc574e44251a6909e389457dd0059",
+        "d040b32c71c54d4fe77dc24d10c61e30b9c1e20f",
         [
          null,
          {
@@ -916812,7 +919036,7 @@
         ]
        ],
        "user_prompts.py": [
-        "5b991bac26b6247b743f81ccf82faaa94dcb71a1",
+        "66eda0045af2a63426c5fd71af05bd3009bb872b",
         [
          null,
          {
@@ -916830,7 +919054,7 @@
         ]
        ],
        "user_prompts.py": [
-        "89697d0ad6a20503d6ec906862d58e674ed90839",
+        "d9965fa19a7f9579488a64663e6483adee58a281",
         [
          null,
          {
@@ -916848,7 +919072,7 @@
         ]
        ],
        "user_prompts.py": [
-        "9f0bb386cdf549ae1edbb7843fe893bd74700212",
+        "93a99ac3cc37b786f41904dee0049237b8449531",
         [
          null,
          {
@@ -916866,7 +919090,7 @@
         ]
        ],
        "user_prompts.py": [
-        "f1669d6c998d436d1ddfbc20d6842c844eb48d72",
+        "ec6d27bfc97fe91a42fb6b1e09aad1f7c4216099",
         [
          null,
          {
@@ -916884,7 +919108,7 @@
         ]
        ],
        "user_prompts.py": [
-        "13cb31595e6165ffb6e3491661d630921ade5699",
+        "b9745645ea4683f29fd128c90d2af8fe1eb609c8",
         [
          null,
          {
@@ -916918,7 +919142,7 @@
         ]
        ],
        "user_prompts.py": [
-        "0fd51e46f32ab5c5a6a14392afe08a0cf725115a",
+        "8e011d23924176e9808586928376dc5ec431c9f7",
         [
          null,
          {
@@ -916936,7 +919160,7 @@
         ]
        ],
        "user_prompts.py": [
-        "0bd660cfa1fb31ba4fc93bb0ecb239fc4a6c136c",
+        "f3bae4e44075bed5cccb44b2abc7707f1c684150",
         [
          null,
          {
@@ -916954,7 +919178,7 @@
         ]
        ],
        "user_prompts.py": [
-        "217e9849b4417d7124e203f937270a9e4823666a",
+        "5b5310c5074bda9faab16b0318a87db8de02dba0",
         [
          null,
          {
@@ -916972,7 +919196,7 @@
         ]
        ],
        "user_prompts.py": [
-        "37c8da6bd3838422441fc089d8191930dd2b3da6",
+        "4f927435c3e24b74c2341aea431dc2109aee835a",
         [
          null,
          {
@@ -916999,7 +919223,7 @@
         ]
        ],
        "user_prompts.py": [
-        "a3af947d516314e1b380af5990feedc7be55cfbf",
+        "45db225dbfe15837b749824ea4da7dfa122d7bf9",
         [
          null,
          {
@@ -917017,7 +919241,7 @@
         ]
        ],
        "user_prompts.py": [
-        "96da2c08bd7e5465ed12eb49cede25d70a6fbef5",
+        "f88b7b52a9098a798eb79e0a7b095fb037c06135",
         [
          null,
          {
@@ -917053,7 +919277,7 @@
         ]
        ],
        "user_prompts.py": [
-        "032edc893a53a05dd0272cc081265bde6f0b5d53",
+        "7cf3ca2f7414298e516b557495a548212b1df397",
         [
          null,
          {
@@ -917082,7 +919306,7 @@
         ]
        ],
        "user_prompts.py": [
-        "19059b3c395ecd22690d999f60838257cbe93449",
+        "5c797f81f4d0d1453e995f79dc01c4ef1536bfff",
         [
          null,
          {
@@ -917107,7 +919331,7 @@
         ]
        ],
        "user_prompts.py": [
-        "db8d094ebbdf556167544b98110e7dd4ac0492c2",
+        "2714b5ae7699aa475d95da4ab0a4b7972b966d1a",
         [
          null,
          {
@@ -917235,7 +919459,7 @@
         ]
        ],
        "user_prompts.py": [
-        "0d841468ee48995a4f1b2c71ec7f69adcb37baae",
+        "327994066b910e19957f184df0d5960cad5827cc",
         [
          null,
          {
@@ -917397,7 +919621,7 @@
         ]
        ],
        "user_prompts.py": [
-        "7fcd720624b1006cb1b5ff43305c79e00279ce0d",
+        "04ba3e04f9498caff3797ac77cc3838a8546cb5f",
         [
          null,
          {
@@ -917447,7 +919671,7 @@
         ]
        ],
        "user_prompts.py": [
-        "ade1c38a5c473037df15352ab119db57a728822c",
+        "27900986bb57f038905ffd78121effd7679f4cce",
         [
          null,
          {
@@ -917465,7 +919689,7 @@
         ]
        ],
        "user_prompts.py": [
-        "5787533b5727f05370bc3f9257c7723b12a1c0d3",
+        "6f30cf6613d485c67bf7b8fe13efdb5f91de7be0",
         [
          null,
          {
@@ -917515,7 +919739,7 @@
         ]
        ],
        "user_prompts.py": [
-        "a98d87e9b2e2ca252a3ed7cf215a20bd1c299818",
+        "339b0c31f03a22955cfb42ae5d2d979e7d94327f",
         [
          null,
          {
@@ -917542,7 +919766,7 @@
         ]
        ],
        "user_prompts.py": [
-        "e55c2d77f8cc018128aae4b3bd0a0ff21a6b8d24",
+        "baab00b7cbaa904823545d25e150b271cd81f77d",
         [
          null,
          {
@@ -917631,7 +919855,7 @@
         ]
        ],
        "user_prompts.py": [
-        "39fefe9325a9bf2880d333d48a58337edb3508cd",
+        "bf14f09868b322a8f6ed2864382b6eb139cbf0fc",
         [
          null,
          {
@@ -917656,7 +919880,7 @@
         ]
        ],
        "user_prompts.py": [
-        "7d57f8f2716b393696fb3ce45ded196d83a0bf68",
+        "9a93f417ba4e4b1592df92c547d28a27db0f21c0",
         [
          null,
          {
diff --git a/tests/wpt/meta/css/compositing/mix-blend-mode/mix-blend-mode-video-sibling.html.ini b/tests/wpt/meta/css/compositing/mix-blend-mode/mix-blend-mode-video-sibling.html.ini
deleted file mode 100644
index 55551102b45..00000000000
--- a/tests/wpt/meta/css/compositing/mix-blend-mode/mix-blend-mode-video-sibling.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[mix-blend-mode-video-sibling.html]
-  expected: FAIL
diff --git a/tests/wpt/meta/css/css-borders/tentative/parsing/corner-shape-computed.html.ini b/tests/wpt/meta/css/css-borders/tentative/parsing/corner-shape-computed.html.ini
index 8faf718c1fe..83214054c53 100644
--- a/tests/wpt/meta/css/css-borders/tentative/parsing/corner-shape-computed.html.ini
+++ b/tests/wpt/meta/css/css-borders/tentative/parsing/corner-shape-computed.html.ini
@@ -55,3 +55,36 @@
 
   [Property corner-bottom-left-shape value 'superellipse(5)']
     expected: FAIL
+
+  [Property corner-shape value 'superellipse(5) round']
+    expected: FAIL
+
+  [Property corner-shape value 'bevel superellipse(0.1) round squircle']
+    expected: FAIL
+
+  [Property corner-shape value 'superellipse(0.1) superellipse(3) superellipse(7) superellipse(0.1)']
+    expected: FAIL
+
+  [Property corner-shape value 'round round round round']
+    expected: FAIL
+
+  [Property corner-shape value 'round scoop']
+    expected: FAIL
+
+  [Property corner-shape value 'round scoop round scoop']
+    expected: FAIL
+
+  [Property corner-shape value 'bevel superellipse(2)']
+    expected: FAIL
+
+  [Property corner-shape value 'superellipse(0.5) superellipse(3) straight']
+    expected: FAIL
+
+  [Property corner-shape value 'superellipse(0.5) superellipse(3) superellipse(1)']
+    expected: FAIL
+
+  [Property corner-shape value 'bevel superellipse(2) squircle     round']
+    expected: FAIL
+
+  [Property corner-shape value 'superellipse(0.5) superellipse(3) superellipse(1) superellipse(infinity)']
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-borders/tentative/parsing/corner-shape-valid.html.ini b/tests/wpt/meta/css/css-borders/tentative/parsing/corner-shape-valid.html.ini
index 6bc8e7f18bf..e26a4c8d4ab 100644
--- a/tests/wpt/meta/css/css-borders/tentative/parsing/corner-shape-valid.html.ini
+++ b/tests/wpt/meta/css/css-borders/tentative/parsing/corner-shape-valid.html.ini
@@ -352,3 +352,27 @@
 
   [e.style['corner-end-end-shape'\] = "superellipse(calc(0.5 * 4))" should set the property value]
     expected: FAIL
+
+  [e.style['corner-shape'\] = "round round round round" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "round scoop" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "round scoop round scoop" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "bevel superellipse(2)" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "superellipse(0.5) superellipse(3) straight" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "superellipse(0.5) superellipse(3) superellipse(1)" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "bevel superellipse(2) squircle     round" should set the property value]
+    expected: FAIL
+
+  [e.style['corner-shape'\] = "superellipse(0.5) superellipse(3) superellipse(1) superellipse(infinity)" should set the property value]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-color/parsing/color-computed-contrast-color-function.html.ini b/tests/wpt/meta/css/css-color/parsing/color-computed-contrast-color-function.html.ini
new file mode 100644
index 00000000000..54d1fea8320
--- /dev/null
+++ b/tests/wpt/meta/css/css-color/parsing/color-computed-contrast-color-function.html.ini
@@ -0,0 +1,30 @@
+[color-computed-contrast-color-function.html]
+  [Property background-color value 'contrast-color(white)']
+    expected: FAIL
+
+  [Property background-color value 'contrast-color(black)']
+    expected: FAIL
+
+  [Property background-color value 'contrast-color(pink)']
+    expected: FAIL
+
+  [Property background-color value 'contrast-color(color(srgb 1 0 1 / 0.5))']
+    expected: FAIL
+
+  [Property background-color value 'contrast-color(lab(0.2 0.5 0.2))']
+    expected: FAIL
+
+  [Property background-color value 'contrast-color(color(srgb 10 10 10))']
+    expected: FAIL
+
+  [Property background-color value 'contrast-color(color(srgb -10 -10 -10))']
+    expected: FAIL
+
+  [Property background-color value 'contrast-color(contrast-color(pink))']
+    expected: FAIL
+
+  [Property background-color value 'contrast-color(currentcolor)']
+    expected: FAIL
+
+  [Property background-color value 'contrast-color(color(srgb calc(1 + (sign(20cqw - 10px) * 1)) calc(1 + (sign(20cqw - 10px) * 1)) calc(1 + (sign(20cqw - 10px) * 1))))']
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-color/parsing/color-valid-contrast-color-function.html.ini b/tests/wpt/meta/css/css-color/parsing/color-valid-contrast-color-function.html.ini
new file mode 100644
index 00000000000..08e441bbeeb
--- /dev/null
+++ b/tests/wpt/meta/css/css-color/parsing/color-valid-contrast-color-function.html.ini
@@ -0,0 +1,30 @@
+[color-valid-contrast-color-function.html]
+  [e.style['background-color'\] = "contrast-color(white)" should set the property value]
+    expected: FAIL
+
+  [e.style['background-color'\] = "contrast-color(black)" should set the property value]
+    expected: FAIL
+
+  [e.style['background-color'\] = "contrast-color(pink)" should set the property value]
+    expected: FAIL
+
+  [e.style['background-color'\] = "contrast-color(color(srgb 1 0 1 / 0.5))" should set the property value]
+    expected: FAIL
+
+  [e.style['background-color'\] = "contrast-color(lab(0.2 0.5 0.2))" should set the property value]
+    expected: FAIL
+
+  [e.style['background-color'\] = "contrast-color(color(srgb 10 10 10))" should set the property value]
+    expected: FAIL
+
+  [e.style['background-color'\] = "contrast-color(color(srgb -10 -10 -10))" should set the property value]
+    expected: FAIL
+
+  [e.style['background-color'\] = "contrast-color(contrast-color(pink))" should set the property value]
+    expected: FAIL
+
+  [e.style['background-color'\] = "contrast-color(currentcolor)" should set the property value]
+    expected: FAIL
+
+  [e.style['background-color'\] = "contrast-color(color(srgb calc(0.5) calc(1 + (sign(20cqw - 10px) * 0.5)) 1 / .5))" should set the property value]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html.ini b/tests/wpt/meta/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html.ini
new file mode 100644
index 00000000000..efff2a2620a
--- /dev/null
+++ b/tests/wpt/meta/css/css-grid/alignment/grid-content-alignment-with-abspos-001.html.ini
@@ -0,0 +1,3 @@
+[grid-content-alignment-with-abspos-001.html]
+  [.grid 1]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html.ini b/tests/wpt/meta/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html.ini
new file mode 100644
index 00000000000..e0f9c0c583c
--- /dev/null
+++ b/tests/wpt/meta/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html.ini
@@ -0,0 +1,9 @@
+[grid-automatic-minimum-for-auto-rows-001.html]
+  [Check that min-height is honored when sizing auto rows.]
+    expected: FAIL
+
+  [Check that min-height is honored when sizing auto rows and spanning grid items.]
+    expected: FAIL
+
+  [Check the interactions between height and min-height and auto tracks.]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-mixins/dashed-function-eval.html.ini b/tests/wpt/meta/css/css-mixins/dashed-function-eval.html.ini
index 255a6137cf0..a7f2f13b9a4 100644
--- a/tests/wpt/meta/css/css-mixins/dashed-function-eval.html.ini
+++ b/tests/wpt/meta/css/css-mixins/dashed-function-eval.html.ini
@@ -1,4 +1,5 @@
 [dashed-function-eval.html]
+  expected: ERROR
   [Literal result]
     expected: FAIL
 
diff --git a/tests/wpt/meta/css/css-mixins/function-conditionals.html.ini b/tests/wpt/meta/css/css-mixins/function-conditionals.html.ini
index 416da6f2649..6a7c98d85f2 100644
--- a/tests/wpt/meta/css/css-mixins/function-conditionals.html.ini
+++ b/tests/wpt/meta/css/css-mixins/function-conditionals.html.ini
@@ -37,3 +37,30 @@
 
   [@media within @supports]
     expected: FAIL
+
+  [Basic @container]
+    expected: FAIL
+
+  [Basic @container (false)]
+    expected: FAIL
+
+  [Nested @container]
+    expected: FAIL
+
+  [Nested @container (false)]
+    expected: FAIL
+
+  [Locals within @container]
+    expected: FAIL
+
+  [@supports within @container]
+    expected: FAIL
+
+  [@container within @supports]
+    expected: FAIL
+
+  [@container, @media, @supports]
+    expected: FAIL
+
+  [@supports, @media, @container]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-mixins/function-container-dynamic.html.ini b/tests/wpt/meta/css/css-mixins/function-container-dynamic.html.ini
new file mode 100644
index 00000000000..b24c094eb9c
--- /dev/null
+++ b/tests/wpt/meta/css/css-mixins/function-container-dynamic.html.ini
@@ -0,0 +1,3 @@
+[function-container-dynamic.html]
+  [Custom Functions: @container responds to changes]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-mixins/function-container-self.html.ini b/tests/wpt/meta/css/css-mixins/function-container-self.html.ini
new file mode 100644
index 00000000000..9c6ca256eb8
--- /dev/null
+++ b/tests/wpt/meta/css/css-mixins/function-container-self.html.ini
@@ -0,0 +1,3 @@
+[function-container-self.html]
+  [Custom Functions: @container can not query self]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-mixins/function-container-style.html.ini b/tests/wpt/meta/css/css-mixins/function-container-style.html.ini
new file mode 100644
index 00000000000..93b2a96cd8c
--- /dev/null
+++ b/tests/wpt/meta/css/css-mixins/function-container-style.html.ini
@@ -0,0 +1,6 @@
+[function-container-style.html]
+  [Style query on #target should query parent element]
+    expected: FAIL
+
+  [Style query on ::before should query originating element]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/margin-block-end-scroll-area-001.html.ini b/tests/wpt/meta/css/css-overflow/margin-block-end-scroll-area-001.html.ini
deleted file mode 100644
index db0b03d6214..00000000000
--- a/tests/wpt/meta/css/css-overflow/margin-block-end-scroll-area-001.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[margin-block-end-scroll-area-001.html]
-    expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scroll-marker-group-018.html.ini b/tests/wpt/meta/css/css-overflow/scroll-marker-group-018.html.ini
new file mode 100644
index 00000000000..19b5b4f1983
--- /dev/null
+++ b/tests/wpt/meta/css/css-overflow/scroll-marker-group-018.html.ini
@@ -0,0 +1,2 @@
+[scroll-marker-group-018.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scroll-marker-group-019.html.ini b/tests/wpt/meta/css/css-overflow/scroll-marker-group-019.html.ini
new file mode 100644
index 00000000000..37884926427
--- /dev/null
+++ b/tests/wpt/meta/css/css-overflow/scroll-marker-group-019.html.ini
@@ -0,0 +1,2 @@
+[scroll-marker-group-019.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/css/css-overflow/scroll-marker-group-020.html.ini b/tests/wpt/meta/css/css-overflow/scroll-marker-group-020.html.ini
new file mode 100644
index 00000000000..cea794206b8
--- /dev/null
+++ b/tests/wpt/meta/css/css-overflow/scroll-marker-group-020.html.ini
@@ -0,0 +1,2 @@
+[scroll-marker-group-020.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/css/css-tables/table-cell-overflow-auto-scrolled.html.ini b/tests/wpt/meta/css/css-tables/table-cell-overflow-auto-scrolled.html.ini
deleted file mode 100644
index 55805c45ee2..00000000000
--- a/tests/wpt/meta/css/css-tables/table-cell-overflow-auto-scrolled.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[table-cell-overflow-auto-scrolled.html]
-  expected: FAIL
diff --git a/tests/wpt/meta/css/css-values/if-invalidation.html.ini b/tests/wpt/meta/css/css-values/if-invalidation.html.ini
new file mode 100644
index 00000000000..3e4835fcb55
--- /dev/null
+++ b/tests/wpt/meta/css/css-values/if-invalidation.html.ini
@@ -0,0 +1,3 @@
+[if-invalidation.html]
+  [CSS Values and Units Test: if() invalidation]
+    expected: FAIL
diff --git a/tests/wpt/meta/css/css-values/if-style-query.html.ini b/tests/wpt/meta/css/css-values/if-style-query.html.ini
index 225961db9fb..d17bfb0fca0 100644
--- a/tests/wpt/meta/css/css-values/if-style-query.html.ini
+++ b/tests/wpt/meta/css/css-values/if-style-query.html.ini
@@ -334,3 +334,30 @@
 
   [CSS Values and Units Test: CSS inline if() function 111]
     expected: FAIL
+
+  [CSS Values and Units Test: CSS inline if() function 112]
+    expected: FAIL
+
+  [CSS Values and Units Test: CSS inline if() function 113]
+    expected: FAIL
+
+  [CSS Values and Units Test: CSS inline if() function 114]
+    expected: FAIL
+
+  [CSS Values and Units Test: CSS inline if() function 115]
+    expected: FAIL
+
+  [CSS Values and Units Test: CSS inline if() function 116]
+    expected: FAIL
+
+  [CSS Values and Units Test: CSS inline if() function 117]
+    expected: FAIL
+
+  [CSS Values and Units Test: CSS inline if() function 118]
+    expected: FAIL
+
+  [CSS Values and Units Test: CSS inline if() function 119]
+    expected: FAIL
+
+  [CSS Values and Units Test: CSS inline if() function 120]
+    expected: FAIL
diff --git a/tests/wpt/meta/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html.ini b/tests/wpt/meta/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html.ini
index d8b66a385b9..8205a1b4aa7 100644
--- a/tests/wpt/meta/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html.ini
+++ b/tests/wpt/meta/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html.ini
@@ -10,3 +10,9 @@
 
   [Reactions to atomic move are called in order of element, not in order of operation]
     expected: FAIL
+
+  [When connectedCallback is not defined, no crash]
+    expected: FAIL
+
+  [When disconnectedCallback is not defined, no crash]
+    expected: FAIL
diff --git a/tests/wpt/meta/dom/observable/tentative/observable-constructor.any.js.ini b/tests/wpt/meta/dom/observable/tentative/observable-constructor.any.js.ini
index 8221c036594..f6fc12bc3a4 100644
--- a/tests/wpt/meta/dom/observable/tentative/observable-constructor.any.js.ini
+++ b/tests/wpt/meta/dom/observable/tentative/observable-constructor.any.js.ini
@@ -119,6 +119,15 @@
   [Producer-initiated unsubscription in a downstream Observable fires abort events before each teardown, in downstream->upstream order]
     expected: FAIL
 
+  [Multiple subscriptions share the same producer and teardown runs only after last subscription abort]
+    expected: FAIL
+
+  [New subscription after complete creates new producer]
+    expected: FAIL
+
+  [Teardown runs after last unsubscribe regardless of unsubscription order]
+    expected: FAIL
+
 
 [observable-constructor.any.html]
   [Observable constructor]
@@ -240,3 +249,12 @@
 
   [Producer-initiated unsubscription in a downstream Observable fires abort events before each teardown, in downstream->upstream order]
     expected: FAIL
+
+  [Multiple subscriptions share the same producer and teardown runs only after last subscription abort]
+    expected: FAIL
+
+  [New subscription after complete creates new producer]
+    expected: FAIL
+
+  [Teardown runs after last unsubscribe regardless of unsubscription order]
+    expected: FAIL
diff --git a/tests/wpt/meta/dom/observable/tentative/observable-from.any.js.ini b/tests/wpt/meta/dom/observable/tentative/observable-from.any.js.ini
index d3e8c846376..2d7096ed7cd 100644
--- a/tests/wpt/meta/dom/observable/tentative/observable-from.any.js.ini
+++ b/tests/wpt/meta/dom/observable/tentative/observable-from.any.js.ini
@@ -146,6 +146,12 @@
   [Invalid iterator protocol error is surfaced before Subscriber#signal is consulted]
     expected: FAIL
 
+  [from(): Asynchronous iterable multiple in-flight subscriptions]
+    expected: FAIL
+
+  [from(): Sync iterable multiple in-flight subscriptions]
+    expected: FAIL
+
 
 [observable-from.any.html]
   [from(): Observable.from() is a function]
@@ -294,3 +300,9 @@
 
   [Invalid iterator protocol error is surfaced before Subscriber#signal is consulted]
     expected: FAIL
+
+  [from(): Asynchronous iterable multiple in-flight subscriptions]
+    expected: FAIL
+
+  [from(): Sync iterable multiple in-flight subscriptions]
+    expected: FAIL
diff --git a/tests/wpt/meta/dom/xslt/encoding-single-chunk.html.ini b/tests/wpt/meta/dom/xslt/encoding-single-chunk.html.ini
new file mode 100644
index 00000000000..f7efe886c7a
--- /dev/null
+++ b/tests/wpt/meta/dom/xslt/encoding-single-chunk.html.ini
@@ -0,0 +1,2 @@
+[encoding-single-chunk.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/fetch/metadata/generated/css-font-face.https.sub.tentative.html.ini b/tests/wpt/meta/fetch/metadata/generated/css-font-face.https.sub.tentative.html.ini
index c7e0d7d20e9..d471ef76873 100644
--- a/tests/wpt/meta/fetch/metadata/generated/css-font-face.https.sub.tentative.html.ini
+++ b/tests/wpt/meta/fetch/metadata/generated/css-font-face.https.sub.tentative.html.ini
@@ -52,3 +52,6 @@
 
   [sec-fetch-storage-access - Same site]
     expected: FAIL
+
+  [sec-fetch-storage-access - Cross-site]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/navigation-unload-cross-origin.sub.window.js.ini b/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/navigation-unload-cross-origin.sub.window.js.ini
deleted file mode 100644
index 4ecd6d9f753..00000000000
--- a/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/navigation-unload-cross-origin.sub.window.js.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[navigation-unload-cross-origin.sub.window.html]
-  [Cross-origin navigation started from unload handler must be ignored]
-    expected: FAIL
diff --git a/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/navigation-unload-same-origin-fragment.html.ini b/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/navigation-unload-same-origin-fragment.html.ini
deleted file mode 100644
index 49cc2e16746..00000000000
--- a/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/navigation-unload-same-origin-fragment.html.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[navigation-unload-same-origin-fragment.html]
-  [Tests that a fragment navigation in the unload handler will not block the initial navigation]
-    expected: FAIL
diff --git a/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html.ini b/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html.ini
new file mode 100644
index 00000000000..60a4fa51f8a
--- /dev/null
+++ b/tests/wpt/meta/html/browsers/browsing-the-web/navigating-across-documents/replace-before-load/a-click.html.ini
@@ -0,0 +1,3 @@
+[a-click.html]
+  [aElement.click() before the load event must NOT replace]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini b/tests/wpt/meta/html/browsers/history/the-history-interface/traverse_the_history_3.html.ini
similarity index 71%
rename from tests/wpt/meta/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini
rename to tests/wpt/meta/html/browsers/history/the-history-interface/traverse_the_history_3.html.ini
index 7a5fcb79165..a03a8322165 100644
--- a/tests/wpt/meta/html/browsers/history/the-history-interface/traverse_the_history_5.html.ini
+++ b/tests/wpt/meta/html/browsers/history/the-history-interface/traverse_the_history_3.html.ini
@@ -1,3 +1,3 @@
-[traverse_the_history_5.html]
+[traverse_the_history_3.html]
   [Multiple history traversals, last would be aborted]
     expected: FAIL
diff --git a/tests/wpt/meta/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html.ini b/tests/wpt/meta/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html.ini
new file mode 100644
index 00000000000..ad3875db332
--- /dev/null
+++ b/tests/wpt/meta/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html.ini
@@ -0,0 +1,3 @@
+[2d.color.type.u8p3.to.u8srgb.to.u8p3.html]
+  [test srgb unorm8 canvas storing 8-bit display-p3 data accurately]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html.ini b/tests/wpt/meta/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html.ini
new file mode 100644
index 00000000000..a4c426099e1
--- /dev/null
+++ b/tests/wpt/meta/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html.ini
@@ -0,0 +1,3 @@
+[2d.color.type.u8srgb.to.u8p3.to.u8srgb.html]
+  [test display-p3 unorm8 canvas not storing 8-bit srgb data accurately]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/canvas/element/manual/context-attributes/getContextAttributes.html.ini b/tests/wpt/meta/html/canvas/element/manual/context-attributes/getContextAttributes.html.ini
index 83c85188374..1db21456d90 100644
--- a/tests/wpt/meta/html/canvas/element/manual/context-attributes/getContextAttributes.html.ini
+++ b/tests/wpt/meta/html/canvas/element/manual/context-attributes/getContextAttributes.html.ini
@@ -25,3 +25,9 @@
 
   [Test context creation attributes willReadFrequently: false]
     expected: FAIL
+
+  [Test context creation attributes colorType: unorm8]
+    expected: FAIL
+
+  [Test context creation attributes colorType: float16]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html.ini b/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html.ini
new file mode 100644
index 00000000000..ad3875db332
--- /dev/null
+++ b/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html.ini
@@ -0,0 +1,3 @@
+[2d.color.type.u8p3.to.u8srgb.to.u8p3.html]
+  [test srgb unorm8 canvas storing 8-bit display-p3 data accurately]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.worker.js.ini b/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.worker.js.ini
new file mode 100644
index 00000000000..909958848d8
--- /dev/null
+++ b/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.worker.js.ini
@@ -0,0 +1,3 @@
+[2d.color.type.u8p3.to.u8srgb.to.u8p3.worker.html]
+  [test srgb unorm8 canvas storing 8-bit display-p3 data accurately]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html.ini b/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html.ini
new file mode 100644
index 00000000000..a4c426099e1
--- /dev/null
+++ b/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html.ini
@@ -0,0 +1,3 @@
+[2d.color.type.u8srgb.to.u8p3.to.u8srgb.html]
+  [test display-p3 unorm8 canvas not storing 8-bit srgb data accurately]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.worker.js.ini b/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.worker.js.ini
new file mode 100644
index 00000000000..8717c5f76d6
--- /dev/null
+++ b/tests/wpt/meta/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.worker.js.ini
@@ -0,0 +1,3 @@
+[2d.color.type.u8srgb.to.u8p3.to.u8srgb.worker.html]
+  [test display-p3 unorm8 canvas not storing 8-bit srgb data accurately]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/canvas/offscreen/manual/context-attributes/getContextAttributes.html.ini b/tests/wpt/meta/html/canvas/offscreen/manual/context-attributes/getContextAttributes.html.ini
index e901056f101..4310d17c2b4 100644
--- a/tests/wpt/meta/html/canvas/offscreen/manual/context-attributes/getContextAttributes.html.ini
+++ b/tests/wpt/meta/html/canvas/offscreen/manual/context-attributes/getContextAttributes.html.ini
@@ -25,3 +25,9 @@
 
   [Test offscreen context creation attributes willReadFrequently: false]
     expected: FAIL
+
+  [Test context creation attributes colorType: unorm8]
+    expected: FAIL
+
+  [Test context creation attributes colorType: float16]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/rendering/replaced-elements/the-option-element/option-label-whitespace.html.ini b/tests/wpt/meta/html/rendering/replaced-elements/the-option-element/option-label-whitespace.html.ini
new file mode 100644
index 00000000000..e2463ff1b33
--- /dev/null
+++ b/tests/wpt/meta/html/rendering/replaced-elements/the-option-element/option-label-whitespace.html.ini
@@ -0,0 +1,2 @@
+[option-label-whitespace.html]
+  expected: FAIL
diff --git a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-1.html.ini b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-1.html.ini
index d7d0d3ef89d..24903b5f66f 100644
--- a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-1.html.ini
+++ b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_escaping-1.html.ini
@@ -1,4 +1,4 @@
 [iframe_sandbox_popups_escaping-1.html]
   expected: TIMEOUT
   [Check that popups from a sandboxed iframe escape the sandbox if\n       allow-popups-to-escape-sandbox is used]
-    expected: FAIL
+    expected: TIMEOUT
diff --git a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini
index 62a6e7fc812..e8872b3585b 100644
--- a/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini
+++ b/tests/wpt/meta/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_popups_nonescaping-1.html.ini
@@ -1,4 +1,4 @@
 [iframe_sandbox_popups_nonescaping-1.html]
-  expected: CRASH
+  expected: TIMEOUT
   [Check that popups from a sandboxed iframe do not escape the sandbox]
     expected: NOTRUN
diff --git a/tests/wpt/meta/html/semantics/forms/form-submission-0/form-submit-iframe-then-location-navigate.html.ini b/tests/wpt/meta/html/semantics/forms/form-submission-0/form-submit-iframe-then-location-navigate.html.ini
deleted file mode 100644
index d44f3ccff52..00000000000
--- a/tests/wpt/meta/html/semantics/forms/form-submission-0/form-submit-iframe-then-location-navigate.html.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[form-submit-iframe-then-location-navigate.html]
-  [Verifies that location navigations take precedence when following form submissions.]
-    expected: FAIL
diff --git a/tests/wpt/meta/html/semantics/popovers/button-type-popovertarget.html.ini b/tests/wpt/meta/html/semantics/popovers/button-type-popovertarget.html.ini
new file mode 100644
index 00000000000..89173f75752
--- /dev/null
+++ b/tests/wpt/meta/html/semantics/popovers/button-type-popovertarget.html.ini
@@ -0,0 +1,46 @@
+[button-type-popovertarget.html]
+  expected: ERROR
+  [Button type=reset in form should trigger form reset and toggle popover]
+    expected: FAIL
+
+  [Button type=submit in form should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button type=button in form should toggle popover]
+    expected: NOTRUN
+
+  [Button type=invalid in form should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button missing type in form should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button type=reset with form attr should trigger form reset and toggle popover]
+    expected: NOTRUN
+
+  [Button type=submit with form attr should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button type=button with form attr should toggle popover]
+    expected: NOTRUN
+
+  [Button type=invalid with form attr should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button missing type with form attr should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button type=reset outside form should toggle popover]
+    expected: NOTRUN
+
+  [Button type=submit outside form should toggle popover]
+    expected: NOTRUN
+
+  [Button type=button outside form should toggle popover]
+    expected: NOTRUN
+
+  [Button type=invalid outside form should toggle popover]
+    expected: NOTRUN
+
+  [Button missing type outside form should toggle popover]
+    expected: NOTRUN
diff --git a/tests/wpt/meta/html/semantics/popovers/button-type-reset-popovertarget.html.ini b/tests/wpt/meta/html/semantics/popovers/button-type-reset-popovertarget.html.ini
deleted file mode 100644
index 421fc5dfbb5..00000000000
--- a/tests/wpt/meta/html/semantics/popovers/button-type-reset-popovertarget.html.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[button-type-reset-popovertarget.html]
-  [Button type=reset and type=submit should not run popover algorithms when in a form.]
-    expected: FAIL
diff --git a/tests/wpt/meta/html/semantics/popovers/input-type-popovertarget.html.ini b/tests/wpt/meta/html/semantics/popovers/input-type-popovertarget.html.ini
new file mode 100644
index 00000000000..6c68e1af44f
--- /dev/null
+++ b/tests/wpt/meta/html/semantics/popovers/input-type-popovertarget.html.ini
@@ -0,0 +1,37 @@
+[input-type-popovertarget.html]
+  expected: ERROR
+  [input type=reset in form should trigger form reset and toggle popover]
+    expected: FAIL
+
+  [input type=submit in form should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [input type=button in form should toggle popover]
+    expected: NOTRUN
+
+  [input type=image in form should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [input type=reset with form attr should trigger form reset and toggle popover]
+    expected: NOTRUN
+
+  [input type=submit with form attr should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [input type=button with form attr should toggle popover]
+    expected: NOTRUN
+
+  [input type=image with form attr should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [input type=reset outside form should toggle popover]
+    expected: NOTRUN
+
+  [input type=submit outside form should toggle popover]
+    expected: NOTRUN
+
+  [input type=button outside form should toggle popover]
+    expected: NOTRUN
+
+  [input type=image outside form should toggle popover]
+    expected: NOTRUN
diff --git a/tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/button-type-behavior.tentative.html.ini b/tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/button-type-behavior.tentative.html.ini
new file mode 100644
index 00000000000..a96938799f6
--- /dev/null
+++ b/tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/button-type-behavior.tentative.html.ini
@@ -0,0 +1,55 @@
+[button-type-behavior.tentative.html]
+  expected: ERROR
+  [Button type=reset in form should trigger form reset and toggle popover]
+    expected: FAIL
+
+  [Button type=submit in form should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button type=button in form should not toggle popover]
+    expected: NOTRUN
+
+  [Button type=invalid in form should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button missing type in form should not trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button missing type in form with only command should not trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button missing type in form with only commandfor should not trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button type=reset with form attr should trigger form reset and toggle popover]
+    expected: NOTRUN
+
+  [Button type=submit with form attr should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button type=button with form attr should toggle popover]
+    expected: NOTRUN
+
+  [Button type=invalid with form attr should trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button missing type with form attr and only command should not trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button missing type with form attr and only commandfor should not trigger form submit and not toggle popover]
+    expected: NOTRUN
+
+  [Button type=reset outside form should toggle popover]
+    expected: NOTRUN
+
+  [Button type=submit outside form should toggle popover]
+    expected: NOTRUN
+
+  [Button type=button outside form should toggle popover]
+    expected: NOTRUN
+
+  [Button type=invalid outside form should toggle popover]
+    expected: NOTRUN
+
+  [Button missing type outside form should toggle popover]
+    expected: NOTRUN
diff --git a/tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/button-type-reflection.tentative.html.ini b/tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/button-type-reflection.tentative.html.ini
new file mode 100644
index 00000000000..b43c0450dfc
--- /dev/null
+++ b/tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/button-type-reflection.tentative.html.ini
@@ -0,0 +1,27 @@
+[button-type-reflection.tentative.html]
+  [Button with id missing-in-form should reflect type correctly]
+    expected: FAIL
+
+  [Button with id missing-in-form-command-only should reflect type correctly]
+    expected: FAIL
+
+  [Button with id missing-in-form-commandfor-only should reflect type correctly]
+    expected: FAIL
+
+  [Button with id missing-attr-form should reflect type correctly]
+    expected: FAIL
+
+  [Button with id missing-attr-form-command-only should reflect type correctly]
+    expected: FAIL
+
+  [Button with id missing-attr-form-commandfor-only should reflect type correctly]
+    expected: FAIL
+
+  [Button with id missing-outside-form should reflect type correctly]
+    expected: FAIL
+
+  [Button with id missing-outside-form-command-only should reflect type correctly]
+    expected: FAIL
+
+  [Button with id missing-outside-form-commandfor-only should reflect type correctly]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/interface.tentative.html.ini b/tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/interface.tentative.html.ini
index e2c3ee625eb..6bd44cf281d 100644
--- a/tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/interface.tentative.html.ini
+++ b/tests/wpt/meta/html/semantics/the-button-element/command-and-commandfor/interface.tentative.html.ini
@@ -28,3 +28,12 @@
 
   [command reflects tostring value 2]
     expected: FAIL
+
+  [command reflects correctly for invalid]
+    expected: FAIL
+
+  [command reflects correctly for invalid when array]
+    expected: FAIL
+
+  [command reflects correctly for invalid when object]
+    expected: FAIL
diff --git a/tests/wpt/meta/navigation-timing/test-navigation-type-reload.html.ini b/tests/wpt/meta/navigation-timing/test-navigation-type-reload.html.ini
index 78cee99c19b..4973cd6505f 100644
--- a/tests/wpt/meta/navigation-timing/test-navigation-type-reload.html.ini
+++ b/tests/wpt/meta/navigation-timing/test-navigation-type-reload.html.ini
@@ -13,3 +13,9 @@
 
   [Reload domInteractive > Original domInteractive]
     expected: FAIL
+
+  [Reload domContentLoadedEventStart > Original domContentLoadedEventStart]
+    expected: FAIL
+
+  [Reload fetchStart > Original fetchStart]
+    expected: FAIL
diff --git a/tests/wpt/meta/performance-timeline/navigation-id-detached-frame.tentative.html.ini b/tests/wpt/meta/performance-timeline/navigation-id-detached-frame.tentative.html.ini
new file mode 100644
index 00000000000..6764c93df51
--- /dev/null
+++ b/tests/wpt/meta/performance-timeline/navigation-id-detached-frame.tentative.html.ini
@@ -0,0 +1,4 @@
+[navigation-id-detached-frame.tentative.html]
+  expected: TIMEOUT
+  [The navigation_id getter does not crash a window of detached frame]
+    expected: TIMEOUT
diff --git a/tests/wpt/meta/shadow-dom/HighlightRegistry-highlightsFromPoint.html.ini b/tests/wpt/meta/shadow-dom/HighlightRegistry-highlightsFromPoint.html.ini
new file mode 100644
index 00000000000..22d63011dfb
--- /dev/null
+++ b/tests/wpt/meta/shadow-dom/HighlightRegistry-highlightsFromPoint.html.ini
@@ -0,0 +1,9 @@
+[HighlightRegistry-highlightsFromPoint.html]
+  [CSS.highlights.highlightsFromPoint() should throw when called with nodes that are not ShadowRoot objects in options.]
+    expected: FAIL
+
+  [CSS.highlights.highlightsFromPoint() returns Highlights present at a given point inside a shadow tree in the right order.]
+    expected: FAIL
+
+  [CSS.highlights.highlightsFromPoint() doesn't return Highlights that are not painted at the given coordinates even when they fall inside the Highlights' ranges]
+    expected: FAIL
diff --git a/tests/wpt/meta/subresource-integrity/signatures/tentative/csp.window.js.ini b/tests/wpt/meta/subresource-integrity/signatures/tentative/csp.window.js.ini
new file mode 100644
index 00000000000..491fb898342
--- /dev/null
+++ b/tests/wpt/meta/subresource-integrity/signatures/tentative/csp.window.js.ini
@@ -0,0 +1,6 @@
+[csp.window.html]
+  [`<script>`: Valid signature, valid integrity check: loads.]
+    expected: FAIL
+
+  [`<script>`: Valid signatures, integrity check matches one: loads.]
+    expected: FAIL
diff --git a/tests/wpt/meta/subresource-integrity/signatures/tentative/script.window.js.ini b/tests/wpt/meta/subresource-integrity/signatures/tentative/script.window.js.ini
index 11485d20a9a..ebd17f20f96 100644
--- a/tests/wpt/meta/subresource-integrity/signatures/tentative/script.window.js.ini
+++ b/tests/wpt/meta/subresource-integrity/signatures/tentative/script.window.js.ini
@@ -17,3 +17,6 @@
 
   [`<script>`: Valid signatures, integrity check matches neither: blocked.]
     expected: FAIL
+
+  [`<script>`: No signature, integrity check: blocked.]
+    expected: FAIL
diff --git a/tests/wpt/meta/wasm/jsapi/js-string/basic.any.js.ini b/tests/wpt/meta/wasm/jsapi/js-string/basic.any.js.ini
new file mode 100644
index 00000000000..503607e252a
--- /dev/null
+++ b/tests/wpt/meta/wasm/jsapi/js-string/basic.any.js.ini
@@ -0,0 +1,5 @@
+[basic.any.worker.html]
+  expected: ERROR
+
+[basic.any.html]
+  expected: ERROR
diff --git a/tests/wpt/meta/wasm/jsapi/js-string/basic.tentative.any.js.ini b/tests/wpt/meta/wasm/jsapi/js-string/basic.tentative.any.js.ini
deleted file mode 100644
index 944ded33b9f..00000000000
--- a/tests/wpt/meta/wasm/jsapi/js-string/basic.tentative.any.js.ini
+++ /dev/null
@@ -1,26 +0,0 @@
-[basic.tentative.any.worker.html]
-  expected: ERROR
-
-[basic.tentative.any.html]
-  expected: ERROR
-
-[basic.tentative.any.shadowrealm.html]
-  expected: TIMEOUT
-
-[basic.tentative.any.shadowrealm-in-sharedworker.html]
-  expected: ERROR
-
-[basic.tentative.https.any.shadowrealm-in-serviceworker.html]
-  expected: ERROR
-
-[basic.tentative.any.shadowrealm-in-shadowrealm.html]
-  expected: ERROR
-
-[basic.tentative.https.any.shadowrealm-in-audioworklet.html]
-  expected: ERROR
-
-[basic.tentative.any.shadowrealm-in-window.html]
-  expected: ERROR
-
-[basic.tentative.any.shadowrealm-in-dedicatedworker.html]
-  expected: ERROR
diff --git a/tests/wpt/meta/wasm/jsapi/js-string/constants.tentative.any.js.ini b/tests/wpt/meta/wasm/jsapi/js-string/constants.any.js.ini
similarity index 82%
rename from tests/wpt/meta/wasm/jsapi/js-string/constants.tentative.any.js.ini
rename to tests/wpt/meta/wasm/jsapi/js-string/constants.any.js.ini
index 9f162d006f3..6db5856cb53 100644
--- a/tests/wpt/meta/wasm/jsapi/js-string/constants.tentative.any.js.ini
+++ b/tests/wpt/meta/wasm/jsapi/js-string/constants.any.js.ini
@@ -1,7 +1,4 @@
-[constants.tentative.any.shadowrealm.html]
-  expected: TIMEOUT
-
-[constants.tentative.any.html]
+[constants.any.worker.html]
   [constants]
     expected: FAIL
 
@@ -123,7 +120,7 @@
     expected: FAIL
 
 
-[constants.tentative.any.worker.html]
+[constants.any.html]
   [constants]
     expected: FAIL
 
@@ -243,22 +240,3 @@
 
   [constants 39]
     expected: FAIL
-
-
-[constants.tentative.any.shadowrealm-in-dedicatedworker.html]
-  expected: ERROR
-
-[constants.tentative.https.any.shadowrealm-in-serviceworker.html]
-  expected: ERROR
-
-[constants.tentative.any.shadowrealm-in-window.html]
-  expected: ERROR
-
-[constants.tentative.any.shadowrealm-in-sharedworker.html]
-  expected: ERROR
-
-[constants.tentative.https.any.shadowrealm-in-audioworklet.html]
-  expected: ERROR
-
-[constants.tentative.any.shadowrealm-in-shadowrealm.html]
-  expected: ERROR
diff --git a/tests/wpt/meta/wasm/jsapi/js-string/imports.any.js.ini b/tests/wpt/meta/wasm/jsapi/js-string/imports.any.js.ini
new file mode 100644
index 00000000000..e0de728cd36
--- /dev/null
+++ b/tests/wpt/meta/wasm/jsapi/js-string/imports.any.js.ini
@@ -0,0 +1,8 @@
+[imports.any.html]
+  [imports]
+    expected: FAIL
+
+
+[imports.any.worker.html]
+  [imports]
+    expected: FAIL
diff --git a/tests/wpt/meta/wasm/jsapi/js-string/imports.tentative.any.js.ini b/tests/wpt/meta/wasm/jsapi/js-string/imports.tentative.any.js.ini
deleted file mode 100644
index 1a04909e966..00000000000
--- a/tests/wpt/meta/wasm/jsapi/js-string/imports.tentative.any.js.ini
+++ /dev/null
@@ -1,30 +0,0 @@
-[imports.tentative.any.html]
-  [imports]
-    expected: FAIL
-
-
-[imports.tentative.any.shadowrealm.html]
-  expected: TIMEOUT
-
-[imports.tentative.any.worker.html]
-  [imports]
-    expected: FAIL
-
-
-[imports.tentative.https.any.shadowrealm-in-serviceworker.html]
-  expected: ERROR
-
-[imports.tentative.any.shadowrealm-in-window.html]
-  expected: ERROR
-
-[imports.tentative.any.shadowrealm-in-shadowrealm.html]
-  expected: ERROR
-
-[imports.tentative.https.any.shadowrealm-in-audioworklet.html]
-  expected: ERROR
-
-[imports.tentative.any.shadowrealm-in-dedicatedworker.html]
-  expected: ERROR
-
-[imports.tentative.any.shadowrealm-in-sharedworker.html]
-  expected: ERROR
diff --git a/tests/wpt/tests/.taskcluster.yml b/tests/wpt/tests/.taskcluster.yml
index 85204ee17b9..18c82321f92 100644
--- a/tests/wpt/tests/.taskcluster.yml
+++ b/tests/wpt/tests/.taskcluster.yml
@@ -7,7 +7,7 @@ tasks:
     run_task:
       $if: 'tasks_for == "github-push"'
       then:
-        $if: 'event.ref in ["refs/heads/master", "refs/heads/epochs/daily", "refs/heads/epochs/weekly", "refs/heads/triggers/chrome_stable", "refs/heads/triggers/chrome_beta", "refs/heads/triggers/chrome_canary", "refs/heads/triggers/chrome_dev", "refs/heads/triggers/chrome_nightly", "refs/heads/triggers/firefox_stable", "refs/heads/triggers/firefox_beta", "refs/heads/triggers/firefox_nightly", "refs/heads/triggers/firefox_android_nightly", "refs/heads/triggers/webkitgtk_minibrowser_stable", "refs/heads/triggers/webkitgtk_minibrowser_beta", "refs/heads/triggers/webkitgtk_minibrowser_nightly", "refs/heads/triggers/servo_nightly"]'
+        $if: 'event.ref in ["refs/heads/master", "refs/heads/epochs/daily", "refs/heads/epochs/weekly", "refs/heads/triggers/chrome_stable", "refs/heads/triggers/chrome_beta", "refs/heads/triggers/chrome_canary", "refs/heads/triggers/chrome_dev", "refs/heads/triggers/chrome_nightly", "refs/heads/triggers/firefox_stable", "refs/heads/triggers/firefox_beta", "refs/heads/triggers/firefox_nightly", "refs/heads/triggers/firefox_android_nightly", "refs/heads/triggers/webkitgtk_minibrowser_stable", "refs/heads/triggers/webkitgtk_minibrowser_beta", "refs/heads/triggers/webkitgtk_minibrowser_nightly", "refs/heads/triggers/wpewebkit_minibrowser_stable", "refs/heads/triggers/wpewebkit_minibrowser_beta", "refs/heads/triggers/wpewebkit_minibrowser_nightly", "refs/heads/triggers/servo_nightly"]'
         then: true
         else: false
       else:
diff --git a/tests/wpt/tests/FileAPI/BlobURL/cross-partition-navigation.https.html b/tests/wpt/tests/FileAPI/BlobURL/cross-partition-navigation.https.html
index 37cb3dc452d..0529cde79e2 100644
--- a/tests/wpt/tests/FileAPI/BlobURL/cross-partition-navigation.https.html
+++ b/tests/wpt/tests/FileAPI/BlobURL/cross-partition-navigation.https.html
@@ -134,17 +134,22 @@ const blob_url_iframe_html = (response_queue_uuid, message) => `
   <script src="/common/utils.js"><\/script>
   <script src="/common/dispatcher/dispatcher.js"><\/script>
   <script>
-      window.onload = () => {
-        send("${response_queue_uuid}", "${message}");
-        window.close();
-      };
+      send("${response_queue_uuid}", "${message}");
   <\/script>
 `;
 
-const create_iframe_with_blob_url = (blob_url) => `
+const create_iframe_with_blob_url = (blob_url, response_queue_uuid) => `
   const iframe = document.createElement('iframe');
   iframe.src = "${blob_url}";
   document.body.appendChild(iframe);
+
+  const same_site_message = "same_partition_loaded";
+  const blob_url_iframe_html = ${blob_url_iframe_html};
+  const same_top_level_site_blob = new Blob([blob_url_iframe_html("${response_queue_uuid}", same_site_message)], {type : "text/html"});
+  const same_top_level_site_blob_url = URL.createObjectURL(same_top_level_site_blob);
+  const iframe2 = document.createElement('iframe');
+  iframe2.src = same_top_level_site_blob_url;
+  document.body.appendChild(iframe2);
 `;
 
 // Tests blob URL subframe navigations for same and cross partition iframes.
@@ -154,7 +159,6 @@ promise_test(t => {
       // Creates same and cross partition iframes.
       const response_queue_uuid = token();
       const cross_site_message = "cross_partition_loaded";
-      const same_site_message = "same_partition_loaded";
 
       const [cross_site_iframe_uuid, same_site_iframe_uuid] =
         await create_test_iframes(t, response_queue_uuid);
@@ -164,14 +168,8 @@ promise_test(t => {
       const cross_site_blob_url = URL.createObjectURL(cross_site_blob);
 
       // Attempt to open blob URL in cross partition iframe.
-      await send(cross_site_iframe_uuid, create_iframe_with_blob_url(cross_site_blob_url));
+      await send(cross_site_iframe_uuid, create_iframe_with_blob_url(cross_site_blob_url, response_queue_uuid));
 
-      // Create blob URL for the same-site test.
-      const same_site_blob = new Blob([blob_url_iframe_html(response_queue_uuid, same_site_message)], {type: "text/html"});
-      const same_site_blob_url = URL.createObjectURL(same_site_blob);
-
-      // Attempt to open blob URL in same partition iframe.
-      await send(same_site_iframe_uuid, create_iframe_with_blob_url(same_site_blob_url));
       const response = await receive(response_queue_uuid);
       if (response === cross_site_message) {
         reject(`Blob URL subframe navigation succeeded in not-same-top-level-site iframe.`);
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-continue-exception-order.any.js b/tests/wpt/tests/IndexedDB/idbcursor-continue-exception-order.any.js
new file mode 100644
index 00000000000..794ec8e32e6
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-continue-exception-order.any.js
@@ -0,0 +1,88 @@
+// META: global=window,worker
+// META: title=IndexedDB: IDBCursor continue() Exception Ordering
+// META: script=resources/support.js
+
+// Spec: https://w3c.github.io/IndexedDB/#dom-idbcursor-continue
+
+'use strict';
+
+indexeddb_test(
+    (t, db) => {
+      const s = db.createObjectStore('s');
+      s.put('value', 'key');
+    },
+    (t, db) => {
+      const s = db.transaction('s', 'readonly').objectStore('s');
+      const r = s.openKeyCursor();
+      r.onsuccess = t.step_func(() => {
+        r.onsuccess = null;
+        const cursor = r.result;
+        setTimeout(
+            t.step_func(() => {
+              assert_throws_dom(
+                  'TransactionInactiveError',
+                  () => {
+                    cursor.continue({not: 'a valid key'});
+                  },
+                  '"Transaction inactive" check (TransactionInactiveError) ' +
+                      'should precede "invalid key" check (DataError)');
+              t.done();
+            }),
+            0);
+      });
+    },
+    'IDBCursor.continue exception order: TransactionInactiveError vs. DataError');
+
+indexeddb_test(
+    (t, db) => {
+      const s = db.createObjectStore('s');
+      s.put('value', 'key');
+    },
+    (t, db) => {
+      const s = db.transaction('s', 'readonly').objectStore('s');
+      const r = s.openKeyCursor();
+      r.onsuccess = t.step_func(() => {
+        r.onsuccess = null;
+        const cursor = r.result;
+        cursor.continue();
+        r.onsuccess = t.step_func(() => {
+          setTimeout(
+              t.step_func(() => {
+                assert_throws_dom(
+                    'TransactionInactiveError',
+                    () => {
+                      cursor.continue();
+                    },
+                    '"Transaction inactive" check (TransactionInactiveError) ' +
+                        'should precede "got value flag" check (InvalidStateError)');
+                t.done();
+              }),
+              0);
+        });
+      });
+    },
+    'IDBCursor.continue exception order: TransactionInactiveError vs. InvalidStateError');
+
+indexeddb_test(
+    (t, db) => {
+      const s = db.createObjectStore('s');
+      s.put('value', 'key');
+    },
+    (t, db) => {
+      const s = db.transaction('s', 'readonly').objectStore('s');
+      const r = s.openKeyCursor();
+      r.onsuccess = t.step_func(() => {
+        r.onsuccess = null;
+        const cursor = r.result;
+        cursor.continue();
+        assert_throws_dom(
+            'InvalidStateError',
+            () => {
+              cursor.continue({not: 'a valid key'});
+            },
+            '"got value flag" check (InvalidStateError) should precede ' +
+                '"invalid key" check (DataError)');
+        t.done();
+      });
+    },
+    'IDBCursor.continue exception order: InvalidStateError vs. DataError');
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-continue-exception-order.htm b/tests/wpt/tests/IndexedDB/idbcursor-continue-exception-order.htm
deleted file mode 100644
index 6561ec396c2..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-continue-exception-order.htm
+++ /dev/null
@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<title>IndexedDB: IDBCursor continue() Exception Ordering</title>
-<meta charset=utf-8>
-<link rel="help" href="https://w3c.github.io/IndexedDB/#dom-idbcursor-continue">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-<script>
-
-indexeddb_test(
-  (t, db) => {
-    const s = db.createObjectStore('s');
-    s.put('value', 'key');
-  },
-  (t, db) => {
-    const s = db.transaction('s', 'readonly').objectStore('s');
-    const r = s.openKeyCursor();
-    r.onsuccess = t.step_func(() => {
-      r.onsuccess = null;
-      const cursor = r.result;
-      setTimeout(t.step_func(() => {
-        assert_throws_dom('TransactionInactiveError', () => {
-          cursor.continue({not: "a valid key"});
-        }, '"Transaction inactive" check (TransactionInactiveError) ' +
-           'should precede "invalid key" check (DataError)');
-        t.done();
-      }), 0);
-    });
-  },
-  'IDBCursor.continue exception order: TransactionInactiveError vs. DataError'
-);
-
-indexeddb_test(
-  (t, db) => {
-    const s = db.createObjectStore('s');
-    s.put('value', 'key');
-  },
-  (t, db) => {
-    const s = db.transaction('s', 'readonly').objectStore('s');
-    const r = s.openKeyCursor();
-    r.onsuccess = t.step_func(() => {
-      r.onsuccess = null;
-      const cursor = r.result;
-      cursor.continue();
-      r.onsuccess = t.step_func(() => {
-        setTimeout(t.step_func(() => {
-          assert_throws_dom('TransactionInactiveError', () => {
-            cursor.continue();
-          }, '"Transaction inactive" check (TransactionInactiveError) ' +
-             'should precede "got value flag" check (InvalidStateError)');
-          t.done();
-        }), 0);
-      });
-    });
-  },
-  'IDBCursor.continue exception order: TransactionInactiveError vs. InvalidStateError'
-);
-
-indexeddb_test(
-  (t, db) => {
-    const s = db.createObjectStore('s');
-    s.put('value', 'key');
-  },
-  (t, db) => {
-    const s = db.transaction('s', 'readonly').objectStore('s');
-    const r = s.openKeyCursor();
-    r.onsuccess = t.step_func(() => {
-      r.onsuccess = null;
-      const cursor = r.result;
-      cursor.continue();
-      assert_throws_dom('InvalidStateError', () => {
-        cursor.continue({not: "a valid key"});
-      }, '"got value flag" check (InvalidStateError) should precede ' +
-         '"invalid key" check (DataError)');
-      t.done();
-    });
-  },
-  'IDBCursor.continue exception order: InvalidStateError vs. DataError'
-);
-
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-continue.any.js b/tests/wpt/tests/IndexedDB/idbcursor-continue.any.js
new file mode 100644
index 00000000000..767d5a4fae4
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-continue.any.js
@@ -0,0 +1,233 @@
+// META: global=window,worker
+// META: title=IDBCursor.continue()
+// META: script=resources/support.js
+
+// Spec: https://w3c.github.io/IndexedDB/#dom-idbcursor-continue
+
+'use strict';
+
+const store = [
+    { value: 'cupcake', key: 5 },
+    { value: 'pancake', key: 3 },
+    { value: 'pie', key: 1 },
+    { value: 'pie', key: 4 },
+    { value: 'taco', key: 2 }
+];
+
+function upgrade_func(t, db, tx) {
+  let os;
+  let i;
+  os = db.createObjectStore('test');
+  os.createIndex('index', '');
+
+  for (i = 0; i < store.length; i++)
+    os.add(store[i].value, store[i].key);
+}
+
+indexeddb_test(upgrade_func, function(t, db) {
+  let count = 0;
+  const rq = db.transaction('test', 'readonly')
+                 .objectStore('test')
+                 .index('index')
+                 .openCursor();
+
+  rq.onsuccess = t.step_func((e) => {
+    if (!e.target.result) {
+      assert_equals(count, 5, 'count');
+      t.done();
+      return;
+    }
+    const cursor = e.target.result;
+
+    assert_equals(cursor.value, store[count].value);
+    assert_equals(cursor.primaryKey, store[count].key);
+
+    cursor.continue();
+
+    count++;
+  });
+  rq.onerror = t.unreached_func('unexpected error');
+}, 'IDBCursor.continue() - continues');
+
+
+indexeddb_test(upgrade_func, function(t, db) {
+  let count = 0;
+  const rq = db.transaction('test', 'readonly')
+                 .objectStore('test')
+                 .index('index')
+                 .openCursor();
+
+  rq.onsuccess = t.step_func((e) => {
+    if (!e.target.result) {
+      assert_equals(count, 3, 'count');
+      t.done();
+      return;
+    }
+    const cursor = e.target.result;
+
+    switch (count) {
+      case 0:
+        assert_equals(cursor.value, 'cupcake');
+        assert_equals(cursor.primaryKey, 5);
+        cursor.continue('pie');
+        break;
+
+      case 1:
+        assert_equals(cursor.value, 'pie');
+        assert_equals(cursor.primaryKey, 1);
+        cursor.continue('taco');
+        break;
+
+      case 2:
+        assert_equals(cursor.value, 'taco');
+        assert_equals(cursor.primaryKey, 2);
+        cursor.continue();
+        break;
+
+      default:
+        assert_unreached('Unexpected count: ' + count);
+    }
+
+    count++;
+  });
+  rq.onerror = t.unreached_func('unexpected error');
+}, 'IDBCursor.continue() - with given key');
+
+
+indexeddb_test(upgrade_func, function(t, db) {
+  let count = 0;
+  const rq = db.transaction('test', 'readonly')
+                 .objectStore('test')
+                 .index('index')
+                 .openCursor();
+
+  rq.onsuccess = t.step_func((e) => {
+    if (!e.target.result) {
+      assert_equals(count, 1, 'count');
+      t.done();
+      return;
+    }
+    const cursor = e.target.result;
+
+    switch (count) {
+      case 0:
+        assert_equals(cursor.value, 'cupcake');
+        assert_equals(cursor.primaryKey, 5);
+        break;
+
+      default:
+        assert_unreached('Unexpected count: ' + count);
+    }
+
+    count++;
+    cursor.continue([]);  // Arrays are always bigger than strings
+  });
+  rq.onerror = t.unreached_func('unexpected error2');
+}, 'IDBCursor.continue() - skip far forward');
+
+
+indexeddb_test(upgrade_func, function(t, db) {
+  let count = 0;
+  const rq = db.transaction('test', 'readonly')
+                 .objectStore('test')
+                 .index('index')
+                 .openCursor(IDBKeyRange.lowerBound('cupcake', true));
+
+  rq.onsuccess = t.step_func((e) => {
+    if (!e.target.result) {
+      assert_equals(count, 2, 'count');
+      t.done();
+      return;
+    }
+    const cursor = e.target.result;
+
+    switch (count) {
+      case 0:
+        assert_equals(cursor.value, 'pancake');
+        assert_equals(cursor.primaryKey, 3);
+        cursor.continue('pie');
+        break;
+
+      case 1:
+        assert_equals(cursor.value, 'pie');
+        assert_equals(cursor.primaryKey, 1);
+        cursor.continue('zzz');
+        break;
+
+      default:
+        assert_unreached('Unexpected count: ' + count);
+    }
+
+    count++;
+  });
+  rq.onerror = t.unreached_func('unexpected error1');
+}, 'IDBCursor.continue() - within range');
+
+
+indexeddb_test(upgrade_func, function(t, db) {
+  let count = 0;
+  const rq = db.transaction('test', 'readonly')
+                 .objectStore('test')
+                 .index('index')
+                 .openCursor('pancake');
+
+  rq.onsuccess = t.step_func((e) => {
+    if (!e.target.result) {
+      assert_equals(count, 1, 'count');
+      t.done();
+      return;
+    }
+    const cursor = e.target.result;
+
+    switch (count) {
+      case 0:
+        assert_equals(cursor.value, 'pancake');
+        assert_equals(cursor.primaryKey, 3);
+        cursor.continue('pie');
+        break;
+
+      default:
+        assert_unreached('Unexpected count: ' + count);
+    }
+
+    count++;
+  });
+  rq.onerror = t.unreached_func('unexpected error1');
+}, 'IDBCursor.continue() - within single key range');
+
+indexeddb_test(upgrade_func, function(t, db) {
+  let count = 0;
+  const rq = db.transaction('test', 'readonly')
+                 .objectStore('test')
+                 .index('index')
+                 .openCursor('pie');
+
+  rq.onsuccess = t.step_func((e) => {
+    if (!e.target.result) {
+      assert_equals(count, 2, 'count');
+      t.done();
+      return;
+    }
+    const cursor = e.target.result;
+
+    switch (count) {
+      case 0:
+        assert_equals(cursor.value, 'pie');
+        assert_equals(cursor.primaryKey, 1);
+        cursor.continue();
+        break;
+
+      case 1:
+        assert_equals(cursor.value, 'pie');
+        assert_equals(cursor.primaryKey, 4);
+        cursor.continue();
+        break;
+
+      default:
+        assert_unreached('Unexpected count: ' + count);
+    }
+
+    count++;
+  });
+  rq.onerror = t.unreached_func('unexpected error1');
+}, 'IDBCursor.continue() - within single key range, with several results');
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-continue.htm b/tests/wpt/tests/IndexedDB/idbcursor-continue.htm
deleted file mode 100644
index bcb099f309e..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-continue.htm
+++ /dev/null
@@ -1,248 +0,0 @@
-<!DOCTYPE html>
-<title>IDBCursor.continue()</title>
-<link rel="author" href="mailto:odinho@opera.com" title="Odin Hørthe Omdal">
-<link rel=help href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html#widl-IDBCursor-continue-void-any-key">
-<link rel=assert title="The next key to position this cursor at">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-
-<script>
-
-var store = [ { value: "cupcake", key: 5 },
-              { value: "pancake", key: 3 },
-              { value: "pie",     key: 1 },
-              { value: "pie",     key: 4 },
-              { value: "taco",    key: 2 } ];
-
-function upgrade_func(t, db, tx) {
-  var db, open;
-
-  var os, i;
-  os = db.createObjectStore("test");
-  os.createIndex("index", "");
-
-  for (i = 0; i < store.length; i++)
-    os.add(store[i].value, store[i].key);
-}
-
-indexeddb_test(
-  upgrade_func,
-  function(t, db) {
-    var count = 0;
-    var rq = db.transaction("test", "readonly").objectStore("test").index("index").openCursor();
-
-    rq.onsuccess = t.step_func(function(e) {
-      if (!e.target.result) {
-        assert_equals(count, 5, 'count');
-        t.done();
-        return;
-      }
-      var cursor = e.target.result;
-
-      assert_equals(cursor.value, store[count].value);
-      assert_equals(cursor.primaryKey, store[count].key);
-
-      cursor.continue();
-
-      count++;
-    });
-    rq.onerror = t.unreached_func("unexpected error")
-  },
-  document.title + " - continues"
-);
-
-
-indexeddb_test(
-  upgrade_func,
-  function(t, db) {
-    var count = 0;
-    var rq = db.transaction("test", "readonly").objectStore("test").index("index").openCursor();
-
-    rq.onsuccess = t.step_func(function(e) {
-      if (!e.target.result) {
-        assert_equals(count, 3, 'count');
-        t.done();
-        return;
-      }
-      var cursor = e.target.result;
-
-      switch(count) {
-        case 0:
-          assert_equals(cursor.value, "cupcake");
-          assert_equals(cursor.primaryKey, 5);
-          cursor.continue("pie");
-          break;
-
-        case 1:
-          assert_equals(cursor.value, "pie");
-          assert_equals(cursor.primaryKey, 1);
-          cursor.continue("taco");
-          break;
-
-        case 2:
-          assert_equals(cursor.value, "taco");
-          assert_equals(cursor.primaryKey, 2);
-          cursor.continue();
-          break;
-
-        default:
-          assert_unreached("Unexpected count: " + count);
-      }
-
-      count++;
-    });
-    rq.onerror = t.unreached_func("unexpected error")
-  },
-  document.title + " - with given key"
-);
-
-
-indexeddb_test(
-  upgrade_func,
-  function(t, db) {
-    var count = 0;
-    var rq = db.transaction("test", "readonly").objectStore("test").index("index")
-               .openCursor();
-
-    rq.onsuccess = t.step_func(function(e) {
-      if (!e.target.result) {
-        assert_equals(count, 1, 'count');
-        t.done();
-        return;
-      }
-      var cursor = e.target.result;
-
-      switch(count) {
-        case 0:
-          assert_equals(cursor.value, "cupcake");
-          assert_equals(cursor.primaryKey, 5);
-          break;
-
-        default:
-          assert_unreached("Unexpected count: " + count);
-      }
-
-      count++;
-      cursor.continue([]); // Arrays are always bigger than strings
-
-    });
-    rq.onerror = t.unreached_func("unexpected error2")
-  },
-  document.title + " - skip far forward"
-);
-
-
-indexeddb_test(
-  upgrade_func,
-  function(t, db) {
-    var count = 0;
-    var rq = db.transaction("test", "readonly").objectStore("test").index("index")
-               .openCursor(IDBKeyRange.lowerBound("cupcake", true));
-
-    rq.onsuccess = t.step_func(function(e) {
-      if (!e.target.result) {
-        assert_equals(count, 2, 'count');
-        t.done();
-        return;
-      }
-      var cursor = e.target.result;
-
-      switch(count) {
-        case 0:
-          assert_equals(cursor.value, "pancake");
-          assert_equals(cursor.primaryKey, 3);
-          cursor.continue("pie");
-          break;
-
-        case 1:
-          assert_equals(cursor.value, "pie");
-          assert_equals(cursor.primaryKey, 1);
-          cursor.continue("zzz");
-          break;
-
-        default:
-          assert_unreached("Unexpected count: " + count);
-      }
-
-      count++;
-    });
-    rq.onerror = t.unreached_func("unexpected error1")
-  },
-  document.title + " - within range"
-);
-
-
-indexeddb_test(
-  upgrade_func,
-  function(t, db) {
-    var count = 0;
-    var rq = db.transaction("test", "readonly").objectStore("test").index("index")
-               .openCursor("pancake");
-
-    rq.onsuccess = t.step_func(function(e) {
-      if (!e.target.result) {
-        assert_equals(count, 1, 'count');
-        t.done();
-        return;
-      }
-      var cursor = e.target.result;
-
-      switch(count) {
-        case 0:
-          assert_equals(cursor.value, "pancake");
-          assert_equals(cursor.primaryKey, 3);
-          cursor.continue("pie");
-          break;
-
-        default:
-          assert_unreached("Unexpected count: " + count);
-      }
-
-      count++;
-    });
-    rq.onerror = t.unreached_func("unexpected error1")
-  },
-  document.title + " - within single key range"
-);
-
-indexeddb_test(
-  upgrade_func,
-  function(t, db) {
-    var count = 0;
-    var rq = db.transaction("test", "readonly").objectStore("test").index("index")
-               .openCursor("pie");
-
-    rq.onsuccess = t.step_func(function(e) {
-      if (!e.target.result) {
-        assert_equals(count, 2, 'count');
-        t.done();
-        return;
-      }
-      var cursor = e.target.result;
-
-      switch(count) {
-        case 0:
-          assert_equals(cursor.value, "pie");
-          assert_equals(cursor.primaryKey, 1);
-          cursor.continue();
-          break;
-
-        case 1:
-          assert_equals(cursor.value, "pie");
-          assert_equals(cursor.primaryKey, 4);
-          cursor.continue();
-          break;
-
-        default:
-          assert_unreached("Unexpected count: " + count);
-      }
-
-      count++;
-    });
-    rq.onerror = t.unreached_func("unexpected error1")
-  },
-  document.title + " - within single key range, with several results"
-);
-
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exception-order.any.js b/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exception-order.any.js
new file mode 100644
index 00000000000..b4ea9ca5bb5
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exception-order.any.js
@@ -0,0 +1,332 @@
+// META: global=window,worker
+// META: title=IDBCursor.continuePrimaryKey() - Exception Orders
+// META: script=resources/support.js
+// META: timeout=long
+
+// Spec: http://w3c.github.io/IndexedDB/#dom-idbcursor-continueprimarykey
+
+'use strict';
+
+function setup_test_store(db) {
+  const records = [
+    {iKey: 'A', pKey: 1}, {iKey: 'A', pKey: 2}, {iKey: 'A', pKey: 3},
+    {iKey: 'A', pKey: 4}, {iKey: 'B', pKey: 5}, {iKey: 'B', pKey: 6},
+    {iKey: 'B', pKey: 7}, {iKey: 'C', pKey: 8}, {iKey: 'C', pKey: 9},
+    {iKey: 'D', pKey: 10}
+  ];
+
+  const store = db.createObjectStore('test', {keyPath: 'pKey'});
+  store.createIndex('idx', 'iKey');
+
+  for (let i = 0; i < records.length; i++) {
+    store.add(records[i]);
+  }
+
+  return store;
+}
+
+indexeddb_test(function(t, db, txn) {
+  const store = setup_test_store(db);
+  const cursor_rq = store.index('idx').openCursor();
+  let cursor;
+
+  cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+  cursor_rq.onsuccess = t.step_func((e) => {
+    cursor = e.target.result;
+    assert_true(!!cursor, 'acquire cursor');
+
+    store.deleteIndex('idx');
+  });
+  txn.oncomplete = t.step_func(() => {
+    assert_throws_dom('TransactionInactiveError', () => {
+      cursor.continuePrimaryKey('A', 4);
+    }, 'transaction-state check should precede deletion check');
+    t.done();
+  });
+}, null, 'TransactionInactiveError v.s. InvalidStateError(deleted index)');
+
+indexeddb_test(
+    function(t, db, txn) {
+      const store = setup_test_store(db);
+      const cursor_rq = store.openCursor();
+      let cursor;
+
+      cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+      cursor_rq.onsuccess = t.step_func((e) => {
+        cursor = e.target.result;
+        assert_true(!!cursor, 'acquire cursor');
+
+        db.deleteObjectStore('test');
+
+        assert_throws_dom('InvalidStateError', () => {
+          cursor.continuePrimaryKey('A', 4);
+        }, 'deletion check should precede index source check');
+        t.done();
+      });
+    },
+    null,
+    'InvalidStateError(deleted source) v.s. InvalidAccessError(incorrect source)');
+
+indexeddb_test(
+    function(t, db, txn) {
+      const store = setup_test_store(db);
+      const cursor_rq = store.index('idx').openCursor(null, 'nextunique');
+      let cursor;
+
+      cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+      cursor_rq.onsuccess = t.step_func((e) => {
+        cursor = e.target.result;
+        assert_true(!!cursor, 'acquire cursor');
+
+        store.deleteIndex('idx');
+
+        assert_throws_dom('InvalidStateError', () => {
+          cursor.continuePrimaryKey('A', 4);
+        }, 'deletion check should precede cursor direction check');
+        t.done();
+      });
+    },
+    null,
+    'InvalidStateError(deleted source) v.s. InvalidAccessError(incorrect direction)');
+
+indexeddb_test(
+    function(t, db, txn) {
+      const store = db.createObjectStore('test', {keyPath: 'pKey'});
+
+      store.add({iKey: 'A', pKey: 1});
+
+      const cursor_rq =
+          store.createIndex('idx', 'iKey').openCursor(null, 'nextunique');
+      let cursor;
+
+      cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+      cursor_rq.onsuccess = t.step_func((e) => {
+        if (e.target.result) {
+          cursor = e.target.result;
+          cursor.continue();
+          return;
+        }
+
+        assert_throws_dom('InvalidAccessError', () => {
+          cursor.continuePrimaryKey('A', 4);
+        }, 'direction check should precede got_value_flag check');
+        t.done();
+      });
+    },
+    null,
+    'InvalidAccessError(incorrect direction) v.s. InvalidStateError(iteration complete)');
+
+indexeddb_test(
+    function(t, db, txn) {
+      const store = db.createObjectStore('test', {keyPath: 'pKey'});
+
+      store.add({iKey: 'A', pKey: 1});
+
+      const cursor_rq =
+          store.createIndex('idx', 'iKey').openCursor(null, 'nextunique');
+      let cursor;
+
+      cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+      cursor_rq.onsuccess = t.step_func((e) => {
+        if (!cursor) {
+          cursor = e.target.result;
+          assert_true(!!cursor, 'acquire cursor');
+
+          cursor.continue();
+
+          assert_throws_dom('InvalidAccessError', () => {
+            cursor.continuePrimaryKey('A', 4);
+          }, 'direction check should precede iteration ongoing check');
+          t.done();
+        }
+      });
+    },
+    null,
+    'InvalidAccessError(incorrect direction) v.s. InvalidStateError(iteration ongoing)');
+
+indexeddb_test(
+    function(t, db, txn) {
+      const store = setup_test_store(db);
+      const cursor_rq = store.openCursor();
+      let cursor;
+
+      cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+      cursor_rq.onsuccess = t.step_func((e) => {
+        if (!cursor) {
+          cursor = e.target.result;
+          assert_true(!!cursor, 'acquire cursor');
+
+          cursor.continue();
+
+          assert_throws_dom('InvalidAccessError', () => {
+            cursor.continuePrimaryKey('A', 4);
+          }, 'index source check should precede iteration ongoing check');
+          t.done();
+        }
+      });
+    },
+    null,
+    'InvalidAccessError(incorrect source) v.s. InvalidStateError(iteration ongoing)');
+
+indexeddb_test(
+    function(t, db, txn) {
+      const store = db.createObjectStore('test', {keyPath: 'pKey'});
+
+      store.add({iKey: 'A', pKey: 1});
+
+      const cursor_rq = store.openCursor();
+      let cursor;
+
+      cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+      cursor_rq.onsuccess = t.step_func((e) => {
+        if (e.target.result) {
+          cursor = e.target.result;
+          cursor.continue();
+          return;
+        }
+
+        assert_throws_dom('InvalidAccessError', () => {
+          cursor.continuePrimaryKey('A', 4);
+        }, 'index source check should precede got_value_flag check');
+        t.done();
+      });
+    },
+    null,
+    'InvalidAccessError(incorrect source) v.s. InvalidStateError(iteration complete)');
+
+indexeddb_test(function(t, db, txn) {
+  const store = setup_test_store(db);
+  const cursor_rq = store.index('idx').openCursor();
+  let cursor;
+
+  cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+  cursor_rq.onsuccess = t.step_func((e) => {
+    if (!cursor) {
+      cursor = e.target.result;
+      assert_true(!!cursor, 'acquire cursor');
+
+      cursor.continue();
+
+      assert_throws_dom('InvalidStateError', () => {
+        cursor.continuePrimaryKey(null, 4);
+      }, 'iteration ongoing check should precede unset key check');
+      t.done();
+    }
+  });
+}, null, 'InvalidStateError(iteration ongoing) v.s. DataError(unset key)');
+
+indexeddb_test(function(t, db, txn) {
+  const store = db.createObjectStore('test', {keyPath: 'pKey'});
+
+  store.add({iKey: 'A', pKey: 1});
+
+  const cursor_rq = store.createIndex('idx', 'iKey').openCursor();
+  let cursor;
+
+  cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+  cursor_rq.onsuccess = t.step_func((e) => {
+    if (e.target.result) {
+      cursor = e.target.result;
+      cursor.continue();
+      return;
+    }
+
+    assert_throws_dom('InvalidStateError', () => {
+      cursor.continuePrimaryKey(null, 4);
+    }, 'got_value_flag check should precede unset key check');
+    t.done();
+  });
+}, null, 'InvalidStateError(iteration complete) v.s. DataError(unset key)');
+
+indexeddb_test(function(t, db, txn) {
+  const store = setup_test_store(db);
+  const cursor_rq = store.index('idx').openCursor();
+  let cursor;
+
+  cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+  cursor_rq.onsuccess = t.step_func((e) => {
+    cursor = e.target.result;
+    assert_true(!!cursor, 'acquire cursor');
+
+    assert_throws_dom('DataError', () => {
+      cursor.continuePrimaryKey(null, 4);
+    }, 'DataError is expected if key is unset.');
+    t.done();
+  });
+}, null, 'DataError(unset key)');
+
+indexeddb_test(function(t, db, txn) {
+  const store = setup_test_store(db);
+  const cursor_rq = store.index('idx').openCursor();
+  let cursor;
+
+  cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+  cursor_rq.onsuccess = t.step_func((e) => {
+    cursor = e.target.result;
+    assert_true(!!cursor, 'acquire cursor');
+
+    assert_throws_dom('DataError', () => {
+      cursor.continuePrimaryKey('A', null);
+    }, 'DataError is expected if primary key is unset.');
+    t.done();
+  });
+}, null, 'DataError(unset primary key)');
+
+indexeddb_test(function(t, db, txn) {
+  const store = setup_test_store(db);
+  const cursor_rq = store.index('idx').openCursor(IDBKeyRange.lowerBound('B'));
+  let cursor;
+
+  cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+  cursor_rq.onsuccess = t.step_func((e) => {
+    cursor = e.target.result;
+    assert_true(!!cursor, 'acquire cursor');
+
+    assert_equals(cursor.key, 'B', 'expected key');
+    assert_equals(cursor.primaryKey, 5, 'expected primary key');
+
+    assert_throws_dom('DataError', () => {
+      cursor.continuePrimaryKey('A', 6);
+    }, 'DataError is expected if key is lower then current one.');
+
+    assert_throws_dom('DataError', () => {
+      cursor.continuePrimaryKey('B', 5);
+    }, 'DataError is expected if primary key is equal to current one.');
+
+    assert_throws_dom('DataError', () => {
+      cursor.continuePrimaryKey('B', 4);
+    }, 'DataError is expected if primary key is lower than current one.');
+
+    t.done();
+  });
+}, null, 'DataError(keys are lower then current one) in \'next\' direction');
+
+indexeddb_test(function(t, db, txn) {
+  const store = setup_test_store(db);
+  const cursor_rq =
+      store.index('idx').openCursor(IDBKeyRange.upperBound('B'), 'prev');
+  let cursor;
+
+  cursor_rq.onerror = t.unreached_func('openCursor should succeed');
+  cursor_rq.onsuccess = t.step_func(function(e) {
+    cursor = e.target.result;
+    assert_true(!!cursor, 'acquire cursor');
+
+    assert_equals(cursor.key, 'B', 'expected key');
+    assert_equals(cursor.primaryKey, 7, 'expected primary key');
+
+    assert_throws_dom('DataError', () => {
+      cursor.continuePrimaryKey('C', 6);
+    }, 'DataError is expected if key is larger then current one.');
+
+    assert_throws_dom('DataError', () => {
+      cursor.continuePrimaryKey('B', 7);
+    }, 'DataError is expected if primary key is equal to current one.');
+
+    assert_throws_dom('DataError', () => {
+      cursor.continuePrimaryKey('B', 8);
+    }, 'DataError is expected if primary key is larger than current one.');
+
+    t.done();
+  });
+}, null, 'DataError(keys are larger then current one) in \'prev\' direction');
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exception-order.htm b/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exception-order.htm
deleted file mode 100644
index 477dabc60e8..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exception-order.htm
+++ /dev/null
@@ -1,380 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<meta name="timeout" content="long">
-<title>IDBCursor.continuePrimaryKey() - Exception Orders </title>
-<link rel="author" title="Mozilla" href="https://www.mozilla.org">
-<link rel="help" href="http://w3c.github.io/IndexedDB/#dom-idbcursor-continueprimarykey">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-
-<script>
-function setup_test_store(db) {
-  var records = [ { iKey: "A", pKey: 1 },
-                  { iKey: "A", pKey: 2 },
-                  { iKey: "A", pKey: 3 },
-                  { iKey: "A", pKey: 4 },
-                  { iKey: "B", pKey: 5 },
-                  { iKey: "B", pKey: 6 },
-                  { iKey: "B", pKey: 7 },
-                  { iKey: "C", pKey: 8 },
-                  { iKey: "C", pKey: 9 },
-                  { iKey: "D", pKey: 10 } ];
-
-    var store = db.createObjectStore("test", { keyPath: "pKey" });
-    var index = store.createIndex("idx", "iKey");
-
-    for(var i = 0; i < records.length; i++) {
-        store.add(records[i]);
-    }
-
-    return store;
-}
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = setup_test_store(db);
-        var index = store.index("idx");
-        var cursor_rq = index.openCursor();
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            cursor = e.target.result;
-            assert_true(!!cursor, "acquire cursor");
-
-            store.deleteIndex("idx");
-        });
-        txn.oncomplete = t.step_func(function() {
-            assert_throws_dom("TransactionInactiveError", function() {
-                cursor.continuePrimaryKey("A", 4);
-            }, "transaction-state check should precede deletion check");
-            t.done();
-        });
-    },
-    null,
-    "TransactionInactiveError v.s. InvalidStateError(deleted index)"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = setup_test_store(db);
-        var cursor_rq = store.openCursor();
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            cursor = e.target.result;
-            assert_true(!!cursor, "acquire cursor");
-
-            db.deleteObjectStore("test");
-
-            assert_throws_dom("InvalidStateError", function() {
-                cursor.continuePrimaryKey("A", 4);
-            }, "deletion check should precede index source check");
-            t.done();
-        });
-    },
-    null,
-    "InvalidStateError(deleted source) v.s. InvalidAccessError(incorrect source)"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = setup_test_store(db);
-        var index = store.index("idx");
-        var cursor_rq = index.openCursor(null, "nextunique");
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            cursor = e.target.result;
-            assert_true(!!cursor, "acquire cursor");
-
-            store.deleteIndex("idx");
-
-            assert_throws_dom("InvalidStateError", function() {
-              cursor.continuePrimaryKey("A", 4);
-            }, "deletion check should precede cursor direction check");
-            t.done();
-        });
-    },
-    null,
-    "InvalidStateError(deleted source) v.s. InvalidAccessError(incorrect direction)"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = db.createObjectStore("test", {keyPath:"pKey"});
-        var index = store.createIndex("idx", "iKey");
-
-        store.add({ iKey: "A", pKey: 1 });
-
-        var cursor_rq = index.openCursor(null, "nextunique");
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            if (e.target.result) {
-                cursor = e.target.result;
-                cursor.continue();
-                return;
-            }
-
-            assert_throws_dom("InvalidAccessError", function() {
-                cursor.continuePrimaryKey("A", 4);
-            }, "direction check should precede got_value_flag check");
-            t.done();
-        });
-    },
-    null,
-    "InvalidAccessError(incorrect direction) v.s. InvalidStateError(iteration complete)"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = db.createObjectStore("test", {keyPath:"pKey"});
-        var index = store.createIndex("idx", "iKey");
-
-        store.add({ iKey: "A", pKey: 1 });
-
-        var cursor_rq = index.openCursor(null, "nextunique");
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            if (!cursor) {
-                cursor = e.target.result;
-                assert_true(!!cursor, "acquire cursor");
-
-                cursor.continue();
-
-                assert_throws_dom("InvalidAccessError", function() {
-                    cursor.continuePrimaryKey("A", 4);
-                }, "direction check should precede iteration ongoing check");
-                t.done();
-            }
-        });
-    },
-    null,
-    "InvalidAccessError(incorrect direction) v.s. InvalidStateError(iteration ongoing)"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = setup_test_store(db);
-        var cursor_rq = store.openCursor();
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            if (!cursor) {
-                cursor = e.target.result;
-                assert_true(!!cursor, "acquire cursor");
-
-                cursor.continue();
-
-                assert_throws_dom("InvalidAccessError", function() {
-                    cursor.continuePrimaryKey("A", 4);
-                }, "index source check should precede iteration ongoing check");
-                t.done();
-            }
-        });
-    },
-    null,
-    "InvalidAccessError(incorrect source) v.s. InvalidStateError(iteration ongoing)"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = db.createObjectStore("test", {keyPath:"pKey"});
-
-        store.add({ iKey: "A", pKey: 1 });
-
-        var cursor_rq = store.openCursor();
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            if (e.target.result) {
-                cursor = e.target.result;
-                cursor.continue();
-                return;
-            }
-
-            assert_throws_dom("InvalidAccessError", function() {
-                cursor.continuePrimaryKey("A", 4);
-            }, "index source check should precede got_value_flag check");
-            t.done();
-        });
-    },
-    null,
-    "InvalidAccessError(incorrect source) v.s. InvalidStateError(iteration complete)"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = setup_test_store(db);
-        var index = store.index("idx");
-        var cursor_rq = index.openCursor();
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            if (!cursor) {
-                cursor = e.target.result;
-                assert_true(!!cursor, "acquire cursor");
-
-                cursor.continue();
-
-                assert_throws_dom("InvalidStateError", function() {
-                    cursor.continuePrimaryKey(null, 4);
-                }, "iteration ongoing check should precede unset key check");
-                t.done();
-            }
-        });
-    },
-    null,
-    "InvalidStateError(iteration ongoing) v.s. DataError(unset key)"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = db.createObjectStore("test", {keyPath:"pKey"});
-        var index = store.createIndex("idx", "iKey");
-
-        store.add({ iKey: "A", pKey: 1 });
-
-        var cursor_rq = index.openCursor();
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            if (e.target.result) {
-                cursor = e.target.result;
-                cursor.continue();
-                return;
-            }
-
-            assert_throws_dom("InvalidStateError", function() {
-                cursor.continuePrimaryKey(null, 4);
-            }, "got_value_flag check should precede unset key check");
-            t.done();
-        });
-    },
-    null,
-    "InvalidStateError(iteration complete) v.s. DataError(unset key)"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = setup_test_store(db);
-        var index = store.index("idx");
-        var cursor_rq = index.openCursor();
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            cursor = e.target.result;
-            assert_true(!!cursor, "acquire cursor");
-
-            assert_throws_dom("DataError", function() {
-                cursor.continuePrimaryKey(null, 4);
-            }, "DataError is expected if key is unset.");
-            t.done();
-        });
-    },
-    null,
-    "DataError(unset key)"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = setup_test_store(db);
-        var index = store.index("idx");
-        var cursor_rq = index.openCursor();
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            cursor = e.target.result;
-            assert_true(!!cursor, "acquire cursor");
-
-            assert_throws_dom("DataError", function() {
-                cursor.continuePrimaryKey("A", null);
-            }, "DataError is expected if primary key is unset.");
-            t.done();
-        });
-    },
-    null,
-    "DataError(unset primary key)"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = setup_test_store(db);
-        var index = store.index("idx");
-        var cursor_rq = index.openCursor(IDBKeyRange.lowerBound("B"));
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            cursor = e.target.result;
-            assert_true(!!cursor, "acquire cursor");
-
-            assert_equals(cursor.key, "B", "expected key");
-            assert_equals(cursor.primaryKey, 5, "expected primary key");
-
-            assert_throws_dom("DataError", function() {
-                cursor.continuePrimaryKey("A", 6);
-            }, "DataError is expected if key is lower then current one.");
-
-            assert_throws_dom("DataError", function() {
-                cursor.continuePrimaryKey("B", 5);
-            }, "DataError is expected if primary key is equal to current one.");
-
-            assert_throws_dom("DataError", function() {
-                cursor.continuePrimaryKey("B", 4);
-            }, "DataError is expected if primary key is lower than current one.");
-
-            t.done();
-        });
-    },
-    null,
-    "DataError(keys are lower then current one) in 'next' direction"
-);
-
-indexeddb_test(
-    function(t, db, txn) {
-        var store = setup_test_store(db);
-        var index = store.index("idx");
-        var cursor_rq = index.openCursor(IDBKeyRange.upperBound("B"), "prev");
-        var cursor;
-
-        cursor_rq.onerror = t.unreached_func('openCursor should succeed');
-        cursor_rq.onsuccess = t.step_func(function(e) {
-            cursor = e.target.result;
-            assert_true(!!cursor, "acquire cursor");
-
-            assert_equals(cursor.key, "B", "expected key");
-            assert_equals(cursor.primaryKey, 7, "expected primary key");
-
-            assert_throws_dom("DataError", function() {
-                cursor.continuePrimaryKey("C", 6);
-            }, "DataError is expected if key is larger then current one.");
-
-            assert_throws_dom("DataError", function() {
-                cursor.continuePrimaryKey("B", 7);
-            }, "DataError is expected if primary key is equal to current one.");
-
-            assert_throws_dom("DataError", function() {
-                cursor.continuePrimaryKey("B", 8);
-            }, "DataError is expected if primary key is larger than current one.");
-
-            t.done();
-        });
-    },
-    null,
-    "DataError(keys are larger then current one) in 'prev' direction"
-);
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exceptions.any.js b/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exceptions.any.js
new file mode 100644
index 00000000000..581aff2300f
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exceptions.any.js
@@ -0,0 +1,107 @@
+// META: global=window,worker
+// META: title=IndexedDB: IDBCursor continuePrimaryKey() exception throwing
+// META: script=resources/support.js
+
+// Spec: https://w3c.github.io/IndexedDB/#dom-idbcursor-continueprimarykey
+
+'use strict';
+
+async_test(t => {
+  const dbname = location + '-' + t.name;
+  const del = indexedDB.deleteDatabase(dbname);
+  del.onerror = t.unreached_func('deleteDatabase should succeed');
+  const open = indexedDB.open(dbname);
+  open.onerror = t.unreached_func('open should succeed');
+
+  open.onupgradeneeded = t.step_func((e) => {
+    const db = open.result;
+    t.add_cleanup((e) => {
+      db.close();
+      indexedDB.deleteDatabase(db.name);
+    });
+    const store = db.createObjectStore('store');
+    store.put('a', 1).onerror = t.unreached_func('put should not fail');
+    const request = store.openCursor();
+    request.onerror = t.unreached_func('openCursor should not fail');
+    request.onsuccess = t.step_func((e) => {
+      const cursor = request.result;
+      assert_class_string(
+          cursor, 'IDBCursorWithValue', 'result should be a cursor');
+
+      assert_throws_dom('InvalidAccessError', function() {
+        cursor.continuePrimaryKey(2, 2);
+      }, 'continuePrimaryKey() should throw if source is not an index');
+    });
+  });
+
+  open.onsuccess = t.step_func((e) => {
+    const db = open.result;
+    db.close();
+    t.done();
+  });
+}, 'IDBCursor continuePrimaryKey() on object store cursor');
+
+const testcases = [
+  {
+    direction: 'nextunique',
+    expected_key: 1,
+    expected_primaryKey: 'a',
+    continue_key: 2,
+    continue_primaryKey: 'a'
+  },
+  {
+    direction: 'prevunique',
+    expected_key: 3,
+    expected_primaryKey: 'a',
+    continue_key: 2,
+    continue_primaryKey: 'a'
+  }
+];
+
+testcases.forEach(function(testcase) {
+  async_test(t => {
+    const dbname = location + '-' + t.name;
+    const del = indexedDB.deleteDatabase(dbname);
+    del.onerror = t.unreached_func('deleteDatabase should succeed');
+    const open = indexedDB.open(dbname);
+    open.onerror = t.unreached_func('open should succeed');
+
+    open.onupgradeneeded = t.step_func(() => {
+      const db = open.result;
+      t.add_cleanup((e) => {
+        db.close();
+        indexedDB.deleteDatabase(db.name);
+      });
+      const store = db.createObjectStore('store', {keyPath: 'pk'});
+      const index = store.createIndex('index', 'ik', {multiEntry: true});
+      store.put({pk: 'a', ik: [1, 2, 3]}).onerror =
+          t.unreached_func('put should not fail');
+      store.put({pk: 'b', ik: [1, 2, 3]}).onerror =
+          t.unreached_func('put should not fail');
+      const request = index.openKeyCursor(null, testcase.direction);
+      request.onerror = t.unreached_func('openCursor should not fail');
+      request.onsuccess = t.step_func((e) => {
+        const cursor = request.result;
+        assert_class_string(cursor, 'IDBCursor', 'result should be a cursor');
+        assert_equals(
+            cursor.direction, testcase.direction,
+            'direction should be as specified');
+        assert_equals(cursor.key, testcase.expected_key, 'key should match');
+        assert_equals(
+            cursor.primaryKey, testcase.expected_primaryKey,
+            'primaryKey should match');
+
+        assert_throws_dom('InvalidAccessError', () => {
+          cursor.continuePrimaryKey(
+              testcase.continue_key, testcase.continue_primaryKey);
+        }, 'continuePrimaryKey() should throw if direction is unique');
+      });
+    });
+
+    open.onsuccess = t.step_func(() => {
+      const db = open.result;
+      db.close();
+      t.done();
+    });
+  }, 'IDBCursor continuePrimaryKey() on "' + testcase.direction + '" cursor');
+});
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exceptions.htm b/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exceptions.htm
deleted file mode 100644
index 862c9c951b5..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey-exceptions.htm
+++ /dev/null
@@ -1,107 +0,0 @@
-<!doctype html>
-<meta charset="utf-8" />
-<title>IndexedDB: IDBCursor continuePrimaryKey() exception throwing</title>
-<link rel="help"
-      href="https://w3c.github.io/IndexedDB/#dom-idbcursor-continueprimarykey" />
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script>
-
-async_test(function(t) {
-    var dbname = document.location + '-' + t.name;
-    var del = indexedDB.deleteDatabase(dbname);
-    del.onerror = t.unreached_func('deleteDatabase should succeed');
-    var open = indexedDB.open(dbname);
-    open.onerror = t.unreached_func('open should succeed');
-
-    open.onupgradeneeded = t.step_func(function() {
-        var db = open.result;
-        t.add_cleanup(function() {
-            db.close();
-            indexedDB.deleteDatabase(db.name);
-        });
-        var store = db.createObjectStore('store');
-        store.put('a', 1).onerror = t.unreached_func('put should not fail');
-        var request = store.openCursor();
-        request.onerror = t.unreached_func('openCursor should not fail');
-        request.onsuccess = t.step_func(function() {
-            var cursor = request.result;
-            assert_class_string(cursor, 'IDBCursorWithValue',
-                'result should be a cursor');
-
-            assert_throws_dom('InvalidAccessError', function() {
-                cursor.continuePrimaryKey(2, 2);
-            }, 'continuePrimaryKey() should throw if source is not an index');
-        });
-    });
-
-    open.onsuccess = t.step_func(function() {
-        var db = open.result;
-        db.close();
-        t.done();
-    });
-
-}, 'IDBCursor continuePrimaryKey() on object store cursor');
-
-[
-    {
-        direction: 'nextunique',
-        expected_key: 1, expected_primaryKey: 'a',
-        continue_key: 2, continue_primaryKey: 'a'
-    },
-    {
-        direction: 'prevunique',
-        expected_key: 3, expected_primaryKey: 'a',
-        continue_key: 2, continue_primaryKey: 'a'
-    }
-].forEach(function(testcase) {
-    async_test(function(t) {
-        var dbname = document.location + '-' + t.name;
-        var del = indexedDB.deleteDatabase(dbname);
-        del.onerror = t.unreached_func('deleteDatabase should succeed');
-        var open = indexedDB.open(dbname);
-        open.onerror = t.unreached_func('open should succeed');
-
-        open.onupgradeneeded = t.step_func(function() {
-            var db = open.result;
-            t.add_cleanup(function() {
-                db.close();
-                indexedDB.deleteDatabase(db.name);
-            });
-            var store = db.createObjectStore('store', {keyPath: 'pk'});
-            var index = store.createIndex('index', 'ik', {multiEntry: true});
-            store.put({pk: 'a', ik: [1,2,3]}).onerror =
-            t.unreached_func('put should not fail');
-            store.put({pk: 'b', ik: [1,2,3]}).onerror =
-            t.unreached_func('put should not fail');
-            var request = index.openKeyCursor(null, testcase.direction);
-            request.onerror = t.unreached_func('openCursor should not fail');
-            request.onsuccess = t.step_func(function() {
-                var cursor = request.result;
-                assert_class_string(cursor, 'IDBCursor',
-                    'result should be a cursor');
-                assert_equals(cursor.direction, testcase.direction,
-                    'direction should be as specified');
-                assert_equals(cursor.key, testcase.expected_key,
-                    'key should match');
-                assert_equals(cursor.primaryKey, testcase.expected_primaryKey,
-                    'primaryKey should match');
-
-                assert_throws_dom('InvalidAccessError', function() {
-                    cursor.continuePrimaryKey(
-                        testcase.continue_key,
-                        testcase.continue_primaryKey);
-                }, 'continuePrimaryKey() should throw if direction is unique');
-            });
-        });
-
-        open.onsuccess = t.step_func(function() {
-            var db = open.result;
-            db.close();
-            t.done();
-        });
-
-    }, 'IDBCursor continuePrimaryKey() on "' + testcase.direction + '" cursor');
-});
-
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey.any.js b/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey.any.js
new file mode 100644
index 00000000000..38ab750e36e
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey.any.js
@@ -0,0 +1,199 @@
+// META: global=window,worker
+// META: title=IndexedDB: IDBCursor method continuePrimaryKey()
+// META: script=resources/support.js
+
+// Spec: http://w3c.github.io/IndexedDB/#dom-idbcursor-continueprimarykey
+
+'use strict';
+
+indexeddb_test(
+    (t, db, txn) => {
+      const store = db.createObjectStore('store');
+      const index = store.createIndex('index', 'indexKey', {multiEntry: true});
+
+      store.put({indexKey: ['a', 'b']}, 1);
+      store.put({indexKey: ['a', 'b']}, 2);
+      store.put({indexKey: ['a', 'b']}, 3);
+      store.put({indexKey: ['b']}, 4);
+
+      const expectedIndexEntries = [
+        {key: 'a', primaryKey: 1},
+        {key: 'a', primaryKey: 2},
+        {key: 'a', primaryKey: 3},
+        {key: 'b', primaryKey: 1},
+        {key: 'b', primaryKey: 2},
+        {key: 'b', primaryKey: 3},
+        {key: 'b', primaryKey: 4},
+      ];
+
+      const request = index.openCursor();
+      request.onerror = t.unreached_func('IDBIndex.openCursor should not fail');
+      request.onsuccess = t.step_func(() => {
+        const cursor = request.result;
+        const expectedEntry = expectedIndexEntries.shift();
+        if (expectedEntry) {
+          assert_equals(
+              cursor.key, expectedEntry.key,
+              'The index entry keys should reflect the object store contents');
+          assert_equals(
+              cursor.primaryKey, expectedEntry.primaryKey,
+              'The index entry primary keys should reflect the object store ' +
+                  'contents');
+          cursor.continue();
+        } else {
+          assert_equals(
+              cursor, null,
+              'The index should not have entries that do not reflect the ' +
+                  'object store contents');
+        }
+      });
+    },
+    (t, db) => {
+      const testCases = [
+        // Continuing index key.
+        {
+          call: cursor => {
+            cursor.continue();
+          },
+          result: {key: 'a', primaryKey: 2}
+        },
+        {
+          call: cursor => {
+            cursor.continue('a');
+          },
+          exception: 'DataError'
+        },
+        {
+          call: cursor => {
+            cursor.continue('b');
+          },
+          result: {key: 'b', primaryKey: 1}
+        },
+        {
+          call: cursor => {
+            cursor.continue('c');
+          },
+          result: null
+        },
+
+        // Called w/ index key and primary key.
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey('a', 3);
+          },
+          result: {key: 'a', primaryKey: 3}
+        },
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey('a', 4);
+          },
+          result: {key: 'b', primaryKey: 1}
+        },
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey('b', 1);
+          },
+          result: {key: 'b', primaryKey: 1}
+        },
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey('b', 4);
+          },
+          result: {key: 'b', primaryKey: 4}
+        },
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey('b', 5);
+          },
+          result: null
+        },
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey('c', 1);
+          },
+          result: null
+        },
+
+        // Called w/ primary key but w/o index key.
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey(null, 1);
+          },
+          exception: 'DataError'
+        },
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey(null, 2);
+          },
+          exception: 'DataError'
+        },
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey(null, 3);
+          },
+          exception: 'DataError'
+        },
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey(null, 4);
+          },
+          exception: 'DataError'
+        },
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey(null, 5);
+          },
+          exception: 'DataError'
+        },
+
+        // Called w/ index key but w/o primary key.
+        {
+          call: cursor => {
+            cursor.continuePrimaryKey('a', null);
+          },
+          exception: 'DataError'
+        },
+      ];
+
+      const verifyContinueCalls = () => {
+        if (!testCases.length) {
+          t.done();
+          return;
+        }
+
+        const testCase = testCases.shift();
+
+        const txn = db.transaction('store', 'readonly');
+        txn.oncomplete = t.step_func(verifyContinueCalls);
+
+        const request = txn.objectStore('store').index('index').openCursor();
+        let calledContinue = false;
+        request.onerror =
+            t.unreached_func('IDBIndex.openCursor should not fail');
+        request.onsuccess = t.step_func(() => {
+          const cursor = request.result;
+          if (calledContinue) {
+            if (testCase.result) {
+              assert_equals(
+                  cursor.key, testCase.result.key,
+                  `${testCase.call.toString()} - result key`);
+              assert_equals(
+                  cursor.primaryKey, testCase.result.primaryKey,
+                  `${testCase.call.toString()} - result primary key`);
+            } else {
+              assert_equals(cursor, null);
+            }
+          } else {
+            calledContinue = true;
+            if ('exception' in testCase) {
+              assert_throws_dom(testCase.exception, () => {
+                testCase.call(cursor);
+              }, testCase.call.toString());
+            } else {
+              testCase.call(cursor);
+            }
+          }
+        });
+      };
+      verifyContinueCalls();
+    });
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey.htm b/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey.htm
deleted file mode 100644
index b45bba7c221..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-continuePrimaryKey.htm
+++ /dev/null
@@ -1,134 +0,0 @@
-<!doctype html>
-<meta charset="utf8">
-<title>IndexedDB: IDBCursor method continuePrimaryKey()</title>
-<link rel="help"
-      href="http://w3c.github.io/IndexedDB/#dom-idbcursor-continueprimarykey">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-
-<script>
-'use strict';
-
-indexeddb_test(
-    (t, db, txn) => {
-      const store = db.createObjectStore('store');
-      const index = store.createIndex('index', 'indexKey', {multiEntry: true});
-
-      store.put({indexKey: ['a', 'b']}, 1);
-      store.put({indexKey: ['a', 'b']}, 2);
-      store.put({indexKey: ['a', 'b']}, 3);
-      store.put({indexKey: ['b']}, 4);
-
-      const expectedIndexEntries = [
-        {key: "a", primaryKey: 1},
-        {key: "a", primaryKey: 2},
-        {key: "a", primaryKey: 3},
-        {key: "b", primaryKey: 1},
-        {key: "b", primaryKey: 2},
-        {key: "b", primaryKey: 3},
-        {key: "b", primaryKey: 4},
-      ];
-
-      const request = index.openCursor();
-      request.onerror = t.unreached_func('IDBIndex.openCursor should not fail');
-      request.onsuccess = t.step_func(() => {
-        const cursor = request.result;
-        const expectedEntry = expectedIndexEntries.shift();
-        if (expectedEntry) {
-          assert_equals(cursor.key, expectedEntry.key,
-              'The index entry keys should reflect the object store contents');
-          assert_equals(cursor.primaryKey, expectedEntry.primaryKey,
-              'The index entry primary keys should reflect the object store ' +
-              'contents');
-          cursor.continue();
-        } else {
-          assert_equals(cursor, null,
-              'The index should not have entries that do not reflect the ' +
-              'object store contents');
-        }
-      });
-    },
-    (t, db) => {
-      const testCases = [
-        // Continuing index key
-        { call: cursor => { cursor.continue(); },
-          result: { key: "a", primaryKey: 2 } },
-        { call: cursor => { cursor.continue('a'); },
-          exception: 'DataError' },
-        { call: cursor => { cursor.continue('b'); },
-          result: { key: "b", primaryKey: 1 } },
-        { call: cursor => { cursor.continue('c'); }, result: null },
-
-        // Called w/ index key and primary key:
-        { call: cursor => { cursor.continuePrimaryKey('a', 3); },
-          result: { key: 'a', primaryKey: 3 } },
-        { call: cursor => { cursor.continuePrimaryKey('a', 4); },
-          result: { key: 'b', primaryKey: 1 } },
-        { call: cursor => { cursor.continuePrimaryKey('b', 1); },
-          result: {key: 'b', primaryKey: 1} },
-        { call: cursor => { cursor.continuePrimaryKey('b', 4); },
-          result: {key: 'b', primaryKey: 4} },
-        { call: cursor => { cursor.continuePrimaryKey('b', 5); },
-          result: null },
-        { call: cursor => { cursor.continuePrimaryKey('c', 1); },
-          result: null },
-
-        // Called w/ primary key but w/o index key
-        { call: cursor => { cursor.continuePrimaryKey(null, 1); },
-          exception: 'DataError' },
-        { call: cursor => { cursor.continuePrimaryKey(null, 2); },
-          exception: 'DataError' },
-        { call: cursor => { cursor.continuePrimaryKey(null, 3); },
-          exception: 'DataError' },
-        { call: cursor => { cursor.continuePrimaryKey(null, 4); },
-          exception: 'DataError' },
-        { call: cursor => { cursor.continuePrimaryKey(null, 5); },
-          exception: 'DataError' },
-
-        // Called w/ index key but w/o primary key
-        { call: cursor => { cursor.continuePrimaryKey('a', null); },
-          exception: 'DataError' },
-      ];
-
-      const verifyContinueCalls = () => {
-        if (!testCases.length) {
-          t.done();
-          return;
-        }
-
-        const testCase = testCases.shift();
-
-        const txn = db.transaction('store', 'readonly');
-        txn.oncomplete = t.step_func(verifyContinueCalls);
-
-        const request = txn.objectStore('store').index('index').openCursor();
-        let calledContinue = false;
-        request.onerror =
-            t.unreached_func('IDBIndex.openCursor should not fail');
-        request.onsuccess = t.step_func(() => {
-          const cursor = request.result;
-          if (calledContinue) {
-            if (testCase.result) {
-              assert_equals(cursor.key, testCase.result.key,
-                  `${testCase.call.toString()} - result key`);
-              assert_equals(cursor.primaryKey, testCase.result.primaryKey,
-                  `${testCase.call.toString()} - result primary key`);
-            } else {
-              assert_equals(cursor, null);
-            }
-          } else {
-            calledContinue = true;
-            if('exception' in testCase) {
-              assert_throws_dom(
-                  testCase.exception, () => { testCase.call(cursor); },
-                  testCase.call.toString());
-            } else {
-              testCase.call(cursor);
-            }
-          }
-        });
-      };
-      verifyContinueCalls();
-    });
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-delete-exception-order.any.js b/tests/wpt/tests/IndexedDB/idbcursor-delete-exception-order.any.js
new file mode 100644
index 00000000000..84b7c867d1b
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-delete-exception-order.any.js
@@ -0,0 +1,72 @@
+// META: global=window,worker
+// META: title=IndexedDB: IDBCursor delete() Exception Ordering
+// META: script=resources/support.js
+
+// Spec: https://w3c.github.io/IndexedDB/#dom-idbcursor-delete
+
+'use strict';
+
+indexeddb_test(
+    (t, db) => {
+      const s = db.createObjectStore('s');
+      s.put('value', 'key');
+    },
+    (t, db) => {
+      const s = db.transaction('s', 'readonly').objectStore('s');
+      const r = s.openCursor();
+      r.onsuccess = t.step_func(() => {
+        r.onsuccess = null;
+        const cursor = r.result;
+        setTimeout(
+            t.step_func(() => {
+              assert_throws_dom(
+                  'TransactionInactiveError', () => cursor.delete(),
+                  '"Transaction inactive" check (TransactionInactiveError)' +
+                      'should precede "read only" check(ReadOnlyError)');
+              t.done();
+            }),
+            0);
+      });
+    },
+    'IDBCursor.delete exception order: TransactionInactiveError vs. ReadOnlyError');
+
+indexeddb_test(
+    (t, db) => {
+      const s = db.createObjectStore('s');
+      s.put('value', 'key');
+    },
+    (t, db) => {
+      const s = db.transaction('s', 'readonly').objectStore('s');
+      const r = s.openCursor();
+      r.onsuccess = t.step_func(() => {
+        r.onsuccess = null;
+        const cursor = r.result;
+        cursor.continue();
+        assert_throws_dom(
+            'ReadOnlyError', () => cursor.delete(),
+            '"Read only" check (ReadOnlyError) should precede ' +
+                '"got value flag" (InvalidStateError) check');
+        t.done();
+      });
+    },
+    'IDBCursor.delete exception order: ReadOnlyError vs. InvalidStateError #1');
+
+indexeddb_test(
+    (t, db) => {
+      const s = db.createObjectStore('s');
+      s.put('value', 'key');
+    },
+    (t, db) => {
+      const s = db.transaction('s', 'readonly').objectStore('s');
+      const r = s.openKeyCursor();
+      r.onsuccess = t.step_func(() => {
+        r.onsuccess = null;
+        const cursor = r.result;
+        assert_throws_dom(
+            'ReadOnlyError', () => cursor.delete(),
+            '"Read only" check (ReadOnlyError) should precede ' +
+                '"key only flag" (InvalidStateError) check');
+        t.done();
+      });
+    },
+    'IDBCursor.delete exception order: ReadOnlyError vs. InvalidStateError #2');
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-delete-exception-order.htm b/tests/wpt/tests/IndexedDB/idbcursor-delete-exception-order.htm
deleted file mode 100644
index 72d56574971..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-delete-exception-order.htm
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<title>IndexedDB: IDBCursor delete() Exception Ordering</title>
-<meta charset=utf-8>
-<link rel="help" href="https://w3c.github.io/IndexedDB/#dom-idbcursor-delete">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-<script>
-
-indexeddb_test(
-  (t, db) => {
-    const s = db.createObjectStore('s');
-    s.put('value', 'key');
-  },
-  (t, db) => {
-    const s = db.transaction('s', 'readonly').objectStore('s');
-    const r = s.openCursor();
-    r.onsuccess = t.step_func(() => {
-      r.onsuccess = null;
-      const cursor = r.result;
-      setTimeout(t.step_func(() => {
-        assert_throws_dom('TransactionInactiveError', () => {
-          cursor.delete();
-        }, '"Transaction inactive" check (TransactionInactivError) ' +
-           'should precede "read only" check (ReadOnlyError)');
-        t.done();
-      }), 0);
-    });
-  },
-  'IDBCursor.delete exception order: TransactionInactiveError vs. ReadOnlyError'
-);
-
-indexeddb_test(
-  (t, db) => {
-    const s = db.createObjectStore('s');
-    s.put('value', 'key');
-  },
-  (t, db) => {
-    const s = db.transaction('s', 'readonly').objectStore('s');
-    const r = s.openCursor();
-    r.onsuccess = t.step_func(() => {
-      r.onsuccess = null;
-      const cursor = r.result;
-      cursor.continue();
-      assert_throws_dom('ReadOnlyError', () => {
-        cursor.delete();
-      }, '"Read only" check (ReadOnlyError) should precede ' +
-         '"got value flag" (InvalidStateError) check');
-      t.done();
-    });
-  },
-  'IDBCursor.delete exception order: ReadOnlyError vs. InvalidStateError #1'
-);
-
-indexeddb_test(
-  (t, db) => {
-    const s = db.createObjectStore('s');
-    s.put('value', 'key');
-  },
-  (t, db) => {
-    const s = db.transaction('s', 'readonly').objectStore('s');
-    const r = s.openKeyCursor();
-    r.onsuccess = t.step_func(() => {
-      r.onsuccess = null;
-      const cursor = r.result;
-      assert_throws_dom('ReadOnlyError', () => {
-        cursor.delete();
-      }, '"Read only" check (ReadOnlyError) should precede ' +
-         '"key only flag" (InvalidStateError) check');
-      t.done();
-    });
-  },
-  'IDBCursor.delete exception order: ReadOnlyError vs. InvalidStateError #2'
-);
-
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-iterating-update.any.js b/tests/wpt/tests/IndexedDB/idbcursor-iterating-update.any.js
new file mode 100644
index 00000000000..c88b4124669
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-iterating-update.any.js
@@ -0,0 +1,57 @@
+// META: global=window,worker
+// META: title=IndexedDB: Index iteration with cursor updates/deletes
+// META: script=resources/support.js
+
+'use strict';
+
+const objStoreValues = [
+  {name: 'foo', id: 1},
+  {name: 'bar', id: 2},
+  {name: 'foo', id: 3},
+  {name: 'bar', id: 4},
+];
+
+const objStoreValuesByIndex = [
+  objStoreValues[1],
+  objStoreValues[3],
+  objStoreValues[0],
+  objStoreValues[2],
+];
+
+const functionsThatShouldNotAffectIteration = [
+  (cursor) => cursor.update({}),
+  (cursor) => cursor.delete(),
+];
+
+functionsThatShouldNotAffectIteration.forEach(
+    (func) => indexeddb_test(
+        (t, db) => {
+          const objStore = db.createObjectStore('items', {autoIncrement: true});
+          objStore.createIndex('name', 'name', {unique: false});
+          objStoreValues.forEach((value) => objStore.add(value));
+        },
+        (t, db) => {
+          const txn = db.transaction('items', 'readwrite');
+          const objStore = txn.objectStore('items');
+          const nameIndex = objStore.index('name');
+
+          const cursorValues = [];
+          nameIndex.openCursor().onsuccess = (evt) => {
+            const cursor = evt.target.result;
+            if (cursor) {
+              func(cursor);
+              cursorValues.push(cursor.value);
+              cursor.continue();
+            } else {
+              assert_equals(
+                  cursorValues.length, 4,
+                  `Cursor should iterate over 4 records`);
+
+              cursorValues.forEach((value, i) => {
+                assert_object_equals(value, objStoreValuesByIndex[i]);
+              });
+              t.done();
+            }
+          };
+        },
+        `Calling ${func} doesn't affect index iteration`));
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-iterating-update.htm b/tests/wpt/tests/IndexedDB/idbcursor-iterating-update.htm
deleted file mode 100644
index 00fdb5a0c00..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-iterating-update.htm
+++ /dev/null
@@ -1,58 +0,0 @@
-<!doctype html>
-<meta charset=utf-8>
-<title>IndexedDB: Index iteration with cursor updates/deletes</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-<script>
-const objStoreValues = [
-  {name: 'foo', id: 1},
-  {name: 'bar', id: 2},
-  {name: 'foo', id: 3},
-  {name: 'bar', id: 4},
-];
-
-const objStoreValuesByIndex = [
-  objStoreValues[1],
-  objStoreValues[3],
-  objStoreValues[0],
-  objStoreValues[2],
-];
-
-const functionsThatShouldNotAffectIteration = [
-  cursor => cursor.update({}),
-  cursor => cursor.delete(),
-];
-
-functionsThatShouldNotAffectIteration.forEach((func) => indexeddb_test(
-  (t, db) => {
-    const objStore = db.createObjectStore('items', {autoIncrement: true});
-    objStore.createIndex('name', 'name', {unique: false});
-    objStoreValues.forEach((value) => objStore.add(value));
-  },
-  (t, db) => {
-    const txn = db.transaction('items', 'readwrite');
-    const objStore = txn.objectStore('items');
-    const nameIndex = objStore.index('name');
-
-    const cursorValues = [];
-    nameIndex.openCursor().onsuccess = (evt) => {
-      const cursor = evt.target.result;
-      if (cursor) {
-        func(cursor);
-        cursorValues.push(cursor.value);
-        cursor.continue();
-      } else {
-        assert_equals(cursorValues.length, 4,
-            `Cursor should iterate over 4 records`);
-
-        cursorValues.forEach((value, i) => {
-          assert_object_equals(value, objStoreValuesByIndex[i]);
-        });
-        t.done();
-      }
-    }
-  },
-  `Calling ${func} doesn't affect index iteration`
-));
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-key.any.js b/tests/wpt/tests/IndexedDB/idbcursor-key.any.js
new file mode 100644
index 00000000000..d8d2848377e
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-key.any.js
@@ -0,0 +1,43 @@
+// META: global=window,worker
+// META: title=IDBCursor.key
+// META: script=resources/support.js
+
+'use strict';
+
+function cursor_key(key) {
+  async_test(t => {
+    let db;
+    const open_rq = createdb(t);
+    open_rq.onupgradeneeded = function(e) {
+      db = e.target.result;
+      const objStore = db.createObjectStore('test');
+      objStore.add('data', key);
+    };
+
+    open_rq.onsuccess = t.step_func((e) => {
+      const cursor_rq =
+          db.transaction('test', 'readonly').objectStore('test').openCursor();
+
+      cursor_rq.onsuccess = t.step_func((e) => {
+        const cursor = e.target.result;
+        assert_equals(cursor.value, 'data', 'prerequisite cursor.value');
+
+        assert_key_equals(cursor.key, key, 'key');
+        assert_readonly(cursor, 'key');
+
+        if (key instanceof Array) {
+          cursor.key.push('new');
+          key.push('new');
+
+          assert_key_equals(cursor.key, key, 'key after array push');
+        }
+
+        t.done();
+      });
+    });
+  });
+}
+
+cursor_key(1);
+cursor_key('key');
+cursor_key(['my', 'key']);
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-key.htm b/tests/wpt/tests/IndexedDB/idbcursor-key.htm
deleted file mode 100644
index c1dbbe15038..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-key.htm
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<title>IDBCursor.key</title>
-<link rel="author" href="mailto:odinho@opera.com" title="Odin Hørthe Omdal">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-
-<script>
-
-    function cursor_key(key)
-    {
-        var db,
-          t = async_test(document.title + " - " + key);
-
-        var open_rq = createdb(t);
-        open_rq.onupgradeneeded = function(e) {
-            db = e.target.result;
-            var objStore = db.createObjectStore("test");
-
-            objStore.add("data", key);
-        };
-
-        open_rq.onsuccess = t.step_func(function(e) {
-            var cursor_rq = db.transaction("test", "readonly")
-                              .objectStore("test")
-                              .openCursor();
-
-            cursor_rq.onsuccess = t.step_func(function(e) {
-                var cursor = e.target.result;
-                assert_equals(cursor.value, "data", "prequisite cursor.value");
-
-                assert_key_equals(cursor.key, key, 'key');
-                assert_readonly(cursor, 'key');
-
-                if (key instanceof Array) {
-                    cursor.key.push("new");
-                    key.push("new");
-
-                    assert_key_equals(cursor.key, key, 'key after array push');
-
-                    // But we can not change key (like readonly, just a bit different)
-                    cursor.key = 10;
-                    assert_key_equals(cursor.key, key, 'key after assignment');
-                }
-
-                t.done();
-            });
-        });
-    }
-
-    cursor_key(1);
-    cursor_key("key");
-    cursor_key(["my", "key"]);
-
-</script>
-
-<div id="log"></div>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-primarykey.any.js b/tests/wpt/tests/IndexedDB/idbcursor-primarykey.any.js
new file mode 100644
index 00000000000..8b9afc67760
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-primarykey.any.js
@@ -0,0 +1,51 @@
+// META: global=window,worker
+// META: title=IDBCursor.primaryKey
+// META: script=resources/support.js
+
+'use strict';
+
+function cursor_primarykey(key) {
+  async_test(t => {
+    let db;
+
+    const open_rq = createdb(t);
+    open_rq.onupgradeneeded = t.step_func(e => {
+      db = e.target.result;
+      const objStore = db.createObjectStore('test');
+      objStore.createIndex('index', '');
+
+      objStore.add('data', key);
+    });
+
+    open_rq.onsuccess = t.step_func(e => {
+      const cursor_rq = db.transaction('test', 'readonly')
+                            .objectStore('test')
+                            .index('index')
+                            .openCursor();
+
+      cursor_rq.onsuccess = t.step_func(e => {
+        const cursor = e.target.result;
+
+        assert_equals(cursor.value, 'data', 'prerequisite cursor.value');
+        assert_equals(cursor.key, 'data', 'prerequisite cursor.key');
+
+        assert_key_equals(cursor.primaryKey, key, 'primaryKey');
+        assert_readonly(cursor, 'primaryKey');
+
+        if (key instanceof Array) {
+          cursor.primaryKey.push('new');
+          key.push('new');
+
+          assert_key_equals(
+              cursor.primaryKey, key, 'primaryKey after array push');
+        }
+
+        t.done();
+      });
+    });
+  });
+}
+
+cursor_primarykey(1);
+cursor_primarykey('key');
+cursor_primarykey(['my', 'key']);
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-primarykey.htm b/tests/wpt/tests/IndexedDB/idbcursor-primarykey.htm
deleted file mode 100644
index c3297387487..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-primarykey.htm
+++ /dev/null
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<title>IDBCursor.primaryKey</title>
-<link rel="author" href="mailto:odinho@opera.com" title="Odin Hørthe Omdal">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-
-<script>
-
-    function cursor_primarykey(key)
-    {
-        var db,
-          t = async_test(document.title + " - " + key);
-
-        var open_rq = createdb(t);
-        open_rq.onupgradeneeded = function(e) {
-            db = e.target.result;
-            var objStore = db.createObjectStore("test");
-            objStore.createIndex("index", "");
-
-            objStore.add("data", key);
-        };
-
-        open_rq.onsuccess = t.step_func(function(e) {
-            var cursor_rq = db.transaction("test", "readonly")
-                              .objectStore("test")
-                              .index("index")
-                              .openCursor();
-
-            cursor_rq.onsuccess = t.step_func(function(e) {
-                var cursor = e.target.result;
-
-                assert_equals(cursor.value, "data", "prequisite cursor.value");
-                assert_equals(cursor.key, "data", "prequisite cursor.key");
-
-                assert_key_equals(cursor.primaryKey, key, 'primaryKey');
-                assert_readonly(cursor, 'primaryKey');
-
-                if (key instanceof Array) {
-                    cursor.primaryKey.push("new");
-                    key.push("new");
-
-                    assert_key_equals(cursor.primaryKey, key, 'primaryKey after array push');
-
-                    // But we can not change key (like readonly, just a bit different)
-                    cursor.key = 10;
-                    assert_key_equals(cursor.primaryKey, key, 'key after assignment');
-                }
-
-                t.done();
-            });
-        });
-    }
-
-    cursor_primarykey(1);
-    cursor_primarykey("key");
-    cursor_primarykey(["my", "key"]);
-
-</script>
-
-<div id="log"></div>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-request-source.any.js b/tests/wpt/tests/IndexedDB/idbcursor-request-source.any.js
new file mode 100644
index 00000000000..2fe8c66f2e5
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-request-source.any.js
@@ -0,0 +1,26 @@
+// META: global=window,worker
+// META: title=IndexedDB: The source of requests made against cursors
+// META: script=resources/support.js
+
+// Spec: https://w3c.github.io/IndexedDB/#dom-idbrequest-source
+
+'use strict';
+
+[cursor => cursor.update(0), cursor => cursor.delete()].forEach(
+    func => indexeddb_test(
+        (t, db) => {
+          db.createObjectStore('store', {autoIncrement: true});
+        },
+        (t, db) => {
+          const tx = db.transaction('store', 'readwrite');
+          const store = tx.objectStore('store');
+          store.put('value');
+          store.openCursor().onsuccess = t.step_func(e => {
+            const cursor = e.target.result;
+            assert_equals(
+                func(cursor).source, cursor,
+                `${func}.source should be the cursor itself`);
+            t.done();
+          });
+        },
+        `The source of the request from ${func} is the cursor itself`));
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-request-source.html b/tests/wpt/tests/IndexedDB/idbcursor-request-source.html
deleted file mode 100644
index 9e2f72b4d45..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-request-source.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!doctype html>
-<meta charset=utf-8>
-<title>IndexedDB: The source of requests made against cursors</title>
-<meta name="help" href="https://w3c.github.io/IndexedDB/#dom-idbrequest-source">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-<script>
-
-[
-  cursor => cursor.update(0),
-  cursor => cursor.delete()
-].forEach(func => indexeddb_test(
-  (t, db) => {
-    db.createObjectStore('store', {autoIncrement: true});
-  },
-  (t, db) => {
-    const tx = db.transaction('store', 'readwrite');
-    const store = tx.objectStore('store');
-    store.put('value');
-    store.openCursor().onsuccess = t.step_func(e => {
-      const cursor = e.target.result;
-      assert_equals(func(cursor).source, cursor,
-                    `${func}.source should be the cursor itself`);
-      t.done();
-    });
-  },
-  `The source of the request from ${func} is the cursor itself`
-));
-
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-reused.any.js b/tests/wpt/tests/IndexedDB/idbcursor-reused.any.js
new file mode 100644
index 00000000000..d98b95193ae
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-reused.any.js
@@ -0,0 +1,68 @@
+// META: global=window,worker
+// META: title=IDBCursor is reused
+// META: script=resources/support.js
+
+// Spec: https://w3c.github.io/IndexedDB/#dom-idbcursor-continue
+
+'use strict';
+
+async_test(t => {
+  let db;
+  const open_rq = createdb(t);
+
+  open_rq.onupgradeneeded = t.step_func(e => {
+    db = e.target.result;
+    const os = db.createObjectStore('test');
+
+    os.add('data', 'k');
+    os.add('data2', 'k2');
+  });
+
+  open_rq.onsuccess = t.step_func(e => {
+    let cursor;
+    let count = 0;
+    const rq =
+        db.transaction('test', 'readonly').objectStore('test').openCursor();
+
+    rq.onsuccess = t.step_func(e => {
+      switch (count) {
+        case 0:
+          cursor = e.target.result;
+
+          assert_equals(cursor.value, 'data', 'prerequisite cursor.value');
+          cursor.custom_cursor_value = 1;
+          e.target.custom_request_value = 2;
+
+          cursor.continue();
+          break;
+
+        case 1:
+          assert_equals(cursor.value, 'data2', 'prerequisite cursor.value');
+          assert_equals(cursor.custom_cursor_value, 1, 'custom cursor value');
+          assert_equals(
+              e.target.custom_request_value, 2, 'custom request value');
+
+          cursor.advance(1);
+          break;
+
+        case 2:
+          assert_false(!!e.target.result, 'got cursor');
+          assert_equals(cursor.custom_cursor_value, 1, 'custom cursor value');
+          assert_equals(
+              e.target.custom_request_value, 2, 'custom request value');
+          break;
+      }
+      count++;
+    });
+
+    rq.transaction.oncomplete = t.step_func(e => {
+      assert_equals(count, 3, 'cursor callback runs');
+      assert_equals(
+          rq.custom_request_value, 2, 'variable placed on old IDBRequest');
+      assert_equals(
+          cursor.custom_cursor_value, 1,
+          'custom cursor value (transaction.complete)');
+      t.done();
+    });
+  });
+});
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-reused.htm b/tests/wpt/tests/IndexedDB/idbcursor-reused.htm
deleted file mode 100644
index 30414584fee..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-reused.htm
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<title>IDBCursor is reused</title>
-<link rel="author" href="mailto:odinho@opera.com" title="Odin Hørthe Omdal">
-<meta rel=help href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html#widl-IDBCursor-continue-void-any-key">
-<meta rel=assert title="Otherwise this method runs the steps for asynchronously executing a request. However, the steps are slightly modified such that instead of creating a new IDBRequest, it reuses the request originally created when this cursor was created. The done flag on the request is set to false before the request is returned. The steps are run with the cursor's source as source and the steps for iterating a cursor as operation, using this cursor as cursor and the key parameter as key.">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-
-<script>
-
-        var db
-        var open_rq = createdb(async_test())
-
-        open_rq.onupgradeneeded = function(e) {
-            db = e.target.result
-            var os = db.createObjectStore("test")
-
-            os.add("data",  "k")
-            os.add("data2", "k2")
-        }
-
-        open_rq.onsuccess = function(e) {
-            var cursor
-            var count = 0
-            var rq = db.transaction("test", "readonly").objectStore("test").openCursor()
-
-            rq.onsuccess = this.step_func(function(e)
-            {
-                switch(count)
-                {
-                    case 0:
-                        cursor = e.target.result
-
-                        assert_equals(cursor.value, "data", "prequisite cursor.value")
-                        cursor.custom_cursor_value = 1
-                        e.target.custom_request_value = 2
-
-                        cursor.continue()
-                        break
-
-                    case 1:
-                        assert_equals(cursor.value, "data2", "prequisite cursor.value")
-                        assert_equals(cursor.custom_cursor_value, 1, "custom cursor value")
-                        assert_equals(e.target.custom_request_value, 2, "custom request value")
-
-                        cursor.advance(1)
-                        break
-
-                    case 2:
-                        assert_false(!!e.target.result, "got cursor")
-                        assert_equals(cursor.custom_cursor_value, 1, "custom cursor value")
-                        assert_equals(e.target.custom_request_value, 2, "custom request value")
-                        break
-                }
-                count++
-            })
-
-            rq.transaction.oncomplete = this.step_func(function() {
-                assert_equals(count, 3, "cursor callback runs")
-                assert_equals(rq.custom_request_value, 2, "variable placed on old IDBRequest")
-                assert_equals(cursor.custom_cursor_value, 1, "custom cursor value (transaction.complete)")
-                this.done()
-            })
-        }
-
-</script>
-
-<div id="log"></div>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-source.any.js b/tests/wpt/tests/IndexedDB/idbcursor-source.any.js
new file mode 100644
index 00000000000..5f0dfa39e6a
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-source.any.js
@@ -0,0 +1,63 @@
+// META: global=window,worker
+// META: title=IDBCursor.source
+// META: script=resources/support.js
+
+'use strict';
+
+function cursor_source_test(
+    test_name, name, stringified_object, cursor_rq_func) {
+  indexeddb_test(
+      function(t, db, tx) {
+        const objStore = db.createObjectStore('my_objectstore');
+        objStore.createIndex('my_index', '');
+
+        objStore.add('data', 1);
+        objStore.add('data2', 2);
+      },
+      function(t, db) {
+        const cursor_rq = cursor_rq_func(db);
+
+        cursor_rq.onsuccess = t.step_func((e) => {
+          if (!e.target.result) {
+            return;
+          }
+          const cursor = e.target.result;
+          assert_readonly(cursor, 'source');
+
+          // Direct try
+          assert_true(cursor.source instanceof Object, 'source isobject');
+          assert_equals(cursor.source + '', stringified_object, 'source');
+          assert_equals(cursor.source.name, name, 'name');
+
+          cursor.continue();
+        });
+
+        cursor_rq.transaction.oncomplete = t.step_func((e) => {
+          t.done();
+        });
+
+        cursor_rq.transaction.onerror = t.step_func((e) => {
+          assert_unreached(
+              'Transaction got error. ' +
+              (e.target.error ? e.target.error.name : 'unknown'));
+        });
+      },
+      test_name);
+}
+
+cursor_source_test(
+    'IDBCursor.source - IDBObjectStore', 'my_objectstore',
+    '[object IDBObjectStore]', function(db) {
+      return db.transaction('my_objectstore', 'readonly')
+          .objectStore('my_objectstore')
+          .openCursor();
+    });
+
+cursor_source_test(
+    'IDBCursor.source - IDBIndex', 'my_index', '[object IDBIndex]',
+    function(db) {
+      return db.transaction('my_objectstore', 'readonly')
+          .objectStore('my_objectstore')
+          .index('my_index')
+          .openCursor();
+    });
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-source.htm b/tests/wpt/tests/IndexedDB/idbcursor-source.htm
deleted file mode 100644
index 1882f092942..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-source.htm
+++ /dev/null
@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<title>IDBCursor.source</title>
-<link rel="author" href="mailto:odinho@opera.com" title="Odin Hørthe Omdal">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-
-<script>
-function cursor_source_test(test_name, name, stringified_object, cursor_rq_func) {
-  indexeddb_test(
-    function(t, db, tx) {
-      var objStore = db.createObjectStore("my_objectstore");
-      objStore.createIndex("my_index", "");
-
-      objStore.add("data",  1);
-      objStore.add("data2", 2);
-    },
-    function(t, db) {
-      var cursor_rq = cursor_rq_func(db);
-
-      cursor_rq.onsuccess = t.step_func(function(e) {
-        if (!e.target.result) {
-          return;
-        }
-        var cursor = e.target.result;
-        assert_readonly(cursor, 'source');
-
-        // Direct try
-        assert_true(cursor.source instanceof Object, "source isobject");
-        assert_equals(cursor.source + "", stringified_object, "source");
-        assert_equals(cursor.source.name, name, "name");
-
-        cursor.continue();
-      });
-
-      cursor_rq.transaction.oncomplete = t.step_func(function(e) {
-        t.done();
-      });
-
-      cursor_rq.transaction.onerror = t.step_func(function(e) {
-        assert_unreached("Transaction got error. " + (e.target.error ? e.target.error.name : "unknown"));
-      });
-    },
-    test_name
-  );
-}
-
-cursor_source_test(
-  document.title + ' - IDBObjectStore',
-  "my_objectstore",
-  "[object IDBObjectStore]",
-  function(db) { return db.transaction("my_objectstore", "readonly")
-                          .objectStore("my_objectstore")
-                          .openCursor(); }
-);
-
-cursor_source_test(
-  document.title + ' - IDBIndex',
-  "my_index",
-  "[object IDBIndex]",
-  function(db) { return db.transaction("my_objectstore", "readonly")
-                          .objectStore("my_objectstore")
-                          .index("my_index")
-                          .openCursor(); }
-);
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-update-exception-order.any.js b/tests/wpt/tests/IndexedDB/idbcursor-update-exception-order.any.js
new file mode 100644
index 00000000000..f7af4152024
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbcursor-update-exception-order.any.js
@@ -0,0 +1,104 @@
+// META: global=window,worker
+// META: title=IndexedDB: IDBCursor update() Exception Ordering
+// META: script=resources/support.js
+
+// Spec: https://w3c.github.io/IndexedDB/#dom-idbcursor-update
+
+'use strict';
+
+indexeddb_test(
+    (t, db) => {
+      const s = db.createObjectStore('s');
+      s.put('value', 'key');
+    },
+    (t, db) => {
+      const s = db.transaction('s', 'readonly').objectStore('s');
+      const r = s.openCursor();
+      r.onsuccess = t.step_func(() => {
+        r.onsuccess = null;
+        const cursor = r.result;
+        setTimeout(
+            t.step_func(() => {
+              assert_throws_dom(
+                  'TransactionInactiveError',
+                  () => {
+                    cursor.update('value2');
+                  },
+                  '"Transaction inactive" check (TransactionInactiveError) ' +
+                      'should precede "read only" check (ReadOnlyError)');
+              t.done();
+            }), 0);
+      });
+    },
+    'IDBCursor.update exception order: TransactionInactiveError vs. ReadOnlyError');
+
+indexeddb_test(
+    (t, db) => {
+      const s = db.createObjectStore('s');
+      s.put('value', 'key');
+    },
+    (t, db) => {
+      const s = db.transaction('s', 'readonly').objectStore('s');
+      const r = s.openCursor();
+      r.onsuccess = t.step_func(() => {
+        r.onsuccess = null;
+        const cursor = r.result;
+        cursor.continue();
+        assert_throws_dom(
+            'ReadOnlyError',
+            () => {
+              cursor.update('value2');
+            },
+            '"Read only" check (ReadOnlyError) should precede ' +
+                '"got value flag" check (InvalidStateError)');
+        t.done();
+      });
+    },
+    'IDBCursor.update exception order: ReadOnlyError vs. InvalidStateError #1');
+
+indexeddb_test(
+    (t, db) => {
+      const s = db.createObjectStore('s');
+      s.put('value', 'key');
+    },
+    (t, db) => {
+      const s = db.transaction('s', 'readonly').objectStore('s');
+      const r = s.openKeyCursor();
+      r.onsuccess = t.step_func(() => {
+        r.onsuccess = null;
+        const cursor = r.result;
+        assert_throws_dom(
+            'ReadOnlyError',
+            () => {
+              cursor.update('value2');
+            },
+            '"Read only" check (ReadOnlyError) should precede ' +
+                '"key only flag" check (InvalidStateError)');
+        t.done();
+      });
+    },
+    'IDBCursor.update exception order: ReadOnlyError vs. InvalidStateError #2');
+
+indexeddb_test(
+    (t, db) => {
+      const s = db.createObjectStore('s', {keyPath: 'id'});
+      s.put({id: 123, data: 'value'});
+    },
+    (t, db) => {
+      const s = db.transaction('s', 'readwrite').objectStore('s');
+      const r = s.openCursor();
+      r.onsuccess = t.step_func(() => {
+        r.onsuccess = null;
+        const cursor = r.result;
+        cursor.continue();
+        assert_throws_dom(
+            'InvalidStateError',
+            () => {
+              cursor.update({id: 123, data: 'value2'});
+            },
+            '"Got value flag" check (InvalidStateError) should precede ' +
+                '"modified key" check (DataError)');
+        t.done();
+      });
+    },
+    'IDBCursor.update exception order: InvalidStateError vs. DataError');
diff --git a/tests/wpt/tests/IndexedDB/idbcursor-update-exception-order.htm b/tests/wpt/tests/IndexedDB/idbcursor-update-exception-order.htm
deleted file mode 100644
index 9324752d5eb..00000000000
--- a/tests/wpt/tests/IndexedDB/idbcursor-update-exception-order.htm
+++ /dev/null
@@ -1,98 +0,0 @@
-<!DOCTYPE html>
-<title>IndexedDB: IDBCursor update() Exception Ordering</title>
-<meta charset=utf-8>
-<link rel="help" href="https://w3c.github.io/IndexedDB/#dom-idbcursor-update">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-<script>
-
-indexeddb_test(
-  (t, db) => {
-    const s = db.createObjectStore('s');
-    s.put('value', 'key');
-  },
-  (t, db) => {
-    const s = db.transaction('s', 'readonly').objectStore('s');
-    const r = s.openCursor();
-    r.onsuccess = t.step_func(() => {
-      r.onsuccess = null;
-      const cursor = r.result;
-      setTimeout(t.step_func(() => {
-        assert_throws_dom('TransactionInactiveError', () => {
-          cursor.update('value2');
-        }, '"Transaction inactive" check (TransactionInactiveError) ' +
-           'should precede "read only" check (ReadOnlyError)');
-        t.done();
-      }), 0);
-    });
-  },
-  'IDBCursor.update exception order: TransactionInactiveError vs. ReadOnlyError'
-);
-
-indexeddb_test(
-  (t, db) => {
-    const s = db.createObjectStore('s');
-    s.put('value', 'key');
-  },
-  (t, db) => {
-    const s = db.transaction('s', 'readonly').objectStore('s');
-    const r = s.openCursor();
-    r.onsuccess = t.step_func(() => {
-      r.onsuccess = null;
-      const cursor = r.result;
-      cursor.continue();
-      assert_throws_dom('ReadOnlyError', () => {
-        cursor.update('value2');
-      }, '"Read only" check (ReadOnlyError) should precede '+
-         '"got value flag" check (InvalidStateError)');
-      t.done();
-    });
-  },
-  'IDBCursor.update exception order: ReadOnlyError vs. InvalidStateError #1'
-);
-
-indexeddb_test(
-  (t, db) => {
-    const s = db.createObjectStore('s');
-    s.put('value', 'key');
-  },
-  (t, db) => {
-    const s = db.transaction('s', 'readonly').objectStore('s');
-    const r = s.openKeyCursor();
-    r.onsuccess = t.step_func(() => {
-      r.onsuccess = null;
-      const cursor = r.result;
-      assert_throws_dom('ReadOnlyError', () => {
-        cursor.update('value2');
-      }, '"Read only" check (ReadOnlyError) should precede '+
-         '"key only flag" check (InvalidStateError)');
-      t.done();
-    });
-  },
-  'IDBCursor.update exception order: ReadOnlyError vs. InvalidStateError #2'
-);
-
-indexeddb_test(
-  (t, db) => {
-    const s = db.createObjectStore('s', {keyPath: 'id'});
-    s.put({id: 123, data: 'value'});
-  },
-  (t, db) => {
-    const s = db.transaction('s', 'readwrite').objectStore('s');
-    const r = s.openCursor();
-    r.onsuccess = t.step_func(() => {
-      r.onsuccess = null;
-      const cursor = r.result;
-      cursor.continue();
-      assert_throws_dom('InvalidStateError', () => {
-        cursor.update({id: 123, data: 'value2'});
-      }, '"Got value flag" check (InvalidStateError) should precede ' +
-         '"modified key" check (DataError)');
-      t.done();
-    });
-  },
-  'IDBCursor.update exception order: InvalidStateError vs. DataError'
-);
-
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbdatabase-createObjectStore-exception-order.any.js b/tests/wpt/tests/IndexedDB/idbdatabase-createObjectStore-exception-order.any.js
new file mode 100644
index 00000000000..783ae41dd2f
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbdatabase-createObjectStore-exception-order.any.js
@@ -0,0 +1,88 @@
+// META: global=window,worker
+// META: title=IndexedDB: IDBDatabase createObjectStore() Exception Ordering
+// META: script=resources/support.js
+
+// Spec: https://w3c.github.io/IndexedDB/#dom-idbdatabase-createobjectstore
+
+'use strict';
+
+indexeddb_test(
+    (t, db, txn, rq) => {
+      db.createObjectStore('s');
+
+      // Acknowledge the error, to prevent an error from firing in browsers
+      // that implement that.
+      rq.onerror = e => {
+        e.preventDefault();
+      };
+
+      txn.onabort = () => {
+        setTimeout(
+            t.step_func(() => {
+              assert_throws_dom(
+                  'InvalidStateError', () => db.createObjectStore('s2'),
+                  '"running an upgrade transaction" check (InvalidStateError) ' +
+                      'should precede "not active" check (TransactionInactiveError)');
+
+              t.done();
+            }),
+            0);
+      };
+      txn.abort();
+    },
+    (t, db) => {
+      t.assert_unreached(
+          'open operation is expected to fail due to the aborted transaction.');
+    },
+    'IDBDatabase.createObjectStore exception order: ' +
+        'InvalidStateError vs. TransactionInactiveError',
+    {upgrade_will_abort: true});
+
+indexeddb_test(
+    (t, db, txn) => {
+      const store = db.createObjectStore('s');
+
+      txn.abort();
+
+      assert_throws_dom(
+          'TransactionInactiveError',
+          () => db.createObjectStore('s2', {keyPath: '-invalid-'}),
+          '"not active" check (TransactionInactiveError) should precede ' +
+              '"valid key path" check (SyntaxError)');
+
+      t.done();
+    },
+    (t, db) => {
+      t.assert_unreached('open should fail');
+    },
+    'IDBDatabase.createObjectStore exception order: ' +
+        'TransactionInactiveError vs. SyntaxError',
+    {upgrade_will_abort: true});
+
+indexeddb_test(
+    (t, db) => {
+      db.createObjectStore('s');
+      assert_throws_dom(
+          'SyntaxError',
+          () => db.createObjectStore('s', {keyPath: 'not a valid key path'}),
+          '"Invalid key path" check (SyntaxError) should precede ' +
+              '"duplicate store name" check (ConstraintError)');
+      t.done();
+    },
+    (t, db) => {},
+    'IDBDatabase.createObjectStore exception order: ' +
+        'SyntaxError vs. ConstraintError');
+
+indexeddb_test(
+    (t, db) => {
+      db.createObjectStore('s');
+      assert_throws_dom(
+          'ConstraintError',
+          () => db.createObjectStore('s', {autoIncrement: true, keyPath: ''}),
+          '"already exists" check (ConstraintError) should precede ' +
+              '"autoIncrement vs. keyPath" check (InvalidAccessError)');
+      t.done();
+    },
+    (t, db) => {},
+    'IDBDatabase.createObjectStore exception order: ' +
+        'ConstraintError vs. InvalidAccessError');
diff --git a/tests/wpt/tests/IndexedDB/idbdatabase-createObjectStore-exception-order.htm b/tests/wpt/tests/IndexedDB/idbdatabase-createObjectStore-exception-order.htm
deleted file mode 100644
index 1ca2ce1d7cc..00000000000
--- a/tests/wpt/tests/IndexedDB/idbdatabase-createObjectStore-exception-order.htm
+++ /dev/null
@@ -1,84 +0,0 @@
-<!DOCTYPE html>
-<title>IndexedDB: IDBDatabase createObjectStore() Exception Ordering</title>
-<meta charset=utf-8>
-<link rel="help" href="https://w3c.github.io/IndexedDB/#dom-idbdatabase-createobjectstore">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-<script>
-
-indexeddb_test(
-  (t, db, txn, rq) => {
-    db.createObjectStore('s');
-
-    // Acknowledge the error, to prevent window.error from firing in
-    // browsers that implement that.
-    rq.onerror = e => { e.preventDefault(); };
-
-    txn.onabort = () => {
-      setTimeout(t.step_func(() => {
-        assert_throws_dom(
-          'InvalidStateError', () => { db.createObjectStore('s2'); },
-          '"running an upgrade transaction" check (InvalidStateError) ' +
-          'should precede "not active" check (TransactionInactiveError)');
-
-        t.done();
-      }), 0);
-    };
-    txn.abort();
-  },
-  (t, db) => { t.assert_unreached('open should fail'); },
-  'IDBDatabase.createObjectStore exception order: ' +
-  'InvalidStateError vs. TransactionInactiveError',
-  { upgrade_will_abort: true }
-);
-
-indexeddb_test(
-  (t, db, txn) => {
-    const store = db.createObjectStore('s');
-
-    txn.abort();
-
-    assert_throws_dom(
-      'TransactionInactiveError',
-      () => { db.createObjectStore('s2', {keyPath: '-invalid-'}); },
-      '"not active" check (TransactionInactiveError) should precede ' +
-      '"valid key path" check (SyntaxError)');
-
-    t.done();
-  },
-  (t, db) => { t.assert_unreached('open should fail'); },
-  'IDBDatabase.createObjectStore exception order: ' +
-  'TransactionInactiveError vs. SyntaxError',
-  { upgrade_will_abort: true }
-);
-
-indexeddb_test(
-  (t, db) => {
-    db.createObjectStore('s');
-    assert_throws_dom('SyntaxError', () => {
-      db.createObjectStore('s', {keyPath: 'not a valid key path'});
-    }, '"Invalid key path" check (SyntaxError) should precede ' +
-       '"duplicate store name" check (ConstraintError)');
-    t.done();
-  },
-  (t, db) => {},
-  'IDBDatabase.createObjectStore exception order: ' +
-  'SyntaxError vs. ConstraintError'
-);
-
-indexeddb_test(
-  (t, db) => {
-    db.createObjectStore('s');
-    assert_throws_dom('ConstraintError', () => {
-      db.createObjectStore('s', {autoIncrement: true, keyPath: ''});
-    }, '"already exists" check (ConstraintError) should precede ' +
-       '"autoIncrement vs. keyPath" check (InvalidAccessError)');
-    t.done();
-  },
-  (t, db) => {},
-  'IDBDatabase.createObjectStore exception order: ' +
-  'ConstraintError vs. InvalidAccessError'
-);
-
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbdatabase-deleteObjectStore-exception-order.any.js b/tests/wpt/tests/IndexedDB/idbdatabase-deleteObjectStore-exception-order.any.js
new file mode 100644
index 00000000000..061c84c0029
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbdatabase-deleteObjectStore-exception-order.any.js
@@ -0,0 +1,46 @@
+// META: global=window,worker
+// META: title=IndexedDB: IDBDatabase deleteObjectStore() Exception Ordering
+// META: script=resources/support.js
+
+// Spec: https://w3c.github.io/IndexedDB/#dom-idbdatabase-deleteobjectstore
+
+'use strict';
+
+indexeddb_test(
+    (t, db, txn) => {
+      db.createObjectStore('s');
+      txn.onabort = () => {
+        setTimeout(
+            t.step_func(() => {
+              assert_throws_dom(
+                  'InvalidStateError', () => db.deleteObjectStore('s'),
+                  '"running an upgrade transaction" check (InvalidStateError) ' +
+                      'should precede "not active" check (TransactionInactiveError)');
+              t.done();
+            }),
+            0);
+      };
+      txn.abort();
+    },
+    (t, db) => {
+      t.assert_unreached('open should fail');
+    },
+    'IDBDatabase.deleteObjectStore exception order: ' +
+        'InvalidStateError vs. TransactionInactiveError',
+    {upgrade_will_abort: true});
+
+indexeddb_test(
+    (t, db, txn) => {
+      txn.abort();
+      assert_throws_dom(
+          'TransactionInactiveError', () => db.deleteObjectStore('nope'),
+          '"not active" check (TransactionInactiveError) should precede ' +
+              '"name in database" check (NotFoundError)');
+      t.done();
+    },
+    (t, db) => {
+      t.assert_unreached('open should fail');
+    },
+    'IDBDatabase.deleteObjectStore exception order: ' +
+        'TransactionInactiveError vs. NotFoundError',
+    {upgrade_will_abort: true});
diff --git a/tests/wpt/tests/IndexedDB/idbdatabase-deleteObjectStore-exception-order.htm b/tests/wpt/tests/IndexedDB/idbdatabase-deleteObjectStore-exception-order.htm
deleted file mode 100644
index 4d98a31f120..00000000000
--- a/tests/wpt/tests/IndexedDB/idbdatabase-deleteObjectStore-exception-order.htm
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-<title>IndexedDB: IDBDatabase deleteObjectStore() Exception Ordering</title>
-<meta charset=utf-8>
-<link rel="help" href="https://w3c.github.io/IndexedDB/#dom-idbdatabase-deleteobjectstore">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-<script>
-
-indexeddb_test(
-  (t, db, txn) => {
-    db.createObjectStore('s');
-    txn.onabort = () => {
-      setTimeout(t.step_func(() => {
-        assert_throws_dom(
-          'InvalidStateError', () => { db.deleteObjectStore('s'); },
-          '"running an upgrade transaction" check (InvalidStateError) ' +
-          'should precede "not active" check (TransactionInactiveError)');
-        t.done();
-      }), 0);
-    };
-    txn.abort();
-  },
-  (t, db) => { t.assert_unreached('open should fail'); },
-  'IDBDatabase.deleteObjectStore exception order: ' +
-  'InvalidStateError vs. TransactionInactiveError',
-  { upgrade_will_abort: true }
-);
-
-indexeddb_test(
-  (t, db, txn) => {
-    txn.abort();
-    assert_throws_dom(
-      'TransactionInactiveError', () => { db.deleteObjectStore('nope'); },
-      '"not active" check (TransactionInactiveError) should precede ' +
-      '"name in database" check (NotFoundError)');
-    t.done();
-  },
-  (t, db) => { t.assert_unreached('open should fail'); },
-  'IDBDatabase.deleteObjectStore exception order: ' +
-  'TransactionInactiveError vs. NotFoundError',
-  { upgrade_will_abort: true }
-);
-
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbdatabase-transaction-exception-order.any.js b/tests/wpt/tests/IndexedDB/idbdatabase-transaction-exception-order.any.js
new file mode 100644
index 00000000000..c5b31f28852
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbdatabase-transaction-exception-order.any.js
@@ -0,0 +1,62 @@
+// META: global=window,worker
+// META: title=IndexedDB: IDBDatabase transaction() Exception Ordering
+// META: script=resources/support.js
+
+// Spec: https://w3c.github.io/IndexedDB/#dom-idbdatabase-transaction
+
+'use strict';
+
+indexeddb_test(
+    (t, db) => {
+      db.createObjectStore('s');
+    },
+    (t, db) => {
+      db.close();
+      assert_throws_dom(
+          'InvalidStateError', () => db.transaction('no-such-store'),
+          '"Connection is closed" check (InvalidStateError) should precede ' +
+              '"store names" check (NotFoundError)');
+      t.done();
+    },
+    'IDBDatabase.transaction exception order: InvalidStateError vs. NotFoundError');
+
+indexeddb_test(
+    (t, db) => {
+      db.createObjectStore('s');
+    },
+    (t, db) => {
+      db.close();
+      assert_throws_dom(
+          'InvalidStateError', () => db.transaction([]),
+          '"Connection is closed" check (InvalidStateError) should precede ' +
+              '"stores is empty" check (InvalidAccessError)');
+      t.done();
+    },
+    'IDBDatabase.transaction exception order: InvalidStateError vs. InvalidAccessError');
+
+// Verify that the invalid mode check actually throws an exception.
+indexeddb_test(
+    (t, db) => {
+      db.createObjectStore('s');
+    },
+    (t, db) => {
+      assert_throws_js(
+          TypeError, () => db.transaction('s', 'versionchange'),
+          '"invalid mode" check should throw TypeError');
+      t.done();
+    },
+    'IDBDatabase.transaction throws exception on invalid mode');
+
+indexeddb_test(
+    (t, db) => {
+      db.createObjectStore('s');
+    },
+    (t, db) => {
+      assert_throws_dom(
+          'NotFoundError',
+          () => db.transaction('no-such-store', 'versionchange'),
+          '"No such store" check (NotFoundError) should precede ' +
+              '"invalid mode" check (TypeError)');
+      t.done();
+    },
+    'IDBDatabase.transaction exception order: NotFoundError vs. TypeError');
diff --git a/tests/wpt/tests/IndexedDB/idbdatabase-transaction-exception-order.html b/tests/wpt/tests/IndexedDB/idbdatabase-transaction-exception-order.html
deleted file mode 100644
index d06efe1d2f9..00000000000
--- a/tests/wpt/tests/IndexedDB/idbdatabase-transaction-exception-order.html
+++ /dev/null
@@ -1,68 +0,0 @@
-<!doctype html>
-<meta charset=utf-8>
-<title>IndexedDB: IDBDatabase transaction() Exception Ordering</title>
-<link rel="help" href="https://w3c.github.io/IndexedDB/#dom-idbdatabase-transaction">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-<script>
-
-indexeddb_test(
-  (t, db) => {
-    db.createObjectStore('s');
-  },
-  (t, db) => {
-    db.close();
-    assert_throws_dom('InvalidStateError', () => {
-      db.transaction('no-such-store');
-    }, '"Connection is closed" check (InvalidStateError) should precede ' +
-       '"store names" check (NotFoundError)');
-    t.done();
-  },
-  'IDBDatabase.transaction exception order: InvalidStateError vs. NotFoundError'
-);
-
-indexeddb_test(
-  (t, db) => {
-    db.createObjectStore('s');
-  },
-  (t, db) => {
-    db.close();
-    assert_throws_dom('InvalidStateError', () => {
-      db.transaction([]);
-    }, '"Connection is closed" check (InvalidStateError) should precede ' +
-       '"stores is empty" check (InvalidAccessError)');
-    t.done();
-  },
-  'IDBDatabase.transaction exception order: InvalidStateError vs. InvalidAccessError'
-);
-
-// Verify that the invalid mode check actually throws an exception
-indexeddb_test(
-  (t, db) => {
-    db.createObjectStore('s');
-  },
-  (t, db) => {
-    assert_throws_js(TypeError, () => {
-      db.transaction('s', 'versionchange');
-    }, '"invalid mode" check should throw TypeError');
-    t.done();
-  },
-  'IDBDatabase.transaction throws exception on invalid mode'
-);
-
-indexeddb_test(
-  (t, db) => {
-    db.createObjectStore('s');
-  },
-  (t, db) => {
-    assert_throws_dom('NotFoundError', () => {
-      db.transaction('no-such-store', 'versionchange');
-    }, '"No such store" check (NotFoundError) should precede ' +
-       '"invalid mode" check (TypeError)');
-    t.done();
-  },
-  'IDBDatabase.transaction exception order: NotFoundError vs. TypeError'
-);
-
-</script>
diff --git a/tests/wpt/tests/IndexedDB/idbdatabase_close.any.js b/tests/wpt/tests/IndexedDB/idbdatabase_close.any.js
new file mode 100644
index 00000000000..1fa105171a7
--- /dev/null
+++ b/tests/wpt/tests/IndexedDB/idbdatabase_close.any.js
@@ -0,0 +1,74 @@
+// META: global=window,worker
+// META: title=IDBDatabase.close()
+// META: script=resources/support.js
+
+// Spec: https://w3c.github.io/IndexedDB/#dom-idbdatabase-transaction
+
+'use strict';
+
+async_test(t => {
+  let db;
+  let versionchange_fired;
+  let blocked_fired;
+  let upgradeneeded_fired;
+  const open_rq = createdb(t);
+  let counter = 0;
+
+  open_rq.onupgradeneeded = function() {};
+  open_rq.onsuccess = function(e) {
+    db = e.target.result;
+    db.onversionchange = t.step_func((e) => {
+      versionchange_fired = counter++;
+    });
+    const rq = indexedDB.open(db.name, db.version + 1);
+    rq.onblocked = t.step_func((e) => {
+      blocked_fired = counter++;
+      db.close();
+    });
+    rq.onupgradeneeded = t.step_func((e) => {
+      upgradeneeded_fired = counter++;
+    });
+    rq.onsuccess = t.step_func((e) => {
+      assert_equals(versionchange_fired, 0, 'versionchange event fired #');
+      assert_equals(blocked_fired, 1, 'block event fired #');
+      assert_equals(
+          upgradeneeded_fired, 2, 'second upgradeneeded event fired #');
+
+      rq.result.close();
+      t.done();
+    });
+    rq.onerror = t.step_func(e => {
+      assert_unreached('Unexpected database deletion error: ' + e.target.error);
+    });
+  };
+}, 'Unblock the version change transaction created by an open database request');
+
+async_test(t => {
+  let db;
+  let blocked_fired = false;
+  let versionchange_fired = false;
+  const open_rq = createdb(t);
+
+  open_rq.onupgradeneeded = t.step_func(e => {});
+  open_rq.onsuccess = t.step_func(e => {
+    db = e.target.result;
+
+    db.onversionchange = t.step_func(e => {
+      versionchange_fired = true;
+    });
+
+    const rq = indexedDB.deleteDatabase(db.name);
+    rq.onblocked = t.step_func(e => {
+      blocked_fired = true;
+      db.close();
+    });
+    rq.onsuccess = t.step_func(e => {
+      assert_true(versionchange_fired, 'versionchange event fired')
+      assert_true(blocked_fired, 'block event fired')
+      t.done();
+    });
+    rq.onerror = t.step_func(e => {
+      assert_unreached('Unexpected database deletion error: ' + e.target.error);
+    });
+  });
+}, 'Unblock the delete database request.');
diff --git a/tests/wpt/tests/IndexedDB/idbdatabase_close.htm b/tests/wpt/tests/IndexedDB/idbdatabase_close.htm
deleted file mode 100644
index 8ebebaf1b88..00000000000
--- a/tests/wpt/tests/IndexedDB/idbdatabase_close.htm
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<title>IDBDatabase.close() - unblock the version change transaction created by an open database request</title>
-<link rel="author" title="Microsoft" href="http://www.microsoft.com">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-
-<script>
-var db;
-var versionchange_fired;
-var blocked_fired;
-var upgradeneeded_fired;
-var t = async_test();
-var open_rq = createdb(t);
-var counter = 0;
-
-open_rq.onupgradeneeded = function() {}
-open_rq.onsuccess = function(e) {
-    db = e.target.result;
-    db.onversionchange = t.step_func(function(e) {
-        versionchange_fired = counter++;
-    });
-    var rq = window.indexedDB.open(db.name, db.version + 1);
-    rq.onblocked = t.step_func(function (e) {
-        blocked_fired = counter++;
-        db.close();
-    });
-    rq.onupgradeneeded = t.step_func(function (e) {
-        upgradeneeded_fired = counter++;
-    });
-    rq.onsuccess = t.step_func(function (e) {
-        assert_equals(versionchange_fired, 0, 'versionchange event fired #')
-        assert_equals(blocked_fired, 1, 'block event fired #')
-        assert_equals(upgradeneeded_fired, 2, 'second upgradeneeded event fired #')
-
-        rq.result.close();
-        t.done();
-    });
-    rq.onerror = fail(t, 'Unexpected database deletion error');
-};
-
-</script>
-
-<div id="log"></div>
diff --git a/tests/wpt/tests/IndexedDB/idbdatabase_close2.htm b/tests/wpt/tests/IndexedDB/idbdatabase_close2.htm
deleted file mode 100644
index 26bc4ce6383..00000000000
--- a/tests/wpt/tests/IndexedDB/idbdatabase_close2.htm
+++ /dev/null
@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<title>IDBDatabase.close() - unblock the delete database request</title>
-<link rel="author" title="Microsoft" href="http://www.microsoft.com">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script src="resources/support.js"></script>
-
-<script>
-
-var db;
-var blocked_fired = false;
-var versionchange_fired = false;
-var t = async_test();
-var open_rq = createdb(t);
-
-open_rq.onupgradeneeded = t.step_func(function() {});
-open_rq.onsuccess = t.step_func(function(e) {
-    db = e.target.result;
-
-    db.onversionchange = t.step_func(function (e) {
-      versionchange_fired = true;
-    });
-
-    var rq = window.indexedDB.deleteDatabase(db.name);
-    rq.onblocked = t.step_func(function (e) {
-        blocked_fired = true;
-        db.close();
-    });
-    rq.onsuccess = t.step_func(function (e) {
-        assert_true(versionchange_fired, "versionchange event fired")
-        assert_true(blocked_fired, "block event fired")
-        t.done();
-    });
-    rq.onerror = fail(t, 'Unexpected database deletion error');
-});
-
-</script>
-
-<div id="log"></div>
diff --git a/tests/wpt/tests/IndexedDB/idbtransaction_abort.any.js b/tests/wpt/tests/IndexedDB/idbtransaction_abort.any.js
index 7bc27dc3d69..1f14bbe4d5d 100644
--- a/tests/wpt/tests/IndexedDB/idbtransaction_abort.any.js
+++ b/tests/wpt/tests/IndexedDB/idbtransaction_abort.any.js
@@ -2,6 +2,8 @@
 // META: global=window,worker
 // META: script=resources/support.js
 
+// Spec: https://w3c.github.io/IndexedDB/#transaction-abort
+
 'use strict';
 
 async_test(t => {
@@ -14,7 +16,6 @@ async_test(t => {
     db = e.target.result;
     let txn = e.target.transaction;
     let objStore = db.createObjectStore('store');
-
     objStore.add(record, 1);
     objStore.add(record, 2);
     let index =
@@ -34,4 +35,73 @@ async_test(t => {
 
     e.target.transaction.oncomplete = fail(t, 'got complete, expected abort');
   };
-});
+}, 'Abort event should fire during transaction');
+
+indexeddb_test(
+    (t, db) => {
+      db.createObjectStore('blobs', {keyPath: 'id', autoIncrement: true});
+    },
+    (t, db) => {
+      const txn = db.transaction('blobs', 'readwrite');
+      const objectStore = txn.objectStore('blobs');
+      const data = new Blob(['test'], {type: 'text/plain'});
+
+      const putRequest = objectStore.put({id: 0, data: data});
+
+      putRequest.onsuccess = t.step_func(() => {
+        t.step_timeout(() => {
+          assert_throws_dom('InvalidStateError', () => {
+            txn.abort();
+          }, 'Abort should throw InvalidStateError on an auto-committing transaction.');
+        }, 0);
+      });
+
+      // Ensure the transaction completes.
+      txn.oncomplete = t.step_func(() => {
+        t.done();
+      });
+
+      // Abort should fail once the transaction has started committing.
+      txn.onabort = t.step_func((event) => {
+        assert_unreached('Unexpected transaction abort: ' + event.target.error);
+      });
+      t.add_cleanup(() => {
+        if (db) {
+          db.close();
+        }
+      });
+    },
+    `Abort during auto-committing should throw InvalidStateError.`);
+
+indexeddb_test(
+    (t, db) => {
+      db.createObjectStore('blobs', {keyPath: 'id', autoIncrement: true});
+    },
+    (t, db) => {
+      const txn = db.transaction('blobs', 'readwrite');
+      const objectStore = txn.objectStore('blobs');
+      const data = new Blob(['test'], {type: 'text/plain'});
+
+      // Put the object into the store.
+      const putRequest = objectStore.put({id: 0, data: data});
+
+      // Handle transaction completion.
+      txn.oncomplete = t.step_func(() => {
+        assert_throws_dom('InvalidStateError', () => {
+          txn.abort();
+        }, 'Abort should throw InvalidStateError on a completed transaction.');
+        t.done();
+      });
+
+      // Handle transaction error.
+      txn.onerror = t.step_func((event) => {
+        assert_unreached('Unexpected transaction error: ' + event.target.error);
+      });
+
+      t.add_cleanup(() => {
+        if (db) {
+          db.close();
+        }
+      });
+    },
+    `Abort on completed transaction should throw InvalidStateError.`);
diff --git a/tests/wpt/tests/ai/translator/ai_translator_translate.tentative.https.any.js b/tests/wpt/tests/ai/translator/ai_translator_translate.tentative.https.any.js
index 2041ad82b5a..5cd8cb86b22 100644
--- a/tests/wpt/tests/ai/translator/ai_translator_translate.tentative.https.any.js
+++ b/tests/wpt/tests/ai/translator/ai_translator_translate.tentative.https.any.js
@@ -1,24 +1,54 @@
 // META: title=Translate from English to Japanese
-// META: global=window,worker
+// META: global=window
 // META: timeout=long
 // META: script=../resources/util.js
+// META: script=../resources/language_codes.js
+// META: script=/resources/testdriver.js
 //
 // Setting `timeout=long` as this test may require downloading the translation
 // library and the language models.
 
 'use strict';
 
+async function createTranslator(options) {
+  return await test_driver.bless('Create translator', async () => {
+    return await ai.translator.create(options);
+  });
+}
+
 promise_test(async t => {
-  const translatorFactory = ai.translator;
-  assert_not_equals(translatorFactory, null);
-  const translator = await translatorFactory.create(
-      {sourceLanguage: 'en', targetLanguage: 'ja'});
+  const languagePair = {sourceLanguage: 'en', targetLanguage: 'ja'};
+
+  // Creating the translator without user activation rejects with
+  // NotAllowedError.
+  const createPromise = ai.translator.create(languagePair);
+  await promise_rejects_dom(t, 'NotAllowedError', createPromise);
+
+  // Creating the translator with user activation succeeds.
+  await createTranslator(languagePair);
+
+  // TODO(crbug.com/390459310): Replace with availability.
+  //
+  // Creating it should have switched it to readily.
+  const capabilities = await ai.translator.capabilities();
+  const {sourceLanguage, targetLanguage} = languagePair;
+  assert_equals(
+      capabilities.languagePairAvailable(sourceLanguage, targetLanguage),
+      'readily');
+
+  // Now that it is readily, we should no longer need user activation.
+  await ai.translator.create(languagePair);
+}, 'AITranslator.create() requires user activation when availability is "after-download".');
+
+promise_test(async t => {
+  const translator =
+      await createTranslator({sourceLanguage: 'en', targetLanguage: 'ja'});
   assert_equals(await translator.translate('hello'), 'こんにちは');
 }, 'Simple AITranslator.translate() call');
 
 promise_test(async () => {
   const translator =
-      await ai.translator.create({sourceLanguage: 'en', targetLanguage: 'ja'});
+      await createTranslator({sourceLanguage: 'en', targetLanguage: 'ja'});
   const streamingResponse = translator.translateStreaming('hello');
   assert_equals(
       Object.prototype.toString.call(streamingResponse),
@@ -32,14 +62,14 @@ promise_test(async () => {
 
 promise_test(async t => {
   const translator =
-      await ai.translator.create({sourceLanguage: 'en', targetLanguage: 'ja'});
+      await createTranslator({sourceLanguage: 'en', targetLanguage: 'ja'});
   assert_equals(translator.sourceLanguage, 'en');
   assert_equals(translator.targetLanguage, 'ja');
 }, 'AITranslator: sourceLanguage and targetLanguage are equal to their respective option passed in to AITranslatorFactory.create.')
 
 promise_test(async (t) => {
   const translator =
-      await ai.translator.create({sourceLanguage: 'en', targetLanguage: 'ja'});
+      await createTranslator({sourceLanguage: 'en', targetLanguage: 'ja'});
   translator.destroy();
   await promise_rejects_dom(
       t, 'InvalidStateError', translator.translate('hello'));
@@ -49,7 +79,7 @@ promise_test(async t => {
   const controller = new AbortController();
   controller.abort();
 
-  const createPromise = ai.translator.create(
+  const createPromise = createTranslator(
       {signal: controller.signal, sourceLanguage: 'en', targetLanguage: 'ja'});
 
   await promise_rejects_dom(t, 'AbortError', createPromise);
@@ -57,7 +87,7 @@ promise_test(async t => {
 
 promise_test(async t => {
   await testAbortPromise(t, signal => {
-    return ai.translator.create(
+    return createTranslator(
         {signal, sourceLanguage: 'en', targetLanguage: 'ja'});
   });
 }, 'Aborting AITranslatorFactory.create().');
@@ -67,7 +97,7 @@ promise_test(async t => {
   controller.abort();
 
   const translator =
-      await ai.translator.create({sourceLanguage: 'en', targetLanguage: 'ja'});
+      await createTranslator({sourceLanguage: 'en', targetLanguage: 'ja'});
   const translatePromise =
       translator.translate('hello', {signal: controller.signal});
 
@@ -76,7 +106,7 @@ promise_test(async t => {
 
 promise_test(async t => {
   const translator =
-      await ai.translator.create({sourceLanguage: 'en', targetLanguage: 'ja'});
+      await createTranslator({sourceLanguage: 'en', targetLanguage: 'ja'});
   await testAbortPromise(t, signal => {
     return translator.translate('hello', {signal});
   });
@@ -93,8 +123,7 @@ promise_test(async t => {
     });
   }
 
-  await ai.translator.create(
-      {sourceLanguage: 'en', targetLanguage: 'ja', monitor});
+  await createTranslator({sourceLanguage: 'en', targetLanguage: 'ja', monitor});
 
   // Monitor callback must be called.
   assert_true(monitorCalled);
diff --git a/tests/wpt/tests/clear-site-data/clear-cache-partitioning.sub.https.html b/tests/wpt/tests/clear-site-data/clear-cache-partitioning.sub.https.html
index 35640785662..b3841450b5a 100644
--- a/tests/wpt/tests/clear-site-data/clear-cache-partitioning.sub.https.html
+++ b/tests/wpt/tests/clear-site-data/clear-cache-partitioning.sub.https.html
@@ -155,13 +155,16 @@ promise_test(test => {
 
 promise_test(test => {
     const TEST_SITE = {
+        cache: true,
+    }
+    const CLEAR_ORIGIN_CACHE = {
         iframe: {
-            cache: true,
+            clear: "cache",
             secondOrigin: true,
         }
     }
     return testCacheClear(test, [TEST_SITE, CLEAR_ORIGIN_CACHE, TEST_SITE], assert_equals);
-}, "clearing cache doesn't affect cross origin iframe");
+}, "clear in cross origin iframe doesn't affect embedder");
 
 promise_test(test => {
     const TEST_SITE = {
@@ -214,6 +217,55 @@ promise_test(test => {
     return testCacheClear(test, [TEST_SITE, TEST_SITE_CLEAR_IFRAME, TEST_SITE], assert_equals);
 }, "clear in unpartitioned context doesn't clear partitioned data");
 
+promise_test(test => {
+    const TEST_SITE = {
+        iframe: {
+            secondOrigin: true,
+            iframe: {
+                cache: true,
+            }
+        }
+    }
+    return testCacheClear(test, [TEST_SITE, CLEAR_ORIGIN_CACHE, TEST_SITE], assert_equals);
+}, "clear in unpartitioned context doesn't clear double partitioned data with intermediate cross origin");
+
+promise_test(test => {
+    const TEST_SITE = {
+        cache: true,
+    };
+
+    const TEST_CLEAR_IFRAME_IFRAME = {
+        iframe: {
+            secondOrigin: true,
+            iframe: {
+                clear: "cache",
+            }
+        }
+    }
+    return testCacheClear(test, [TEST_SITE, TEST_CLEAR_IFRAME_IFRAME, TEST_SITE], assert_equals);
+}, "clear in double partitioned with intermediate cross origin context doesn't clear unpartitioned data");
+
+promise_test(test => {
+    const TEST_SITE = {
+        iframe: {
+            secondOrigin: true,
+            iframe: {
+                cache: true,
+            }
+        }
+    }
+
+    const TEST_CLEAR_IFRAME_IFRAME = {
+        iframe: {
+            secondOrigin: true,
+            iframe: {
+                clear: "cache",
+            }
+        }
+    }
+    return testCacheClear(test, [TEST_SITE, TEST_CLEAR_IFRAME_IFRAME, TEST_SITE], assert_not_equals);
+}, "clear double partitioned context with intermediate cross origin clears that partitioned data");
+
 </script>
 </body>
 </html>
diff --git a/tests/wpt/tests/common/dispatcher/remote-executor.html b/tests/wpt/tests/common/dispatcher/remote-executor.html
index 8b0030390d0..f87f566be96 100644
--- a/tests/wpt/tests/common/dispatcher/remote-executor.html
+++ b/tests/wpt/tests/common/dispatcher/remote-executor.html
@@ -3,7 +3,10 @@
 <meta charset="utf-8">
 <body>
 </body>
-<script src="./dispatcher.js"></script>
+<script src="./dispatcher.js"
+        crossorigin
+        integrity="sha256-daCATx8B9i1s6ixqZvCGcGQOv3a+VMoor6aS9UNUoiY=">
+</script>
 <script>
   const params = new URLSearchParams(window.location.search);
   const uuid = params.get('uuid');
diff --git a/tests/wpt/tests/content-security-policy/resources/ran.js b/tests/wpt/tests/content-security-policy/resources/ran.js
new file mode 100644
index 00000000000..8beb22733df
--- /dev/null
+++ b/tests/wpt/tests/content-security-policy/resources/ran.js
@@ -0,0 +1 @@
+window.ran = true;
diff --git a/tests/wpt/tests/content-security-policy/tentative/require-sri-for/script-allowed-meta.https.html b/tests/wpt/tests/content-security-policy/tentative/require-sri-for/script-allowed-meta.https.html
new file mode 100644
index 00000000000..087498f0c57
--- /dev/null
+++ b/tests/wpt/tests/content-security-policy/tentative/require-sri-for/script-allowed-meta.https.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta http-equiv="Content-Security-Policy" content="require-sri-for 'script'">
+<script>
+  window.executed_test = async_test("Script that requires integrity executes and does not generate a violation report.");
+  document.addEventListener('securitypolicyviolation', executed_test.unreached_func("No report should be generated."));
+</script>
+<script crossorigin integrity="sha384-tqyFpeo21WFM8HDeUtLqH20GUq/q3D1R6mqTzW3RtyTZ3dAYZJhC1wUcnkgOE2ak"
+        src="/content-security-policy/resources/ran.js"></script>
+<script>
+  assert_true(window.ran);
+  window.executed_test.done();
+</script>
diff --git a/tests/wpt/tests/content-security-policy/tentative/require-sri-for/script-blocked-meta.https.html b/tests/wpt/tests/content-security-policy/tentative/require-sri-for/script-blocked-meta.https.html
new file mode 100644
index 00000000000..fe69c61f5b6
--- /dev/null
+++ b/tests/wpt/tests/content-security-policy/tentative/require-sri-for/script-blocked-meta.https.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta http-equiv="Content-Security-Policy" content="require-sri-for 'script'">
+<script src="/content-security-policy/resources/ran.js"></script>
+<script>
+promise_test(async t => {
+  const watcher = new EventWatcher(t, document, ['securitypolicyviolation']);
+  const e = await watcher.wait_for('securitypolicyviolation');
+  assert_equals(e.blockedURI, `${location.origin}/content-security-policy/resources/ran.js`);
+  assert_true(typeof(window.ran) == "undefined", "Script did not ran");
+}, "Test that meta require-sri-for blocks scripts with no SRI");
+</script>
diff --git a/tests/wpt/tests/content-security-policy/tentative/require-sri-for/script.https.html b/tests/wpt/tests/content-security-policy/tentative/require-sri-for/script.https.html
new file mode 100644
index 00000000000..65553e523cc
--- /dev/null
+++ b/tests/wpt/tests/content-security-policy/tentative/require-sri-for/script.https.html
@@ -0,0 +1,164 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/dispatcher/dispatcher.js"></script>
+<script src="/common/utils.js"></script>
+<script src="/common/get-host-info.sub.js"></script>
+
+<body>
+<script>
+  const {ORIGIN} = get_host_info();
+
+  const run_test = async (test_case) => {
+    promise_test(async () => {
+      const REMOTE_EXECUTOR =
+        `/common/dispatcher/remote-executor.html?pipe=`;
+      const iframe_uuid = token();
+
+      const csp_header = test_case.report_only ?
+                         "header(Content-Security-Policy-Report-Only,require-sri-for 'script')" :
+                         "header(Content-Security-Policy,require-sri-for 'script')";
+      const iframe_url = REMOTE_EXECUTOR + encodeURIComponent(csp_header);
+
+      const iframe = document.createElement('iframe');
+      iframe.src = iframe_url + `&uuid=${iframe_uuid}`;
+      document.body.appendChild(iframe);
+
+      // Execute code directly from the iframe.
+      const ctx = new RemoteContext(iframe_uuid);
+      const result = await ctx.execute_script(async (test_case) => {
+        let blockedURI;
+        if (test_case.should_block) {
+          window.addEventListener("securitypolicyviolation", e => {
+            blockedURI = e.blockedURI;
+          });
+        }
+
+        // Load the script
+        await new Promise(resolve => {
+          const script = document.createElement('script');
+          if (test_case.cross_origin) {
+            script.crossOrigin="anonymous";
+          }
+          if (test_case.integrity) {
+            script.integrity = test_case.integrity;
+          }
+          script.onload = resolve;
+          script.onerror = resolve;
+          script.src = test_case.url;
+          document.body.appendChild(script);
+        });
+
+        return { blocked: blockedURI, ran: window.ran };
+      }, [test_case]);
+      for (const [key, value] of Object.entries(result)) {
+        assert_equals(result[key], test_case.expected[key]);
+      }
+    }, test_case.description);
+  };
+
+  const blob = new Blob([`window.ran=true;`],
+                        { type: 'application/javascript' });
+
+  const blob_url = URL.createObjectURL(blob);
+
+  // Generated using https://sha2.it/ed25519.html (In Chrome Canary, with Experimental Web Platform Features enabled)
+  const signature = encodeURIComponent(
+    'header(Unencoded-Digest, sha-384=:tqyFpeo21WFM8HDeUtLqH20GUq\/q3D1R6mqTzW3RtyTZ3dAYZJhC1wUcnkgOE2ak:)' +
+    '|header(Signature-Input, signature=\\("unencoded-digest";sf\\); keyid="JrQLj5P\/89iXES9+vFgrIy29clF9CC\/oPPsw3c5D0bs="; tag="sri")' +
+    '|header(Signature, signature=:qM19uLskHm2TQG5LJcH/hY0n0BWWzYOJztVWYlwk0cZb3u0JdgUMre1J4Jn8Tma0x2u5/kPBfbXRMbB+X+vTBw==:)');
+
+  const test_cases = [
+    {
+      description: "Ensure that a script without integrity did not run",
+      url: "/content-security-policy/resources/ran.js",
+      cross_origin: true,
+      integrity: "",
+      should_block: true,
+      report_only: false,
+      expected: {blocked: ORIGIN + "/content-security-policy/resources/ran.js", ran: false },
+    },
+    {
+      description: "Ensure that a script with unknown integrity algorithm did not run",
+      url: "/content-security-policy/resources/ran.js",
+      cross_origin: true,
+      integrity: "foobar-AAAAAAAAAAAAAAAAAAAa",
+      should_block: true,
+      report_only: false,
+      expected: {blocked: ORIGIN + "/content-security-policy/resources/ran.js", ran: false },
+    },
+    {
+      description: "Ensure that a script without integrity algorithm runs and gets reported in report-only mode",
+      url: "/content-security-policy/resources/ran.js",
+      cross_origin: true,
+      integrity: "",
+      should_block: true,
+      report_only: true,
+      expected: {blocked: ORIGIN + "/content-security-policy/resources/ran.js", ran: true },
+    },
+    {
+      description: "Ensure that a no-cors script gets blocked",
+      url: "/content-security-policy/resources/ran.js",
+      cross_origin: false,
+      integrity: "sha384-tqyFpeo21WFM8HDeUtLqH20GUq/q3D1R6mqTzW3RtyTZ3dAYZJhC1wUcnkgOE2ak",
+      should_block: true,
+      report_only: false,
+      expected: {blocked: ORIGIN + "/content-security-policy/resources/ran.js", ran: false },
+    },
+    {
+      description: "Ensure that a script with integrity runs",
+      url: "/content-security-policy/resources/ran.js",
+      cross_origin: true,
+      integrity: "sha384-tqyFpeo21WFM8HDeUtLqH20GUq/q3D1R6mqTzW3RtyTZ3dAYZJhC1wUcnkgOE2ak",
+      should_block: false,
+      report_only: false,
+      expected: {blocked: "", ran: true },
+    },
+    {
+      description: "Ensure that a script with signature integrity runs",
+      url: "/content-security-policy/resources/ran.js?pipe=" + signature,
+      cross_origin: true,
+      integrity: "ed25519-JrQLj5P/89iXES9+vFgrIy29clF9CC/oPPsw3c5D0bs=",
+      should_block: false,
+      report_only: false,
+      expected: {blocked: "", ran: true },
+    },
+    {
+      description: "Ensure that a data URI script with no integrity runs",
+      url: "data:application/javascript,window.ran=true",
+      cross_origin: true,
+      integrity: "",
+      should_block: false,
+      report_only: false,
+      expected: {blocked: "", ran: true },
+    },
+    {
+      description: "Ensure that a no-CORS data URI script with no integrity runs",
+      url: "data:application/javascript,window.ran=true",
+      cross_origin: false,
+      integrity: "",
+      should_block: false,
+      report_only: false,
+      expected: {blocked: "", ran: true },
+    },
+    {
+      description: "Ensure that a blob URL script with no integrity runs",
+      url: blob_url,
+      cross_origin: true,
+      integrity: "",
+      should_block: false,
+      report_only: false,
+      expected: {blocked: "", ran: true },
+    },
+    {
+      description: "Ensure that a no-CORS blob URL script with no integrity runs",
+      url: blob_url,
+      cross_origin: false,
+      integrity: "",
+      should_block: false,
+      report_only: false,
+      expected: {blocked: "", ran: true },
+    }
+  ];
+  test_cases.map(run_test);
+</script>
diff --git a/tests/wpt/tests/cookies/partitioned-cookies/resources/ancestor-chain-cross-site-embed.html b/tests/wpt/tests/cookies/partitioned-cookies/resources/ancestor-chain-cross-site-embed.html
index fbe2906737d..ecf1aff1844 100644
--- a/tests/wpt/tests/cookies/partitioned-cookies/resources/ancestor-chain-cross-site-embed.html
+++ b/tests/wpt/tests/cookies/partitioned-cookies/resources/ancestor-chain-cross-site-embed.html
@@ -21,7 +21,7 @@ promise_test(async () => {
 
   iframe.src = url.href;
   document.body.appendChild(iframe);
-  new Promise(r => iframe.onload = r);
+  await new Promise(r => iframe.onload = r);
 
  await fetch_tests_from_window(iframe.contentWindow);
 
diff --git a/tests/wpt/tests/cookies/samesite/resources/cross-site-frame-with-sandboxed-embed.html b/tests/wpt/tests/cookies/samesite/resources/cross-site-frame-with-sandboxed-embed.html
new file mode 100644
index 00000000000..b00b1e26832
--- /dev/null
+++ b/tests/wpt/tests/cookies/samesite/resources/cross-site-frame-with-sandboxed-embed.html
@@ -0,0 +1,24 @@
+<!doctype html>
+
+<head>
+  <meta charset="utf-8" />
+  <script src="/resources/testharness.js"></script>
+  <script src="/cookies/resources/testharness-helpers.js"></script>
+  <script src="/common/get-host-info.sub.js"></script>
+  <script src="/cookies/resources/cookie-helper.sub.js"></script>
+</head>
+
+<body>
+  <script>
+    promise_test(async (t) => {
+      const child = document.createElement("iframe");
+      child.src = SECURE_ORIGIN +
+        "/cookies/samesite/resources/same-site-none-embed.html";
+      child.sandbox = "allow-scripts allow-same-site-none-cookies"
+      document.body.appendChild(child);
+
+      await fetch_tests_from_window(child.contentWindow);
+    }, "Intermediate Frame");
+
+  </script>
+</body>
diff --git a/tests/wpt/tests/cookies/samesite/resources/same-site-none-embed.html b/tests/wpt/tests/cookies/samesite/resources/same-site-none-embed.html
new file mode 100644
index 00000000000..1dcb97d988e
--- /dev/null
+++ b/tests/wpt/tests/cookies/samesite/resources/same-site-none-embed.html
@@ -0,0 +1,17 @@
+<!doctype html>
+
+<head>
+  <script src="/cookies/resources/cookie-helper.sub.js"></script>
+  <script src="/common/get-host-info.sub.js"></script>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+</head>
+
+<body>
+  <script>
+    promise_test(async () => {
+      const val = await credFetch(SECURE_ORIGIN + "/cookies/resources/list.py");
+      assert_cookie(SECURE_ORIGIN, val => val.json().data, "samesite_none", undefined, false);
+    }, "Innermost frame contains samesite=none cookie");
+  </script>
+</body>
diff --git a/tests/wpt/tests/cookies/samesite/sandbox-allow-same-site-none-cookies-value.tentative.https.html b/tests/wpt/tests/cookies/samesite/sandbox-allow-same-site-none-cookies-value.tentative.https.html
new file mode 100644
index 00000000000..77c1386ffb4
--- /dev/null
+++ b/tests/wpt/tests/cookies/samesite/sandbox-allow-same-site-none-cookies-value.tentative.https.html
@@ -0,0 +1,41 @@
+<!doctype html>
+
+<head>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="/cookies/resources/cookie-helper.sub.js"></script>
+  <script src="/common/get-host-info.sub.js"></script>
+
+</head>
+
+<body onload="doTests()">
+  <script>
+    function doTests() {
+      promise_test(async function (t) {
+        const value = String(Math.random());
+        await resetSameSiteCookies(SECURE_ORIGIN, value);
+
+        const child = document.createElement("iframe");
+        child.src = SECURE_ORIGIN + "/cookies/samesite/resources/iframe-subresource-report.html";
+        child.sandbox = "allow-scripts allow-same-site-none-cookies";
+        document.body.appendChild(child);
+        const e = await wait_for_message("COOKIES");
+
+        assert_cookie(SECURE_ORIGIN, e.data, "samesite_lax", value, false);
+        assert_cookie(SECURE_ORIGIN, e.data, "samesite_strict", value, false);
+        assert_cookie(SECURE_ORIGIN, e.data, "samesite_none", value, true);
+      }, "SameSite=None cookies should be allowed in the iframe by the `allow-same-site-none-cookies` value");
+
+      promise_test(async function (t) {
+        await resetSameSiteCookies(SECURE_ORIGIN, Math.random());
+
+        const iframeB = document.createElement("iframe");
+        iframeB.src = SECURE_CROSS_SITE_ORIGIN + "/cookies/samesite/resources/cross-site-frame-with-sandboxed-embed.html";
+        document.body.appendChild(iframeB);
+
+        await fetch_tests_from_window(iframeB.contentWindow);
+
+      }, "SameSite=None cookies are not present in a frame with a cross-site ancestor (A->B->A)");
+    }
+  </script>
+</body>
diff --git a/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-computed.html b/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-computed.html
index 402c4b6659e..1d084e23397 100644
--- a/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-computed.html
+++ b/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-computed.html
@@ -25,4 +25,17 @@ test_computed_value("corner-top-right-shape", "round");
 test_computed_value("corner-top-right-shape", "superellipse(5)");
 test_computed_value("corner-bottom-right-shape", "scoop");
 test_computed_value("corner-bottom-left-shape", "superellipse(5)");
+test_computed_value("corner-shape", "superellipse(5) round");
+test_computed_value("corner-shape", "round");
+test_computed_value("corner-shape", "bevel superellipse(0.1) round squircle");
+test_computed_value("corner-shape", "superellipse(0.1) superellipse(3) superellipse(7) superellipse(0.1)");
+test_computed_value("corner-shape", "round round round round", "round");
+test_computed_value("corner-shape", "round scoop");
+test_computed_value("corner-shape", "round scoop round scoop", "round scoop");
+test_computed_value("corner-shape", "bevel superellipse(2)", "bevel round");
+test_computed_value("corner-shape", "superellipse(0.5) superellipse(3) straight", "scoop superellipse(3) straight");
+test_computed_value("corner-shape", "superellipse(0.5) superellipse(3) superellipse(1)", "scoop superellipse(3) bevel");
+test_computed_value("corner-shape", "bevel superellipse(2) squircle     round", "bevel round squircle");
+test_computed_value("corner-shape", "superellipse(0.5) superellipse(3) superellipse(1) superellipse(infinity)", "scoop superellipse(3) bevel straight");
+
 </script>
diff --git a/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-invalid.html b/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-invalid.html
index 490b8613945..582617a634a 100644
--- a/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-invalid.html
+++ b/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-invalid.html
@@ -19,4 +19,7 @@ test_invalid_value("corner-shape", "superellipse(,)");
 test_invalid_value("corner-shape", "superellipse(4,0.1)");
 test_invalid_value("corner-shape", "superellipse(foo)");
 test_invalid_value("corner-shape", "superellipse(1 abc)");
+test_invalid_value("corner-shape", "superellipse(1) / bevel");
+test_invalid_value("corner-shape", "superellipse(1) / superellipse(3)");
+test_invalid_value("corner-shape", "superellipse(1), superellipse(3)");
 </script>
diff --git a/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-valid.html b/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-valid.html
index 61005759d12..32aaa89fc5b 100644
--- a/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-valid.html
+++ b/tests/wpt/tests/css/css-borders/tentative/parsing/corner-shape-valid.html
@@ -36,4 +36,13 @@
             test_values_for_prop(`corner-${block}-${inline}-shape`);
         }
     }
+    test_valid_value("corner-shape", "round round round round", "round");
+    test_valid_value("corner-shape", "round scoop");
+    test_valid_value("corner-shape", "round scoop round scoop", "round scoop");
+    test_valid_value("corner-shape", "bevel superellipse(2)");
+    test_valid_value("corner-shape", "superellipse(0.5) superellipse(3) straight");
+    test_valid_value("corner-shape", "superellipse(0.5) superellipse(3) superellipse(1)");
+    test_valid_value("corner-shape", "bevel superellipse(2) squircle     round", "bevel superellipse(2) squircle round");
+    test_valid_value("corner-shape", "superellipse(0.5) superellipse(3) superellipse(1) superellipse(infinity)");
+
 </script>
diff --git a/tests/wpt/tests/css/css-color/parsing/color-computed-contrast-color-function.html b/tests/wpt/tests/css/css-color/parsing/color-computed-contrast-color-function.html
new file mode 100644
index 00000000000..57537dd929f
--- /dev/null
+++ b/tests/wpt/tests/css/css-color/parsing/color-computed-contrast-color-function.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Test CSS Color Module 5 contrast-color() computed value</title>
+<link rel="author" title="Sam Weinig" href="mailto:sam@webkit.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-5/#contrast-color">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #container {
+    container-type: inline-size;
+    width: 10px;
+    color: pink;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+
+// NOTE: As the algorithm for determining constrast is not defined, all computed values can validly be either `rgb(0, 0, 0)` or `rgb(255, 255, 255)`.
+
+// Test basic legacy colors
+test_computed_value("background-color", "contrast-color(white)", ["rgb(0, 0, 0)", "rgb(255, 255, 255)"]);
+test_computed_value("background-color", "contrast-color(black)", ["rgb(0, 0, 0)", "rgb(255, 255, 255)"]);
+test_computed_value("background-color", "contrast-color(pink)", ["rgb(0, 0, 0)", "rgb(255, 255, 255)"]);
+
+// Test non-legacy colors
+test_computed_value("background-color", "contrast-color(color(srgb 1 0 1 / 0.5))", ["rgb(0, 0, 0)", "rgb(255, 255, 255)"]);
+test_computed_value("background-color", "contrast-color(lab(0.2 0.5 0.2))", ["rgb(0, 0, 0)", "rgb(255, 255, 255)"]);
+
+// Test out-of-gamut colors
+test_computed_value("background-color", "contrast-color(color(srgb 10 10 10))", ["rgb(0, 0, 0)", "rgb(255, 255, 255)"]);
+test_computed_value("background-color", "contrast-color(color(srgb -10 -10 -10))", ["rgb(0, 0, 0)", "rgb(255, 255, 255)"]);
+
+// Test nested contrast-color
+test_computed_value("background-color", "contrast-color(contrast-color(pink))", ["rgb(0, 0, 0)", "rgb(255, 255, 255)"]);
+
+// Test currentColor
+test_computed_value("background-color", "contrast-color(currentcolor)", ["rgb(0, 0, 0)", "rgb(255, 255, 255)"]);
+
+// Test color using calc().
+test_computed_value("background-color", "contrast-color(color(srgb calc(1 + (sign(20cqw - 10px) * 1)) calc(1 + (sign(20cqw - 10px) * 1)) calc(1 + (sign(20cqw - 10px) * 1))))", ["rgb(0, 0, 0)", "rgb(255, 255, 255)"]);
+
+</script>
+</body>
+</html>
diff --git a/tests/wpt/tests/css/css-color/parsing/color-invalid-contrast-color-function.html b/tests/wpt/tests/css/css-color/parsing/color-invalid-contrast-color-function.html
new file mode 100644
index 00000000000..0c5741e2397
--- /dev/null
+++ b/tests/wpt/tests/css/css-color/parsing/color-invalid-contrast-color-function.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Test CSS Color Module 5 contrast-color() computed value</title>
+<link rel="author" title="Sam Weinig" href="mailto:sam@webkit.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-5/#contrast-color">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  #container {
+    container-type: inline-size;
+    width: 10px;
+    color: pink;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+
+test_invalid_value("background-color", "contrast-color()");
+test_invalid_value("background-color", "contrast-color(1)");
+test_invalid_value("background-color", "contrast-color(max)");
+test_invalid_value("background-color", "contrast-color(max max)");
+test_invalid_value("background-color", "contrast-color(max white)");
+test_invalid_value("background-color", "contrast-color(white white)");
+test_invalid_value("background-color", "contrast-color(white max)");
+test_invalid_value("background-color", "contrast-color(white min)");
+test_invalid_value("background-color", "contrast-color(white max bar)");
+
+</script>
+</body>
+</html>
diff --git a/tests/wpt/tests/css/css-color/parsing/color-valid-contrast-color-function.html b/tests/wpt/tests/css/css-color/parsing/color-valid-contrast-color-function.html
new file mode 100644
index 00000000000..85a133b78e9
--- /dev/null
+++ b/tests/wpt/tests/css/css-color/parsing/color-valid-contrast-color-function.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Test CSS Color Module 5 contrast-color() parsing valid values</title>
+<link rel="author" title="Sam Weinig" href="mailto:sam@webkit.org">
+<link rel="help" href="https://drafts.csswg.org/css-color-5/#contrast-color">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  #container {
+    container-type: inline-size;
+    width: 10px;
+    color: pink;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+
+// Test basic legacy colors
+test_valid_value("background-color", "contrast-color(white)");
+test_valid_value("background-color", "contrast-color(black)");
+test_valid_value("background-color", "contrast-color(pink)");
+
+// Test non-legacy colors
+test_valid_value("background-color", "contrast-color(color(srgb 1 0 1 / 0.5))");
+test_valid_value("background-color", "contrast-color(lab(0.2 0.5 0.2))");
+
+// Test out-of-gamut colors
+test_valid_value("background-color", "contrast-color(color(srgb 10 10 10))");
+test_valid_value("background-color", "contrast-color(color(srgb -10 -10 -10))");
+
+// Test nested contrast-color
+test_valid_value("background-color", "contrast-color(contrast-color(pink))");
+
+// Test currentColor
+test_valid_value("background-color", "contrast-color(currentcolor)");
+
+// Test color using calc().
+test_valid_value("background-color", "contrast-color(color(srgb calc(0.5) calc(1 + (sign(20cqw - 10px) * 0.5)) 1 / .5))", "contrast-color(color(srgb calc(0.5) calc(1 + (0.5 * sign(20cqw - 10px))) 1 / 0.5))");
+
+</script>
+</body>
+</html>
diff --git a/tests/wpt/tests/css/css-flexbox/flexbox_justifycontent-stretch.html b/tests/wpt/tests/css/css-flexbox/flexbox_justifycontent-stretch.html
new file mode 100644
index 00000000000..d49689d1dc0
--- /dev/null
+++ b/tests/wpt/tests/css/css-flexbox/flexbox_justifycontent-stretch.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>justify-content:stretch behaves as justify-content:flex-start</title>
+<link rel="help" href="https://issues.chromium.org/issues/395659796">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<p>Test passes if there is a filled green square.</p>
+<div style="width: 200px; height: 100px; display: flex; justify-content: stretch;">
+  <div style="width: 50px; background: green;"></div>
+  <div style="width: 50px; background: green;"></div>
+</div>
diff --git a/tests/wpt/tests/css/css-fonts/italic-oblique-fallback-ref.html b/tests/wpt/tests/css/css-fonts/italic-oblique-fallback-ref.html
new file mode 100644
index 00000000000..6dd1a7bac22
--- /dev/null
+++ b/tests/wpt/tests/css/css-fonts/italic-oblique-fallback-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<title>CSS Fonts reference: oblique/italic fallback</title>
+
+<style>
+@font-face {
+  font-family: ref1;
+  src: url("resources/markA.ttf");
+}
+
+@font-face {
+  font-family: ref2;
+  src: url("resources/markA.ttf");
+  size-adjust: 50%;
+}
+
+div {
+  font-size: 50px;
+}
+
+.ref1 {
+  font-family: ref1, serif;
+}
+
+.ref2 {
+  font-family: ref2, serif;
+}
+</style>
+
+<div class="ref1">A<span class="ref2">A</span></div>
+<div class="ref1">A<span class="ref2">A</span></div>
+<br>
+<div class="ref1">A<span class="ref2">A</span></div>
+<div class="ref1">AA</div>
+<br>
+<div class="ref1">AA</div>
+<div class="ref1">AA</div>
diff --git a/tests/wpt/tests/css/css-fonts/italic-oblique-fallback.html b/tests/wpt/tests/css/css-fonts/italic-oblique-fallback.html
new file mode 100644
index 00000000000..48187ea0f7e
--- /dev/null
+++ b/tests/wpt/tests/css/css-fonts/italic-oblique-fallback.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<title>CSS Fonts testcase: oblique/italic fallback</title>
+
+<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-style-matching">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9389#issuecomment-2625314278">
+<meta name="assert" content="request for 'oblique' style should not fall back to a face labelled 'italic'">
+<link rel="match" href="italic-oblique-fallback-ref.html">
+
+<style>
+/* font-family test1 has 'normal' and 'oblique' (reduced-size) faces */
+@font-face {
+  font-family: test1;
+  font-style: normal;
+  src: url("resources/markA.ttf");
+}
+@font-face {
+  font-family: test1;
+  font-style: oblique;
+  src: url("resources/markA.ttf");
+  size-adjust: 50%;
+}
+
+/* font-family test2 has 'normal' and 'italic' (reduced-size) faces */
+@font-face {
+  font-family: test2;
+  font-style: normal;
+  src: url("resources/markA.ttf");
+}
+@font-face {
+  font-family: test2;
+  font-style: italic;
+  src: url("resources/markA.ttf");
+  size-adjust: 50%;
+}
+
+/* font-family test3 has only an 'italic' face */
+@font-face {
+  font-family: test3;
+  font-style: italic;
+  src: url("resources/markA.ttf");
+}
+
+div {
+  font-size: 50px;
+  font-synthesis: none;
+}
+
+.test1 {
+  font-family: test1, serif;
+}
+
+.test2 {
+  font-family: test2, serif;
+}
+
+.test3 {
+  font-family: test3, serif;
+}
+</style>
+
+<!-- (1) font family with 'normal' and 'oblique' faces -->
+  <!-- the span uses the 'oblique' face -->
+  <div class="test1">A<span style="font-style:oblique">A</span></div>
+  <!-- the span requests 'italic', will fall back to the 'oblique' face -->
+  <div class="test1">A<span style="font-style:italic">A</span></div>
+
+<br>
+
+<!-- (2) font family with 'normal' and 'italic' faces -->
+  <!-- the span uses the 'italic' face -->
+  <div class="test2">A<span style="font-style:italic">A</span></div>
+  <!-- the span requests 'oblique', should NOT fall back to the 'italic' face -->
+  <div class="test2">A<span style="font-style:oblique">A</span></div>
+
+<br>
+
+<!-- (3) font family with only an 'italic' face -->
+  <!-- the ONLY face in the family is 'italic', so it will be used throughout -->
+  <div class="test3">A<span style="font-style:italic">A</span></div>
+  <div class="test3">A<span style="font-style:oblique">A</span></div>
diff --git a/tests/wpt/tests/css/css-fonts/variations/at-font-face-font-matching.html b/tests/wpt/tests/css/css-fonts/variations/at-font-face-font-matching.html
index ba18f9d5ab2..7511a83c425 100644
--- a/tests/wpt/tests/css/css-fonts/variations/at-font-face-font-matching.html
+++ b/tests/wpt/tests/css/css-fonts/variations/at-font-face-font-matching.html
@@ -3,6 +3,7 @@
 <head>
     <title>Testing @font-face font matching logic introduced in CSS Fonts level 4</title>
     <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm" />
+    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9389#issuecomment-2625314278">
     <meta name="timeout" content="long">
     <script src="/resources/testharness.js"></script>
     <script src="/resources/testharnessreport.js"></script>
@@ -21,7 +22,7 @@
         @font-face { font-family: W300; src: url('./resources/csstest-weights-300-kerned.ttf'); }
 
 
-        @font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-100-kerned.ttf'); font-stretch : 125%; }
+        @font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-100-kerned.ttf'); font-stretch: 125%; }
         @font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-200-kerned.ttf'); font-style: italic; }
         @font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-300-kerned.ttf'); font-weight: 350; }
     </style>
@@ -77,9 +78,9 @@
         }
 
         var descriptorPriorityCases = [
-            { weight: "normal", style: "oblique -5deg", stretch: "125%",   expectedFamily: "'W100'", description: "Stretch has higher priority than style"},
-            { weight: "350",    style: "normal",        stretch: "125%",   expectedFamily: "'W100'", description: "Stretch has higher priority than weight"},
-            { weight: "350",    style: "oblique -5deg", stretch: "normal", expectedFamily: "'W200'", description: "Style has higher priority than weight"}
+            { weight: "normal", style: "italic", stretch: "125%",   expectedFamily: "'W100'", description: "Stretch has higher priority than style"},
+            { weight: "350",    style: "normal", stretch: "125%",   expectedFamily: "'W100'", description: "Stretch has higher priority than weight"},
+            { weight: "350",    style: "italic", stretch: "normal", expectedFamily: "'W200'", description: "Style has higher priority than weight"}
         ];
 
         descriptorPriorityCases.forEach(function (testCase) {
@@ -181,13 +182,13 @@
         testDescriptor("font-style", [
             { value: "normal",         testDescriptors: ["normal", "oblique 10deg 40deg", "oblique 20deg 30deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
             { value: "italic",         testDescriptors: ["italic", "oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 5deg 10deg", "oblique 5deg", "normal", "oblique -60deg -30deg", "oblique -50deg -40deg" ] },
-            { value: "oblique 20deg",  testDescriptors: ["oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
-            { value: "oblique 21deg",  testDescriptors: ["oblique 21deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 20deg", "oblique 10deg", "italic", "oblique 0deg",  "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
-            { value: "oblique 10deg",  testDescriptors: ["oblique 10deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
-            { value: "oblique 0deg",   testDescriptors: ["oblique 0deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },
-            { value: "oblique -10deg", testDescriptors: ["oblique -10deg", "oblique -5deg", "oblique -1deg 0deg", "oblique -20deg -15deg", "oblique -60deg -30deg", "oblique -50deg -40deg", "italic", "oblique 0deg 10deg", "oblique 40deg 50deg" ] },
-            { value: "oblique -20deg", testDescriptors: ["oblique -20deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },
-            { value: "oblique -21deg", testDescriptors: ["oblique -21deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },
+            { value: "oblique 20deg",  testDescriptors: ["oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 10deg", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg", "italic" ] },
+            { value: "oblique 21deg",  testDescriptors: ["oblique 21deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 20deg", "oblique 10deg", "oblique 0deg",  "oblique -50deg -20deg", "oblique -40deg -30deg", "italic" ] },
+            { value: "oblique 10deg",  testDescriptors: ["oblique 10deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg", "italic" ] },
+            { value: "oblique 0deg",   testDescriptors: ["oblique 0deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique -50deg -20deg", "oblique -40deg -30deg", "italic" ] },
+            { value: "oblique -10deg", testDescriptors: ["oblique -10deg", "oblique -5deg", "oblique -1deg 0deg", "oblique -20deg -15deg", "oblique -60deg -30deg", "oblique -50deg -40deg", "oblique 0deg 10deg", "oblique 40deg 50deg", "italic" ] },
+            { value: "oblique -20deg", testDescriptors: ["oblique -20deg", "oblique -60deg -40deg", "oblique -10deg", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic"] },
+            { value: "oblique -21deg", testDescriptors: ["oblique -21deg", "oblique -60deg -40deg", "oblique -10deg", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic"] },
         ]);
 
     </script>
diff --git a/tests/wpt/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html b/tests/wpt/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html
index 77e9c22294d..6c73370937c 100644
--- a/tests/wpt/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html
+++ b/tests/wpt/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html
@@ -39,7 +39,7 @@
 .gridAutoAndAuto { grid-template-rows: auto auto; }
 .gridAutoAndMinMaxAutoAuto { grid-template-rows: auto minmax(auto, auto); }
 .gridMinMaxAutoMaxContentAndAuto { grid-template-rows: minmax(auto, max-content) auto; }
-
+</style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
@@ -230,7 +230,7 @@
 function testGridRowsValues(id, computedRowValue)
 {
   assert_equals(window.getComputedStyle(document.getElementById(id))
-      .getPropertyValue('grid-template-rows')", computedRowValue);
+      .getPropertyValue('grid-template-rows'), computedRowValue);
 }
 
 setup({ explicit_done: true });
diff --git a/tests/wpt/tests/css/css-highlight-api/HighlightRegistry-highlightsFromPoint.html b/tests/wpt/tests/css/css-highlight-api/HighlightRegistry-highlightsFromPoint.html
new file mode 100644
index 00000000000..5bb81bea69a
--- /dev/null
+++ b/tests/wpt/tests/css/css-highlight-api/HighlightRegistry-highlightsFromPoint.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<meta name="author" title="Fernando Fiori" href="mailto:ffiori@microsoft.com">
+<meta name="assert" content="HighlightRegistry.highlightsFromPoint returns the Highlights present at the coordinates provided as argument in the right order.">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/highlight/HighlightsFromPointsExplainer.md">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+::highlight(example-highlight) {
+    background-color: rgba(0, 255, 255, 0.5);
+}
+::highlight(example-highlight-2) {
+    background-color: rgba(255, 255, 0, 0.5);
+}
+body {
+    font-family: monospace;
+}
+</style>
+<span id="example-span">0123456789</span>
+<script>
+    test(() => {
+        assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint("asdf", 10); });
+        assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(10); });
+        assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(); });
+        assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(10, 10, "asdf"); });
+    }, 'CSS.highlights.highlightsFromPoint() should throw when called with incorrect parameters.');
+
+    test(() => {
+        assert_equals(CSS.highlights.highlightsFromPoint(-1,-1).length, 0);
+    }, 'CSS.highlights.highlightsFromPoint() should return an empty vector when called with a point outside the document.');
+
+    test(() => {
+        // Set two Highlights in this way: 01[234[56789]]
+        const textNode = document.querySelector("#example-span");
+        let range1 = new Range();
+        range1.setStart(textNode.childNodes[0], 2);
+        range1.setEnd(textNode.childNodes[0], 10);
+        let range2 = new Range();
+        range2.setStart(textNode.childNodes[0], 5);
+        range2.setEnd(textNode.childNodes[0], 10);
+
+        let highlight1 = new Highlight(range1);
+        CSS.highlights.set("example-highlight", highlight1);
+        let highlight2 = new Highlight(range2);
+        CSS.highlights.set("example-highlight-2", highlight2);
+
+        const rect = textNode.getBoundingClientRect();
+        const characterWidth = rect.width / textNode.textContent.length;
+
+        // No Highlights outside of text contents.
+        let x = rect.left - 1;
+        let y = rect.top - 1;
+        let highlights = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the coordinates provided are outside of the text contents');
+
+        // Get x and y coordinates between '0' and '1'.
+        x = rect.left + characterWidth;
+        y = rect.top + rect.height / 2;
+        highlights = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the coordinates provided point at no Highlights');
+
+        // Get x and y coordinates between '2' and '3'.
+        x = rect.left + 3 * characterWidth;
+        highlights = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlights.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one Highlight when the coordinates provided point at one Highlight');
+        assert_equals(highlights[0], highlight1, 'CSS.highlights.highlightsFromPoint() returns the Highlight present at the coordinates provided');
+
+        // Get x and y coordinates between '6' and '7'.
+        // Same priority for the Highlights, break tie by order of registration.
+        x = rect.left + 7 * characterWidth;
+        highlights = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlights.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two Highlights when the coordinates provided point at two overlapping Highlights');
+        assert_equals(highlights[0], highlight2, 'CSS.highlights.highlightsFromPoint() returns first the Highlight registered last when both Highlights present at the point provided have the same priority');
+        assert_equals(highlights[1], highlight1, 'CSS.highlights.highlightsFromPoint() returns last the Highlight registered first when both Highlights present at the point provided have the same priority');
+
+        // Now highlight1 should be first because it's got higher priority.
+        highlight1.priority = 2;
+        highlight2.priority = 1;
+        highlights = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlights.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two Highlights when the coordinates provided point at two overlapping Highlights');
+        assert_equals(highlights[0], highlight1, 'CSS.highlights.highlightsFromPoint() returns first the Highlight with higher priority when there are two Highlights present at the point provided');
+        assert_equals(highlights[1], highlight2, 'CSS.highlights.highlightsFromPoint() returns last the Highlight with lower priority when there are two Highlights present at the point provided');
+    }, 'CSS.highlights.highlightsFromPoint() returns Highlights present at the given point in the right order.');
+</script>
\ No newline at end of file
diff --git a/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-001.html b/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-001.html
index f4217e8467b..c22151b2b02 100644
--- a/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-001.html
+++ b/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-001.html
@@ -6,6 +6,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
 <link rel="match" href="gradient-longer-hue-lch-001-ref.html">
 <meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
+<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-70">
 
 <style>
 div {
diff --git a/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-002.html b/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-002.html
index adb54a0dd66..448f09033ef 100644
--- a/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-002.html
+++ b/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-002.html
@@ -6,6 +6,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
 <link rel="match" href="gradient-longer-hue-lch-002-ref.html">
 <meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
+<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-50">
 
 <style>
 div {
diff --git a/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-006.html b/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-006.html
index d44c9c4b961..4cd257b8bf8 100644
--- a/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-006.html
+++ b/tests/wpt/tests/css/css-images/gradient/gradient-longer-hue-lch-006.html
@@ -6,6 +6,7 @@
 <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
 <link rel="match" href="gradient-longer-hue-lch-006-ref.html">
 <meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
+<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-20">
 
 <style>
 div {
diff --git a/tests/wpt/tests/css/css-inline/empty-span-scroll-ref.html b/tests/wpt/tests/css/css-inline/empty-span-scroll-ref.html
new file mode 100644
index 00000000000..28b7f6e2df4
--- /dev/null
+++ b/tests/wpt/tests/css/css-inline/empty-span-scroll-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#invisible-line-boxes">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1946899">
+<style>
+body {
+  margin: 0;
+}
+.filler {
+  height: 3000px;
+  background: red;
+}
+.good {
+  height: 100vh;
+  background: green;
+}
+</style>
+<span><div class="filler"></div></span>
+<span><div id="target" class="good"></div></span>
+<span><div class="filler"></div></span>
+<script>
+target.scrollIntoView();
+document.documentElement.className = "";
+</script>
diff --git a/tests/wpt/tests/css/css-inline/empty-span-scroll.html b/tests/wpt/tests/css/css-inline/empty-span-scroll.html
new file mode 100644
index 00000000000..a7bb0926602
--- /dev/null
+++ b/tests/wpt/tests/css/css-inline/empty-span-scroll.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#invisible-line-boxes">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1946899">
+<link rel="match" href="empty-span-scroll-ref.html">
+<style>
+body {
+  margin: 0;
+}
+.relative {
+  position: relative;
+}
+.scroll-target {
+  position: absolute;
+  top: 0;
+}
+.filler {
+  height: 3000px;
+  background: red;
+}
+.good {
+  height: 100vh;
+  background: green;
+}
+</style>
+<span><div class="filler"></div></span>
+<span>
+  <span class="relative">
+    <a class="scroll-target" id="target"></a>
+  </span>
+</span>
+<span><div class="good"></div></span>
+<span><div class="filler"></div></span>
+<script>
+target.scrollIntoView();
+document.documentElement.className = "";
+</script>
diff --git a/tests/wpt/tests/css/css-mixins/dashed-function-eval.html b/tests/wpt/tests/css/css-mixins/dashed-function-eval.html
index 7726e832e02..1eaad4e3cf0 100644
--- a/tests/wpt/tests/css/css-mixins/dashed-function-eval.html
+++ b/tests/wpt/tests/css/css-mixins/dashed-function-eval.html
@@ -8,6 +8,13 @@
 <div id=target></div>
 <div id=main></div>
 
+<div id=host>
+  <template shadowrootmode="open">
+    <div id=target></div>
+    <div id=main></div>
+  </template>
+</div>
+
 <!-- To pass, a test must produce matching computed values for --actual and
      --expected on #target. -->
 
@@ -681,4 +688,8 @@
 
 <script>
   test_all_templates();
+  const shadowTarget = host.shadowRoot.getElementById('target');
+  const shadowTemplateTarget = host.shadowRoot.getElementById('main');
+  test_all_templates(shadowTarget, main, 'Shadow DOM');
+  test_all_templates(shadowTarget, shadowTemplateTarget, 'Shadow DOM defined');
 </script>
diff --git a/tests/wpt/tests/css/css-mixins/function-conditionals.html b/tests/wpt/tests/css/css-mixins/function-conditionals.html
index e6113703d70..18e82e53b61 100644
--- a/tests/wpt/tests/css/css-mixins/function-conditionals.html
+++ b/tests/wpt/tests/css/css-mixins/function-conditionals.html
@@ -5,7 +5,16 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="resources/utils.js"></script>
 
-<div id=target></div>
+<style>
+  #container {
+    container-type: size;
+    width: 100px;
+    height: 50px;
+  }
+</style>
+<div id=container>
+  <div id=target></div>
+<div>
 <div id=main></div>
 
 <!-- To pass, a test must produce matching computed values for --actual and
@@ -238,6 +247,177 @@
   </style>
 </template>
 
+
+<!-- @container -->
+
+<template data-name="Basic @container">
+  <style>
+    @function --f() {
+      result: FAIL;
+      @container (width = 100px) {
+        result: PASS;
+      }
+    }
+    #target {
+      --actual: --f();
+      --expected: PASS;
+    }
+  </style>
+</template>
+
+<template data-name="Basic @container (false)">
+  <style>
+    @function --f() {
+      result: PASS;
+      @container (width = 110px) {
+        result: FAIL;
+      }
+    }
+    #target {
+      --actual: --f();
+      --expected: PASS;
+    }
+  </style>
+</template>
+
+<template data-name="Nested @container">
+  <style>
+    @function --f() {
+      result: FAIL;
+      @container (width = 100px) {
+        @container (not (height = 75px)) {
+          result: PASS;
+        }
+        @container (height: 75px) {
+          result: FAIL;
+        }
+      }
+    }
+    #target {
+      --actual: --f();
+      --expected: PASS;
+    }
+  </style>
+</template>
+
+<template data-name="Nested @container (false)">
+  <style>
+    @function --f() {
+      result: PASS;
+      @container (width = 200px) {
+        @container (not (height = 75px)) {
+          result: FAIL;
+        }
+        @container (width: 75px) {
+          result: FAIL;
+        }
+      }
+    }
+    #target {
+      --actual: --f();
+      --expected: PASS;
+    }
+  </style>
+</template>
+
+<template data-name="Locals within @container">
+  <style>
+    @function --f() {
+      --x: FAIL;
+      @container (width = 100px) {
+        --x: PASS;
+      }
+      result: var(--x);
+    }
+    #target {
+      --actual: --f();
+      --expected: PASS;
+    }
+  </style>
+</template>
+
+<template data-name="@supports within @container">
+  <style>
+    @function --f() {
+      --x: FAIL;
+      @container (width = 100px) {
+        @supports (color: green) {
+          --x: PASS;
+        }
+        @supports (not (color: green)) {
+          --x: FAIL;
+        }
+      }
+      result: var(--x);
+    }
+    #target {
+      --actual: --f();
+      --expected: PASS;
+    }
+  </style>
+</template>
+
+<template data-name="@container within @supports">
+  <style>
+    @function --f() {
+      --x: FAIL;
+      @supports (color: green) {
+        @container (width = 100px) {
+          --x: PASS;
+        }
+        @container (width = 75px) {
+          --x: FAIL;
+        }
+      }
+      result: var(--x);
+    }
+    #target {
+      --actual: --f();
+      --expected: PASS;
+    }
+  </style>
+</template>
+
+<template data-name="@container, @media, @supports">
+  <style>
+    @function --f() {
+      --x: FAIL;
+      @container (width = 100px) {
+        @media (width > 0px) {
+          @supports (color: red) {
+            --x: PASS;
+          }
+        }
+      }
+      result: var(--x);
+    }
+    #target {
+      --actual: --f();
+      --expected: PASS;
+    }
+  </style>
+</template>
+
+<template data-name="@supports, @media, @container">
+  <style>
+    @function --f() {
+      --x: FAIL;
+      @supports (color: red) {
+        @media (width > 0px) {
+          @container (width = 100px) {
+            --x: PASS;
+          }
+        }
+      }
+      result: var(--x);
+    }
+    #target {
+      --actual: --f();
+      --expected: PASS;
+    }
+  </style>
+</template>
+
 <script>
   test_all_templates();
 </script>
diff --git a/tests/wpt/tests/css/css-mixins/function-container-dynamic.html b/tests/wpt/tests/css/css-mixins/function-container-dynamic.html
new file mode 100644
index 00000000000..f05c347a2ab
--- /dev/null
+++ b/tests/wpt/tests/css/css-mixins/function-container-dynamic.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<title>Custom Functions: @container responds to changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-mixins-1/#conditional-rules">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #container {
+    container-type: size;
+    width: 50px;
+    height: 50px;
+  }
+  @function --f() {
+    result: A;
+    @container (width = 100px) {
+      result: B;
+    }
+    @container ((width >= 110px) and (width <= 140px)) {
+      result: C;
+    }
+    @container (width = 150px) {
+      result: D;
+    }
+  }
+  #target {
+    --actual: --f();
+  }
+</style>
+
+<div id=container>
+  <div id=target>
+  </div>
+</div>
+
+<script>
+  test(() => {
+    let actualValue = () => getComputedStyle(target).getPropertyValue('--actual');
+
+    assert_equals(actualValue(), 'A', '--actual before resize');
+
+    // [<width of container>, <expected function result>]
+    let data = [
+      ['100px', 'B'],
+      ['105px', 'A'],
+      ['110px', 'C'],
+      ['125px', 'C'],
+      ['140px', 'C'],
+      ['145px', 'A'],
+      ['150px', 'D'],
+      ['155px', 'A'],
+    ];
+
+    for (let d of data) {
+      container.style.width = d[0];
+      let expected = d[1];
+      assert_equals(actualValue(), expected, `--actual after resize to ${d[0]}`);
+    }
+  });
+</script>
diff --git a/tests/wpt/tests/css/css-mixins/function-container-self.html b/tests/wpt/tests/css/css-mixins/function-container-self.html
new file mode 100644
index 00000000000..39a65986a80
--- /dev/null
+++ b/tests/wpt/tests/css/css-mixins/function-container-self.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>Custom Functions: @container can not query self</title>
+<link rel="help" href="https://drafts.csswg.org/css-mixins-1/#conditional-rules">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #container, #target {
+    container-type: size;
+  }
+  #container {
+    width: 100px;
+    height: 100px;
+  }
+  #target {
+    width: 50px;
+    height: 50px;
+  }
+  @function --f() {
+    result: A;
+    @container (width = 100px) {
+      result: B;
+    }
+    @container (width = 50px) {
+      result: C;
+    }
+  }
+  #target {
+    --actual: --f();
+  }
+</style>
+
+<div id=container>
+  <div id=target>
+  </div>
+</div>
+
+<script>
+  test(() => {
+    // Even though #target is a CQ container, the @container rules should
+    // not evaluate against that element.
+    assert_equals(getComputedStyle(target).getPropertyValue('--actual'), 'B');
+  });
+</script>
diff --git a/tests/wpt/tests/css/css-mixins/function-container-style.html b/tests/wpt/tests/css/css-mixins/function-container-style.html
new file mode 100644
index 00000000000..260f3d08d1e
--- /dev/null
+++ b/tests/wpt/tests/css/css-mixins/function-container-style.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<title>Custom Functions: @container style queries</title>
+<link rel="help" href="https://drafts.csswg.org/css-mixins-1/#conditional-rules">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #container, #target {
+    container-type: size;
+  }
+  #size-container {
+    container-type: size;
+    width: 100px;
+    height: 100px;
+    --x: size;
+  }
+  #parent {
+    --x: parent;
+  }
+  @function --f() {
+    result: A;
+    @container (style(--x: before)) {
+      result: B;
+    }
+    @container (style(--x: target)) {
+      result: C;
+    }
+    @container (style(--x: parent)) {
+      result: D;
+    }
+    @container (style(--x: size)) {
+      result: E;
+    }
+  }
+  #target {
+    --x: target;
+    --actual: --f();
+  }
+  #target::before {
+    content: "test";
+    --x: before;
+    --actual: --f();
+  }
+</style>
+
+<div id=size-container>
+  <div id=parent>
+    <div id=target>
+    </div>
+  </div>
+</div>
+
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(target).getPropertyValue('--x'), 'target');
+    assert_equals(getComputedStyle(target).getPropertyValue('--actual'), 'D');
+  }, 'Style query on #target should query parent element');
+
+  test(() => {
+    assert_equals(getComputedStyle(target, '::before').getPropertyValue('--x'), 'before');
+    assert_equals(getComputedStyle(target, '::before').getPropertyValue('--actual'), 'C');
+  }, 'Style query on ::before should query originating element');
+</script>
diff --git a/tests/wpt/tests/css/css-mixins/resources/utils.js b/tests/wpt/tests/css/css-mixins/resources/utils.js
index 0e196b72573..cc9f008916b 100644
--- a/tests/wpt/tests/css/css-mixins/resources/utils.js
+++ b/tests/wpt/tests/css/css-mixins/resources/utils.js
@@ -15,17 +15,20 @@
 // The test passes if the computed value of --actual matches
 // the computed value of --expected on #target.
 //
-// Elements <div id=target> and <div=main> are assumed to exist.
-function test_all_templates() {
+// Arguments:
+// * `styleTarget`, defaults to <div id=target>, which is assumed to exist.
+// * `templateTarget` defaults to <div=main>, which are assumed to exist.
+// * `descriptor` optional test descriptor
+function test_all_templates(styleTarget = target, templateTarget = main, descriptor = '') {
   let templates = document.querySelectorAll('template');
   for (let template of templates) {
     test((t) => {
-      t.add_cleanup(() => main.replaceChildren());
-      main.append(template.content.cloneNode(true));
-      let cs = getComputedStyle(target);
+      t.add_cleanup(() => templateTarget.replaceChildren());
+      templateTarget.append(template.content.cloneNode(true));
+      let cs = getComputedStyle(styleTarget);
       let actual = cs.getPropertyValue('--actual');
       let expected = cs.getPropertyValue('--expected');
       assert_equals(actual, expected);
-    }, template.getAttribute('data-name'));
+    }, `${descriptor ? `${descriptor}: `: ''}${template.getAttribute('data-name')}`);
   }
 }
diff --git a/tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius-ref.html b/tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius-ref.html
index 10301224070..1611180e637 100644
--- a/tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius-ref.html
+++ b/tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius-ref.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<meta charset="utf-8">
 <title>CSS Reference: overflow-clip-margin with border-radius</title>
 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
 <style>
diff --git a/tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius.html b/tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius.html
index 723b7c0e9ee..52edf802404 100644
--- a/tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius.html
+++ b/tests/wpt/tests/css/css-overflow/overflow-clip-margin-border-radius.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<meta charset="utf-8">
 <title>CSS Test: overflow-clip-margin with border-radius</title>
 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-overflow-4/#overflow-clip-margin">
diff --git a/tests/wpt/tests/css/css-overflow/overflow-shorthand-002.html b/tests/wpt/tests/css/css-overflow/overflow-shorthand-002.html
index 6d5006497b7..a2769488700 100644
--- a/tests/wpt/tests/css/css-overflow/overflow-shorthand-002.html
+++ b/tests/wpt/tests/css/css-overflow/overflow-shorthand-002.html
@@ -27,7 +27,7 @@
   }, "overflow - horizontal writing mode");
 
   test(() => {
-    const style =getComputedStyle(vertical);
+    const style = getComputedStyle(vertical);
     assert_equals(style.overflowX, "visible");
     assert_equals(style.overflowY, "clip");
     assert_equals(style.overflowInline, "clip");
diff --git a/tests/wpt/tests/css/css-overflow/scroll-marker-activation-scroll.html b/tests/wpt/tests/css/css-overflow/scroll-marker-activation-scroll.html
new file mode 100644
index 00000000000..2a8be10d5a4
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scroll-marker-activation-scroll.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: ::scroll-marker only scrolls associated scrolling container</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-activation">
+<script src="/dom/events/scrolling/scroll_support.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+  body {
+    margin: 0;
+  }
+
+  #ancestor-scroller {
+    border: 2px solid gray;
+    width: 600px;
+    height: 150px;
+    overflow: auto;
+    position: relative;
+  }
+
+  #marker-scroller {
+    height: 300px;
+    overflow: auto;
+    scroll-snap-type: x mandatory;
+    position: relative;
+    scroll-marker-group: before;
+    white-space: nowrap;
+  }
+
+  #marker-scroller div {
+    scroll-snap-align: start;
+    box-sizing: border-box;
+    border-radius: 5px;
+    background: lightgray;
+    border: 1px solid black;
+    display: inline-block;
+    width: 500px;
+    height: 100%;
+  }
+
+  #marker-scroller::scroll-marker-group {
+    display: flex;
+    height: 100px;
+  }
+
+  #marker-scroller div::scroll-marker {
+    content: "";
+    width: 100px;
+    height: 100px;
+    box-sizing: border-box;
+    border-radius: 5px;
+    border: 1px solid black;
+    display: inline-block;
+  }
+  #marker-scroller div::scroll-marker:target-current {
+    background: blue;
+  }
+</style>
+<div id="ancestor-scroller">
+  <div id="marker-scroller">
+    <div>1</div>
+    <div id="target">2</div>
+    <div>3</div>
+  </div>
+</div>
+<script>
+  promise_test(async t => {
+    const target = document.querySelector('#target');
+    const ancestorScroller = document.querySelector('#ancestor-scroller');
+    const scroller = document.querySelector('#marker-scroller');
+    const scrollEndPromise = waitForScrollEndFallbackToDelayWithoutScrollEvent(scroller);
+    actions_promise = new test_driver.Actions()
+      .pointerMove(150, 50)
+      .pointerDown()
+      .pointerUp()
+      .send();
+    await actions_promise;
+    await scrollEndPromise;
+    assert_equals(scroller.scrollLeft, target.offsetLeft, "::scroll-marker activation scrolls to target");
+    assert_equals(ancestorScroller.scrollTop, 0, "::scroll-marker activation doesn't scroll ancestors");
+  });
+</script>
diff --git a/tests/wpt/tests/css/css-overflow/scroll-marker-group-018.html b/tests/wpt/tests/css/css-overflow/scroll-marker-group-018.html
new file mode 100644
index 00000000000..927d8ba61b8
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scroll-marker-group-018.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>Absolutely-positioned scroll-marker-group with fixed-positioned scroll markers</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-property">
+<link rel="help" href="https://issues.chromium.org/issues/395798192">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<style>
+  body {
+    overflow: hidden;
+  }
+  #sc {
+    position: absolute;
+    margin-top: 50px;
+    width: 100px;
+    overflow: hidden;
+    scroll-marker-group: after;
+  }
+  #sc::scroll-marker-group {
+    position: relative;
+    left: 0px;
+    width: 110px;
+    background: red;
+  }
+  #sc > div::scroll-marker {
+    position: absolute;
+    top: 0;
+    content: "";
+    width: 50px;
+    height: 50px;
+    background: green;
+  }
+  #sc > div:last-child::scroll-marker {
+    right: 10px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width:100px; height:100px; background:red;">
+  <div id="sc">
+    <div></div>
+    <div></div>
+    <div style="height:50px; background:green;"></div>
+  </div>
+</div>
diff --git a/tests/wpt/tests/css/css-overflow/scroll-marker-group-019.html b/tests/wpt/tests/css/css-overflow/scroll-marker-group-019.html
new file mode 100644
index 00000000000..9c2c5a0c0dc
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scroll-marker-group-019.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<title>Absolutely-positioned scroll-marker-group with fixed-positioned scroll markers</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-property">
+<link rel="help" href="https://issues.chromium.org/issues/395798192">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<style>
+  body {
+    overflow: hidden;
+  }
+  #sc {
+    position: fixed;
+    margin-top: 50px;
+    width: 100px;
+    overflow: hidden;
+    scroll-marker-group: after;
+  }
+  #sc::scroll-marker-group {
+    position: absolute;
+    left: 0px;
+    width: 110px;
+    background: red;
+  }
+  #sc > div::scroll-marker {
+    position: absolute;
+    top: 0;
+    content: "";
+    width: 50px;
+    height: 50px;
+    background: green;
+  }
+  #sc > div:last-child::scroll-marker {
+    right: 10px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="position:relative; width:100px; height:100px; background:red;">
+  <div id="sc">
+    <div></div>
+    <div></div>
+    <div style="height:50px; background:green;"></div>
+  </div>
+</div>
diff --git a/tests/wpt/tests/css/css-overflow/scroll-marker-group-020.html b/tests/wpt/tests/css/css-overflow/scroll-marker-group-020.html
new file mode 100644
index 00000000000..1f69fc80d3d
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scroll-marker-group-020.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<title>Absolutely-positioned scroll-marker-group with fixed-positioned scroll markers</title>
+<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-group-property">
+<link rel="help" href="https://issues.chromium.org/issues/395798192">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<style>
+  body {
+    overflow: hidden;
+  }
+  #sc {
+    position: absolute;
+    margin-top: 50px;
+    width: 100px;
+    overflow: hidden;
+    scroll-marker-group: after;
+  }
+  #sc::scroll-marker-group {
+    width: 100px;
+    height: 50px;
+    background: red;
+  }
+  #sc > div::scroll-marker {
+    display: block;
+    content: "";
+    height: 50px;
+    background: green;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width:100px; height:100px; background:red;">
+  <div id="sc">
+    <div></div>
+    <div style="height:50px; background:green;"></div>
+  </div>
+</div>
diff --git a/tests/wpt/tests/css/css-overflow/scroll-marker-navigation-cycles.html b/tests/wpt/tests/css/css-overflow/scroll-marker-navigation-cycles.html
new file mode 100644
index 00000000000..d41b720ed92
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scroll-marker-navigation-cycles.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: ::scroll-marker key navigation cycles</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+  body {
+    margin: 0;
+  }
+
+  #scroller {
+    overflow: auto;
+    width: 100px;
+    height: 100px;
+    scroll-marker-group: before;
+    white-space: nowrap;
+  }
+
+  #scroller::scroll-marker-group {
+    display: flex;
+    height: 10px;
+    width: 30px;
+  }
+
+  #scroller div {
+    background: blue;
+    display: inline-block;
+    height: 100px;
+    width: 100px;
+  }
+
+  #scroller div::scroll-marker {
+    content: "";
+    background: blue;
+    width: 10px;
+    height: 10px;
+  }
+
+  #scroller div::scroll-marker:target-current {
+    background: green;
+  }
+</style>
+<div id="scroller">
+  <div id="first_item"></div>
+  <div></div>
+  <div id="last_item"></div>
+</div>
+<script>
+  promise_test(async t => {
+    await new test_driver.Actions()
+      .pointerMove(5, 5)
+      .pointerDown()
+      .pointerUp()
+      .send();
+    assert_equals(getComputedStyle(first_item, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "first ::scroll-marker gets activated upon clicking");
+    await new test_driver.Actions()
+      .keyDown('\uE012')
+      .keyUp('\uE012')
+      .send();
+    assert_equals(getComputedStyle(last_item, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "last ::scroll-marker gets activated by going from the first one");
+  });
+</script>
\ No newline at end of file
diff --git a/tests/wpt/tests/css/css-overflow/scroll-marker-next-focus.html b/tests/wpt/tests/css/css-overflow/scroll-marker-next-focus.html
new file mode 100644
index 00000000000..48a86a92026
--- /dev/null
+++ b/tests/wpt/tests/css/css-overflow/scroll-marker-next-focus.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: next focus search start after ::scroll-marker activation is from its ultimate originating element</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-5/#scroll-marker-next-focus">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+  body {
+    margin: 0;
+  }
+
+  #scroller {
+    overflow: auto;
+    scroll-marker-group: before;
+  }
+
+  #scroller::scroll-marker-group {
+    height: 10px;
+    width: 150px;
+  }
+
+  section {
+    background: red;
+  }
+
+  section:focus {
+    background: green;
+  }
+
+  section::scroll-marker {
+    content: "Section";
+    background: red;
+    width: 50px;
+    height: 10px;
+  }
+
+  section::scroll-marker:focus {
+    background: green;
+  }
+
+  button {
+    background: red;
+    height: 30px;
+  }
+
+  button:focus {
+    background: green;
+  }
+</style>
+<button>Before</button>
+<div id="scroller">
+  <section id="first_section" tabindex=0>Section 1</section>
+  <section id="second_section" tabindex=-1>
+    Section 2
+    <button id="target">Focusable</button>
+  </section>
+  <section tabindex=0>Section 3</section>
+</div>
+<button>After</button>
+<script>
+  promise_test(async t => {
+    await new test_driver.Actions()
+      .pointerMove(5, 35)
+      .pointerDown()
+      .pointerUp()
+      .send();
+    assert_equals(getComputedStyle(first_section, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "the first ::scroll-marker gets activated upon clicking");
+    const kTab = '\uE004';
+    await new test_driver.Actions()
+      .keyDown(kTab)
+      .keyUp(kTab)
+      .send();
+    assert_equals(getComputedStyle(first_section).backgroundColor, "rgb(0, 128, 0)", "next focus search start after the first ::scroll-marker activation is from its ultimate originating element");
+
+    await new test_driver.Actions()
+      .pointerMove(55, 35)
+      .pointerDown()
+      .pointerUp()
+      .send();
+    assert_equals(getComputedStyle(second_section, "::scroll-marker").backgroundColor, "rgb(0, 128, 0)", "the second ::scroll-marker gets activated upon clicking");
+    await new test_driver.Actions()
+      .keyDown(kTab)
+      .keyUp(kTab)
+      .send();
+    assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)", "next focus search start after the second ::scroll-marker activation is from its ultimate originating element");
+  });
+</script>
\ No newline at end of file
diff --git a/tests/wpt/tests/css/css-properties-values-api/registered-property-parse-crash.html b/tests/wpt/tests/css/css-properties-values-api/registered-property-parse-crash.html
new file mode 100644
index 00000000000..51b583a9806
--- /dev/null
+++ b/tests/wpt/tests/css/css-properties-values-api/registered-property-parse-crash.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<title>Spurious block start in @property prelude</title>
+<link rel="help" href="https://crbug.com/393171829">
+<style>
+@property (
+</style>
+<style>
diff --git a/tests/wpt/tests/css/css-pseudo/highlight-painting-001.html b/tests/wpt/tests/css/css-pseudo/highlight-painting-001.html
index 1263be8f887..ef253e6117c 100644
--- a/tests/wpt/tests/css/css-pseudo/highlight-painting-001.html
+++ b/tests/wpt/tests/css/css-pseudo/highlight-painting-001.html
@@ -7,7 +7,6 @@
 <link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
 <link rel="match" href="highlight-painting-001-ref.html">
 <meta name="assert" value="::selection overlay is painted in the correct order, including both the element’s shadows and the highlight’s shadows">
-<meta name="fuzzy" content="maxDifference=0-23;totalPixels=0-3">
 <script src="support/selections.js"></script>
 <link rel="stylesheet" href="support/highlights.css">
 <style>
diff --git a/tests/wpt/tests/css/css-pseudo/highlight-painting-002-ref.html b/tests/wpt/tests/css/css-pseudo/highlight-painting-002-ref.html
index 7fc1b543b66..15823183826 100644
--- a/tests/wpt/tests/css/css-pseudo/highlight-painting-002-ref.html
+++ b/tests/wpt/tests/css/css-pseudo/highlight-painting-002-ref.html
@@ -20,7 +20,7 @@
     p > span > span {
         color: #707070C0;
         background: #38E038C0;
-        text-shadow: 0.1500em 0.1500em #3838E0C0;
+        text-shadow: 0.2500em 0.2500em #3838E0C0;
         /* force blue to paint over red */
         position: relative;
     }
diff --git a/tests/wpt/tests/css/css-pseudo/highlight-painting-002.html b/tests/wpt/tests/css/css-pseudo/highlight-painting-002.html
index 55d30af7c63..a00f64d5b65 100644
--- a/tests/wpt/tests/css/css-pseudo/highlight-painting-002.html
+++ b/tests/wpt/tests/css/css-pseudo/highlight-painting-002.html
@@ -21,7 +21,7 @@
     p::selection {
         color: #707070C0;
         background: #38E038C0;
-        text-shadow: 0.1500em 0.1500em #3838E0C0;
+        text-shadow: 0.2500em 0.2500em #3838E0C0;
     }
 </style>
 <p class="highlight_reftest">quick
diff --git a/tests/wpt/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html b/tests/wpt/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html
index 6ddff5b32e7..b1762e85ae3 100644
--- a/tests/wpt/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html
+++ b/tests/wpt/tests/css/css-pseudo/highlight-painting-shadows-horizontal.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
 <link rel="match" href="highlight-painting-shadows-horizontal-ref.html">
 <meta name="assert" value="::selection and ::target-text both with shadows are painted in the correct order, including originating element shadows">
-<meta name="fuzzy" content="0-32;0-30">
+<meta name="fuzzy" content="0-32;0-20">
 <script src="support/selections.js"></script>
 <style>
     :root {
diff --git a/tests/wpt/tests/css/css-pseudo/highlight-painting-shadows-vertical.html b/tests/wpt/tests/css/css-pseudo/highlight-painting-shadows-vertical.html
index bd1e328ca7b..7187c34da44 100644
--- a/tests/wpt/tests/css/css-pseudo/highlight-painting-shadows-vertical.html
+++ b/tests/wpt/tests/css/css-pseudo/highlight-painting-shadows-vertical.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
 <link rel="match" href="highlight-painting-shadows-vertical-ref.html">
 <meta name="assert" value="::selection and ::target-text both with shadows are painted in the correct order, including originating element shadows">
-<meta name="fuzzy" content="0-32;0-8">
+<meta name="fuzzy" content="0-32;0-4">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
 <script src="support/selections.js"></script>
 <style>
diff --git a/tests/wpt/tests/css/css-pseudo/target-text-shadow-vertical.html b/tests/wpt/tests/css/css-pseudo/target-text-shadow-vertical.html
index 3ba2d41a2be..088f6fc175e 100644
--- a/tests/wpt/tests/css/css-pseudo/target-text-shadow-vertical.html
+++ b/tests/wpt/tests/css/css-pseudo/target-text-shadow-vertical.html
@@ -4,7 +4,6 @@
 <link rel="author" name="Stephen Chenney" href="mailto:schenney@igalia.com">
 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
 <link rel="match" href="target-text-shadow-vertical-ref.html">
-<meta name="fuzzy" content="0-20;0-6100">
 <meta name="assert" value="::target-text with a shadow is painted, including originating element shadows">
 <style>
     :root {
diff --git a/tests/wpt/tests/css/css-text-decor/text-shadow/basic-negcoord.html b/tests/wpt/tests/css/css-text-decor/text-shadow/basic-negcoord.html
index 52a6d42945d..1e29b42f733 100644
--- a/tests/wpt/tests/css/css-text-decor/text-shadow/basic-negcoord.html
+++ b/tests/wpt/tests/css/css-text-decor/text-shadow/basic-negcoord.html
@@ -1,6 +1,5 @@
 <!DOCTYPE HTML>
 <link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
-<meta name="fuzzy" content="0-100;0-180">
 <link rel="match" href="basic-negcoord-ref.html">
 <div style="position: absolute; top: 24px; left: 24px; color: black; text-shadow: green -4px -4px;">Hello</div>
 
diff --git a/tests/wpt/tests/css/css-text-decor/text-shadow/basic-opacity.html b/tests/wpt/tests/css/css-text-decor/text-shadow/basic-opacity.html
index daaa0b6c5ab..a8cea6ad0e6 100644
--- a/tests/wpt/tests/css/css-text-decor/text-shadow/basic-opacity.html
+++ b/tests/wpt/tests/css/css-text-decor/text-shadow/basic-opacity.html
@@ -1,4 +1,3 @@
 <link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
 <link rel="match" href="basic-opacity-ref.html">
-<meta name="fuzzy" content="0-30;0-210">
 <div style="position: absolute; top: 30px; left: 30px; color: green; text-shadow: rgba(0, 0, 255, 0.2) 3px 3px;">Hello</div>
diff --git a/tests/wpt/tests/css/css-text-decor/text-shadow/basic.html b/tests/wpt/tests/css/css-text-decor/text-shadow/basic.html
index 289d78c2a2f..fc470ea6d03 100644
--- a/tests/wpt/tests/css/css-text-decor/text-shadow/basic.html
+++ b/tests/wpt/tests/css/css-text-decor/text-shadow/basic.html
@@ -1,4 +1,3 @@
 <link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
 <link rel="match" href="basic-ref.html">
-<meta name="fuzzy" content="0-70;0-560">
 <div style="position: absolute; top: 30px; left: 30px; color: green; text-shadow: grey 3px 3px;">Hello</div>
diff --git a/tests/wpt/tests/css/css-text-decor/text-shadow/color-inherit.html b/tests/wpt/tests/css/css-text-decor/text-shadow/color-inherit.html
index e19df003f74..abb2cffd0ac 100644
--- a/tests/wpt/tests/css/css-text-decor/text-shadow/color-inherit.html
+++ b/tests/wpt/tests/css/css-text-decor/text-shadow/color-inherit.html
@@ -1,6 +1,5 @@
 <!DOCTYPE HTML>
 <link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
 <link rel="match" href="color-inherit-ref.html">
-<meta name="fuzzy" content="0-100;0-170">
 <div style="position: absolute; top: 24px; left: 24px; color: blue; text-shadow: 3px 3px;">Hello</div>
 
diff --git a/tests/wpt/tests/css/css-text-decor/text-shadow/multiple-noblur.html b/tests/wpt/tests/css/css-text-decor/text-shadow/multiple-noblur.html
index 5adbb49eb54..cf86e4bb71e 100644
--- a/tests/wpt/tests/css/css-text-decor/text-shadow/multiple-noblur.html
+++ b/tests/wpt/tests/css/css-text-decor/text-shadow/multiple-noblur.html
@@ -1,4 +1,3 @@
 <link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
 <link rel="match" href="multiple-noblur-ref.html">
-<meta name="fuzzy" content="0-140;0-480">
 <div style="position: absolute; top: 20px; left: 20px; color: black; text-shadow: purple 4px 4px, red 7px 7px, green 10px 10px, grey 13px 13px;">Hello</div>
diff --git a/tests/wpt/tests/css/css-text-decor/text-shadow/standards-decor-noblur-2.html b/tests/wpt/tests/css/css-text-decor/text-shadow/standards-decor-noblur-2.html
index cb92ae11a6e..75d95b578dc 100644
--- a/tests/wpt/tests/css/css-text-decor/text-shadow/standards-decor-noblur-2.html
+++ b/tests/wpt/tests/css/css-text-decor/text-shadow/standards-decor-noblur-2.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
 <link rel="match" href="standards-decor-noblur-2-ref.html">
-<meta name="fuzzy" content="0-40;0-1100">
+<meta name="fuzzy" content="0-40;0-14">
 <!-- Shadows are painted below text AND its decorations -->
 <style>
 #target {
diff --git a/tests/wpt/tests/css/css-text-decor/text-shadow/svg-fill-none.html b/tests/wpt/tests/css/css-text-decor/text-shadow/svg-fill-none.html
index 6ddf2f0d967..389db4a3426 100644
--- a/tests/wpt/tests/css/css-text-decor/text-shadow/svg-fill-none.html
+++ b/tests/wpt/tests/css/css-text-decor/text-shadow/svg-fill-none.html
@@ -2,7 +2,6 @@
 <title>CSS Test: 'text-shadow' respects 'fill="none"'</title>
 <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property">
 <link rel="match" href="svg-fill-none-ref.html">
-<meta name="fuzzy" content="0-100;1000-2000">
 <style>
 svg { font: bold 64px Arial, sans-serif; text-shadow: grey 10px 10px }
 </style>
diff --git a/tests/wpt/tests/css/css-text-decor/text-shadow/svg-stroke-dasharray.html b/tests/wpt/tests/css/css-text-decor/text-shadow/svg-stroke-dasharray.html
index e8c98fd0852..bd77d85edf4 100644
--- a/tests/wpt/tests/css/css-text-decor/text-shadow/svg-stroke-dasharray.html
+++ b/tests/wpt/tests/css/css-text-decor/text-shadow/svg-stroke-dasharray.html
@@ -2,7 +2,6 @@
 <title>CSS Test: 'text-shadow' respects stroke-dasharray</title>
 <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property">
 <link rel="match" href="svg-stroke-dasharray-ref.html">
-<meta name="fuzzy" content="0-100;2000-2300">
 <style>
 svg { font: bold 64px Arial, sans-serif; text-shadow: grey 10px 10px }
 </style>
diff --git a/tests/wpt/tests/css/css-transforms/backface-visibility-hidden-001.html b/tests/wpt/tests/css/css-transforms/backface-visibility-hidden-001.html
index 2476f5b4e44..476eb289b86 100644
--- a/tests/wpt/tests/css/css-transforms/backface-visibility-hidden-001.html
+++ b/tests/wpt/tests/css/css-transforms/backface-visibility-hidden-001.html
@@ -6,7 +6,7 @@
     <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
     <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
     <link rel="match" href="reference/backface-visibility-hidden-ref.html">
-    <meta name="fuzzy" content="maxDifference=0-79;totalPixels=0-200">
+    <meta name="fuzzy" content="maxDifference=0-100;totalPixels=0-300">
     <meta name="assert" content="When the value of backface visibility property is 'hidden', the back side of a transformed element is invisible when facing the viewer.">
     <style type="text/css">
         .greenSquare {
diff --git a/tests/wpt/tests/css/css-values/attr-security.html b/tests/wpt/tests/css/css-values/attr-security.html
index e8c041671ed..ee9b030d56f 100644
--- a/tests/wpt/tests/css/css-values/attr-security.html
+++ b/tests/wpt/tests/css/css-values/attr-security.html
@@ -16,6 +16,8 @@
     initial-value: "empty";
   }
   div {
+    --condition-val: 3;
+    --true: true;
     --some-string: attr(data-foo);
     --some-string-list: "https://does-not-exist2.test/404.png" attr(data-foo);
     --some-other-url: attr(data-foo);
@@ -196,4 +198,52 @@
               'image-set(var(--image-set-invalid))',
               'https://does-not-exist.test/404.png',
               'none');
+
+    // Test attr-tainting carries through if() function.
+    test_attr('--x',
+              'image-set(if(style(--true): attr(data-foo);))',
+              'https://does-not-exist.test/404.png',
+              'image-set("https://does-not-exist.test/404.png")');
+    test_attr('background-image',
+              'image-set(if(style(--true): attr(data-foo);))',
+              'https://does-not-exist.test/404.png',
+              'none');
+    test_attr('background-image',
+              `image-set(
+                if(style(--true): url(https://does-not-exist-2.test/404.png);
+                   else: attr(data-foo);))`,
+              'https://does-not-exist-2.test/404.png',
+              'image-set(url("https://does-not-exist-2.test/404.png") 1dppx)');
+    test_attr('background-image',
+              `image-set(
+                if(style(--some-string): url(https://does-not-exist.test/404.png);))`,
+              'https://does-not-exist.test/404.png',
+              'none');
+    test_attr('background-image',
+              `image-set(
+                if(style(--condition-val: attr(data-foo type(*))): url(https://does-not-exist.test/404.png);))`,
+              '3',
+              'none');
+    test_attr('background-image',
+              `image-set(
+                if(style(--condition-val: attr(data-foo type(*))): url(https://does-not-exist.test/404.png);
+                   style(--true): url(https://does-not-exist.test/404.png);
+                   else: url(https://does-not-exist.test/404.png);))`,
+              '1',
+              'none');
+    test_attr('background-image',
+              `image-set(if(style(--true): url(https://does-not-exist.test/404.png);
+                            style(--condition-val): url(https://does-not-exist.test/404.png);
+                            else: url(https://does-not-exist.test/404.png);))`,
+              'attr(data-foo type(*))',
+              'image-set(url("https://does-not-exist.test/404.png") 1dppx)');
+    test_attr('background-image',
+              `image-set(
+                if(style(--condition-val: if(style(--true): attr(data-foo type(*));)): url(https://does-not-exist.test/404.png);))`,
+              '3',
+              'none');
+    test_attr('--x',
+              `image-set(if(style(--condition-val: if(style(--true): attr(data-foo type(*));)): url(https://does-not-exist.test/404.png);))`,
+              '3',
+              'image-set(url(https://does-not-exist.test/404.png))');
 </script>
diff --git a/tests/wpt/tests/css/css-values/if-invalidation.html b/tests/wpt/tests/css/css-values/if-invalidation.html
new file mode 100644
index 00000000000..feec1e526d1
--- /dev/null
+++ b/tests/wpt/tests/css/css-values/if-invalidation.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>CSS Values and Units Test: if() invalidation</title>
+<meta name="assert" content="Test if() invalidation">
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#if-notation">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  html {
+    --x: 3;
+  }
+  #test {
+    --prop: if(style(--x: 3): true_value; else: false_value;);
+  }
+</style>
+
+<html>
+  <body>
+    <div id="test"></div>
+  </body>
+</html>
+
+<script>
+  setup({ single_test: true });
+  let elem = document.getElementById('test');
+  let old_value = window.getComputedStyle(elem).getPropertyValue('--prop');
+  assert_equals(old_value, "true_value");
+
+  document.documentElement.style.setProperty('--x', '0');
+  let new_value = window.getComputedStyle(elem).getPropertyValue('--prop');
+  assert_equals( new_value, "false_value");
+  assert_not_equals(new_value, old_value);
+  done();
+</script>
\ No newline at end of file
diff --git a/tests/wpt/tests/css/css-values/if-style-query.html b/tests/wpt/tests/css/css-values/if-style-query.html
index fa9e91d7d8f..2bfe6536fc0 100644
--- a/tests/wpt/tests/css/css-values/if-style-query.html
+++ b/tests/wpt/tests/css/css-values/if-style-query.html
@@ -47,13 +47,13 @@
       --length: 30px;
       --length-inherited: 30px;
     }
-    .outer {
+    .inner {
       --inherited: inner_value;
     }
   </style>
   <body>
     <div class="outer">
-      <div id="if" class="inner" data-foo="30px"></div>
+      <div id="if" class="inner" data-foo="30px" data-attr="attr"></div>
     </div>
   </body>
 </html>
@@ -66,6 +66,13 @@
     });
   }
 
+  function clear_custom_properties(customPropertiesData) {
+    customPropertiesData.forEach(entry => {
+      const [customPropertyName, customPropertyValue] = entry;
+      document.getElementById("if").style.removeProperty(customPropertyName);
+    });
+  }
+
   function test_if(ifValue, customPropertiesData, expectedValue) {
     set_custom_properties(customPropertiesData);
     var elem = document.getElementById("if");
@@ -78,7 +85,8 @@
         '"' + ifValue + '" should be substituted to "' + expectedValue + '".');
     });
 
-    elem.style.setProperty(property, '');
+    clear_custom_properties(customPropertiesData);
+    elem.style.removeProperty(property);
   }
 
   // Valid if() with unregistered custom properties in conditions.
@@ -92,8 +100,10 @@
   test_if('if(style(--x: 0): )', [['--x', '0']], '');
   test_if('if(style(--x: blue): true_value;)', [['--x', 'blue']], 'true_value');
   test_if('if(style(--x: 3): true_value; else: false_value)', [['--x', '3']], 'true_value');
-  test_if('if(style(--x: initial): true_value; else: false_value)', [['--x', '']], 'true_value');
+  test_if('if(style(--non-existent: var(--non-existent)): true_value; else: false_value)', [], 'false_value');
+  test_if('if(style(--x: initial): true_value; else: false_value)', [['--x', '']], 'false_value');
   test_if('if(style(--x: initial): true_value; else: false_value)', [['--x', 'initial']], 'true_value');
+  test_if('if(style(--non-existent: initial): true_value; else: false_value)', [], 'true_value');
   test_if('if(style(--x: initial): true_value; else: false_value)', [['--x', '3']], 'false_value');
   test_if(`if(style(--inherited: inherit): true_value;
           else: false_value)`,
@@ -103,30 +113,35 @@
           else: false_value)`,
         [['--inherited', 'inherit']],
         'true_value');
+  test_if(`if(style(--inherited: inherit): true_value;
+          else: false_value)`,
+        [['--inherited', 'unset']],
+        'true_value');
   test_if(`if(style(--inherited: inherit): true_value;
           else: false_value)`,
         [['--inherited', 'inner_value']],
         'false_value');
+  test_if(`if(style(--inherited: unset): true_value;
+          else: false_value)`,
+        [['--inherited', 'outer_value']],
+        'true_value');
+  test_if(`if(style(--inherited: unset): true_value;
+          else: false_value)`,
+        [['--inherited', 'unset']],
+        'true_value');
+  test_if(`if(style(--inherited: unset): true_value;
+          else: false_value)`,
+        [['--inherited', 'inner_value']],
+        'false_value');
+  test_if(`if(style(--inherited: unset): true_value;
+          else: false_value)`,
+        [['--inherited', 'inherit']],
+        'true_value');
   test_if('if(style(--x: 3): true_value; else:false_value)', [['--x', '3']], 'true_value');
   test_if('if(style(--x: 3): true_value; else: false_value;)', [['--x', '3']], 'true_value');
   test_if('if(style(--x: 0): true_value; else: false_value)', [['--x', '3']], 'false_value');
   test_if('if( style( --x: 0 ) : true_value ;  else :  false_value)', [['--x', '3']], 'false_value');
   test_if('if(style(not (--unknown)): true_value;)', [['--x', '3']], 'true_value');
-  test_if('if(style(--x: initial): true_value; else: false_value)', [['--x', '']], 'true_value');
-  test_if('if(style(--x: initial): true_value; else: false_value)', [['--x', 'initial']], 'true_value');
-  test_if('if(style(--x: initial): true_value; else: false_value)', [['--x', '3']], 'false_value');
-  test_if(`if(style(--inherited: inherit): true_value;
-          else: false_value)`,
-        [['--inherited', 'outer_value']],
-        'true_value');
-  test_if(`if(style(--inherited: inherit): true_value;
-          else: false_value)`,
-        [['--inherited', 'inherit']],
-        'true_value');
-  test_if(`if(style(--inherited: inherit): true_value;
-          else: false_value)`,
-        [['--inherited', 'inner_value']],
-        'false_value');
   test_if(`if(style(--x: 0): true_value;
           else: )`,
         [['--x', '3']],
@@ -167,6 +182,9 @@
           else: false_value)`,
         [['--x', '']],
         'false_value');
+  test_if(`if(style(--x):a)if(style(--x):b)`,
+        [['--x', '3']],
+        'a/**/b');
 
   // Valid if() with multiple conditions with unregistered custom properties
   test_if(`if(style(--non-existent): value1;
@@ -310,14 +328,18 @@
           else: false_value)`,
         [['--length', '1em']],
         'true_value');
-  test_if(`if(style(--length: initial): true_value;
+  test_if(`if(style(--length: 3): true_value;
           else: false_value)`,
         [],
-        'true_value');
+        'false_value');
   test_if(`if(style(--length: initial): true_value;
           else: false_value)`,
         [['--length', '3px']],
         'true_value');
+  test_if(`if(style(--length: initial): true_value;
+          else: false_value)`,
+        [],
+        'true_value');
   test_if(`if(style(--length: inherit): true_value;
           else: false_value)`,
         [],
@@ -326,14 +348,30 @@
           else: false_value)`,
         [['--length', '30px']],
         'true_value');
+  test_if(`if(style(--length: unset): true_value;
+          else: false_value)`,
+        [['--length', '3px']],
+        'true_value');
   test_if(`if(style(--length-inherited: inherit): true_value;
           else: false_value)`,
         [],
         'true_value');
-  test_if(`if(style(--length: inherit): true_value;
+  test_if(`if(style(--length-inherited: inherit): true_value;
           else: false_value)`,
         [['--length-inherited', '30px']],
         'true_value');
+  test_if(`if(style(--length-inherited: inherit): true_value;
+          else: false_value)`,
+        [['--length-inherited', 'unset']],
+        'true_value');
+  test_if(`if(style(--length-inherited: unset): true_value;
+          else: false_value)`,
+        [['--length-inherited', '30px']],
+        'true_value');
+  test_if(`if(style(--length-inherited: unset): true_value;
+          else: false_value)`,
+        [['--length-inherited', 'inherit']],
+        'true_value');
 
   test_if(`if(style(--percentage: 30%): true_value;
           else: false_value)`,
@@ -477,4 +515,8 @@
           style(--z: 3px): value3;)`,
         [['--x', '3'], ['--y', 'red'], ['--z', '10px']],
         '');
+
+  // Equality of attr-tainted if()
+  test_if('if(style(--x: attr(data-attr type(*))): true_value; else: false_value)', [['--x', 'attr']], 'true_value');
+  test_if('if(style(--x: attr): true_value; else: false_value)', [['--x', 'attr(data-attr type(*))']], 'true_value');
 </script>
diff --git a/tests/wpt/tests/css/css-values/progress-invalid.tentative.html b/tests/wpt/tests/css/css-values/progress-invalid.tentative.html
index 4e6f2e8a7bb..f135487e1c4 100644
--- a/tests/wpt/tests/css/css-values/progress-invalid.tentative.html
+++ b/tests/wpt/tests/css/css-values/progress-invalid.tentative.html
@@ -30,7 +30,6 @@ test_invalid_number('progress(to,,,,)');
 test_invalid_number('progress(0,,, 10,, 200)');
 test_invalid_number('progress(0,,, 10,,, 200)');
 test_invalid_number('progress(0,, 10,, 200)');
-test_invalid_number('progress(0, 10, 200)');
 test_invalid_number('progress(0 from 10 to 200)');
 
 // General tests
diff --git a/tests/wpt/tests/css/css-variables/url-syntax-crash.html b/tests/wpt/tests/css/css-variables/url-syntax-crash.html
new file mode 100644
index 00000000000..e7ef1b0aa29
--- /dev/null
+++ b/tests/wpt/tests/css/css-variables/url-syntax-crash.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1935471">
+<style>
+@property --my-url {
+  syntax: "<url> | none";
+  inherits: true;
+  initial-value: none;
+}
+:root {
+  --my-url: url(blah);
+}
+
+* {
+  --foo: var(--my-url);
+}
+</style>
+<body>
+<script>
+  // Get some styling off-thread.
+  for (let i = 0; i < 10000; ++i) {
+    document.body.appendChild(document.createElement("span"));
+  }
+</script>
diff --git a/tests/wpt/tests/css/css-view-transitions/animation-name-ua-prefix.html b/tests/wpt/tests/css/css-view-transitions/animation-name-ua-prefix.html
new file mode 100644
index 00000000000..4d31c551d92
--- /dev/null
+++ b/tests/wpt/tests/css/css-view-transitions/animation-name-ua-prefix.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<title>View transitions UA animations are accessible to author sheets</title>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7560">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7560#issuecomment-1233161987">
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/#ua-styles">
+<link rel="match" href="/css/reference/blank.html">
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    animation: -ua-view-transition-fade-out .001s forwards;
+  }
+</style>
+<div></div>
diff --git a/tests/wpt/tests/css/selectors/focus-within-004.html b/tests/wpt/tests/css/selectors/focus-within-004.html
index bec71d017a2..169af9e0706 100644
--- a/tests/wpt/tests/css/selectors/focus-within-004.html
+++ b/tests/wpt/tests/css/selectors/focus-within-004.html
@@ -6,7 +6,6 @@
 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo">
 <link rel="match" href="focus-within-001-ref.html">
-<meta name="fuzzy" content="0-100;0-600">
 <meta name="assert" content="Test that :focus-within works on elements that are focusable due to contenteditable.">
 <style>
 /* Suppress things that cannot be reproduced in the reference file */
diff --git a/tests/wpt/tests/css/selectors/partitioned-visited-manual.tentative.html b/tests/wpt/tests/css/selectors/partitioned-visited-manual.tentative.html
new file mode 100644
index 00000000000..a97fe7cf6f0
--- /dev/null
+++ b/tests/wpt/tests/css/selectors/partitioned-visited-manual.tentative.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>:visited links are partitioned by top-level site and frame origin</title>
+<link rel="author" title="Kyra Seevers" href="mailto:kyraseevers@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#visited-privacy">
+
+<!-- Import scripts to build same- and cross-origin URLs -->
+<script src="/common/get-host-info.sub.js"></script>
+
+<body>
+    <h2>Description</h2>
+    <p>The goal of this manual test is to ensure that :visited links are
+    partitioned by link URL, top-level site, and frame origin. </p>
+    <br/>
+    <p>(1) Clear any browsing data, including history.</p>
+    <br/>
+    <p>(2) Click on the link in the first iframe. The link in this
+    top-level frame should turn purple. The link in the second iframe
+    should remain blue.</p>
+    <br/>
+    <!-- This link's triple key is:
+    Link URL: https://drafts.csswg.org/selectors-4,
+    Top-Level Site: http://localhost,
+    Frame Origin: http://localhost:8000 -->
+    <a href = "https://drafts.csswg.org/selectors-4">I should turn purple!</a>
+    <br/>
+    <p>(3) Finally, click on the browser's back arrow.
+    </p>
+    <br/>
+    <p>Test PASSES if: the top-level link (I should turn purple!) is purple,
+    the first iframe link (Click me! (Then I should turn purple)) is purple,
+    and the second iframe link (I should stay blue) is blue. All other
+    conditions: the test FAILS.
+    </p>
+    <br/> <br/>
+    <script>
+	// Associate our local HTML resources with an origin that is
+	// same- or cross-origin to the top-level page. This is
+	// important so that we can accurately compare our
+	// triple-partition keys.
+	const { HTTP_ORIGIN, HTTP_REMOTE_ORIGIN } = get_host_info();
+	let same_origin_url = HTTP_ORIGIN + '/css/selectors/resources/partitioned-visited-same-site-iframe.html';
+	let cross_origin_url = HTTP_REMOTE_ORIGIN + '/css/selectors/resources/partitioned-visited-cross-site-iframe.html';
+	// Construct the same-origin iframe. This link's triple key is:
+	// Link URL: https://drafts.csswg.org/selectors-4,
+	// Top-Level Site: http://localhost,
+	// Frame Origin: http://localhost:800
+	let same_origin_iframe = document.createElement("iframe");
+        same_origin_iframe.setAttribute("src", same_origin_url);
+	document.body.appendChild(same_origin_iframe);
+	// Construct the cross-origin iframe. This link's triple key is:
+	// Link URL: https://drafts.csswg.org/selectors-4,
+	// Top-Level Site: http://localhost,
+	// Frame Origin: http://www1.localhost:800
+	let cross_origin_iframe = document.createElement("iframe");
+	cross_origin_iframe.setAttribute("src", cross_origin_url);
+	document.body.appendChild(cross_origin_iframe);
+    </script>
+</body>
diff --git a/tests/wpt/tests/css/selectors/resources/partitioned-visited-cross-site-iframe.html b/tests/wpt/tests/css/selectors/resources/partitioned-visited-cross-site-iframe.html
new file mode 100644
index 00000000000..7239017b73d
--- /dev/null
+++ b/tests/wpt/tests/css/selectors/resources/partitioned-visited-cross-site-iframe.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <a href = "https://drafts.csswg.org/selectors-4">I should stay blue</a>
+  </body>
+</html>
diff --git a/tests/wpt/tests/css/selectors/resources/partitioned-visited-same-site-iframe.html b/tests/wpt/tests/css/selectors/resources/partitioned-visited-same-site-iframe.html
new file mode 100644
index 00000000000..bdc1a983bcd
--- /dev/null
+++ b/tests/wpt/tests/css/selectors/resources/partitioned-visited-same-site-iframe.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <a href = "https://drafts.csswg.org/selectors-4">Click me! (Then I should turn purple)</a>
+  </body>
+</html>
diff --git a/tests/wpt/tests/digital-credentials/default-permissions-policy.https.sub.html b/tests/wpt/tests/digital-credentials/default-permissions-policy.https.sub.html
index 742a94ec4eb..b4696293a28 100644
--- a/tests/wpt/tests/digital-credentials/default-permissions-policy.https.sub.html
+++ b/tests/wpt/tests/digital-credentials/default-permissions-policy.https.sub.html
@@ -15,12 +15,12 @@
     const cross_origin_src = new URL(same_origin_src, HTTPS_REMOTE_ORIGIN).href;
 
     promise_test(async (test) => {
-        await test_driver.bless("user activation");
-        await promise_rejects_js(
-            test,
-            TypeError,
-            navigator.credentials.get(makeGetOptions([]))
-        );
+        await test_driver.bless("user activation for DC" , function() {
+            // When passing a correct request, it should succeed, since it is
+            // allowed by the permission policy.
+            navigator.credentials.get(makeGetOptions("openid4vp"));
+        });
+
 
         await test_feature_availability({
             feature_description: "Digital Credential API",
diff --git a/tests/wpt/tests/digital-credentials/disabled-by-permissions-policy.https.sub.html b/tests/wpt/tests/digital-credentials/disabled-by-permissions-policy.https.sub.html
index 616a3beb0b3..5c634b1b66d 100644
--- a/tests/wpt/tests/digital-credentials/disabled-by-permissions-policy.https.sub.html
+++ b/tests/wpt/tests/digital-credentials/disabled-by-permissions-policy.https.sub.html
@@ -19,7 +19,7 @@
         await promise_rejects_dom(
             test,
             "NotAllowedError",
-            navigator.credentials.get(makeGetOptions([]))
+            navigator.credentials.get(makeGetOptions("openid4vp"))
         );
     }, "Permissions-Policy header digital-credentials-get=() disallows the top-level document.");
 
@@ -39,21 +39,11 @@
             feature_description: "Digital Credential API",
             test,
             src: cross_origin_src,
-            expect_feature_available: expect_feature_available_default,
+            expect_feature_available: expect_feature_unavailable_default,
             feature_name: "digital-credentials-get",
             is_promise_test: true,
             needs_focus: true,
         });
-    }, "Header-set policy is overridden in cross-origin iframe using allow attribute.");
+    }, "Permissions-Policy header digital-credentials-get=() cannot be overriden using the allow attribute.");
 
-    promise_test(async (test) => {
-        await test_feature_availability({
-            feature_description: "Digital Credential API",
-            test,
-            src: same_origin_src,
-            expect_feature_available: expect_feature_unavailable_default,
-            is_promise_test: true,
-            needs_focus: true,
-        });
-    }, "Setting digital-credentials-get=(self) disallows the API in same-origin iframes.");
 </script>
diff --git a/tests/wpt/tests/digital-credentials/enabled-on-self-origin-by-permissions-policy.https.sub.html b/tests/wpt/tests/digital-credentials/enabled-on-self-origin-by-permissions-policy.https.sub.html
index a59c5c72fa0..ec70461e385 100644
--- a/tests/wpt/tests/digital-credentials/enabled-on-self-origin-by-permissions-policy.https.sub.html
+++ b/tests/wpt/tests/digital-credentials/enabled-on-self-origin-by-permissions-policy.https.sub.html
@@ -16,11 +16,11 @@
 
     promise_test(async (test) => {
         await test_driver.bless("user activation");
-        await promise_rejects_js(
-            test,
-            TypeError,
-            navigator.credentials.get(makeGetOptions([]))
-        );
+        try {
+            await navigator.credentials.get(makeGetOptions("openid4vp"));
+        } catch (e) {
+            assert_unreached();
+        }
     }, "Permissions-Policy header digital-credentials-get=(self) allows the top-level document.");
 
     promise_test(async (test) => {
@@ -50,10 +50,10 @@
             feature_description: "Digital Credential API",
             test,
             src: cross_origin_src,
-            expect_feature_available: expect_feature_available_default,
+            expect_feature_available: expect_feature_unavailable_default,
             feature_name: "digital-credentials-get",
             is_promise_test: true,
             needs_focus: true,
         });
-    }, "Permissions-Policy header digital-credentials-get=(self) gets overridden by allow attribute.");
+    }, "Permissions-Policy header explicitly set to digital-credentials-get=(self) cannot be overridden by allow attribute.");
 </script>
diff --git a/tests/wpt/tests/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html b/tests/wpt/tests/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html
index ce0302cd734..a561180f945 100644
--- a/tests/wpt/tests/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html
+++ b/tests/wpt/tests/dom/nodes/moveBefore/tentative/custom-element-move-reactions.html
@@ -94,5 +94,40 @@
         assert_array_equals(reactions, ["outer disconnected", "outer connected", "inner disconnected", "inner connected"]);
     }, "Reactions to atomic move are called in order of element, not in order of operation");
 
+    promise_test(async t => {
+        const ce = document.getElementById("ce");
+        let reactions = [];
+        const element_name = `ce-${performance.now()}`;
+        customElements.define(element_name,
+            class MockCustomElement extends HTMLElement {
+                disconnectedCallback() { reactions.push("disconnected"); }
+            });
+        const element = document.createElement(element_name);
+        t.add_cleanup(() => element.remove());
+        document.body.append(element);
+        await Promise.resolve();
+        reactions = [];
+        document.getElementById("section").moveBefore(element, null);
+        await Promise.resolve();
+        assert_array_equals(reactions, ["disconnected"]);
+    }, "When connectedCallback is not defined, no crash");
+
+    promise_test(async t => {
+        const ce = document.getElementById("ce");
+        let reactions = [];
+        const element_name = `ce-${performance.now()}`;
+        customElements.define(element_name,
+            class MockCustomElement extends HTMLElement {
+                connectedCallback() { reactions.push("connected"); }
+            });
+        const element = document.createElement(element_name);
+        t.add_cleanup(() => element.remove());
+        document.body.append(element);
+        await Promise.resolve();
+        reactions = [];
+        document.getElementById("section").moveBefore(element, null);
+        await Promise.resolve();
+        assert_array_equals(reactions, ["connected"]);
+    }, "When disconnectedCallback is not defined, no crash");
 </script>
 </body>
diff --git a/tests/wpt/tests/dom/observable/tentative/observable-constructor.any.js b/tests/wpt/tests/dom/observable/tentative/observable-constructor.any.js
index ea79a82c65f..d065c7f0443 100644
--- a/tests/wpt/tests/dom/observable/tentative/observable-constructor.any.js
+++ b/tests/wpt/tests/dom/observable/tentative/observable-constructor.any.js
@@ -1091,3 +1091,111 @@ test(() => {
   assert_array_equals(addTeardownsCalled, ["teardown 1", "teardown 2"],
       "Teardowns called synchronously upon addition end up in FIFO order");
 }, "Teardowns should be called synchronously during addTeardown() if the subscription is inactive");
+
+test(() => {
+  const results = [];
+  let producerInvocations = 0;
+  let teardownInvocations = 0;
+
+  const source = new Observable((subscriber) => {
+    producerInvocations++;
+    results.push('producer invoked');
+    subscriber.addTeardown(() => {
+      teardownInvocations++;
+      results.push('teardown invoked');
+    });
+  });
+
+  const ac1 = new AbortController();
+  const ac2 = new AbortController();
+
+  // First subscription.
+  source.subscribe({}, {signal: ac1.signal});
+  assert_equals(producerInvocations, 1,
+      "Producer is invoked once for first subscription");
+
+  // Second subscription should reuse the same producer.
+  source.subscribe({}, {signal: ac2.signal});
+  assert_equals(producerInvocations, 1,
+      "Producer should not be invoked again for second subscription");
+
+  // First unsubscribe.
+  ac1.abort();
+  assert_equals(teardownInvocations, 0,
+      "Teardown not run when first subscriber unsubscribes");
+
+  // Second unsubscribe.
+  ac2.abort();
+  assert_equals(teardownInvocations, 1,
+      "Teardown should run after last subscriber unsubscribes");
+
+  assert_array_equals(results, ['producer invoked', 'teardown invoked']);
+}, "Multiple subscriptions share the same producer and teardown runs only " +
+   "after last subscription abort");
+
+test(() => {
+  const results = [];
+  let activeSubscriber = null;
+
+  const source = new Observable(subscriber => {
+    activeSubscriber = subscriber;
+    results.push('producer start');
+    subscriber.addTeardown(() => results.push('teardown'));
+  });
+
+  // First subscription.
+  const ac1 = new AbortController();
+  source.subscribe({}, {signal: ac1.signal});
+  assert_array_equals(results, ['producer start']);
+
+  // Second subscription.
+  const ac2 = new AbortController();
+  source.subscribe({}, {signal: ac2.signal});
+
+  // Complete the subscription.
+  activeSubscriber.complete();
+  assert_array_equals(results, ['producer start', 'teardown']);
+
+  // Additional subscription after complete.
+  const ac3 = new AbortController();
+  source.subscribe({}, {signal: ac3.signal});
+
+  assert_array_equals(results, ['producer start', 'teardown', 'producer start']);
+}, "New subscription after complete creates new producer");
+
+test(() => {
+  const results = [];
+  let producerInvocations = 0;
+
+  const source = new Observable(subscriber => {
+    producerInvocations++;
+    results.push('producer start');
+    subscriber.addTeardown(() => results.push('teardown'));
+  });
+
+  // Create 3 subscriptions.
+  const ac1 = new AbortController();
+  const ac2 = new AbortController();
+  const ac3 = new AbortController();
+  source.subscribe({}, {signal: ac1.signal});
+  source.subscribe({}, {signal: ac2.signal});
+  source.subscribe({}, {signal: ac3.signal});
+
+  assert_equals(producerInvocations, 1, "Producer should be invoked once");
+
+  // Unsubscribe in a different order.
+  ac2.abort();
+  results.push('after first abort');
+  ac1.abort();
+  results.push('after second abort');
+  ac3.abort();
+  results.push('after final abort');
+
+  assert_array_equals(results, [
+    'producer start',
+    'after first abort',
+    'after second abort',
+    'teardown',
+    'after final abort'
+  ]);
+}, "Teardown runs after last unsubscribe regardless of unsubscription order");
diff --git a/tests/wpt/tests/dom/observable/tentative/observable-from.any.js b/tests/wpt/tests/dom/observable/tentative/observable-from.any.js
index f32ce2dd482..b5fcb5ed1fc 100644
--- a/tests/wpt/tests/dom/observable/tentative/observable-from.any.js
+++ b/tests/wpt/tests/dom/observable/tentative/observable-from.any.js
@@ -674,28 +674,11 @@ promise_test(async t => {
 
 // This test is a more chaotic version of the above. It ensures that a single
 // Observable can handle multiple in-flight subscriptions to the same underlying
-// async iterable without the two subscriptions competing.
-//
-// This test is added because it is easy to imagine an implementation whereby
-// upon subscription, the Observable's internal subscribe callback takes the
-// underlying async iterable object, and simply pulls the async iterator off of
-// it (by invoking `@@asyncIterator`), and saves it alongside the underlying
-// async iterable. This async iterator would be used to manage values as they
-// are asynchronously emitted from the underlying object, but this value can get
-// OVERWRITTEN by a brand new subscription that comes in before the first
-// subscription has completed. In a broken implementation, this overwriting
-// would prevent the first subscription from ever completing.
+// async iterable without the two subscriptions competing. It asserts that the
+// asynchronous values are pushed to the observers in the correct order.
 promise_test(async t => {
   const async_iterable = {
-    slow: true,
     [Symbol.asyncIterator]() {
-      // The first time @@asyncIterator is called, `shouldBeSlow` is true, and
-      // when the return object takes closure of it, all values are emitted
-      // SLOWLY asynchronously. The second time, `shouldBeSlow` is false, and
-      // all values are emitted FAST but still asynchronous.
-      const shouldBeSlow = this.slow;
-      this.slow = false;
-
       return {
         val: 0,
         next() {
@@ -703,9 +686,9 @@ promise_test(async t => {
           // than a second.
           return new Promise(resolve => {
             t.step_timeout(() => resolve({
-              value: `${this.val}-${shouldBeSlow ? 'slow' : 'fast'}`,
+              value: this.val,
               done: this.val++ === 4 ? true : false,
-            }), shouldBeSlow ? 200 : 0);
+            }), 200);
           });
         },
       };
@@ -715,30 +698,46 @@ promise_test(async t => {
   const results = [];
   const source = Observable.from(async_iterable);
 
-  const subscribeFunction = function(resolve, reject) {
+  const promise = new Promise(resolve => {
     source.subscribe({
-      next: v => results.push(v),
-      complete: () => resolve(),
+      next: v => {
+        results.push(`${v}-first-sub`);
+
+        // Half-way through the first subscription, start another subscription.
+        if (v === 0) {
+          source.subscribe({
+            next: v => results.push(`${v}-second-sub`),
+            complete: () => {
+              results.push('complete-second-sub');
+              resolve();
+            }
+          });
+        }
+      },
+      complete: () => {
+        results.push('complete-first-sub');
+        resolve();
+      }
     });
+  });
 
-    // A broken implementation will rely on this timeout.
-    t.step_timeout(() => reject('TIMEOUT'), 3000);
-  }
-
-  const slow_promise = new Promise(subscribeFunction);
-  const fast_promise = new Promise(subscribeFunction);
-  await Promise.all([slow_promise, fast_promise]);
+  await promise;
   assert_array_equals(results, [
-    '0-fast',
-    '1-fast',
-    '2-fast',
-    '3-fast',
-    '0-slow',
-    '1-slow',
-    '2-slow',
-    '3-slow',
+    '0-first-sub',
+
+    '1-first-sub',
+    '1-second-sub',
+
+    '2-first-sub',
+    '2-second-sub',
+
+    '3-first-sub',
+    '3-second-sub',
+
+    'complete-first-sub',
+    'complete-second-sub',
   ]);
-}, "from(): Asynchronous iterable multiple in-flight subscriptions competing");
+}, "from(): Asynchronous iterable multiple in-flight subscriptions");
 // This test is like the above, ensuring that multiple subscriptions to the same
 // sync-iterable-converted-Observable can exist at a time. Since sync iterables
 // push all of their values to the Observable synchronously, the way to do this
@@ -751,24 +750,27 @@ test(() => {
   const source = Observable.from(array);
   source.subscribe({
     next: v => {
-      results.push(v);
+      results.push(`${v}-first-sub`);
       if (v === 3) {
         // Pushes all 5 values to `results` right after the first instance of `3`.
         source.subscribe({
-          next: v => results.push(v),
-          complete: () => results.push('inner complete'),
+          next: v => results.push(`${v}-second-sub`),
+          complete: () => results.push('complete-second-sub'),
         });
       }
     },
-    complete: () => results.push('outer complete'),
+    complete: () => results.push('complete-first-sub'),
   });
 
   assert_array_equals(results, [
-    1, 2, 3,
-    1, 2, 3, 4, 5, 'inner complete',
-    4, 5, 'outer complete'
+    // These values are pushed when there is only a single subscription.
+    '1-first-sub', '2-first-sub', '3-first-sub',
+    // These values are pushed in the correct order, for two subscriptions.
+    '4-first-sub', '4-second-sub',
+    '5-first-sub', '5-second-sub',
+    'complete-first-sub', 'complete-second-sub',
   ]);
-}, "from(): Sync iterable multiple in-flight subscriptions competing");
+}, "from(): Sync iterable multiple in-flight subscriptions");
 
 promise_test(async () => {
   const async_generator = async function*() {
diff --git a/tests/wpt/tests/dom/xslt/encoding-single-chunk-ref.html b/tests/wpt/tests/dom/xslt/encoding-single-chunk-ref.html
new file mode 100644
index 00000000000..572516f9902
--- /dev/null
+++ b/tests/wpt/tests/dom/xslt/encoding-single-chunk-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<iframe srcdoc="<h1 style='margin:0'>hello world</h1>"></iframe>
diff --git a/tests/wpt/tests/dom/xslt/encoding-single-chunk.html b/tests/wpt/tests/dom/xslt/encoding-single-chunk.html
new file mode 100644
index 00000000000..5e6af833ded
--- /dev/null
+++ b/tests/wpt/tests/dom/xslt/encoding-single-chunk.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel=help href="https://issues.chromium.org/issues/391499612">
+<link rel=match href="encoding-single-chunk-ref.html">
+<iframe name="work" id="work" src=""></iframe>
+<script>
+window.onload = function () {
+  document.getElementById('work').src = 'resources/test.xml'
+}
+</script>
diff --git a/tests/wpt/tests/dom/xslt/resources/reqLine.xsl b/tests/wpt/tests/dom/xslt/resources/reqLine.xsl
new file mode 100644
index 00000000000..fabb742fc46
--- /dev/null
+++ b/tests/wpt/tests/dom/xslt/resources/reqLine.xsl
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="ISO-8859-1"?>
+
+<xsl:stylesheet version="1.0"
+  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+  <xsl:param name="static" select="document(//static)"/>
+  <xsl:template match="/">
+    <xsl:for-each select="$static">
+      <html>
+        <body>
+          <h1>hello world</h1>
+        </body>
+      </html>
+    </xsl:for-each>
+  </xsl:template>
+</xsl:stylesheet>
+
diff --git a/tests/wpt/tests/dom/xslt/resources/test.xml b/tests/wpt/tests/dom/xslt/resources/test.xml
new file mode 100644
index 00000000000..4a1a43c4082
--- /dev/null
+++ b/tests/wpt/tests/dom/xslt/resources/test.xml
@@ -0,0 +1,4 @@
+<?xml version='1.0' encoding='ISO-8859-1'?><?xml-stylesheet type="text/xsl" href="./reqLine.xsl"?>
+<RQStuff>
+  <static>./testu1LINE.xml</static>
+</RQStuff>
diff --git a/tests/wpt/tests/dom/xslt/resources/testu1LINE.xml b/tests/wpt/tests/dom/xslt/resources/testu1LINE.xml
new file mode 100644
index 00000000000..01fa6bf9426
--- /dev/null
+++ b/tests/wpt/tests/dom/xslt/resources/testu1LINE.xml
@@ -0,0 +1,2 @@
+<?xml version='1.0' encoding='ISO-8859-1'?>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      <LineEntryScreen></LineEntryScreen>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
+
diff --git a/tests/wpt/tests/editing/crashtests/editing-on-newline-should-not-crash.html b/tests/wpt/tests/editing/crashtests/editing-on-newline-should-not-crash.html
new file mode 100644
index 00000000000..9c2f6ccaf4f
--- /dev/null
+++ b/tests/wpt/tests/editing/crashtests/editing-on-newline-should-not-crash.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pasting in selection with newline character should not crash</title>
+    <style>
+      #text {
+        white-space: pre-line;
+        border: 1px solid #ccc;
+        padding: 10px;
+        width: 300px;
+        height: 100px;
+        overflow: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="text" contenteditable="true">This is a sample text.<br>
+    </div>
+    <script>
+      const div = document.getElementById("text");
+      function setSelectionToCopy() {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        const textNode = div.firstChild;
+        // Set the Selection on first word "This".
+        range.setStart(textNode, 0);
+        range.setEnd(textNode, 4);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      function setSelectionOnNewLine() {
+        const range = document.createRange();
+        const selection = window.getSelection();
+        const textNode = div.lastChild;
+        const newlineIndex = textNode.textContent.indexOf("\n");
+
+        if (newlineIndex !== -1) {
+          range.setStart(textNode, newlineIndex);
+          range.setEnd(textNode, newlineIndex + 1);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+      setSelectionToCopy();
+      document.execCommand("copy");
+      setSelectionOnNewLine();
+      document.execCommand("paste");
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/tests/wpt/tests/editing/data/indent.js b/tests/wpt/tests/editing/data/indent.js
index 0265552f093..100da577458 100644
--- a/tests/wpt/tests/editing/data/indent.js
+++ b/tests/wpt/tests/editing/data/indent.js
@@ -689,7 +689,7 @@ var browserTests = [
     {"indent":[false,false,"",false,false,""]}],
 ["<ol><li>foo<ol><li>bar</ol>[baz]</ol>",
     [["indent",""]],
-    "<ol><li>foo</li><ol><li>bar</li><li>[baz]</li></ol></ol>",
+    "<ol><ol><li>foo<ol><li>bar</li></ol>[baz]</li></ol></ol>",
     [true],
     {"indent":[false,false,"",false,false,""]}],
 ["<ol><li>[foo<ol><li>bar]</ol>baz</ol>",
diff --git a/tests/wpt/tests/editing/other/copy-elements-with-css-vars.tentative.html b/tests/wpt/tests/editing/other/copy-elements-with-css-vars.tentative.html
new file mode 100644
index 00000000000..d903d5a0017
--- /dev/null
+++ b/tests/wpt/tests/editing/other/copy-elements-with-css-vars.tentative.html
@@ -0,0 +1,114 @@
+<!doctype html>
+
+<head>
+  <title>Test for resolving css variables on copy</title>
+  <script src="/resources/testharness.js"></script>
+  <script src="/resources/testharnessreport.js"></script>
+  <script src="/resources/testdriver.js"></script>
+  <script src="/resources/testdriver-vendor.js"></script>
+  <script src="/resources/testdriver-actions.js"></script>
+  <script src="../include/editor-test-utils.js"></script>
+  <style>
+    /* Define custom properties */
+    :root {
+      --span-text-color: blue;
+      --row-text-color: red;
+      --font-size-span: 18px;
+      --cell-padding: 12px;
+      --font-family-span: Calibri, sans-serif;
+    }
+
+    span {
+      font-size: var(--font-size-span);
+      font-family: var(--font-family-span);
+      color: var(--span-text-color);
+    }
+
+    td {
+      padding: var(--cell-padding);
+      color: var(--row-text-color);
+    }
+  </style>
+</head>
+
+<body>
+  <div id="test">
+    <span>Span text</span>
+    <table>
+      <tr>
+        <td>Row 1, Cell 1</td>
+        <td>Row 1, Cell 2</td>
+      </tr>
+    </table>
+  </div>
+  <div id="pasteTarget" contenteditable="true"></div>
+  <div id="results"></div>
+
+  <script>
+    // Function selects contents of the test div and executes copy command
+    async function copyContent() {
+      const divToCopy = document.getElementById("test");
+      const range = document.createRange();
+      range.selectNodeContents(divToCopy);
+      const selection = window.getSelection();
+      selection.removeAllRanges();
+      selection.addRange(range);
+
+      const utils = new EditorTestUtils(divToCopy);
+      await utils.sendCopyShortcutKey();
+    }
+
+    // Function to paste the copied content into the pasteTarget div
+    // Pasting in content editable div ensures
+    // text/html type data from clipboard is used.
+    async function pasteContent() {
+      const selection = window.getSelection();
+      const pasteTarget = document.getElementById("pasteTarget");
+      selection.collapse(pasteTarget, 0);
+      const utils = new EditorTestUtils(pasteTarget);
+      await utils.sendPasteShortcutKey();
+    }
+
+    // Function to get the pasted HTML and add it in the results div
+    function getPastedHTML() {
+      const pasteTarget = document.getElementById("pasteTarget");
+      const results = document.getElementById("results");
+
+      results.appendChild(document.createTextNode(pasteTarget.innerHTML));
+    }
+
+    promise_test(async t => {
+      await copyContent();
+      await pasteContent();
+      test(() => {
+        const pastedDiv = document.getElementById("pasteTarget");
+
+        const expectedSpanStyles = {
+          "font-size": "18px",
+          "font-family": "Calibri, sans-serif",
+          "color": "rgb(0, 0, 255)"
+        };
+
+        const expectedTdStyles = {
+          "padding": "12px",
+          "color": "rgb(255, 0, 0)"
+        };
+        const span = pastedDiv.querySelector("span");
+        const td = pastedDiv.querySelector("td");
+
+        for (const [property, value] of Object.entries(expectedSpanStyles)) {
+          assert_equals(span.style.getPropertyValue(property), value,
+            `Span ${property} should be ${value}`);
+        }
+
+        for (const [property, value] of Object.entries(expectedTdStyles)) {
+          assert_equals(td.style.getPropertyValue(property), value,
+            `TD ${property} should be ${value}`);
+        }
+      });
+    }, "Test serialized html on copy has resolved css values");
+
+  </script>
+</body>
+
+</html>
diff --git a/tests/wpt/tests/editing/other/plain-text-copy-paste-of-paragraph-ending-with-non-layed-out-content.html b/tests/wpt/tests/editing/other/plain-text-copy-paste-of-paragraph-ending-with-non-layed-out-content.html
index 4b053e37706..c6f2e3adb5e 100644
--- a/tests/wpt/tests/editing/other/plain-text-copy-paste-of-paragraph-ending-with-non-layed-out-content.html
+++ b/tests/wpt/tests/editing/other/plain-text-copy-paste-of-paragraph-ending-with-non-layed-out-content.html
@@ -1,121 +1,203 @@
-<!doctype html>
-<meta charset=utf-8>
-<title>This test is for testing plain text copy paste of paragraph
-ending with non layed out content.</title>
-<script src=/resources/testharness.js></script>
-<script src=/resources/testharnessreport.js></script>
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>
+  This test is for testing plain text copy paste of paragraph ending with non
+  layed out content.
+</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="../include/editor-test-utils.js"></script>
 <div id="copy" contenteditable="true">
-<p>line 1</p>
-<p id="line2">line 2<!-- A comment !--></p>
-<p>line 3</p>
+  <p>line 1</p>
+  <p id="line2">line 2<!-- A comment !--></p>
+  <p>line 3</p>
+</div>
+<div id="button-in-inline">
+  <span id="contains-button">test<div id="contains-button" style="display: inline-flex"><button> </button></div>;
+  </span>
 </div>
 <textarea id="paste"></textarea>
 <script>
-"use strict";
+  promise_test(async () => {
+    const range = document.createRange();
+    const contentToCopy = document.getElementById("copy");
+    range.selectNodeContents(contentToCopy);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+    // Send copy command
+    const utils = new EditorTestUtils(contentToCopy);
+    await utils.sendCopyShortcutKey();
 
-setup({explicit_done: true});
+    selection.removeAllRanges();
+    const textarea = document.getElementById("paste");
+    textarea.focus();
+    await utils.sendPasteShortcutKey();
+    assert_equals(textarea.value, "line 1\n\nline 2\n\nline 3");
+  }, "The extra line break is missing after the paragraph that ends with a comment.");
 
-function runTests() {
-    test(function() {
-        const range = document.createRange();
-        range.selectNodeContents(document.getElementById('copy'));
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-        document.execCommand('copy');
-        selection.removeAllRanges();
-        const textarea = document.getElementById('paste');
-        textarea.focus();
-        document.execCommand('paste');
-        assert_equals(textarea.value, 'line 1\n\nline 2\n\nline 3');
-    }, "The extra line break is missing after the paragraph that ends with a comment.");
+  promise_test(async () => {
+    const line2 = document.getElementById("line2");
+    line2.innerHTML =
+      'line 2<span style="display: none;">hidden content</span>';
+    const range = document.createRange();
+    const contentToCopy = document.getElementById("copy");
+    range.selectNodeContents(contentToCopy);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+    // Send copy command
+    const utils = new EditorTestUtils(contentToCopy);
+    await utils.sendCopyShortcutKey();
+    selection.removeAllRanges();
+    const textarea = document.getElementById("paste");
+    textarea.value = "";
+    textarea.focus();
+    await utils.sendPasteShortcutKey();
+    assert_equals(textarea.value, "line 1\n\nline 2\n\nline 3");
+  }, "The extra line break is missing after the paragraph that ends with a display:none span.");
 
-    test(function() {
-        const line2 = document.getElementById('line2');
-        line2.innerHTML = 'line 2<span style="display: none;">hidden content</span>';
-        const range = document.createRange();
-        range.selectNodeContents(document.getElementById('copy'));
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-        document.execCommand('copy');
-        selection.removeAllRanges();
-        const textarea = document.getElementById('paste');
-        textarea.value='';
-        textarea.focus();
-        document.execCommand('paste');
-        assert_equals(textarea.value, 'line 1\n\nline 2\n\nline 3');
-    }, "The extra line break is missing after the paragraph that ends with a display:none span.");
+  promise_test(async () => {
+    const line2 = document.getElementById("line2");
+    line2.innerHTML = "line 2<span hidden>hidden content</span>";
+    const range = document.createRange();
+    const contentToCopy = document.getElementById("copy");
+    range.selectNodeContents(contentToCopy);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+    // Send copy command
+    const utils = new EditorTestUtils(contentToCopy);
+    await utils.sendCopyShortcutKey();
+    selection.removeAllRanges();
+    const textarea = document.getElementById("paste");
+    textarea.value = "";
+    textarea.focus();
+    await utils.sendPasteShortcutKey();
+    assert_equals(textarea.value, "line 1\n\nline 2\n\nline 3");
+  }, "The extra line break is missing after the paragraph that ends with a hidden span.");
 
-    test(function() {
-        const line2 = document.getElementById('line2');
-        line2.innerHTML = 'line 2<span hidden>hidden content</span>';
-        const range = document.createRange();
-        range.selectNodeContents(document.getElementById('copy'));
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-        document.execCommand('copy');
-        selection.removeAllRanges();
-        const textarea = document.getElementById('paste');
-        textarea.value='';
-        textarea.focus();
-        document.execCommand('paste');
-        assert_equals(textarea.value, 'line 1\n\nline 2\n\nline 3');
-    }, "The extra line break is missing after the paragraph that ends with a hidden span.");
+  promise_test(async () => {
+    const line2 = document.getElementById("line2");
+    line2.innerHTML = 'line 2<meta charset="UTF-8">';
+    const range = document.createRange();
+    const contentToCopy = document.getElementById("copy");
+    range.selectNodeContents(contentToCopy);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+    // Send copy command
+    const utils = new EditorTestUtils(contentToCopy);
+    await utils.sendCopyShortcutKey();
+    selection.removeAllRanges();
+    const textarea = document.getElementById("paste");
+    textarea.value = "";
+    textarea.focus();
+    await utils.sendPasteShortcutKey();
+    assert_equals(textarea.value, "line 1\n\nline 2\n\nline 3");
+  }, "The extra line break is missing after the paragraph that ends with a meta tag.");
 
-    test(function() {
-        const line2 = document.getElementById('line2');
-        line2.innerHTML = 'line 2<meta charset="UTF-8">';
-        const range = document.createRange();
-        range.selectNodeContents(document.getElementById('copy'));
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-        document.execCommand('copy');
-        selection.removeAllRanges();
-        const textarea = document.getElementById('paste');
-        textarea.value='';
-        textarea.focus();
-        document.execCommand('paste');
-        assert_equals(textarea.value, 'line 1\n\nline 2\n\nline 3');
-    }, "The extra line break is missing after the paragraph that ends with a meta tag.");
+  promise_test(async () => {
+    const line2 = document.getElementById("line2");
+    line2.innerHTML =
+      'line 2<style>body{ font-family: Arial, sans-serif; ""}</style>';
+    const range = document.createRange();
+    const contentToCopy = document.getElementById("copy");
+    range.selectNodeContents(contentToCopy);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+    // Send copy command
+    const utils = new EditorTestUtils(contentToCopy);
+    await utils.sendCopyShortcutKey();
+    selection.removeAllRanges();
+    const textarea = document.getElementById("paste");
+    textarea.value = "";
+    textarea.focus();
+    await utils.sendPasteShortcutKey();
+    assert_equals(textarea.value, "line 1\n\nline 2\n\nline 3");
+  }, "The extra line break is missing after the paragraph that ends with a style tag.");
 
-    test(function() {
-        const line2 = document.getElementById('line2');
-        line2.innerHTML = 'line 2<style>body{ font-family: Arial, sans-serif; ""}</style>';
-        const range = document.createRange();
-        range.selectNodeContents(document.getElementById('copy'));
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-        document.execCommand('copy');
-        selection.removeAllRanges();
-        const textarea = document.getElementById('paste');
-        textarea.value='';
-        textarea.focus();
-        document.execCommand('paste');
-        assert_equals(textarea.value, 'line 1\n\nline 2\n\nline 3');
-    }, "The extra line break is missing after the paragraph that ends with a style tag.");
+  promise_test(async () => {
+    const line2 = document.getElementById("line2");
+    line2.innerHTML = 'line 2<base href="http://crbug.com/41350470">';
+    const range = document.createRange();
+    const contentToCopy = document.getElementById("copy");
+    range.selectNodeContents(contentToCopy);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+    // Send copy command
+    const utils = new EditorTestUtils(contentToCopy);
+    await utils.sendCopyShortcutKey();
+    selection.removeAllRanges();
+    const textarea = document.getElementById("paste");
+    textarea.value = "";
+    textarea.focus();
+    await utils.sendPasteShortcutKey();
+    assert_equals(textarea.value, "line 1\n\nline 2\n\nline 3");
+  }, "The extra line break is missing after the paragraph that ends with a base tag.");
 
-    test(function() {
-        const line2 = document.getElementById('line2');
-        line2.innerHTML = 'line 2<base href="http://crbug.com/41350470">';
-        const range = document.createRange();
-        range.selectNodeContents(document.getElementById('copy'));
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
-        document.execCommand('copy');
-        selection.removeAllRanges();
-        const textarea = document.getElementById('paste');
-        textarea.value='';
-        textarea.focus();
-        document.execCommand('paste');
-        assert_equals(textarea.value, 'line 1\n\nline 2\n\nline 3');
-    }, "The extra line break is missing after the paragraph that ends with a base tag.");
-    done();
-}
+  promise_test(async () => {
+    const range = document.createRange();
+    const contentToCopy = document.getElementById("button-in-inline");
+    range.selectNodeContents(contentToCopy);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+    // Send copy command
+    const utils = new EditorTestUtils(contentToCopy);
+    await utils.sendCopyShortcutKey();
+    selection.removeAllRanges();
+    const textarea = document.getElementById("paste");
+    textarea.value = "";
+    textarea.focus();
+    await utils.sendPasteShortcutKey();
+    assert_equals(textarea.value, "test;");
+  }, "Line break should not be present before semicolon after block elements styled as inline-flex.");
 
-window.addEventListener("load", runTests, {once: true});
+  promise_test(async () => {
+    const contains_button = document.getElementById("contains-button");
+    contains_button.innerHTML =
+      'test<div id="contains-button" style="display: inline-block"><button> </button></div>;';
+    const range = document.createRange();
+    const contentToCopy = document.getElementById("button-in-inline");
+    range.selectNodeContents(contentToCopy);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+    // Send copy command
+    const utils = new EditorTestUtils(contentToCopy);
+    await utils.sendCopyShortcutKey();
+    selection.removeAllRanges();
+    const textarea = document.getElementById("paste");
+    textarea.value = "";
+    textarea.focus();
+    await utils.sendPasteShortcutKey();
+    assert_equals(textarea.value, "test;");
+  }, "Line break should not be present before semicolon after block elements styled as inline-block.");
+
+  promise_test(async () => {
+    const contains_button = document.getElementById("contains-button");
+    contains_button.innerHTML =
+      'test<div id="contains-button" style="display: inline-grid"><button> </button></div>;';
+    const range = document.createRange();
+    const contentToCopy = document.getElementById("button-in-inline");
+    range.selectNodeContents(contentToCopy);
+    const selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+    // Send copy command
+    const utils = new EditorTestUtils(contentToCopy);
+    await utils.sendCopyShortcutKey();
+    selection.removeAllRanges();
+    const textarea = document.getElementById("paste");
+    textarea.value = "";
+    textarea.focus();
+    await utils.sendPasteShortcutKey();
+    assert_equals(textarea.value, "test;");
+  }, "Line break should not be present before semicolon after block elements styled as inline-grid.");
 </script>
diff --git a/tests/wpt/tests/fledge/tentative/private-aggregation.https.window.js b/tests/wpt/tests/fledge/tentative/private-aggregation.https.window.js
index 4386610abb3..a1c261b6291 100644
--- a/tests/wpt/tests/fledge/tentative/private-aggregation.https.window.js
+++ b/tests/wpt/tests/fledge/tentative/private-aggregation.https.window.js
@@ -162,6 +162,8 @@ function createAuctionConfigOverrides(
         maybeDelay(fragments.sellerDelay),
     seller: MAIN_ORIGIN,
     interestGroupBuyers: [MAIN_ORIGIN],
+    privateAggregationConfig:
+      { aggregationCoordinatorOrigin: window.location.origin },
     ...moreAuctionConfigOverrides
   };
 }
diff --git a/tests/wpt/tests/fullscreen/api/element-ready-check-fullscreen-element-sibling.html b/tests/wpt/tests/fullscreen/api/element-ready-check-fullscreen-element-sibling.html
index 6394c13ee33..3b2781cc4ff 100644
--- a/tests/wpt/tests/fullscreen/api/element-ready-check-fullscreen-element-sibling.html
+++ b/tests/wpt/tests/fullscreen/api/element-ready-check-fullscreen-element-sibling.html
@@ -11,7 +11,7 @@
 <script>
     promise_test(async (t) => {
         document.onfullscreenerror = t.unreached_func(
-            "second fullscreenchange event"
+            "fullscreenerror event"
         );
         const a = document.getElementById("a");
         const b = document.getElementById("b");
diff --git a/tests/wpt/tests/fullscreen/model/remove-first.html b/tests/wpt/tests/fullscreen/model/remove-first.html
index b4058db320c..ff1b251271c 100644
--- a/tests/wpt/tests/fullscreen/model/remove-first.html
+++ b/tests/wpt/tests/fullscreen/model/remove-first.html
@@ -22,24 +22,24 @@
       trusted_request(first),
       fullScreenChange(),
     ]);
-    assert_equals(document.fullscreenElement, first);
-    assert_equals(firstEvent.target, first);
+    assert_equals(document.fullscreenElement, first, "fullscreen element after first request");
+    assert_equals(firstEvent.target, first, "first fullscreenchange event target");
 
     const last = document.getElementById("last");
     const [, secondEvent] = await Promise.all([
       trusted_request(last),
       fullScreenChange(),
     ]);
-    assert_equals(document.fullscreenElement, last);
-    assert_equals(event.target, last);
+    assert_equals(document.fullscreenElement, last, "fullscreen element after second request");
+    assert_equals(secondEvent.target, last, "second fullscreenchange event target");
     first.remove();
 
     // Both /first/ and /last/ were removed from the top layer and
     // thus the fullscreen element synchronously becomes null.
-    assert_equals(document.fullscreenElement, null);
+    assert_equals(document.fullscreenElement, null, "fullscreen element immediately after removal");
 
     const thirdEvent = await fullScreenChange();
-    assert_equals(document.fullscreenElement, null);
-    assert_equals(event.target, document);
+    assert_equals(document.fullscreenElement, null, "fullscreen element after third event");
+    assert_equals(thirdEvent.target, document, "third fullscreenchange event target");
   });
 </script>
diff --git a/tests/wpt/tests/fullscreen/model/remove-last.html b/tests/wpt/tests/fullscreen/model/remove-last.html
index 760ccaa0bab..72e7ed850ae 100644
--- a/tests/wpt/tests/fullscreen/model/remove-last.html
+++ b/tests/wpt/tests/fullscreen/model/remove-last.html
@@ -22,26 +22,26 @@
       fullScreenChange(),
     ]);
 
-    assert_equals(document.fullscreenElement, first);
-    assert_equals(firstEvent.target, first);
+    assert_equals(document.fullscreenElement, first, "fullscreen element after first request");
+    assert_equals(firstEvent.target, first, "first fullscreenchange event target");
 
     const last = document.getElementById("last");
-    const [, lastEvent] = await Promise.all([
+    const [, secondEvent] = await Promise.all([
       trusted_request(last),
       fullScreenChange(),
     ]);
 
-    assert_equals(document.fullscreenElement, last);
-    assert_equals(event.target, last);
+    assert_equals(document.fullscreenElement, last, "fullscreen element after second request");
+    assert_equals(secondEvent.target, last, "second fullscreenchange event target");
     last.remove();
-    // Because /last/ was removed from the top layer, we exit
-    // fullscreen element synchronously.
-    assert_equals(document.fullscreenElement, first);
+    // Although /last/ was removed from the top layer synchronously, /first/ remains
+    // and becomes the new fullscreen element.
+    assert_equals(document.fullscreenElement, first, "fullscreen element immediately after removal");
 
-    const finalEvent = await fullScreenChange();
-    // fullscreen change element should be queued against the
-    // document target.
-    assert_equals(document.fullscreenElement, null);
-    assert_equals(event.target, document);
+    // The removal of the fullscreen element triggers exiting fullscreen, but those changes
+    // happen async when the event is fired.
+    const thirdEvent = await fullScreenChange();
+    assert_equals(document.fullscreenElement, null, "fullscreen element after third event");
+    assert_equals(thirdEvent.target, document, "third fullscreenchange event target");
   });
 </script>
diff --git a/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.html b/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.html
new file mode 100644
index 00000000000..e30d3f7905c
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.color.type.u8p3.to.f16srgb.to.u8p3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.color.type.u8p3.to.f16srgb.to.u8p3</h1>
+<p class="desc">test srgb float16 canvas storing 8-bit display-p3 data accurately</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("test srgb float16 canvas storing 8-bit display-p3 data accurately");
+_addTest(function(canvas, ctx) {
+
+  // Consider the color in Display P3:
+  //   (5,250,128)/255
+  // In sRGB this is:
+  //   (-0.4990661502955996, 0.9982902153915844, 0.43901323244980783)
+  // Quantized to float16, this is:
+  //   (0xB7FC, 0x3BFC, 0x3706)
+  //   (-0.49902344,         0.9980469,          0.43896484)
+  // Converted back to Display P3 this is:
+  //   (4.783888129523, 249.938708036787, 127.979725000698)/255
+  // Quantized to 8-bit, this is:
+  //   (5, 250, 128)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "display-p3"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"display-p3"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 5, kEpsilon);
+  assert_approx_equals(readback.data[1], 250, kEpsilon);
+  assert_approx_equals(readback.data[2], 128, kEpsilon);
+
+}, {colorType: "float16", colorSpace: "srgb"});
+</script>
+
diff --git a/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html b/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html
new file mode 100644
index 00000000000..b1cfb4552b9
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.color.type.u8p3.to.u8srgb.to.u8p3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.color.type.u8p3.to.u8srgb.to.u8p3</h1>
+<p class="desc">test srgb unorm8 canvas storing 8-bit display-p3 data accurately</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("test srgb unorm8 canvas storing 8-bit display-p3 data accurately");
+_addTest(function(canvas, ctx) {
+
+  // Consider the color in Display P3:
+  //   (5,250,128)/255
+  // In sRGB this is:
+  //   (-0.4990661502955996, 0.9982902153915844, 0.43901323244980783)
+  // Quantized to 8-bit, this is:
+  //   (0, 255, 112)/255
+  // Converted back to Display P3 this is:
+  //   (116.892405498713, 251.242468747889, 129.109129531237)/255
+  // Quantized to 8-bit, this is:
+  //   (116, 251, 129)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "display-p3"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"display-p3"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 116, kEpsilon);
+  assert_approx_equals(readback.data[1], 251, kEpsilon);
+  assert_approx_equals(readback.data[2], 129, kEpsilon);
+
+}, {colorType: "unorm8", colorSpace: "srgb"});
+</script>
+
diff --git a/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.html b/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.html
new file mode 100644
index 00000000000..3ce75d314bc
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.color.type.u8srgb.to.f16p3.to.u8srgb</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.color.type.u8srgb.to.f16p3.to.u8srgb</h1>
+<p class="desc">test display-p3 float16 canvas storing 8-bit srgb data accurately</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("test display-p3 float16 canvas storing 8-bit srgb data accurately");
+_addTest(function(canvas, ctx) {
+
+  // Consider the color in sRGB:
+  //   (5,250,128)/255
+  // In Display P3 this is:
+  //   (0.450400386839, 0.9659537931, 0.55239459823)
+  // Quantized to float16, that should evaluate to:
+  //   (0x3735, 0x3BBA, 0x386B)
+  //   (0.450439453125, 0.9658203125, 0.55224609375)
+  // Converted back to sRGB this is:
+  //   (5.342920953809, 249.965067892273, 127.959124250169)/255
+  // Quantized to 8-bit, this is:
+  //   (5, 250, 128)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "srgb"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"srgb"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 5, kEpsilon);
+  assert_approx_equals(readback.data[1], 250, kEpsilon);
+  assert_approx_equals(readback.data[2], 128, kEpsilon);
+
+}, {colorType: "float16", colorSpace: "display-p3"});
+</script>
+
diff --git a/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html b/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html
new file mode 100644
index 00000000000..6d13b8d3c1a
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/element/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.color.type.u8srgb.to.u8p3.to.u8srgb</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.color.type.u8srgb.to.u8p3.to.u8srgb</h1>
+<p class="desc">test display-p3 unorm8 canvas not storing 8-bit srgb data accurately</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("test display-p3 unorm8 canvas not storing 8-bit srgb data accurately");
+_addTest(function(canvas, ctx) {
+
+  // Consider the color in sRGB:
+  //   (5,250,128)/255
+  // In Display P3 this is:
+  //   (0.4504003868394956, 0.9659537930632748, 0.5523945982276097)
+  // Quantized to 8-bit, this is:
+  //   (115, 246, 141)/255
+  // Converted back to sRGB this is:
+  //   (8.909609662725, 249.672568247041, 128.228541784731)/255
+  // Quantized to 8-bit, this is:
+  //   (9, 250, 128)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "srgb"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"srgb"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 9, kEpsilon);
+  assert_approx_equals(readback.data[1], 250, kEpsilon);
+  assert_approx_equals(readback.data[2], 128, kEpsilon);
+
+}, {colorType: "unorm8", colorSpace: "display-p3"});
+</script>
+
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.drawImage-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.drawImage-expected.html
index eea78248a83..6f7bf8e8fe7 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.drawImage-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.drawImage-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.drawImage</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.no_shadow.drawImage</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.drawImage.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.drawImage.html
index acf9892ec37..3b55b2e923f 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.drawImage.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.drawImage.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.no_shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.drawImage</h1>
+<h1>2d.composite.grid.filter.no_shadow.drawImage</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -44,7 +43,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -76,7 +75,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -108,7 +107,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -140,7 +139,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -172,7 +171,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -204,7 +203,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -236,7 +235,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -268,7 +267,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -300,7 +299,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -332,7 +331,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -364,7 +363,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -396,7 +395,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -428,7 +427,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -460,7 +459,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -492,7 +491,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -524,7 +523,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -556,7 +555,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -588,7 +587,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -620,7 +619,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -652,7 +651,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -684,7 +683,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -716,7 +715,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -748,7 +747,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -780,7 +779,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -812,7 +811,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.fillRect-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.fillRect-expected.html
index 08ed3566fd1..ec67b35c959 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.fillRect-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.fillRect-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.fillRect</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.no_shadow.fillRect</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.fillRect.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.fillRect.html
index be37d492581..7addb60d333 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.fillRect.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.fillRect.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.no_shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.fillRect</h1>
+<h1>2d.composite.grid.filter.no_shadow.fillRect</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -41,7 +40,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -70,7 +69,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -99,7 +98,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -128,7 +127,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -157,7 +156,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -186,7 +185,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -215,7 +214,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -244,7 +243,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -273,7 +272,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -302,7 +301,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -331,7 +330,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -360,7 +359,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -389,7 +388,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -418,7 +417,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -447,7 +446,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -476,7 +475,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -505,7 +504,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -534,7 +533,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -563,7 +562,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -592,7 +591,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -621,7 +620,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -650,7 +649,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -679,7 +678,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -708,7 +707,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -737,7 +736,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.pattern-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.pattern-expected.html
index 22c84f42e89..420cab82fbe 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.pattern-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.pattern-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.pattern</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.no_shadow.pattern</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.pattern.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.pattern.html
index 7e68be70eaa..415b0b78b7e 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.pattern.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.pattern.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.no_shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.pattern</h1>
+<h1>2d.composite.grid.filter.no_shadow.pattern</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -45,7 +44,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -78,7 +77,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -111,7 +110,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -144,7 +143,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -177,7 +176,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -210,7 +209,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -243,7 +242,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -276,7 +275,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -309,7 +308,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -342,7 +341,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -375,7 +374,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -408,7 +407,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -441,7 +440,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -474,7 +473,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -507,7 +506,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -540,7 +539,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -573,7 +572,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -606,7 +605,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -639,7 +638,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -672,7 +671,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -705,7 +704,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -738,7 +737,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -771,7 +770,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -804,7 +803,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -837,7 +836,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.drawImage-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.drawImage-expected.html
index 2072348f904..1976dfc4663 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.drawImage-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.drawImage-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.drawImage</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.shadow.drawImage</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.drawImage.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.drawImage.html
index 918debe2e40..e9784a3dc70 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.drawImage.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.drawImage.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.drawImage</h1>
+<h1>2d.composite.grid.filter.shadow.drawImage</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -46,7 +45,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -80,7 +79,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -114,7 +113,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -148,7 +147,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -182,7 +181,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -216,7 +215,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -250,7 +249,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -284,7 +283,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -318,7 +317,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -352,7 +351,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -386,7 +385,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -420,7 +419,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -454,7 +453,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -488,7 +487,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -522,7 +521,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -556,7 +555,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -590,7 +589,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -624,7 +623,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -658,7 +657,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -692,7 +691,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -726,7 +725,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -760,7 +759,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -794,7 +793,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -828,7 +827,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -862,7 +861,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.fillRect-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.fillRect-expected.html
index 1e119bcbde5..72cd6c78da4 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.fillRect-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.fillRect-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.fillRect</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.shadow.fillRect</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.fillRect.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.fillRect.html
index 363f9ed454e..784a068b717 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.fillRect.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.fillRect.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.fillRect</h1>
+<h1>2d.composite.grid.filter.shadow.fillRect</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -43,7 +42,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -74,7 +73,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -105,7 +104,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -136,7 +135,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -167,7 +166,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -198,7 +197,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -229,7 +228,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -260,7 +259,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -291,7 +290,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -322,7 +321,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -353,7 +352,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -384,7 +383,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -415,7 +414,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -446,7 +445,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -477,7 +476,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -508,7 +507,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -539,7 +538,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -570,7 +569,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -601,7 +600,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -632,7 +631,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -663,7 +662,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -694,7 +693,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -725,7 +724,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -756,7 +755,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -787,7 +786,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.pattern-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.pattern-expected.html
index f45fe82c302..b7a4f59f84b 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.pattern-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.pattern-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.pattern</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.shadow.pattern</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.pattern.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.pattern.html
index 18ea3a473d8..e13bf471b94 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.pattern.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.filter.shadow.pattern.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.pattern</h1>
+<h1>2d.composite.grid.filter.shadow.pattern</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -47,7 +46,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -82,7 +81,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -117,7 +116,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -152,7 +151,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -187,7 +186,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -222,7 +221,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -257,7 +256,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -292,7 +291,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -327,7 +326,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -362,7 +361,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -397,7 +396,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -432,7 +431,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -467,7 +466,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -502,7 +501,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -537,7 +536,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -572,7 +571,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -607,7 +606,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -642,7 +641,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -677,7 +676,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -712,7 +711,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -747,7 +746,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -782,7 +781,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -817,7 +816,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -852,7 +851,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -887,7 +886,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.drawImage-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.drawImage-expected.html
index 923d8360a9d..36578e14d4d 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.drawImage-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.drawImage-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.drawImage</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.no_shadow.drawImage</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.html
index cd9ad95b92c..42a331f7c9b 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.no_shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.drawImage</h1>
+<h1>2d.composite.grid.no_filter.no_shadow.drawImage</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -44,7 +43,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -76,7 +75,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -108,7 +107,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -140,7 +139,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -172,7 +171,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -204,7 +203,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -236,7 +235,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -268,7 +267,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -300,7 +299,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -332,7 +331,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -364,7 +363,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -396,7 +395,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -428,7 +427,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -460,7 +459,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -492,7 +491,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -524,7 +523,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -556,7 +555,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -588,7 +587,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -620,7 +619,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -652,7 +651,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -684,7 +683,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -716,7 +715,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -748,7 +747,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -780,7 +779,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -812,7 +811,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.fillRect-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.fillRect-expected.html
index c809e56cac3..ae85679c221 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.fillRect-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.fillRect-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.fillRect</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.no_shadow.fillRect</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.html
index f007fd3fc7e..8a01e7abb0c 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.no_shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.fillRect</h1>
+<h1>2d.composite.grid.no_filter.no_shadow.fillRect</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -41,7 +40,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -70,7 +69,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -99,7 +98,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -128,7 +127,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -157,7 +156,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -186,7 +185,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -215,7 +214,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -244,7 +243,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -273,7 +272,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -302,7 +301,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -331,7 +330,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -360,7 +359,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -389,7 +388,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -418,7 +417,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -447,7 +446,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -476,7 +475,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -505,7 +504,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -534,7 +533,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -563,7 +562,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -592,7 +591,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -621,7 +620,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -650,7 +649,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -679,7 +678,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -708,7 +707,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -737,7 +736,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.pattern-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.pattern-expected.html
index f052442a637..5f7f12c9c8a 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.pattern-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.pattern-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.pattern</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.no_shadow.pattern</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.pattern.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.pattern.html
index 5362b2f1f53..6c8d0e69cac 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.pattern.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.no_shadow.pattern.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.no_shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.pattern</h1>
+<h1>2d.composite.grid.no_filter.no_shadow.pattern</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -45,7 +44,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -78,7 +77,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -111,7 +110,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -144,7 +143,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -177,7 +176,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -210,7 +209,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -243,7 +242,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -276,7 +275,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -309,7 +308,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -342,7 +341,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -375,7 +374,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -408,7 +407,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -441,7 +440,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -474,7 +473,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -507,7 +506,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -540,7 +539,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -573,7 +572,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -606,7 +605,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -639,7 +638,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -672,7 +671,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -705,7 +704,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -738,7 +737,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -771,7 +770,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -804,7 +803,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -837,7 +836,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.drawImage-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.drawImage-expected.html
index ad07c35d310..19439211dde 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.drawImage-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.drawImage-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.drawImage</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.shadow.drawImage</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.drawImage.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.drawImage.html
index e77309135d6..625a613253f 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.drawImage.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.drawImage.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.drawImage</h1>
+<h1>2d.composite.grid.no_filter.shadow.drawImage</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -46,7 +45,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -80,7 +79,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -114,7 +113,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -148,7 +147,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -182,7 +181,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -216,7 +215,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -250,7 +249,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -284,7 +283,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -318,7 +317,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -352,7 +351,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -386,7 +385,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -420,7 +419,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -454,7 +453,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -488,7 +487,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -522,7 +521,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -556,7 +555,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -590,7 +589,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -624,7 +623,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -658,7 +657,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -692,7 +691,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -726,7 +725,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -760,7 +759,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -794,7 +793,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -828,7 +827,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -862,7 +861,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.fillRect-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.fillRect-expected.html
index e16a5fcf458..42266582be2 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.fillRect-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.fillRect-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.fillRect</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.shadow.fillRect</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.fillRect.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.fillRect.html
index c82ca80cadf..d01e7bc0ed6 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.fillRect.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.fillRect.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.fillRect</h1>
+<h1>2d.composite.grid.no_filter.shadow.fillRect</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -43,7 +42,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -74,7 +73,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -105,7 +104,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -136,7 +135,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -167,7 +166,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -198,7 +197,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -229,7 +228,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -260,7 +259,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -291,7 +290,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -322,7 +321,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -353,7 +352,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -384,7 +383,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -415,7 +414,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -446,7 +445,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -477,7 +476,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -508,7 +507,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -539,7 +538,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -570,7 +569,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -601,7 +600,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -632,7 +631,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -663,7 +662,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -694,7 +693,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -725,7 +724,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -756,7 +755,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -787,7 +786,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.pattern-expected.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.pattern-expected.html
index 01e1d4d7b26..8d6d2492b9b 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.pattern-expected.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.pattern-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.pattern</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.shadow.pattern</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.pattern.html b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.pattern.html
index bc7d0134b34..7512b21b069 100644
--- a/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.pattern.html
+++ b/tests/wpt/tests/html/canvas/element/compositing/2d.composite.grid.no_filter.shadow.pattern.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.pattern</h1>
+<h1>2d.composite.grid.no_filter.shadow.pattern</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -47,7 +46,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -82,7 +81,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -117,7 +116,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -152,7 +151,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -187,7 +186,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -222,7 +221,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -257,7 +256,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -292,7 +291,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -327,7 +326,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -362,7 +361,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -397,7 +396,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -432,7 +431,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -467,7 +466,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -502,7 +501,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -537,7 +536,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -572,7 +571,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -607,7 +606,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -642,7 +641,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -677,7 +676,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -712,7 +711,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -747,7 +746,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -782,7 +781,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -817,7 +816,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -852,7 +851,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -887,7 +886,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html b/tests/wpt/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html
index 9c85dfec907..6e9ebb5b2e1 100644
--- a/tests/wpt/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html
@@ -2,15 +2,15 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title>
-<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
 <p class="desc">Test CanvasFilter() with gaussianBlur.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(5, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 5">
 <span>
   <div>x-only</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -25,7 +25,8 @@
 
 <span>
   <div>mostly-x</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -40,7 +41,8 @@
 
 <span>
   <div>isotropic</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -55,7 +57,8 @@
 
 <span>
   <div>mostly-y</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -70,7 +73,8 @@
 
 <span>
   <div>y-only</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
diff --git a/tests/wpt/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html b/tests/wpt/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
index 1de72acd6a2..5aff8fd31c3 100644
--- a/tests/wpt/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
+++ b/tests/wpt/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html">
 <title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title>
-<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
 <p class="desc">Test CanvasFilter() with gaussianBlur.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(5, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 5">
 <span>
   <div>x-only</div>
-  <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -29,7 +28,7 @@
 
 <span>
   <div>mostly-x</div>
-  <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -47,7 +46,7 @@
 
 <span>
   <div>isotropic</div>
-  <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -65,7 +64,7 @@
 
 <span>
   <div>mostly-y</div>
-  <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -83,7 +82,7 @@
 
 <span>
   <div>y-only</div>
-  <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative-expected.html b/tests/wpt/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative-expected.html
index f02f08d5f83..88d38a8c0c8 100644
--- a/tests/wpt/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative-expected.html
@@ -2,15 +2,15 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <title>Canvas test: 2d.filter.layers.gaussianBlur.tentative</title>
-<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur.tentative</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.filter.layers.gaussianBlur.tentative</h1>
 <p class="desc">Test CanvasFilter() with gaussianBlur.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(5, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 5">
 <span>
   <div>x-only</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -25,7 +25,8 @@
 
 <span>
   <div>mostly-x</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -40,7 +41,8 @@
 
 <span>
   <div>isotropic</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -55,7 +57,8 @@
 
 <span>
   <div>mostly-y</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -70,7 +73,8 @@
 
 <span>
   <div>y-only</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
diff --git a/tests/wpt/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative.html b/tests/wpt/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative.html
index 0bfd704ca1d..1dfc5eae449 100644
--- a/tests/wpt/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative.html
+++ b/tests/wpt/tests/html/canvas/element/filters/2d.filter.layers.gaussianBlur.tentative.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.filter.layers.gaussianBlur.tentative-expected.html">
 <title>Canvas test: 2d.filter.layers.gaussianBlur.tentative</title>
-<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur.tentative</h1>
+<h1>2d.filter.layers.gaussianBlur.tentative</h1>
 <p class="desc">Test CanvasFilter() with gaussianBlur.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(5, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 5">
 <span>
   <div>x-only</div>
-  <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -30,7 +29,7 @@
 
 <span>
   <div>mostly-x</div>
-  <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -49,7 +48,7 @@
 
 <span>
   <div>isotropic</div>
-  <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -68,7 +67,7 @@
 
 <span>
   <div>mostly-y</div>
-  <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -87,7 +86,7 @@
 
 <span>
   <div>y-only</div>
-  <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.no-transform-expected.html
index 0472b8f012e..1413ae16143 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.no-transform-expected.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.no-transform-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.ctx-filter.no-transform</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.ctx-filter.no-transform</h1>
+<h1>2d.layer.global-states.ctx-filter.no-transform</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -46,7 +45,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -80,7 +79,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -114,7 +113,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -148,7 +147,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -182,7 +181,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -216,7 +215,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -250,7 +249,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -284,7 +283,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -321,7 +320,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -358,7 +357,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -395,7 +394,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -432,7 +431,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -469,7 +468,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -506,7 +505,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -543,7 +542,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.no-transform.html
index 5925870ce2e..811666fc3fd 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.no-transform.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.no-transform.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.ctx-filter.no-transform-expected.html">
 <title>Canvas test: 2d.layer.global-states.ctx-filter.no-transform</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.ctx-filter.no-transform</h1>
+<h1>2d.layer.global-states.ctx-filter.no-transform</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -49,7 +48,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -85,7 +84,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -121,7 +120,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -157,7 +156,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -193,7 +192,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -229,7 +228,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -265,7 +264,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -301,7 +300,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -340,7 +339,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -379,7 +378,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -418,7 +417,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -457,7 +456,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -496,7 +495,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -535,7 +534,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -574,7 +573,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.rotation-expected.html
index 3290077de1e..4ea9b7bbc29 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.rotation-expected.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.rotation-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.ctx-filter.rotation</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.ctx-filter.rotation</h1>
+<h1>2d.layer.global-states.ctx-filter.rotation</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -48,7 +47,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -84,7 +83,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -120,7 +119,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -156,7 +155,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -192,7 +191,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -228,7 +227,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -264,7 +263,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -300,7 +299,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -339,7 +338,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -378,7 +377,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -417,7 +416,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -456,7 +455,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -495,7 +494,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -534,7 +533,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -573,7 +572,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.rotation.html
index 548b0108005..bbb0790d2be 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.rotation.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.ctx-filter.rotation.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.ctx-filter.rotation-expected.html">
 <title>Canvas test: 2d.layer.global-states.ctx-filter.rotation</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.ctx-filter.rotation</h1>
+<h1>2d.layer.global-states.ctx-filter.rotation</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -51,7 +50,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -89,7 +88,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -127,7 +126,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -165,7 +164,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -203,7 +202,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -241,7 +240,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -279,7 +278,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -317,7 +316,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -358,7 +357,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -399,7 +398,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -440,7 +439,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -481,7 +480,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -522,7 +521,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -563,7 +562,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -604,7 +603,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html
index dae68b3ad73..339c87bff21 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.filter.ctx-filter.no-transform.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.ctx-filter.no-transform.tentative</h1>
+<h1>2d.layer.global-states.filter.ctx-filter.no-transform.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -59,7 +58,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -106,7 +105,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -153,7 +152,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -200,7 +199,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -247,7 +246,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -294,7 +293,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -341,7 +340,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -388,7 +387,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -438,7 +437,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -488,7 +487,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -538,7 +537,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -588,7 +587,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -638,7 +637,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -688,7 +687,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -738,7 +737,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.html
index 415cf0360af..91e298b18b0 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.ctx-filter.no-transform.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.ctx-filter.no-transform.tentative</h1>
+<h1>2d.layer.global-states.filter.ctx-filter.no-transform.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -49,7 +48,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -85,7 +84,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -121,7 +120,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -157,7 +156,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -193,7 +192,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -229,7 +228,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -265,7 +264,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -301,7 +300,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -340,7 +339,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -379,7 +378,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -418,7 +417,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -457,7 +456,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -496,7 +495,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -535,7 +534,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -574,7 +573,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html
index b18ae7f357a..d5e03796eb3 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.filter.ctx-filter.rotation.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.ctx-filter.rotation.tentative</h1>
+<h1>2d.layer.global-states.filter.ctx-filter.rotation.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -61,7 +60,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -110,7 +109,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -159,7 +158,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -208,7 +207,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -257,7 +256,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -306,7 +305,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -355,7 +354,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -404,7 +403,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -456,7 +455,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -508,7 +507,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -560,7 +559,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -612,7 +611,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -664,7 +663,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -716,7 +715,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -768,7 +767,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.html
index 0573cd7f3be..27c85cbfa40 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.ctx-filter.rotation.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.ctx-filter.rotation.tentative</h1>
+<h1>2d.layer.global-states.filter.ctx-filter.rotation.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -51,7 +50,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -89,7 +88,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -127,7 +126,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -165,7 +164,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -203,7 +202,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -241,7 +240,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -279,7 +278,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -317,7 +316,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -358,7 +357,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -399,7 +398,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -440,7 +439,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -481,7 +480,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -522,7 +521,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -563,7 +562,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -604,7 +603,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html
index 6263d26333a..9908b53716c 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</h1>
+<h1>2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -59,7 +58,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -106,7 +105,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -153,7 +152,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -200,7 +199,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -247,7 +246,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -294,7 +293,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -341,7 +340,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -388,7 +387,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -438,7 +437,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -488,7 +487,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -538,7 +537,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -588,7 +587,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -638,7 +637,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -688,7 +687,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -738,7 +737,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.html
index 591c58acc97..03d4d5ec595 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</h1>
+<h1>2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -49,7 +48,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -85,7 +84,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -121,7 +120,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -157,7 +156,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -193,7 +192,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -229,7 +228,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -265,7 +264,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -301,7 +300,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -340,7 +339,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -379,7 +378,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -418,7 +417,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -457,7 +456,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -496,7 +495,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -535,7 +534,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -574,7 +573,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html
index 0236c9a5d93..949a28b82dc 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</h1>
+<h1>2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -61,7 +60,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -110,7 +109,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -159,7 +158,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -208,7 +207,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -257,7 +256,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -306,7 +305,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -355,7 +354,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -404,7 +403,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -456,7 +455,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -508,7 +507,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -560,7 +559,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -612,7 +611,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -664,7 +663,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -716,7 +715,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -768,7 +767,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.html
index ca75d4d1515..9bc61e6ddcf 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</h1>
+<h1>2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -51,7 +50,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -89,7 +88,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -127,7 +126,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -165,7 +164,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -203,7 +202,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -241,7 +240,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -279,7 +278,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -317,7 +316,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -358,7 +357,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -399,7 +398,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -440,7 +439,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -481,7 +480,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -522,7 +521,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -563,7 +562,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -604,7 +603,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.no-transform-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.no-transform-expected.html
index fd33e3e4659..aed32f49cf8 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.no-transform-expected.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.no-transform-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.no-cxt-filter.no-transform</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.no-cxt-filter.no-transform</h1>
+<h1>2d.layer.global-states.no-cxt-filter.no-transform</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -46,7 +45,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -80,7 +79,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -114,7 +113,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -148,7 +147,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -182,7 +181,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -216,7 +215,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -250,7 +249,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -284,7 +283,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -321,7 +320,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -358,7 +357,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -395,7 +394,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -432,7 +431,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -469,7 +468,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -506,7 +505,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -543,7 +542,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.no-transform.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.no-transform.html
index 4da6758c9f4..de8510b47f1 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.no-transform.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.no-transform.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.no-cxt-filter.no-transform-expected.html">
 <title>Canvas test: 2d.layer.global-states.no-cxt-filter.no-transform</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.no-cxt-filter.no-transform</h1>
+<h1>2d.layer.global-states.no-cxt-filter.no-transform</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -49,7 +48,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -85,7 +84,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -121,7 +120,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -157,7 +156,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -193,7 +192,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -229,7 +228,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -265,7 +264,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -301,7 +300,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -340,7 +339,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -379,7 +378,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -418,7 +417,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -457,7 +456,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -496,7 +495,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -535,7 +534,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -574,7 +573,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.rotation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.rotation-expected.html
index 7bee2f7e38c..26b4bbaafda 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.rotation-expected.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.rotation-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.no-cxt-filter.rotation</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.no-cxt-filter.rotation</h1>
+<h1>2d.layer.global-states.no-cxt-filter.rotation</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -48,7 +47,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -84,7 +83,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -120,7 +119,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -156,7 +155,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -192,7 +191,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -228,7 +227,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -264,7 +263,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -300,7 +299,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -339,7 +338,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -378,7 +377,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -417,7 +416,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -456,7 +455,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -495,7 +494,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -534,7 +533,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -573,7 +572,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.rotation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.rotation.html
index 9ffa680aca3..37ed61ea955 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.rotation.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.global-states.no-cxt-filter.rotation.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.no-cxt-filter.rotation-expected.html">
 <title>Canvas test: 2d.layer.global-states.no-cxt-filter.rotation</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.no-cxt-filter.rotation</h1>
+<h1>2d.layer.global-states.no-cxt-filter.rotation</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -51,7 +50,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -89,7 +88,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -127,7 +126,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -165,7 +164,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -203,7 +202,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -241,7 +240,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -279,7 +278,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -317,7 +316,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -358,7 +357,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -399,7 +398,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -440,7 +439,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -481,7 +480,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -522,7 +521,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -563,7 +562,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -604,7 +603,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation-expected.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation-expected.html
index e00136f6106..d80bae7a559 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation-expected.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation-expected.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.globalCompositeOperation</title>
-<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1>
+<h1>2d.layer.globalCompositeOperation</h1>
 <p class="desc">Checks that layers work with all globalCompositeOperation values.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(7, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 7">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -46,7 +45,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -82,7 +81,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -118,7 +117,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -154,7 +153,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -190,7 +189,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -226,7 +225,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -262,7 +261,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -298,7 +297,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -334,7 +333,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -370,7 +369,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -406,7 +405,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -442,7 +441,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -478,7 +477,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -514,7 +513,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -550,7 +549,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -586,7 +585,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -622,7 +621,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -658,7 +657,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -694,7 +693,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -730,7 +729,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -766,7 +765,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -802,7 +801,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -838,7 +837,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -874,7 +873,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -910,7 +909,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation.html b/tests/wpt/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation.html
index 29a163260de..3dfe1df7956 100644
--- a/tests/wpt/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation.html
+++ b/tests/wpt/tests/html/canvas/element/layers/2d.layer.globalCompositeOperation.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.globalCompositeOperation-expected.html">
 <title>Canvas test: 2d.layer.globalCompositeOperation</title>
-<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1>
+<h1>2d.layer.globalCompositeOperation</h1>
 <p class="desc">Checks that layers work with all globalCompositeOperation values.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(7, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 7">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -45,7 +44,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -79,7 +78,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -113,7 +112,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -147,7 +146,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -181,7 +180,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -215,7 +214,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -249,7 +248,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -283,7 +282,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -317,7 +316,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -351,7 +350,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -385,7 +384,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -419,7 +418,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -453,7 +452,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -487,7 +486,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -521,7 +520,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -555,7 +554,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -589,7 +588,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -623,7 +622,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -657,7 +656,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -691,7 +690,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -725,7 +724,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -759,7 +758,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -793,7 +792,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -827,7 +826,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -861,7 +860,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/manual/context-attributes/getContextAttributes.html b/tests/wpt/tests/html/canvas/element/manual/context-attributes/getContextAttributes.html
index 6963faa5385..3bf7187d5c6 100644
--- a/tests/wpt/tests/html/canvas/element/manual/context-attributes/getContextAttributes.html
+++ b/tests/wpt/tests/html/canvas/element/manual/context-attributes/getContextAttributes.html
@@ -8,7 +8,12 @@ var testScenarios = [
     // defaults
     {testDescription: "Test default context creation attributes",
         canvasContextAttributes: {},
-        expectedContextAttributes: {alpha: true, desynchronized: false, willReadFrequently: false, colorSpace: "srgb"}},
+        expectedContextAttributes: {
+            alpha: true,
+            desynchronized: false,
+            willReadFrequently: false,
+            colorSpace: "srgb",
+            colorType:"unorm8"}},
     // alpha
     {testDescription: "Test context creation attributes alpha: true",
         canvasContextAttributes: {alpha: true},
@@ -37,6 +42,13 @@ var testScenarios = [
     {testDescription: "Test context creation attributes willReadFrequently: false",
         canvasContextAttributes: {willReadFrequently: false},
         expectedContextAttributes: {willReadFrequently: false}},
+    // colorType
+    {testDescription: "Test context creation attributes colorType: unorm8",
+        canvasContextAttributes: {colorType: "unorm8"},
+        expectedContextAttributes: {colorType: "unorm8"}},
+    {testDescription: "Test context creation attributes colorType: float16",
+        canvasContextAttributes: {colorType: "float16"},
+        expectedContextAttributes: {colorType: "float16"}},
 ];
 
 function runTestScenario(canvas, testScenario) {
@@ -59,6 +71,10 @@ function runTestScenario(canvas, testScenario) {
             assert_equals(contextAttributes.willReadFrequently,
                 testScenario.expectedContextAttributes.willReadFrequently);
         }
+        if (testScenario.expectedContextAttributes.colorType !== undefined) {
+            assert_equals(contextAttributes.colorType,
+                testScenario.expectedContextAttributes.colorType);
+        }
     }, testScenario.testDescription);
 }
 
diff --git a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-align.tentative-expected.html b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-align.tentative-expected.html
index 967ae7e4636..c983823a3ed 100644
--- a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-align.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-align.tentative-expected.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-align.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-align.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-align.tentative</h1>
 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(3, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 3">
 <span>
   <div>ctx_align_left</div>
-  <canvas id="canvas0" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -32,7 +31,7 @@
 
 <span>
   <div>ctx_align_center</div>
-  <canvas id="canvas1" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -54,7 +53,7 @@
 
 <span>
   <div>ctx_align_right</div>
-  <canvas id="canvas2" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-align.tentative.html b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-align.tentative.html
index 159efb4fee4..08523af5e7e 100644
--- a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-align.tentative.html
+++ b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-align.tentative.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.text.measure.text-clusters-rendering-align.tentative-expected.html">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-align.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-align.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-align.tentative</h1>
 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(3, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 3">
 <span>
   <div>ctx_align_left</div>
-  <canvas id="canvas0" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -37,7 +36,7 @@
 
 <span>
   <div>ctx_align_center</div>
-  <canvas id="canvas1" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -63,7 +62,7 @@
 
 <span>
   <div>ctx_align_right</div>
-  <canvas id="canvas2" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html
index 2dffe90aadc..9e184f34de2 100644
--- a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-baseline.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-baseline.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-baseline.tentative</h1>
 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textBaseline from the context at the time the text was measured.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(4, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 4">
 <span>
   <div>ctx_baseline_top</div>
-  <canvas id="canvas0" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -29,7 +28,7 @@
 
 <span>
   <div>ctx_baseline_middle</div>
-  <canvas id="canvas1" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -48,7 +47,7 @@
 
 <span>
   <div>ctx_baseline_bottom</div>
-  <canvas id="canvas2" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -67,7 +66,7 @@
 
 <span>
   <div>ctx_baseline_alphabetic</div>
-  <canvas id="canvas3" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-baseline.tentative.html b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-baseline.tentative.html
index c20e076a351..ec65e3c2301 100644
--- a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-baseline.tentative.html
+++ b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-baseline.tentative.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-baseline.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-baseline.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-baseline.tentative</h1>
 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textBaseline from the context at the time the text was measured.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(4, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 4">
 <span>
   <div>ctx_baseline_top</div>
-  <canvas id="canvas0" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -37,7 +36,7 @@
 
 <span>
   <div>ctx_baseline_middle</div>
-  <canvas id="canvas1" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -63,7 +62,7 @@
 
 <span>
   <div>ctx_baseline_bottom</div>
-  <canvas id="canvas2" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -89,7 +88,7 @@
 
 <span>
   <div>ctx_baseline_alphabetic</div>
-  <canvas id="canvas3" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html
index 6d109c3ffcd..484aaf5f7c5 100644
--- a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</h1>
 <p class="desc">Test that fillTextCluster() renders using the drawing styles as they were when `ctx.measureText()` was called, regardless of any changes in the context since.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(2, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 2">
 <span>
   <div>letter_spacing</div>
-  <canvas id="canvas0" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -32,7 +31,7 @@
 
 <span>
   <div>word_spacing</div>
-  <canvas id="canvas1" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -54,7 +53,7 @@
 
 <span>
   <div>font_kerning</div>
-  <canvas id="canvas2" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -76,7 +75,7 @@
 
 <span>
   <div>font_variant_caps</div>
-  <canvas id="canvas3" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.html b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.html
index fac5f6f2b67..1eb9169dc10 100644
--- a/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.html
+++ b/tests/wpt/tests/html/canvas/element/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</h1>
 <p class="desc">Test that fillTextCluster() renders using the drawing styles as they were when `ctx.measureText()` was called, regardless of any changes in the context since.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(2, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 2">
 <span>
   <div>letter_spacing</div>
-  <canvas id="canvas0" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -38,7 +37,7 @@
 
 <span>
   <div>word_spacing</div>
-  <canvas id="canvas1" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -65,7 +64,7 @@
 
 <span>
   <div>font_kerning</div>
-  <canvas id="canvas2" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -92,7 +91,7 @@
 
 <span>
   <div>font_variant_caps</div>
-  <canvas id="canvas3" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.html b/tests/wpt/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.html
index d917f583bed..a8841066873 100644
--- a/tests/wpt/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.html
+++ b/tests/wpt/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.html
@@ -27,7 +27,7 @@ _addTest(function(canvas, ctx) {
   ctx.fillStyle = color_style;
   ctx.fillRect(0, 0, 10, 10);
 
-  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3", storageFormat: "uint8"}).data;
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3"}).data;
   _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
   assert_approx_equals(pixel[0], pixel_expected[0], 2);
   assert_approx_equals(pixel[1], pixel_expected[1], 2);
diff --git a/tests/wpt/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html b/tests/wpt/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html
index 48f7bd63ecc..8320a294851 100644
--- a/tests/wpt/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html
+++ b/tests/wpt/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html
@@ -26,7 +26,7 @@ _addTest(function(canvas, ctx) {
   ctx.fillStyle = color_style;
   ctx.fillRect(0, 0, 10, 10);
 
-  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data;
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb"}).data;
   _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
   assert_approx_equals(pixel[0], pixel_expected[0], 2);
   assert_approx_equals(pixel[1], pixel_expected[1], 2);
diff --git a/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.html b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.html
new file mode 100644
index 00000000000..1cc4808a737
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>OffscreenCanvas test: 2d.color.type.u8p3.to.f16srgb.to.u8p3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.color.type.u8p3.to.f16srgb.to.u8p3</h1>
+<p class="desc">test srgb float16 canvas storing 8-bit display-p3 data accurately</p>
+
+
+<script>
+var t = async_test("test srgb float16 canvas storing 8-bit display-p3 data accurately");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorType: "float16", colorSpace: "srgb"});
+
+  // Consider the color in Display P3:
+  //   (5,250,128)/255
+  // In sRGB this is:
+  //   (-0.4990661502955996, 0.9982902153915844, 0.43901323244980783)
+  // Quantized to float16, this is:
+  //   (0xB7FC, 0x3BFC, 0x3706)
+  //   (-0.49902344,         0.9980469,          0.43896484)
+  // Converted back to Display P3 this is:
+  //   (4.783888129523, 249.938708036787, 127.979725000698)/255
+  // Quantized to 8-bit, this is:
+  //   (5, 250, 128)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "display-p3"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"display-p3"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 5, kEpsilon);
+  assert_approx_equals(readback.data[1], 250, kEpsilon);
+  assert_approx_equals(readback.data[2], 128, kEpsilon);
+  t.done();
+
+});
+</script>
diff --git a/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.worker.js b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.worker.js
new file mode 100644
index 00000000000..7b8eb3d687f
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.f16srgb.to.u8p3.worker.js
@@ -0,0 +1,40 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.color.type.u8p3.to.f16srgb.to.u8p3
+// Description:test srgb float16 canvas storing 8-bit display-p3 data accurately
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("test srgb float16 canvas storing 8-bit display-p3 data accurately");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorType: "float16", colorSpace: "srgb"});
+
+  // Consider the color in Display P3:
+  //   (5,250,128)/255
+  // In sRGB this is:
+  //   (-0.4990661502955996, 0.9982902153915844, 0.43901323244980783)
+  // Quantized to float16, this is:
+  //   (0xB7FC, 0x3BFC, 0x3706)
+  //   (-0.49902344,         0.9980469,          0.43896484)
+  // Converted back to Display P3 this is:
+  //   (4.783888129523, 249.938708036787, 127.979725000698)/255
+  // Quantized to 8-bit, this is:
+  //   (5, 250, 128)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "display-p3"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"display-p3"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 5, kEpsilon);
+  assert_approx_equals(readback.data[1], 250, kEpsilon);
+  assert_approx_equals(readback.data[2], 128, kEpsilon);
+  t.done();
+});
+done();
diff --git a/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html
new file mode 100644
index 00000000000..1d573b34a19
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>OffscreenCanvas test: 2d.color.type.u8p3.to.u8srgb.to.u8p3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.color.type.u8p3.to.u8srgb.to.u8p3</h1>
+<p class="desc">test srgb unorm8 canvas storing 8-bit display-p3 data accurately</p>
+
+
+<script>
+var t = async_test("test srgb unorm8 canvas storing 8-bit display-p3 data accurately");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorType: "unorm8", colorSpace: "srgb"});
+
+  // Consider the color in Display P3:
+  //   (5,250,128)/255
+  // In sRGB this is:
+  //   (-0.4990661502955996, 0.9982902153915844, 0.43901323244980783)
+  // Quantized to 8-bit, this is:
+  //   (0, 255, 112)/255
+  // Converted back to Display P3 this is:
+  //   (116.892405498713, 251.242468747889, 129.109129531237)/255
+  // Quantized to 8-bit, this is:
+  //   (116, 251, 129)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "display-p3"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"display-p3"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 116, kEpsilon);
+  assert_approx_equals(readback.data[1], 251, kEpsilon);
+  assert_approx_equals(readback.data[2], 129, kEpsilon);
+  t.done();
+
+});
+</script>
diff --git a/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.worker.js b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.worker.js
new file mode 100644
index 00000000000..0d03eacf4b6
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8p3.to.u8srgb.to.u8p3.worker.js
@@ -0,0 +1,39 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.color.type.u8p3.to.u8srgb.to.u8p3
+// Description:test srgb unorm8 canvas storing 8-bit display-p3 data accurately
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("test srgb unorm8 canvas storing 8-bit display-p3 data accurately");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorType: "unorm8", colorSpace: "srgb"});
+
+  // Consider the color in Display P3:
+  //   (5,250,128)/255
+  // In sRGB this is:
+  //   (-0.4990661502955996, 0.9982902153915844, 0.43901323244980783)
+  // Quantized to 8-bit, this is:
+  //   (0, 255, 112)/255
+  // Converted back to Display P3 this is:
+  //   (116.892405498713, 251.242468747889, 129.109129531237)/255
+  // Quantized to 8-bit, this is:
+  //   (116, 251, 129)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "display-p3"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"display-p3"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 116, kEpsilon);
+  assert_approx_equals(readback.data[1], 251, kEpsilon);
+  assert_approx_equals(readback.data[2], 129, kEpsilon);
+  t.done();
+});
+done();
diff --git a/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.html b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.html
new file mode 100644
index 00000000000..4120dafdaf9
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>OffscreenCanvas test: 2d.color.type.u8srgb.to.f16p3.to.u8srgb</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.color.type.u8srgb.to.f16p3.to.u8srgb</h1>
+<p class="desc">test display-p3 float16 canvas storing 8-bit srgb data accurately</p>
+
+
+<script>
+var t = async_test("test display-p3 float16 canvas storing 8-bit srgb data accurately");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorType: "float16", colorSpace: "display-p3"});
+
+  // Consider the color in sRGB:
+  //   (5,250,128)/255
+  // In Display P3 this is:
+  //   (0.450400386839, 0.9659537931, 0.55239459823)
+  // Quantized to float16, that should evaluate to:
+  //   (0x3735, 0x3BBA, 0x386B)
+  //   (0.450439453125, 0.9658203125, 0.55224609375)
+  // Converted back to sRGB this is:
+  //   (5.342920953809, 249.965067892273, 127.959124250169)/255
+  // Quantized to 8-bit, this is:
+  //   (5, 250, 128)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "srgb"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"srgb"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 5, kEpsilon);
+  assert_approx_equals(readback.data[1], 250, kEpsilon);
+  assert_approx_equals(readback.data[2], 128, kEpsilon);
+  t.done();
+
+});
+</script>
diff --git a/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.worker.js b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.worker.js
new file mode 100644
index 00000000000..85f48acf251
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.f16p3.to.u8srgb.worker.js
@@ -0,0 +1,40 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.color.type.u8srgb.to.f16p3.to.u8srgb
+// Description:test display-p3 float16 canvas storing 8-bit srgb data accurately
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("test display-p3 float16 canvas storing 8-bit srgb data accurately");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorType: "float16", colorSpace: "display-p3"});
+
+  // Consider the color in sRGB:
+  //   (5,250,128)/255
+  // In Display P3 this is:
+  //   (0.450400386839, 0.9659537931, 0.55239459823)
+  // Quantized to float16, that should evaluate to:
+  //   (0x3735, 0x3BBA, 0x386B)
+  //   (0.450439453125, 0.9658203125, 0.55224609375)
+  // Converted back to sRGB this is:
+  //   (5.342920953809, 249.965067892273, 127.959124250169)/255
+  // Quantized to 8-bit, this is:
+  //   (5, 250, 128)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "srgb"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"srgb"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 5, kEpsilon);
+  assert_approx_equals(readback.data[1], 250, kEpsilon);
+  assert_approx_equals(readback.data[2], 128, kEpsilon);
+  t.done();
+});
+done();
diff --git a/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html
new file mode 100644
index 00000000000..1edbc9293f4
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>OffscreenCanvas test: 2d.color.type.u8srgb.to.u8p3.to.u8srgb</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.color.type.u8srgb.to.u8p3.to.u8srgb</h1>
+<p class="desc">test display-p3 unorm8 canvas not storing 8-bit srgb data accurately</p>
+
+
+<script>
+var t = async_test("test display-p3 unorm8 canvas not storing 8-bit srgb data accurately");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorType: "unorm8", colorSpace: "display-p3"});
+
+  // Consider the color in sRGB:
+  //   (5,250,128)/255
+  // In Display P3 this is:
+  //   (0.4504003868394956, 0.9659537930632748, 0.5523945982276097)
+  // Quantized to 8-bit, this is:
+  //   (115, 246, 141)/255
+  // Converted back to sRGB this is:
+  //   (8.909609662725, 249.672568247041, 128.228541784731)/255
+  // Quantized to 8-bit, this is:
+  //   (9, 250, 128)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "srgb"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"srgb"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 9, kEpsilon);
+  assert_approx_equals(readback.data[1], 250, kEpsilon);
+  assert_approx_equals(readback.data[2], 128, kEpsilon);
+  t.done();
+
+});
+</script>
diff --git a/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.worker.js b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.worker.js
new file mode 100644
index 00000000000..f4d0ebacbcc
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/offscreen/color-type/color-type/2d.color.type.u8srgb.to.u8p3.to.u8srgb.worker.js
@@ -0,0 +1,39 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.color.type.u8srgb.to.u8p3.to.u8srgb
+// Description:test display-p3 unorm8 canvas not storing 8-bit srgb data accurately
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("test display-p3 unorm8 canvas not storing 8-bit srgb data accurately");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d', {colorType: "unorm8", colorSpace: "display-p3"});
+
+  // Consider the color in sRGB:
+  //   (5,250,128)/255
+  // In Display P3 this is:
+  //   (0.4504003868394956, 0.9659537930632748, 0.5523945982276097)
+  // Quantized to 8-bit, this is:
+  //   (115, 246, 141)/255
+  // Converted back to sRGB this is:
+  //   (8.909609662725, 249.672568247041, 128.228541784731)/255
+  // Quantized to 8-bit, this is:
+  //   (9, 250, 128)
+  var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                            1, 1, {colorSpace: "srgb"});
+  ctx.putImageData(input, 0, 0);
+  var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"srgb"});
+  const kEpsilon = 2;
+  assert_approx_equals(readback.data[0], 9, kEpsilon);
+  assert_approx_equals(readback.data[1], 250, kEpsilon);
+  assert_approx_equals(readback.data[2], 128, kEpsilon);
+  t.done();
+});
+done();
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage-expected.html
index eea78248a83..6f7bf8e8fe7 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.drawImage</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.no_shadow.drawImage</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage.html
index 5a90053e8f6..33cdebbaf9a 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.no_shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.drawImage</h1>
+<h1>2d.composite.grid.filter.no_shadow.drawImage</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -48,7 +47,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -84,7 +83,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -120,7 +119,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -156,7 +155,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -192,7 +191,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -228,7 +227,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -264,7 +263,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -300,7 +299,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -336,7 +335,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -372,7 +371,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -408,7 +407,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -444,7 +443,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -480,7 +479,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -516,7 +515,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -552,7 +551,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -588,7 +587,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -624,7 +623,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -660,7 +659,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -696,7 +695,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -732,7 +731,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -768,7 +767,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -804,7 +803,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -840,7 +839,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -876,7 +875,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -912,7 +911,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage.w.html
index d010912cd06..1dd45863376 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.drawImage.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.no_shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.drawImage</h1>
+<h1>2d.composite.grid.filter.no_shadow.drawImage</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -64,7 +63,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -114,7 +113,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -164,7 +163,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -214,7 +213,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -264,7 +263,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -314,7 +313,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -364,7 +363,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -414,7 +413,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -464,7 +463,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -514,7 +513,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -564,7 +563,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -614,7 +613,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -664,7 +663,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -714,7 +713,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -764,7 +763,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -814,7 +813,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -864,7 +863,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -914,7 +913,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -964,7 +963,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -1014,7 +1013,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1064,7 +1063,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1114,7 +1113,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1164,7 +1163,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1214,7 +1213,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1264,7 +1263,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect-expected.html
index 08ed3566fd1..ec67b35c959 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.fillRect</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.no_shadow.fillRect</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect.html
index 6bad129784f..b0e8021079e 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.no_shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.fillRect</h1>
+<h1>2d.composite.grid.filter.no_shadow.fillRect</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -45,7 +44,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -78,7 +77,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -111,7 +110,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -144,7 +143,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -177,7 +176,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -210,7 +209,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -243,7 +242,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -276,7 +275,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -309,7 +308,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -342,7 +341,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -375,7 +374,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -408,7 +407,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -441,7 +440,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -474,7 +473,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -507,7 +506,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -540,7 +539,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -573,7 +572,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -606,7 +605,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -639,7 +638,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -672,7 +671,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -705,7 +704,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -738,7 +737,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -771,7 +770,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -804,7 +803,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -837,7 +836,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect.w.html
index 0c93086b54c..ad95af2f11a 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.fillRect.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.no_shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.fillRect</h1>
+<h1>2d.composite.grid.filter.no_shadow.fillRect</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -61,7 +60,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -108,7 +107,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -155,7 +154,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -202,7 +201,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -249,7 +248,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -296,7 +295,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -343,7 +342,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -390,7 +389,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -437,7 +436,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -484,7 +483,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -531,7 +530,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -578,7 +577,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -625,7 +624,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -672,7 +671,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -719,7 +718,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -766,7 +765,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -813,7 +812,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -860,7 +859,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -907,7 +906,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -954,7 +953,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1001,7 +1000,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1048,7 +1047,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1095,7 +1094,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1142,7 +1141,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1189,7 +1188,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern-expected.html
index 22c84f42e89..420cab82fbe 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.pattern</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.no_shadow.pattern</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern.html
index 47cd363f06e..cb5578b3330 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.no_shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.pattern</h1>
+<h1>2d.composite.grid.filter.no_shadow.pattern</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -49,7 +48,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -86,7 +85,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -123,7 +122,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -160,7 +159,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -197,7 +196,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -234,7 +233,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -271,7 +270,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -308,7 +307,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -345,7 +344,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -382,7 +381,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -419,7 +418,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -456,7 +455,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -493,7 +492,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -530,7 +529,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -567,7 +566,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -604,7 +603,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -641,7 +640,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -678,7 +677,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -715,7 +714,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -752,7 +751,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -789,7 +788,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -826,7 +825,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -863,7 +862,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -900,7 +899,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -937,7 +936,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern.w.html
index 7f07a2c7645..cba6b24442c 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.no_shadow.pattern.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.no_shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.no_shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.pattern</h1>
+<h1>2d.composite.grid.filter.no_shadow.pattern</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -65,7 +64,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -116,7 +115,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -167,7 +166,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -218,7 +217,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -269,7 +268,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -320,7 +319,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -371,7 +370,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -422,7 +421,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -473,7 +472,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -524,7 +523,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -575,7 +574,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -626,7 +625,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -677,7 +676,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -728,7 +727,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -779,7 +778,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -830,7 +829,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -881,7 +880,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -932,7 +931,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -983,7 +982,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -1034,7 +1033,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1085,7 +1084,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1136,7 +1135,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1187,7 +1186,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1238,7 +1237,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1289,7 +1288,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage-expected.html
index 2072348f904..1976dfc4663 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.drawImage</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.shadow.drawImage</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage.html
index fc8f2e20162..b7366604f1e 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.drawImage</h1>
+<h1>2d.composite.grid.filter.shadow.drawImage</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -50,7 +49,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -88,7 +87,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -126,7 +125,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -164,7 +163,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -202,7 +201,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -240,7 +239,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -278,7 +277,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -316,7 +315,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -354,7 +353,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -392,7 +391,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -430,7 +429,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -468,7 +467,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -506,7 +505,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -544,7 +543,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -582,7 +581,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -620,7 +619,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -658,7 +657,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -696,7 +695,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -734,7 +733,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -772,7 +771,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -810,7 +809,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -848,7 +847,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -886,7 +885,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -924,7 +923,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -962,7 +961,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage.w.html
index fb417b9c576..1ab054dc492 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.drawImage.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.drawImage</h1>
+<h1>2d.composite.grid.filter.shadow.drawImage</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -66,7 +65,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -118,7 +117,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -170,7 +169,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -222,7 +221,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -274,7 +273,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -326,7 +325,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -378,7 +377,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -430,7 +429,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -482,7 +481,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -534,7 +533,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -586,7 +585,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -638,7 +637,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -690,7 +689,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -742,7 +741,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -794,7 +793,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -846,7 +845,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -898,7 +897,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -950,7 +949,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -1002,7 +1001,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -1054,7 +1053,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1106,7 +1105,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1158,7 +1157,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1210,7 +1209,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1262,7 +1261,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1314,7 +1313,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect-expected.html
index 1e119bcbde5..72cd6c78da4 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.fillRect</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.shadow.fillRect</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect.html
index 995bc9d65e6..b3d10c8fdd3 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.fillRect</h1>
+<h1>2d.composite.grid.filter.shadow.fillRect</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -47,7 +46,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -82,7 +81,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -117,7 +116,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -152,7 +151,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -187,7 +186,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -222,7 +221,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -257,7 +256,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -292,7 +291,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -327,7 +326,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -362,7 +361,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -397,7 +396,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -432,7 +431,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -467,7 +466,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -502,7 +501,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -537,7 +536,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -572,7 +571,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -607,7 +606,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -642,7 +641,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -677,7 +676,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -712,7 +711,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -747,7 +746,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -782,7 +781,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -817,7 +816,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -852,7 +851,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -887,7 +886,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect.w.html
index 78c509f40f3..cad533fb31f 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.fillRect.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.fillRect</h1>
+<h1>2d.composite.grid.filter.shadow.fillRect</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -63,7 +62,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -112,7 +111,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -161,7 +160,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -210,7 +209,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -259,7 +258,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -308,7 +307,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -357,7 +356,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -406,7 +405,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -455,7 +454,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -504,7 +503,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -553,7 +552,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -602,7 +601,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -651,7 +650,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -700,7 +699,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -749,7 +748,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -798,7 +797,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -847,7 +846,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -896,7 +895,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -945,7 +944,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -994,7 +993,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1043,7 +1042,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1092,7 +1091,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1141,7 +1140,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1190,7 +1189,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1239,7 +1238,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern-expected.html
index f45fe82c302..b7a4f59f84b 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.filter.shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.pattern</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.filter.shadow.pattern</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern.html
index f1bc4c64be7..ce9ec1859db 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.pattern</h1>
+<h1>2d.composite.grid.filter.shadow.pattern</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -51,7 +50,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -90,7 +89,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -129,7 +128,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -168,7 +167,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -207,7 +206,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -246,7 +245,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -285,7 +284,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -324,7 +323,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -363,7 +362,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -402,7 +401,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -441,7 +440,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -480,7 +479,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -519,7 +518,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -558,7 +557,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -597,7 +596,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -636,7 +635,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -675,7 +674,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -714,7 +713,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -753,7 +752,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -792,7 +791,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -831,7 +830,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -870,7 +869,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -909,7 +908,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -948,7 +947,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -987,7 +986,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern.w.html
index de144bfaa64..6ea16577b03 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.filter.shadow.pattern.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.filter.shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.filter.shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.filter.shadow.pattern</h1>
+<h1>2d.composite.grid.filter.shadow.pattern</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -67,7 +66,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -120,7 +119,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -173,7 +172,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -226,7 +225,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -279,7 +278,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -332,7 +331,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -385,7 +384,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -438,7 +437,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -491,7 +490,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -544,7 +543,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -597,7 +596,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -650,7 +649,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -703,7 +702,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -756,7 +755,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -809,7 +808,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -862,7 +861,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -915,7 +914,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -968,7 +967,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -1021,7 +1020,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -1074,7 +1073,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1127,7 +1126,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1180,7 +1179,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1233,7 +1232,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1286,7 +1285,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1339,7 +1338,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage-expected.html
index 923d8360a9d..36578e14d4d 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.drawImage</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.no_shadow.drawImage</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.no_shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.html
index 5aac6d6b212..3f3e9aa20f9 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.no_shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.drawImage</h1>
+<h1>2d.composite.grid.no_filter.no_shadow.drawImage</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -48,7 +47,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -84,7 +83,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -120,7 +119,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -156,7 +155,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -192,7 +191,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -228,7 +227,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -264,7 +263,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -300,7 +299,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -336,7 +335,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -372,7 +371,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -408,7 +407,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -444,7 +443,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -480,7 +479,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -516,7 +515,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -552,7 +551,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -588,7 +587,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -624,7 +623,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -660,7 +659,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -696,7 +695,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -732,7 +731,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -768,7 +767,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -804,7 +803,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -840,7 +839,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -876,7 +875,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -912,7 +911,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.w.html
index 67fdbabce2e..a71fa1898d8 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.drawImage.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.no_shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.drawImage</h1>
+<h1>2d.composite.grid.no_filter.no_shadow.drawImage</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -64,7 +63,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -114,7 +113,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -164,7 +163,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -214,7 +213,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -264,7 +263,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -314,7 +313,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -364,7 +363,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -414,7 +413,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -464,7 +463,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -514,7 +513,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -564,7 +563,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -614,7 +613,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -664,7 +663,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -714,7 +713,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -764,7 +763,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -814,7 +813,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -864,7 +863,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -914,7 +913,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -964,7 +963,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -1014,7 +1013,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1064,7 +1063,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1114,7 +1113,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1164,7 +1163,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1214,7 +1213,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1264,7 +1263,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect-expected.html
index c809e56cac3..ae85679c221 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.fillRect</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.no_shadow.fillRect</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.no_shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.html
index c1001d77815..5d4cd718736 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.no_shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.fillRect</h1>
+<h1>2d.composite.grid.no_filter.no_shadow.fillRect</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -45,7 +44,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -78,7 +77,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -111,7 +110,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -144,7 +143,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -177,7 +176,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -210,7 +209,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -243,7 +242,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -276,7 +275,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -309,7 +308,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -342,7 +341,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -375,7 +374,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -408,7 +407,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -441,7 +440,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -474,7 +473,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -507,7 +506,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -540,7 +539,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -573,7 +572,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -606,7 +605,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -639,7 +638,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -672,7 +671,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -705,7 +704,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -738,7 +737,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -771,7 +770,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -804,7 +803,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -837,7 +836,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.w.html
index fcc39718c39..b65d0781fea 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.fillRect.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.no_shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.fillRect</h1>
+<h1>2d.composite.grid.no_filter.no_shadow.fillRect</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -61,7 +60,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -108,7 +107,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -155,7 +154,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -202,7 +201,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -249,7 +248,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -296,7 +295,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -343,7 +342,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -390,7 +389,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -437,7 +436,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -484,7 +483,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -531,7 +530,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -578,7 +577,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -625,7 +624,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -672,7 +671,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -719,7 +718,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -766,7 +765,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -813,7 +812,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -860,7 +859,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -907,7 +906,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -954,7 +953,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1001,7 +1000,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1048,7 +1047,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1095,7 +1094,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1142,7 +1141,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1189,7 +1188,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern-expected.html
index f052442a637..5f7f12c9c8a 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.pattern</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.no_shadow.pattern</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.no_shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern.html
index b977eb0bec3..9fdc1046804 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.no_shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.pattern</h1>
+<h1>2d.composite.grid.no_filter.no_shadow.pattern</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -49,7 +48,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -86,7 +85,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -123,7 +122,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -160,7 +159,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -197,7 +196,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -234,7 +233,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -271,7 +270,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -308,7 +307,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -345,7 +344,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -382,7 +381,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -419,7 +418,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -456,7 +455,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -493,7 +492,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -530,7 +529,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -567,7 +566,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -604,7 +603,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -641,7 +640,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -678,7 +677,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -715,7 +714,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -752,7 +751,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -789,7 +788,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -826,7 +825,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -863,7 +862,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -900,7 +899,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -937,7 +936,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern.w.html
index 9e9eb022915..c3b242623f9 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.no_shadow.pattern.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.no_shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.no_shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.no_shadow.pattern</h1>
+<h1>2d.composite.grid.no_filter.no_shadow.pattern</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -65,7 +64,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -116,7 +115,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -167,7 +166,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -218,7 +217,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -269,7 +268,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -320,7 +319,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -371,7 +370,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -422,7 +421,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -473,7 +472,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -524,7 +523,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -575,7 +574,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -626,7 +625,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -677,7 +676,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -728,7 +727,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -779,7 +778,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -830,7 +829,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -881,7 +880,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -932,7 +931,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -983,7 +982,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -1034,7 +1033,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1085,7 +1084,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1136,7 +1135,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1187,7 +1186,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1238,7 +1237,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1289,7 +1288,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage-expected.html
index ad07c35d310..19439211dde 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.drawImage</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.shadow.drawImage</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.shadow.drawImage.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage.html
index 382f3abeb19..edbcce10449 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.drawImage</h1>
+<h1>2d.composite.grid.no_filter.shadow.drawImage</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -50,7 +49,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -88,7 +87,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -126,7 +125,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -164,7 +163,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -202,7 +201,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -240,7 +239,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -278,7 +277,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -316,7 +315,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -354,7 +353,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -392,7 +391,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -430,7 +429,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -468,7 +467,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -506,7 +505,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -544,7 +543,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -582,7 +581,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -620,7 +619,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -658,7 +657,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -696,7 +695,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -734,7 +733,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -772,7 +771,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -810,7 +809,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -848,7 +847,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -886,7 +885,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -924,7 +923,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -962,7 +961,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage.w.html
index 56db72864d3..65563217ebf 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.drawImage.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.shadow.drawImage-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.drawImage</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.drawImage</h1>
+<h1>2d.composite.grid.no_filter.shadow.drawImage</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -66,7 +65,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -118,7 +117,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -170,7 +169,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -222,7 +221,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -274,7 +273,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -326,7 +325,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -378,7 +377,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -430,7 +429,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -482,7 +481,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -534,7 +533,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -586,7 +585,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -638,7 +637,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -690,7 +689,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -742,7 +741,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -794,7 +793,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -846,7 +845,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -898,7 +897,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -950,7 +949,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -1002,7 +1001,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -1054,7 +1053,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1106,7 +1105,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1158,7 +1157,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1210,7 +1209,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1262,7 +1261,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1314,7 +1313,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect-expected.html
index e16a5fcf458..42266582be2 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.fillRect</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.shadow.fillRect</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.shadow.fillRect.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect.html
index bb58344fcbd..faac7dcaf64 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.fillRect</h1>
+<h1>2d.composite.grid.no_filter.shadow.fillRect</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -47,7 +46,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -82,7 +81,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -117,7 +116,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -152,7 +151,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -187,7 +186,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -222,7 +221,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -257,7 +256,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -292,7 +291,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -327,7 +326,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -362,7 +361,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -397,7 +396,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -432,7 +431,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -467,7 +466,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -502,7 +501,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -537,7 +536,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -572,7 +571,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -607,7 +606,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -642,7 +641,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -677,7 +676,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -712,7 +711,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -747,7 +746,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -782,7 +781,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -817,7 +816,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -852,7 +851,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -887,7 +886,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect.w.html
index 3586c806cd4..68170021c0b 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.fillRect.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.shadow.fillRect-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.fillRect</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.fillRect</h1>
+<h1>2d.composite.grid.no_filter.shadow.fillRect</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -63,7 +62,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -112,7 +111,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -161,7 +160,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -210,7 +209,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -259,7 +258,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -308,7 +307,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -357,7 +356,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -406,7 +405,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -455,7 +454,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -504,7 +503,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -553,7 +552,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -602,7 +601,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -651,7 +650,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -700,7 +699,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -749,7 +748,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -798,7 +797,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -847,7 +846,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -896,7 +895,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -945,7 +944,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -994,7 +993,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1043,7 +1042,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1092,7 +1091,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1141,7 +1140,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1190,7 +1189,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1239,7 +1238,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern-expected.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern-expected.html
index 01e1d4d7b26..8d6d2492b9b 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern-expected.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.pattern</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.composite.grid.no_filter.shadow.pattern</h1>
 <p></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px 0px;
               object-fit: none;">
@@ -20,8 +19,8 @@
 <span>
   <div>source-in</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px 0px;
               object-fit: none;">
@@ -30,8 +29,8 @@
 <span>
   <div>source-out</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px 0px;
               object-fit: none;">
@@ -40,8 +39,8 @@
 <span>
   <div>source-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px 0px;
               object-fit: none;">
@@ -50,8 +49,8 @@
 <span>
   <div>destination-over</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px 0px;
               object-fit: none;">
@@ -60,8 +59,8 @@
 <span>
   <div>destination-in</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px 0px;
               object-fit: none;">
@@ -70,8 +69,8 @@
 <span>
   <div>destination-out</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -60px;
               object-fit: none;">
@@ -80,8 +79,8 @@
 <span>
   <div>destination-atop</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -60px;
               object-fit: none;">
@@ -90,8 +89,8 @@
 <span>
   <div>lighter</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -60px;
               object-fit: none;">
@@ -100,8 +99,8 @@
 <span>
   <div>copy</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -60px;
               object-fit: none;">
@@ -110,8 +109,8 @@
 <span>
   <div>xor</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -60px;
               object-fit: none;">
@@ -120,8 +119,8 @@
 <span>
   <div>multiply</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -60px;
               object-fit: none;">
@@ -130,8 +129,8 @@
 <span>
   <div>screen</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -120px;
               object-fit: none;">
@@ -140,8 +139,8 @@
 <span>
   <div>overlay</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -120px;
               object-fit: none;">
@@ -150,8 +149,8 @@
 <span>
   <div>darken</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -120px;
               object-fit: none;">
@@ -160,8 +159,8 @@
 <span>
   <div>lighten</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -120px;
               object-fit: none;">
@@ -170,8 +169,8 @@
 <span>
   <div>color-dodge</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -120px;
               object-fit: none;">
@@ -180,8 +179,8 @@
 <span>
   <div>color-burn</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -120px;
               object-fit: none;">
@@ -190,8 +189,8 @@
 <span>
   <div>hard-light</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -180px;
               object-fit: none;">
@@ -200,8 +199,8 @@
 <span>
   <div>soft-light</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -180px;
               object-fit: none;">
@@ -210,8 +209,8 @@
 <span>
   <div>difference</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -160px -180px;
               object-fit: none;">
@@ -220,8 +219,8 @@
 <span>
   <div>exclusion</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -240px -180px;
               object-fit: none;">
@@ -230,8 +229,8 @@
 <span>
   <div>hue</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -320px -180px;
               object-fit: none;">
@@ -240,8 +239,8 @@
 <span>
   <div>saturation</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -400px -180px;
               object-fit: none;">
@@ -250,8 +249,8 @@
 <span>
   <div>color</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: 0px -240px;
               object-fit: none;">
@@ -260,8 +259,8 @@
 <span>
   <div>luminosity</div>
   <img src="2d.composite.grid.no_filter.shadow.pattern.png"
-       style="outline: 1px solid;
-              width: 80px;
+       class="grid-cell-content"
+       style="width: 80px;
               height: 60px;
               object-position: -80px -240px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern.html
index 9703ea138d0..f92d1b8ac7a 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.pattern</h1>
+<h1>2d.composite.grid.no_filter.shadow.pattern</h1>
 <p class="desc"></p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -51,7 +50,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -90,7 +89,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -129,7 +128,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -168,7 +167,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -207,7 +206,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -246,7 +245,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -285,7 +284,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -324,7 +323,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -363,7 +362,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -402,7 +401,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -441,7 +440,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -480,7 +479,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -519,7 +518,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -558,7 +557,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -597,7 +596,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -636,7 +635,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -675,7 +674,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -714,7 +713,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -753,7 +752,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -792,7 +791,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -831,7 +830,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -870,7 +869,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -909,7 +908,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -948,7 +947,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -987,7 +986,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern.w.html b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern.w.html
index 318d2b971e4..898b5ff601e 100644
--- a/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/compositing/2d.composite.grid.no_filter.shadow.pattern.w.html
@@ -2,19 +2,18 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.composite.grid.no_filter.shadow.pattern-expected.html">
 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-25392">
 <title>Canvas test: 2d.composite.grid.no_filter.shadow.pattern</title>
-<h1 style="font-size: 20px;">2d.composite.grid.no_filter.shadow.pattern</h1>
+<h1>2d.composite.grid.no_filter.shadow.pattern</h1>
 <p class="desc"></p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(6, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 6">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -67,7 +66,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -120,7 +119,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -173,7 +172,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -226,7 +225,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -279,7 +278,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -332,7 +331,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -385,7 +384,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -438,7 +437,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -491,7 +490,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -544,7 +543,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -597,7 +596,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -650,7 +649,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -703,7 +702,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -756,7 +755,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -809,7 +808,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -862,7 +861,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -915,7 +914,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -968,7 +967,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -1021,7 +1020,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -1074,7 +1073,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1127,7 +1126,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1180,7 +1179,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1233,7 +1232,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1286,7 +1285,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1339,7 +1338,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="80" height="60" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="80" height="60">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html
index 9c85dfec907..6e9ebb5b2e1 100644
--- a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html
@@ -2,15 +2,15 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title>
-<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
 <p class="desc">Test CanvasFilter() with gaussianBlur.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(5, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 5">
 <span>
   <div>x-only</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -25,7 +25,8 @@
 
 <span>
   <div>mostly-x</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -40,7 +41,8 @@
 
 <span>
   <div>isotropic</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -55,7 +57,8 @@
 
 <span>
   <div>mostly-y</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -70,7 +73,8 @@
 
 <span>
   <div>y-only</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
diff --git a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
index 204fa615d4e..809f8f0fa6c 100644
--- a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
+++ b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html">
 <title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title>
-<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
 <p class="desc">Test CanvasFilter() with gaussianBlur.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(5, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 5">
 <span>
   <div>x-only</div>
-  <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -33,7 +32,7 @@
 
 <span>
   <div>mostly-x</div>
-  <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -55,7 +54,7 @@
 
 <span>
   <div>isotropic</div>
-  <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -77,7 +76,7 @@
 
 <span>
   <div>mostly-y</div>
-  <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -99,7 +98,7 @@
 
 <span>
   <div>y-only</div>
-  <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.w.html b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.w.html
index 8545306c0c6..205fd8df30f 100644
--- a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.w.html
@@ -2,18 +2,17 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative-expected.html">
 <title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative</title>
-<h1 style="font-size: 20px;">2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative</h1>
 <p class="desc">Test CanvasFilter() with gaussianBlur.</p>
 <script>pending_tests = 5;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(5, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 5">
 <span>
   <div>x-only</div>
-  <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -49,7 +48,7 @@
 
 <span>
   <div>mostly-x</div>
-  <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -85,7 +84,7 @@
 
 <span>
   <div>isotropic</div>
-  <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -121,7 +120,7 @@
 
 <span>
   <div>mostly-y</div>
-  <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -157,7 +156,7 @@
 
 <span>
   <div>y-only</div>
-  <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative-expected.html b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative-expected.html
index f02f08d5f83..88d38a8c0c8 100644
--- a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative-expected.html
@@ -2,15 +2,15 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <title>Canvas test: 2d.filter.layers.gaussianBlur.tentative</title>
-<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur.tentative</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>2d.filter.layers.gaussianBlur.tentative</h1>
 <p class="desc">Test CanvasFilter() with gaussianBlur.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(5, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 5">
 <span>
   <div>x-only</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -25,7 +25,8 @@
 
 <span>
   <div>mostly-x</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -40,7 +41,8 @@
 
 <span>
   <div>isotropic</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -55,7 +57,8 @@
 
 <span>
   <div>mostly-y</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
@@ -70,7 +73,8 @@
 
 <span>
   <div>y-only</div>
-  <div style="width: 100px; height: 100px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: 100px; height: 100px;">
     <svg xmlns="http://www.w3.org/2000/svg"
          width="100" height="100"
          color-interpolation-filters="sRGB">
diff --git a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.html b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.html
index f4bbfd8bf2c..fe5df35cccb 100644
--- a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.html
+++ b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.filter.layers.gaussianBlur.tentative-expected.html">
 <title>Canvas test: 2d.filter.layers.gaussianBlur.tentative</title>
-<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur.tentative</h1>
+<h1>2d.filter.layers.gaussianBlur.tentative</h1>
 <p class="desc">Test CanvasFilter() with gaussianBlur.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(5, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 5">
 <span>
   <div>x-only</div>
-  <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -34,7 +33,7 @@
 
 <span>
   <div>mostly-x</div>
-  <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -57,7 +56,7 @@
 
 <span>
   <div>isotropic</div>
-  <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -80,7 +79,7 @@
 
 <span>
   <div>mostly-y</div>
-  <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -103,7 +102,7 @@
 
 <span>
   <div>y-only</div>
-  <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.w.html b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.w.html
index ffbed3f53b7..e76401dc037 100644
--- a/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/filters/2d.filter.layers.gaussianBlur.tentative.w.html
@@ -2,18 +2,17 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.filter.layers.gaussianBlur.tentative-expected.html">
 <title>Canvas test: 2d.filter.layers.gaussianBlur.tentative</title>
-<h1 style="font-size: 20px;">2d.filter.layers.gaussianBlur.tentative</h1>
+<h1>2d.filter.layers.gaussianBlur.tentative</h1>
 <p class="desc">Test CanvasFilter() with gaussianBlur.</p>
 <script>pending_tests = 5;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(5, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 5">
 <span>
   <div>x-only</div>
-  <canvas id="canvas0" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -50,7 +49,7 @@
 
 <span>
   <div>mostly-x</div>
-  <canvas id="canvas1" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -87,7 +86,7 @@
 
 <span>
   <div>isotropic</div>
-  <canvas id="canvas2" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -124,7 +123,7 @@
 
 <span>
   <div>mostly-y</div>
-  <canvas id="canvas3" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -161,7 +160,7 @@
 
 <span>
   <div>y-only</div>
-  <canvas id="canvas4" width="100" height="100" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="100" height="100">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform-expected.html
index 0472b8f012e..1413ae16143 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.ctx-filter.no-transform</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.ctx-filter.no-transform</h1>
+<h1>2d.layer.global-states.ctx-filter.no-transform</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -46,7 +45,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -80,7 +79,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -114,7 +113,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -148,7 +147,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -182,7 +181,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -216,7 +215,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -250,7 +249,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -284,7 +283,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -321,7 +320,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -358,7 +357,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -395,7 +394,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -432,7 +431,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -469,7 +468,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -506,7 +505,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -543,7 +542,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform.html
index 6d3f95cc730..889ed5f8532 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.ctx-filter.no-transform-expected.html">
 <title>Canvas test: 2d.layer.global-states.ctx-filter.no-transform</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.ctx-filter.no-transform</h1>
+<h1>2d.layer.global-states.ctx-filter.no-transform</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -53,7 +52,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -93,7 +92,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -133,7 +132,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -173,7 +172,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -213,7 +212,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -253,7 +252,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -293,7 +292,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -333,7 +332,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -376,7 +375,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -419,7 +418,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -462,7 +461,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -505,7 +504,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -548,7 +547,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -591,7 +590,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -634,7 +633,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform.w.html
index d20c6332618..86aba29eaaa 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.no-transform.w.html
@@ -2,20 +2,19 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.ctx-filter.no-transform-expected.html">
 <title>Canvas test: 2d.layer.global-states.ctx-filter.no-transform</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.ctx-filter.no-transform</h1>
+<h1>2d.layer.global-states.ctx-filter.no-transform</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 <script>pending_tests = 16;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -69,7 +68,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -123,7 +122,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -177,7 +176,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -231,7 +230,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -285,7 +284,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -339,7 +338,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -393,7 +392,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -447,7 +446,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -504,7 +503,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -561,7 +560,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -618,7 +617,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -675,7 +674,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -732,7 +731,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -789,7 +788,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -846,7 +845,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation-expected.html
index 3290077de1e..4ea9b7bbc29 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.ctx-filter.rotation</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.ctx-filter.rotation</h1>
+<h1>2d.layer.global-states.ctx-filter.rotation</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -48,7 +47,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -84,7 +83,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -120,7 +119,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -156,7 +155,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -192,7 +191,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -228,7 +227,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -264,7 +263,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -300,7 +299,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -339,7 +338,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -378,7 +377,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -417,7 +416,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -456,7 +455,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -495,7 +494,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -534,7 +533,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -573,7 +572,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation.html
index f974aaf6969..7493ffd76da 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.ctx-filter.rotation-expected.html">
 <title>Canvas test: 2d.layer.global-states.ctx-filter.rotation</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.ctx-filter.rotation</h1>
+<h1>2d.layer.global-states.ctx-filter.rotation</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -55,7 +54,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -97,7 +96,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -139,7 +138,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -181,7 +180,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -223,7 +222,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -265,7 +264,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -307,7 +306,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -349,7 +348,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -394,7 +393,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -439,7 +438,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -484,7 +483,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -529,7 +528,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -574,7 +573,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -619,7 +618,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -664,7 +663,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation.w.html
index 93e88ea0076..9d56f233f04 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.ctx-filter.rotation.w.html
@@ -2,20 +2,19 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.ctx-filter.rotation-expected.html">
 <title>Canvas test: 2d.layer.global-states.ctx-filter.rotation</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.ctx-filter.rotation</h1>
+<h1>2d.layer.global-states.ctx-filter.rotation</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 <script>pending_tests = 16;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -71,7 +70,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -127,7 +126,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -183,7 +182,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -239,7 +238,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -295,7 +294,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -351,7 +350,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -407,7 +406,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -463,7 +462,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -522,7 +521,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -581,7 +580,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -640,7 +639,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -699,7 +698,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -758,7 +757,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -817,7 +816,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -876,7 +875,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html
index dae68b3ad73..339c87bff21 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.filter.ctx-filter.no-transform.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.ctx-filter.no-transform.tentative</h1>
+<h1>2d.layer.global-states.filter.ctx-filter.no-transform.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -59,7 +58,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -106,7 +105,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -153,7 +152,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -200,7 +199,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -247,7 +246,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -294,7 +293,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -341,7 +340,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -388,7 +387,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -438,7 +437,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -488,7 +487,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -538,7 +537,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -588,7 +587,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -638,7 +637,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -688,7 +687,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -738,7 +737,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.html
index 0dd8471feb2..ae2f9768245 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.ctx-filter.no-transform.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.ctx-filter.no-transform.tentative</h1>
+<h1>2d.layer.global-states.filter.ctx-filter.no-transform.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -53,7 +52,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -93,7 +92,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -133,7 +132,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -173,7 +172,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -213,7 +212,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -253,7 +252,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -293,7 +292,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -333,7 +332,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -376,7 +375,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -419,7 +418,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -462,7 +461,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -505,7 +504,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -548,7 +547,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -591,7 +590,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -634,7 +633,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.w.html
index 24613ffafa6..54805ece1d3 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.no-transform.tentative.w.html
@@ -2,20 +2,19 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.ctx-filter.no-transform.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.ctx-filter.no-transform.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.ctx-filter.no-transform.tentative</h1>
+<h1>2d.layer.global-states.filter.ctx-filter.no-transform.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 <script>pending_tests = 16;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -69,7 +68,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -123,7 +122,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -177,7 +176,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -231,7 +230,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -285,7 +284,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -339,7 +338,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -393,7 +392,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -447,7 +446,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -504,7 +503,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -561,7 +560,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -618,7 +617,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -675,7 +674,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -732,7 +731,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -789,7 +788,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -846,7 +845,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html
index b18ae7f357a..d5e03796eb3 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.filter.ctx-filter.rotation.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.ctx-filter.rotation.tentative</h1>
+<h1>2d.layer.global-states.filter.ctx-filter.rotation.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -61,7 +60,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -110,7 +109,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -159,7 +158,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -208,7 +207,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -257,7 +256,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -306,7 +305,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -355,7 +354,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -404,7 +403,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -456,7 +455,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -508,7 +507,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -560,7 +559,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -612,7 +611,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -664,7 +663,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -716,7 +715,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -768,7 +767,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.html
index ba26f910695..251eb4508d6 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.ctx-filter.rotation.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.ctx-filter.rotation.tentative</h1>
+<h1>2d.layer.global-states.filter.ctx-filter.rotation.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -55,7 +54,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -97,7 +96,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -139,7 +138,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -181,7 +180,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -223,7 +222,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -265,7 +264,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -307,7 +306,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -349,7 +348,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -394,7 +393,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -439,7 +438,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -484,7 +483,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -529,7 +528,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -574,7 +573,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -619,7 +618,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -664,7 +663,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.w.html
index 59ebb65e7ad..37ac320b6de 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.ctx-filter.rotation.tentative.w.html
@@ -2,20 +2,19 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.ctx-filter.rotation.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.ctx-filter.rotation.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.ctx-filter.rotation.tentative</h1>
+<h1>2d.layer.global-states.filter.ctx-filter.rotation.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 <script>pending_tests = 16;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -71,7 +70,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -127,7 +126,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -183,7 +182,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -239,7 +238,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -295,7 +294,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -351,7 +350,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -407,7 +406,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -463,7 +462,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -522,7 +521,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -581,7 +580,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -640,7 +639,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -699,7 +698,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -758,7 +757,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -817,7 +816,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -876,7 +875,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html
index 6263d26333a..9908b53716c 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</h1>
+<h1>2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -59,7 +58,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -106,7 +105,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -153,7 +152,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -200,7 +199,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -247,7 +246,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -294,7 +293,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -341,7 +340,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -388,7 +387,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -438,7 +437,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -488,7 +487,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -538,7 +537,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -588,7 +587,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -638,7 +637,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -688,7 +687,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -738,7 +737,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.html
index 388a98f20f7..bcbecc6d338 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</h1>
+<h1>2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -53,7 +52,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -93,7 +92,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -133,7 +132,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -173,7 +172,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -213,7 +212,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -253,7 +252,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -293,7 +292,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -333,7 +332,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -376,7 +375,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -419,7 +418,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -462,7 +461,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -505,7 +504,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -548,7 +547,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -591,7 +590,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -634,7 +633,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.w.html
index ab1be4924dd..25904862f9b 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative.w.html
@@ -2,20 +2,19 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</h1>
+<h1>2d.layer.global-states.filter.no-cxt-filter.no-transform.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 <script>pending_tests = 16;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -69,7 +68,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -123,7 +122,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -177,7 +176,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -231,7 +230,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -285,7 +284,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -339,7 +338,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -393,7 +392,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -447,7 +446,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -504,7 +503,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -561,7 +560,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -618,7 +617,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -675,7 +674,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -732,7 +731,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -789,7 +788,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -846,7 +845,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html
index 0236c9a5d93..949a28b82dc 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</h1>
+<h1>2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -61,7 +60,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -110,7 +109,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -159,7 +158,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -208,7 +207,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -257,7 +256,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -306,7 +305,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -355,7 +354,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -404,7 +403,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -456,7 +455,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -508,7 +507,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -560,7 +559,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -612,7 +611,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -664,7 +663,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -716,7 +715,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -768,7 +767,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.html
index 95ce14186d3..af24b0d2fc3 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</h1>
+<h1>2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -55,7 +54,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -97,7 +96,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -139,7 +138,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -181,7 +180,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -223,7 +222,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -265,7 +264,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -307,7 +306,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -349,7 +348,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -394,7 +393,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -439,7 +438,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -484,7 +483,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -529,7 +528,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -574,7 +573,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -619,7 +618,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -664,7 +663,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.w.html
index 0e0644a45ea..a9863a4c2ff 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.filter.no-cxt-filter.rotation.tentative.w.html
@@ -2,20 +2,19 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.filter.no-cxt-filter.rotation.tentative-expected.html">
 <title>Canvas test: 2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</h1>
+<h1>2d.layer.global-states.filter.no-cxt-filter.rotation.tentative</h1>
 <p class="desc">Checks that layers with filters correctly use global render states.</p>
 <script>pending_tests = 16;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -71,7 +70,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -127,7 +126,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -183,7 +182,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -239,7 +238,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -295,7 +294,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -351,7 +350,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -407,7 +406,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -463,7 +462,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -522,7 +521,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -581,7 +580,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -640,7 +639,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -699,7 +698,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -758,7 +757,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -817,7 +816,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -876,7 +875,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform-expected.html
index fd33e3e4659..aed32f49cf8 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.no-cxt-filter.no-transform</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.no-cxt-filter.no-transform</h1>
+<h1>2d.layer.global-states.no-cxt-filter.no-transform</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -46,7 +45,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -80,7 +79,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -114,7 +113,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -148,7 +147,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -182,7 +181,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -216,7 +215,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -250,7 +249,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -284,7 +283,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -321,7 +320,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -358,7 +357,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -395,7 +394,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -432,7 +431,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -469,7 +468,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -506,7 +505,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -543,7 +542,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform.html
index baaac6e685c..207f40b3f27 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.no-cxt-filter.no-transform-expected.html">
 <title>Canvas test: 2d.layer.global-states.no-cxt-filter.no-transform</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.no-cxt-filter.no-transform</h1>
+<h1>2d.layer.global-states.no-cxt-filter.no-transform</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -53,7 +52,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -93,7 +92,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -133,7 +132,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -173,7 +172,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -213,7 +212,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -253,7 +252,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -293,7 +292,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -333,7 +332,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -376,7 +375,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -419,7 +418,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -462,7 +461,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -505,7 +504,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -548,7 +547,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -591,7 +590,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -634,7 +633,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform.w.html
index ce1dd2abf1a..83577baa328 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.no-transform.w.html
@@ -2,20 +2,19 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.no-cxt-filter.no-transform-expected.html">
 <title>Canvas test: 2d.layer.global-states.no-cxt-filter.no-transform</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.no-cxt-filter.no-transform</h1>
+<h1>2d.layer.global-states.no-cxt-filter.no-transform</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 <script>pending_tests = 16;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -69,7 +68,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -123,7 +122,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -177,7 +176,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -231,7 +230,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -285,7 +284,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -339,7 +338,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -393,7 +392,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -447,7 +446,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -504,7 +503,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -561,7 +560,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -618,7 +617,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -675,7 +674,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -732,7 +731,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -789,7 +788,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -846,7 +845,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation-expected.html
index 7bee2f7e38c..26b4bbaafda 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation-expected.html
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.global-states.no-cxt-filter.rotation</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.no-cxt-filter.rotation</h1>
+<h1>2d.layer.global-states.no-cxt-filter.rotation</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -48,7 +47,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -84,7 +83,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -120,7 +119,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -156,7 +155,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -192,7 +191,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -228,7 +227,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -264,7 +263,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -300,7 +299,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -339,7 +338,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -378,7 +377,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -417,7 +416,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -456,7 +455,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -495,7 +494,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -534,7 +533,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -573,7 +572,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation.html
index 77c61a190f2..5c6e4790213 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation.html
@@ -1,19 +1,18 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.no-cxt-filter.rotation-expected.html">
 <title>Canvas test: 2d.layer.global-states.no-cxt-filter.rotation</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.no-cxt-filter.rotation</h1>
+<h1>2d.layer.global-states.no-cxt-filter.rotation</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -55,7 +54,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -97,7 +96,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -139,7 +138,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -181,7 +180,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -223,7 +222,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -265,7 +264,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -307,7 +306,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -349,7 +348,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -394,7 +393,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -439,7 +438,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -484,7 +483,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -529,7 +528,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -574,7 +573,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -619,7 +618,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -664,7 +663,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation.w.html
index ef4999fa514..3944e882def 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.global-states.no-cxt-filter.rotation.w.html
@@ -2,20 +2,19 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.global-states.no-cxt-filter.rotation-expected.html">
 <title>Canvas test: 2d.layer.global-states.no-cxt-filter.rotation</title>
-<h1 style="font-size: 20px;">2d.layer.global-states.no-cxt-filter.rotation</h1>
+<h1>2d.layer.global-states.no-cxt-filter.rotation</h1>
 <p class="desc">Checks that layers correctly use global render states.</p>
 <script>pending_tests = 16;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(8, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 8">
 <span>
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -71,7 +70,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>no-shadow</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -127,7 +126,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -183,7 +182,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>no-shadow</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -239,7 +238,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -295,7 +294,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>no-shadow</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -351,7 +350,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -407,7 +406,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>no-shadow</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -463,7 +462,7 @@
   <div>no-globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -522,7 +521,7 @@
   <div>globalAlpha</div>
   <div>no-composite-op</div>
   <div>shadow</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -581,7 +580,7 @@
   <div>no-globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -640,7 +639,7 @@
   <div>globalAlpha</div>
   <div>blending</div>
   <div>shadow</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -699,7 +698,7 @@
   <div>no-globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -758,7 +757,7 @@
   <div>globalAlpha</div>
   <div>composite</div>
   <div>shadow</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -817,7 +816,7 @@
   <div>no-globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -876,7 +875,7 @@
   <div>globalAlpha</div>
   <div>copy</div>
   <div>shadow</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation-expected.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation-expected.html
index e00136f6106..d80bae7a559 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation-expected.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.layer.globalCompositeOperation</title>
-<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1>
+<h1>2d.layer.globalCompositeOperation</h1>
 <p class="desc">Checks that layers work with all globalCompositeOperation values.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(7, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 7">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -46,7 +45,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -82,7 +81,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -118,7 +117,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -154,7 +153,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -190,7 +189,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -226,7 +225,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -262,7 +261,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -298,7 +297,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -334,7 +333,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -370,7 +369,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -406,7 +405,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -442,7 +441,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -478,7 +477,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -514,7 +513,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -550,7 +549,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -586,7 +585,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -622,7 +621,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -658,7 +657,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -694,7 +693,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -730,7 +729,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -766,7 +765,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -802,7 +801,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -838,7 +837,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -874,7 +873,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -910,7 +909,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.html
index b9bf19b7e38..f6638614144 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.globalCompositeOperation-expected.html">
 <title>Canvas test: 2d.layer.globalCompositeOperation</title>
-<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1>
+<h1>2d.layer.globalCompositeOperation</h1>
 <p class="desc">Checks that layers work with all globalCompositeOperation values.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(7, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 7">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -49,7 +48,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -87,7 +86,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -125,7 +124,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -163,7 +162,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -201,7 +200,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -239,7 +238,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -277,7 +276,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -315,7 +314,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -353,7 +352,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -391,7 +390,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -429,7 +428,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -467,7 +466,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -505,7 +504,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -543,7 +542,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -581,7 +580,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -619,7 +618,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -657,7 +656,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -695,7 +694,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -733,7 +732,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -771,7 +770,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -809,7 +808,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -847,7 +846,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -885,7 +884,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -923,7 +922,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -961,7 +960,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.w.html b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.w.html
index 6620ee7232a..16b81441d09 100644
--- a/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/layers/2d.layer.globalCompositeOperation.w.html
@@ -2,18 +2,17 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.layer.globalCompositeOperation-expected.html">
 <title>Canvas test: 2d.layer.globalCompositeOperation</title>
-<h1 style="font-size: 20px;">2d.layer.globalCompositeOperation</h1>
+<h1>2d.layer.globalCompositeOperation</h1>
 <p class="desc">Checks that layers work with all globalCompositeOperation values.</p>
 <script>pending_tests = 26;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(7, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 7">
 <span>
   <div>source-over</div>
-  <canvas id="canvas0" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -65,7 +64,7 @@
 
 <span>
   <div>source-in</div>
-  <canvas id="canvas1" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -117,7 +116,7 @@
 
 <span>
   <div>source-out</div>
-  <canvas id="canvas2" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -169,7 +168,7 @@
 
 <span>
   <div>source-atop</div>
-  <canvas id="canvas3" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
@@ -221,7 +220,7 @@
 
 <span>
   <div>destination-over</div>
-  <canvas id="canvas4" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas4" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker4" type="text/worker">
@@ -273,7 +272,7 @@
 
 <span>
   <div>destination-in</div>
-  <canvas id="canvas5" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas5" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker5" type="text/worker">
@@ -325,7 +324,7 @@
 
 <span>
   <div>destination-out</div>
-  <canvas id="canvas6" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas6" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker6" type="text/worker">
@@ -377,7 +376,7 @@
 
 <span>
   <div>destination-atop</div>
-  <canvas id="canvas7" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas7" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker7" type="text/worker">
@@ -429,7 +428,7 @@
 
 <span>
   <div>lighter</div>
-  <canvas id="canvas8" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas8" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker8" type="text/worker">
@@ -481,7 +480,7 @@
 
 <span>
   <div>copy</div>
-  <canvas id="canvas9" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas9" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker9" type="text/worker">
@@ -533,7 +532,7 @@
 
 <span>
   <div>xor</div>
-  <canvas id="canvas10" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas10" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker10" type="text/worker">
@@ -585,7 +584,7 @@
 
 <span>
   <div>multiply</div>
-  <canvas id="canvas11" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas11" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker11" type="text/worker">
@@ -637,7 +636,7 @@
 
 <span>
   <div>screen</div>
-  <canvas id="canvas12" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas12" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker12" type="text/worker">
@@ -689,7 +688,7 @@
 
 <span>
   <div>overlay</div>
-  <canvas id="canvas13" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas13" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker13" type="text/worker">
@@ -741,7 +740,7 @@
 
 <span>
   <div>darken</div>
-  <canvas id="canvas14" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas14" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker14" type="text/worker">
@@ -793,7 +792,7 @@
 
 <span>
   <div>lighten</div>
-  <canvas id="canvas15" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas15" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker15" type="text/worker">
@@ -845,7 +844,7 @@
 
 <span>
   <div>color-dodge</div>
-  <canvas id="canvas16" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas16" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker16" type="text/worker">
@@ -897,7 +896,7 @@
 
 <span>
   <div>color-burn</div>
-  <canvas id="canvas17" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas17" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker17" type="text/worker">
@@ -949,7 +948,7 @@
 
 <span>
   <div>hard-light</div>
-  <canvas id="canvas18" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas18" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker18" type="text/worker">
@@ -1001,7 +1000,7 @@
 
 <span>
   <div>soft-light</div>
-  <canvas id="canvas19" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas19" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker19" type="text/worker">
@@ -1053,7 +1052,7 @@
 
 <span>
   <div>difference</div>
-  <canvas id="canvas20" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas20" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker20" type="text/worker">
@@ -1105,7 +1104,7 @@
 
 <span>
   <div>exclusion</div>
-  <canvas id="canvas21" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas21" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker21" type="text/worker">
@@ -1157,7 +1156,7 @@
 
 <span>
   <div>hue</div>
-  <canvas id="canvas22" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas22" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker22" type="text/worker">
@@ -1209,7 +1208,7 @@
 
 <span>
   <div>saturation</div>
-  <canvas id="canvas23" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas23" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker23" type="text/worker">
@@ -1261,7 +1260,7 @@
 
 <span>
   <div>color</div>
-  <canvas id="canvas24" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas24" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker24" type="text/worker">
@@ -1313,7 +1312,7 @@
 
 <span>
   <div>luminosity</div>
-  <canvas id="canvas25" width="90" height="90" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas25" width="90" height="90">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker25" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/manual/context-attributes/getContextAttributes.html b/tests/wpt/tests/html/canvas/offscreen/manual/context-attributes/getContextAttributes.html
index 82edf974e0d..c60e15ec0ae 100644
--- a/tests/wpt/tests/html/canvas/offscreen/manual/context-attributes/getContextAttributes.html
+++ b/tests/wpt/tests/html/canvas/offscreen/manual/context-attributes/getContextAttributes.html
@@ -10,7 +10,12 @@ var testScenarios = [
     // defaults
     {testDescription: "Test default offscreen context creation attributes",
         canvasContextAttributes: {},
-        expectedContextAttributes: {alpha: true, desynchronized: false, willReadFrequently: false, colorSpace: "srgb"}},
+        expectedContextAttributes: {
+            alpha: true,
+            desynchronized: false,
+            willReadFrequently: false,
+            colorSpace: "srgb",
+            colorType:"unorm8"}},
     // alpha
     {testDescription: "Test offscreen context creation attributes alpha: true",
         canvasContextAttributes: {alpha: true},
@@ -39,6 +44,13 @@ var testScenarios = [
     {testDescription: "Test offscreen context creation attributes willReadFrequently: false",
         canvasContextAttributes: {willReadFrequently: false},
         expectedContextAttributes: {willReadFrequently: false}},
+    // colorType
+    {testDescription: "Test context creation attributes colorType: unorm8",
+        canvasContextAttributes: {colorType: "unorm8"},
+        expectedContextAttributes: {colorType: "unorm8"}},
+    {testDescription: "Test context creation attributes colorType: float16",
+        canvasContextAttributes: {colorType: "float16"},
+        expectedContextAttributes: {colorType: "float16"}},
 ];
 
 function runTestScenario(canvas, testScenario) {
@@ -61,6 +73,10 @@ function runTestScenario(canvas, testScenario) {
             assert_equals(contextAttributes.willReadFrequently,
                 testScenario.expectedContextAttributes.willReadFrequently);
         }
+        if (testScenario.expectedContextAttributes.colorType !== undefined) {
+            assert_equals(contextAttributes.colorType,
+                testScenario.expectedContextAttributes.colorType);
+        }
     }, testScenario.testDescription);
 }
 
diff --git a/tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction-ref.html b/tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction-ref.html
new file mode 100644
index 00000000000..23e70313cdb
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction-ref.html
@@ -0,0 +1,27 @@
+<!doctype HTML>
+<html>
+  <meta charset="utf-8">
+  <head>
+    <title>HTML5 Canvas Test Reference:  The direction attribute in an offscreen canvas</title>
+    <link rel="author" href="mailto:schenney@chromium.org"/>
+    <script>
+      function runTest()
+      {
+        var canvas = document.getElementById('canvas1');
+        var ctx = canvas.getContext('2d');
+
+        ctx.font = '25px serif';
+        ctx.direction = 'rtl';
+        ctx.fillText('ABC!', 60, 50);
+
+        ctx.fillStyle = '#0f0';
+        ctx.fillRect(0, 0, 1, 1);
+      }
+    </script>
+  </head>
+  <body onload="runTest()">
+    <canvas id="canvas1" width="300" height="150">
+      Browser does not support HTML5 Canvas.
+    </canvas>
+  </body>
+</html>
diff --git a/tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.html b/tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.html
index 73df0a94fc0..56c7dc00f21 100644
--- a/tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.html
+++ b/tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.html
@@ -3,7 +3,7 @@
   <meta charset="utf-8">
   <head>
     <title>HTML5 Canvas Test:  The direction attribute is respected in offscreen worker canvas</title>
-    <link rel="match" href="canvas.2d.offscreen.direction-ref.html" />
+    <link rel="match" href="canvas.2d.offscreen.worker.direction-ref.html" />
     <link rel="author" href="mailto:schenney@chromium.org"/>
     <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
     <meta name="assert" content="An offscreen canvas in a worker respects the direction text attribute." />
@@ -11,13 +11,29 @@
     <script type="text/javascript">
       function runTest()
       {
-        var canvas = document.getElementById("canvas1");
-        var offscreen = canvas.transferControlToOffscreen();
+        const placeholder_canvas = document.createElement('canvas');
+        placeholder_canvas.setAttribute('width', '300');
+        placeholder_canvas.setAttribute('height', '150');
+        const offscreen = placeholder_canvas.transferControlToOffscreen();
 
         const worker = new Worker('text-direction-worker.js');
         worker.postMessage({canvas: offscreen}, [offscreen]);
 
-        requestAnimationFrame(() => requestAnimationFrame(() => takeScreenshot()));
+        const canvas = document.getElementById('canvas1');
+        const ctx = canvas.getContext('2d', {willReadFrequently: true});
+        function checkResult() {
+          // Wait until frame propagates.
+          ctx.drawImage(placeholder_canvas, 0, 0);
+          const pixel = ctx.getImageData(0, 0, 1, 1).data;
+
+          if (pixel[3] == 0) {
+            // Result not available, wait longer.
+            requestAnimationFrame(checkResult);
+          } else {
+            takeScreenshot();
+          }
+        }
+        requestAnimationFrame(checkResult);
       }
     </script>
   </head>
diff --git a/tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.inherit.html b/tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.inherit.html
index 518ae0aed5f..a7b7ec66e17 100644
--- a/tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.inherit.html
+++ b/tests/wpt/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.inherit.html
@@ -3,26 +3,43 @@
   <meta charset="utf-8">
   <head>
     <title>HTML5 Canvas Test:  The direction attribute is inherited in offscreen worker canvas</title>
-    <link rel="match" href="canvas.2d.offscreen.direction-ref.html" />
+    <link rel="match" href="canvas.2d.offscreen.worker.direction-ref.html" />
     <link rel="author" href="mailto:schenney@chromium.org"/>
     <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
-    <meta name="assert" content="An offscreen canvas in a worker respects the direction text attribute." />
+    <meta name="assert" content="An offscreen canvas in a worker inherits the direction text attribute." />
     <script src="/common/reftest-wait.js"></script>
     <script type="text/javascript">
       function runTest()
       {
-        var canvas = document.getElementById("canvas1");
-        var offscreen = canvas.transferControlToOffscreen();
+        const placeholder_canvas = document.createElement('canvas');
+        placeholder_canvas.setAttribute('width', '300');
+        placeholder_canvas.setAttribute('height', '150');
+        placeholder_canvas.setAttribute('dir', 'rtl');
+        const offscreen = placeholder_canvas.transferControlToOffscreen();
 
         const worker = new Worker('text-direction-worker-inherit.js');
         worker.postMessage({canvas: offscreen}, [offscreen]);
 
-        requestAnimationFrame(() => requestAnimationFrame(() => takeScreenshot()));
+        const canvas = document.getElementById('canvas1');
+        const ctx = canvas.getContext('2d', {willReadFrequently: true});
+        function checkResult() {
+          // Wait until frame propagates.
+          ctx.drawImage(placeholder_canvas, 0, 0);
+          const pixel = ctx.getImageData(0, 0, 1, 1).data;
+
+          if (pixel[3] == 0) {
+            // Result not available, wait longer.
+            requestAnimationFrame(checkResult);
+          } else {
+            takeScreenshot();
+          }
+        }
+        requestAnimationFrame(checkResult);
       }
     </script>
   </head>
   <body onload="runTest()">
-    <canvas id="canvas1" dir="rtl" width="300" height="150">
+    <canvas id="canvas1" width="300" height="150">
       Browser does not support HTML5 Canvas.
     </canvas>
   </body>
diff --git a/tests/wpt/tests/html/canvas/offscreen/manual/text/text-direction-worker-inherit.js b/tests/wpt/tests/html/canvas/offscreen/manual/text/text-direction-worker-inherit.js
index 14eaf588694..a300048d10f 100644
--- a/tests/wpt/tests/html/canvas/offscreen/manual/text/text-direction-worker-inherit.js
+++ b/tests/wpt/tests/html/canvas/offscreen/manual/text/text-direction-worker-inherit.js
@@ -4,4 +4,8 @@ self.onmessage = function(e) {
 
   offscreen_ctx.font = "25px serif";
   offscreen_ctx.fillText("ABC!", 60, 50);
+
+  // Fill a pixel, used to detect when the worker has completed.
+  offscreen_ctx.fillStyle = '#0f0';
+  offscreen_ctx.fillRect(0, 0, 1, 1);
 }
\ No newline at end of file
diff --git a/tests/wpt/tests/html/canvas/offscreen/manual/text/text-direction-worker.js b/tests/wpt/tests/html/canvas/offscreen/manual/text/text-direction-worker.js
index 9375ec16f23..d85504f524e 100644
--- a/tests/wpt/tests/html/canvas/offscreen/manual/text/text-direction-worker.js
+++ b/tests/wpt/tests/html/canvas/offscreen/manual/text/text-direction-worker.js
@@ -5,4 +5,8 @@ self.onmessage = function(e) {
   offscreen_ctx.font = "25px serif";
   offscreen_ctx.direction = "rtl";
   offscreen_ctx.fillText("ABC!", 60, 50);
+
+  // Fill a pixel, used to detect when the worker has completed.
+  offscreen_ctx.fillStyle = '#0f0';
+  offscreen_ctx.fillRect(0, 0, 1, 1);
 }
\ No newline at end of file
diff --git a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative-expected.html b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative-expected.html
index 967ae7e4636..c983823a3ed 100644
--- a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative-expected.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-align.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-align.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-align.tentative</h1>
 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(3, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 3">
 <span>
   <div>ctx_align_left</div>
-  <canvas id="canvas0" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -32,7 +31,7 @@
 
 <span>
   <div>ctx_align_center</div>
-  <canvas id="canvas1" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -54,7 +53,7 @@
 
 <span>
   <div>ctx_align_right</div>
-  <canvas id="canvas2" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative.html b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative.html
index 4fc41c79cc4..20e80988d25 100644
--- a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative.html
+++ b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.text.measure.text-clusters-rendering-align.tentative-expected.html">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-align.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-align.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-align.tentative</h1>
 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(3, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 3">
 <span>
   <div>ctx_align_left</div>
-  <canvas id="canvas0" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -41,7 +40,7 @@
 
 <span>
   <div>ctx_align_center</div>
-  <canvas id="canvas1" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -71,7 +70,7 @@
 
 <span>
   <div>ctx_align_right</div>
-  <canvas id="canvas2" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative.w.html b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative.w.html
index 35ddd54bfd7..244c2428fca 100644
--- a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-align.tentative.w.html
@@ -2,18 +2,17 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.text.measure.text-clusters-rendering-align.tentative-expected.html">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-align.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-align.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-align.tentative</h1>
 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textAlign from the context at the time the text was measured.</p>
 <script>pending_tests = 3;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(3, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 3">
 <span>
   <div>ctx_align_left</div>
-  <canvas id="canvas0" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -57,7 +56,7 @@
 
 <span>
   <div>ctx_align_center</div>
-  <canvas id="canvas1" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -101,7 +100,7 @@
 
 <span>
   <div>ctx_align_right</div>
-  <canvas id="canvas2" width="250" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="250" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html
index 2dffe90aadc..9e184f34de2 100644
--- a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-baseline.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-baseline.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-baseline.tentative</h1>
 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textBaseline from the context at the time the text was measured.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(4, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 4">
 <span>
   <div>ctx_baseline_top</div>
-  <canvas id="canvas0" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -29,7 +28,7 @@
 
 <span>
   <div>ctx_baseline_middle</div>
-  <canvas id="canvas1" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -48,7 +47,7 @@
 
 <span>
   <div>ctx_baseline_bottom</div>
-  <canvas id="canvas2" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -67,7 +66,7 @@
 
 <span>
   <div>ctx_baseline_alphabetic</div>
-  <canvas id="canvas3" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative.html b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative.html
index 84def142a9b..de7f89f57fb 100644
--- a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative.html
+++ b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-baseline.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-baseline.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-baseline.tentative</h1>
 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textBaseline from the context at the time the text was measured.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(4, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 4">
 <span>
   <div>ctx_baseline_top</div>
-  <canvas id="canvas0" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -41,7 +40,7 @@
 
 <span>
   <div>ctx_baseline_middle</div>
-  <canvas id="canvas1" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -71,7 +70,7 @@
 
 <span>
   <div>ctx_baseline_bottom</div>
-  <canvas id="canvas2" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -101,7 +100,7 @@
 
 <span>
   <div>ctx_baseline_alphabetic</div>
-  <canvas id="canvas3" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative.w.html b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative.w.html
index 9227776d8c8..3e5fc419ce6 100644
--- a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-baseline.tentative.w.html
@@ -2,18 +2,17 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.text.measure.text-clusters-rendering-baseline.tentative-expected.html">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-baseline.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-baseline.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-baseline.tentative</h1>
 <p class="desc">Test that fillTextCluster() correctly positions the text, taking into account the textBaseline from the context at the time the text was measured.</p>
 <script>pending_tests = 4;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(4, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 4">
 <span>
   <div>ctx_baseline_top</div>
-  <canvas id="canvas0" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -57,7 +56,7 @@
 
 <span>
   <div>ctx_baseline_middle</div>
-  <canvas id="canvas1" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -101,7 +100,7 @@
 
 <span>
   <div>ctx_baseline_bottom</div>
-  <canvas id="canvas2" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -145,7 +144,7 @@
 
 <span>
   <div>ctx_baseline_alphabetic</div>
-  <canvas id="canvas3" width="180" height="43" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="180" height="43">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html
index 6d109c3ffcd..484aaf5f7c5 100644
--- a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html
+++ b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html
@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</h1>
 <p class="desc">Test that fillTextCluster() renders using the drawing styles as they were when `ctx.measureText()` was called, regardless of any changes in the context since.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(2, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 2">
 <span>
   <div>letter_spacing</div>
-  <canvas id="canvas0" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -32,7 +31,7 @@
 
 <span>
   <div>word_spacing</div>
-  <canvas id="canvas1" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -54,7 +53,7 @@
 
 <span>
   <div>font_kerning</div>
-  <canvas id="canvas2" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -76,7 +75,7 @@
 
 <span>
   <div>font_variant_caps</div>
-  <canvas id="canvas3" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.html b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.html
index 8d304cb1a78..36596171a93 100644
--- a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.html
+++ b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</h1>
 <p class="desc">Test that fillTextCluster() renders using the drawing styles as they were when `ctx.measureText()` was called, regardless of any changes in the context since.</p>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(2, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 2">
 <span>
   <div>letter_spacing</div>
-  <canvas id="canvas0" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -42,7 +41,7 @@
 
 <span>
   <div>word_spacing</div>
-  <canvas id="canvas1" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -73,7 +72,7 @@
 
 <span>
   <div>font_kerning</div>
-  <canvas id="canvas2" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
@@ -104,7 +103,7 @@
 
 <span>
   <div>font_variant_caps</div>
-  <canvas id="canvas3" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.w.html b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.w.html
index 76f61dad315..6c316b4b0ad 100644
--- a/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.w.html
+++ b/tests/wpt/tests/html/canvas/offscreen/text/2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative.w.html
@@ -2,18 +2,17 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative-expected.html">
 <title>Canvas test: 2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</title>
-<h1 style="font-size: 20px;">2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</h1>
+<h1>2d.text.measure.text-clusters-rendering-drawing-styles-change.tentative</h1>
 <p class="desc">Test that fillTextCluster() renders using the drawing styles as they were when `ctx.measureText()` was called, regardless of any changes in the context since.</p>
 <script>pending_tests = 4;</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat(2, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: 2">
 <span>
   <div>letter_spacing</div>
-  <canvas id="canvas0" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas0" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker0" type="text/worker">
@@ -58,7 +57,7 @@
 
 <span>
   <div>word_spacing</div>
-  <canvas id="canvas1" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas1" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker1" type="text/worker">
@@ -103,7 +102,7 @@
 
 <span>
   <div>font_kerning</div>
-  <canvas id="canvas2" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas2" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker2" type="text/worker">
@@ -148,7 +147,7 @@
 
 <span>
   <div>font_variant_caps</div>
-  <canvas id="canvas3" width="250" height="80" style="outline: 1px solid">
+  <canvas class="grid-cell-content" id="canvas3" width="250" height="80">
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker3" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.p3.html b/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.p3.html
index 04823819fa9..b05056939bb 100644
--- a/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.p3.html
+++ b/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.p3.html
@@ -28,7 +28,7 @@ t.step(function() {
   ctx.fillStyle = color_style;
   ctx.fillRect(0, 0, 10, 10);
 
-  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3", storageFormat: "uint8"}).data;
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3"}).data;
   _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
   assert_approx_equals(pixel[0], pixel_expected[0], 2);
   assert_approx_equals(pixel[1], pixel_expected[1], 2);
diff --git a/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.p3.worker.js b/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.p3.worker.js
index 844cd93f813..1dcd0c0b522 100644
--- a/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.p3.worker.js
+++ b/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.p3.worker.js
@@ -23,7 +23,7 @@ t.step(function() {
   ctx.fillStyle = color_style;
   ctx.fillRect(0, 0, 10, 10);
 
-  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3", storageFormat: "uint8"}).data;
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3"}).data;
   _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
   assert_approx_equals(pixel[0], pixel_expected[0], 2);
   assert_approx_equals(pixel[1], pixel_expected[1], 2);
diff --git a/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.html b/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.html
index 60b90f4c0a5..0197c10ad28 100644
--- a/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.html
+++ b/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.html
@@ -27,7 +27,7 @@ t.step(function() {
   ctx.fillStyle = color_style;
   ctx.fillRect(0, 0, 10, 10);
 
-  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data;
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb"}).data;
   _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
   assert_approx_equals(pixel[0], pixel_expected[0], 2);
   assert_approx_equals(pixel[1], pixel_expected[1], 2);
diff --git a/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.worker.js b/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.worker.js
index 619c59076da..da84a683bcf 100644
--- a/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.worker.js
+++ b/tests/wpt/tests/html/canvas/offscreen/wide-gamut-canvas/2d.color.space.p3.to.srgb.worker.js
@@ -22,7 +22,7 @@ t.step(function() {
   ctx.fillStyle = color_style;
   ctx.fillRect(0, 0, 10, 10);
 
-  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data;
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb"}).data;
   _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
   assert_approx_equals(pixel[0], pixel_expected[0], 2);
   assert_approx_equals(pixel[1], pixel_expected[1], 2);
diff --git a/tests/wpt/tests/html/canvas/resources/canvas-grid-reftest.css b/tests/wpt/tests/html/canvas/resources/canvas-grid-reftest.css
new file mode 100644
index 00000000000..368a06fbb37
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/resources/canvas-grid-reftest.css
@@ -0,0 +1,16 @@
+h1 {
+  font-size: 20px;
+}
+
+.grid-container {
+  display: grid;
+  gap: 4px;
+  grid-template-columns: repeat(var(--grid-width), max-content);
+  font-size: 13px;
+  text-align: center;
+}
+
+
+.grid-cell-content {
+  outline: 1px solid black;
+}
\ No newline at end of file
diff --git a/tests/wpt/tests/html/canvas/tools/gentestutilsunion.py b/tests/wpt/tests/html/canvas/tools/gentestutilsunion.py
index d1bafced0e2..62b355f3743 100644
--- a/tests/wpt/tests/html/canvas/tools/gentestutilsunion.py
+++ b/tests/wpt/tests/html/canvas/tools/gentestutilsunion.py
@@ -29,8 +29,8 @@
 #
 # * Test the tests, add new ones to Git, remove deleted ones from Git, etc.
 
-from typing import Any, Container, DefaultDict, FrozenSet, List, Mapping
-from typing import MutableMapping, Set, Union
+from typing import Any, Callable, Container, DefaultDict, FrozenSet
+from typing import List, Mapping, MutableMapping, Set, Tuple, Union
 
 import re
 import collections
@@ -218,6 +218,80 @@ class _TemplateType(str, enum.Enum):
     TESTHARNESS = 'testharness'
 
 
+class MutableDictLoader(jinja2.BaseLoader):
+    """Loads Jinja templates from a `dict` that can be updated.
+
+    This is essentially a version of `jinja2.DictLoader` whose content can be
+    changed. `jinja2.DictLoader` accepts a `dict` at construction time and that
+    `dict` cannot be changed. The templates served by `MutableDictLoader` on the
+    other hand can be updated by calling `set_templates(new_templates)`. This is
+    needed because we reuse the environment to render different tests and
+    variants, each of which will have different templates.
+    """
+
+    def __init__(self) -> None:
+        self._templates = dict()  # type: Mapping[str, Any]
+
+    def set_templates(self, new_templates: Mapping[str, Any]) -> None:
+        """Changes the dict from which templates are loaded."""
+        self._templates = new_templates
+
+    def get_source(
+        self, environment: jinja2.Environment, template: str
+    ) ->  Tuple[str, str, Callable[[], bool]]:
+        """Loads a template from the current template dict."""
+        del environment  # Unused.
+        source = self._templates.get(template)
+        if source is None:
+            raise jinja2.TemplateNotFound(template)
+        if not isinstance(source, str):
+            raise InvalidTestDefinitionError(
+                f'Param "{template}" must be an str to be usable as Jinja '
+                'template.')
+        return source, template, lambda: source == self._templates.get(template)
+
+
+class TemplateLoaderActivator:
+    """Helper class used to set a given params dict in a MutableDictLoader.
+
+    Jinja requires custom loaders to be registered in the environment and thus,
+    we can't dynamically change them. We would need this to allow different test
+    variants to have different templates. Using a `TemplateLoaderActivator`,
+    the code can "activate" the templates for a given variant before rendering
+    strings for that variant. For instance:
+
+        loader = MutableDictLoader()
+        jinja_env = jinja2.Environment(loader=[loader])
+
+        templates1 = {'macros': '{% macro foo() %}foo{% endmacro %}'}
+        activator1 = TemplateLoaderActivator(loader, templates1)
+
+        templates2 = {'macros': '{% macro foo() %}bar{% endmacro %}'}
+        activator2 = TemplateLoaderActivator(loader, templates2)
+
+        main_template = '''
+            {% import 'macros' as t %}
+            {{ t.foo() }}
+        '''
+
+        # Render `main_template`, loading 'macros' from `templates1.
+        activator1.activate()
+        jinja_env.from_string(main_template).render(params1))
+
+        # Render `main_template`, loading 'macros' from `templates2.
+        activator2.activate()
+        jinja_env.from_string(main_template).render(params2))
+
+    """
+
+    def __init__(self, loader: MutableDictLoader, params: _TestParams) -> None:
+        self._loader = loader
+        self._params = params
+
+    def activate(self):
+        self._loader.set_templates(self._params)
+
+
 class _LazyRenderedStr(collections.UserString):
     """A custom str type that renders it's content with Jinja when accessed.
 
@@ -232,7 +306,8 @@ class _LazyRenderedStr(collections.UserString):
     For instance:
 
         params = {}
-        make_lazy = lambda value: _LazyRenderedStr(jinja_env, params, value)
+        make_lazy = lambda value: _LazyRenderedStr(
+            jinja_env, loader_activator, params, value)
 
         params.update({
             'expected_value': make_lazy('rgba({{ color | join(", ") }})'),
@@ -251,11 +326,13 @@ class _LazyRenderedStr(collections.UserString):
     """
 
     def __init__(self, jinja_env: jinja2.Environment,
+                 loader_activator: TemplateLoaderActivator,
                  params: _TestParams, value: str):
         # Don't call `super().__init__`, because we want to override `self.data`
         # to be a property instead of a member variable.
         # pylint: disable=super-init-not-called
         self._jinja_env = jinja_env
+        self._loader_activator = loader_activator
         self._params = params
         self._value = value
         self._rendered = None
@@ -268,6 +345,7 @@ class _LazyRenderedStr(collections.UserString):
         rendered result is cached and returned directly on subsequent
         accesses."""
         if self._rendered is None:
+            self._loader_activator.activate()
             self._rendered = (
                 self._jinja_env.from_string(self._value).render(self._params))
         return self._rendered
@@ -286,6 +364,7 @@ class _LazyRenderedStr(collections.UserString):
 
 
 def _make_lazy_rendered(jinja_env: jinja2.Environment,
+                        loader_activator: TemplateLoaderActivator,
                         params: _TestParams,
                         value: Any) -> Any:
     """Recursively converts `value` to a _LazyRenderedStr.
@@ -295,15 +374,15 @@ def _make_lazy_rendered(jinja_env: jinja2.Environment,
     converted to _LazyRenderedStr.
     """
     if isinstance(value, str) and ('{{' in value or '{%' in value):
-        return _LazyRenderedStr(jinja_env, params, value)
+        return _LazyRenderedStr(jinja_env, loader_activator, params, value)
     if isinstance(value, list):
-        return [_make_lazy_rendered(jinja_env, params, v)
+        return [_make_lazy_rendered(jinja_env, loader_activator, params, v)
                 for v in value]
     if isinstance(value, tuple):
-        return tuple(_make_lazy_rendered(jinja_env, params, v)
+        return tuple(_make_lazy_rendered(jinja_env, loader_activator, params, v)
                      for v in value)
     if isinstance(value, dict):
-        return {k: _make_lazy_rendered(jinja_env, params, v)
+        return {k: _make_lazy_rendered(jinja_env, loader_activator, params, v)
                 for k, v in value.items()}
     return value
 
@@ -335,6 +414,10 @@ class _OutputPaths:
             element=self.element / _ensure_rendered(sub_dir),
             offscreen=self.offscreen / _ensure_rendered(sub_dir))
 
+    def path_for_canvas_type(self, canvas_type: _CanvasType) -> pathlib.Path:
+        return (self.element if canvas_type == _CanvasType.HTML_CANVAS
+                else self.offscreen)
+
     def mkdir(self) -> None:
         """Creates element and offscreen directories, if they don't exist."""
         self.element.mkdir(parents=True, exist_ok=True)
@@ -372,24 +455,14 @@ def _render(jinja_env: jinja2.Environment,
     pathlib.Path(output_file_name).write_text(file_content, 'utf-8')
 
 
-def _write_cairo_images(pycairo_code: str, output_files: _OutputPaths,
-                        canvas_types: FrozenSet[_CanvasType]) -> None:
-    """Creates a png from pycairo code, for the specified canvas types."""
-    if _CanvasType.HTML_CANVAS in canvas_types:
-        full_code = (f'{pycairo_code}\n'
-                     f'surface.write_to_png("{output_files.element}")\n')
-        eval(compile(full_code, '<string>', 'exec'), {
-            'cairo': cairo,
-            'math': math,
-        })
-
-    if {_CanvasType.OFFSCREEN_CANVAS, _CanvasType.WORKER} & canvas_types:
-        full_code = (f'{pycairo_code}\n'
-                     f'surface.write_to_png("{output_files.offscreen}")\n')
-        eval(compile(full_code, '<string>', 'exec'), {
-            'cairo': cairo,
-            'math': math,
-        })
+def _write_cairo_images(pycairo_code: str, output_file: pathlib.Path) -> None:
+    """Creates a png from pycairo code and write it to `output_file`."""
+    full_code = (f'{pycairo_code}\n'
+                 f'surface.write_to_png("{output_file}")\n')
+    eval(compile(full_code, '<string>', 'exec'), {
+        'cairo': cairo,
+        'math': math,
+    })
 
 
 class _Variant():
@@ -418,6 +491,7 @@ class _Variant():
 
         Default values are added for certain parameters, if missing."""
         params = {
+            'enabled': 'true',
             'desc': '',
             'size': (100, 50),
             # Test name, which ultimately is used as filename. File variant
@@ -517,7 +591,8 @@ class _Variant():
         return _TemplateType.TESTHARNESS
 
     def finalize_params(self, jinja_env: jinja2.Environment,
-                        variant_id: int) -> None:
+                        variant_id: int,
+                        params_template_loader: MutableDictLoader) -> None:
         """Finalize this variant by adding computed param fields."""
         self._params['id'] = variant_id
         self._params['file_name'] = self._get_file_name()
@@ -527,10 +602,12 @@ class _Variant():
         if isinstance(self._params['size'], list):
             self._params['size'] = tuple(self._params['size'])
 
+        loader_activator = TemplateLoaderActivator(params_template_loader,
+                                                   self._params)
         for canvas_type in self.params['canvas_types']:
             params = {'canvas_type': canvas_type}
             params.update(
-                {k: _make_lazy_rendered(jinja_env, params, v)
+                {k: _make_lazy_rendered(jinja_env, loader_activator, params, v)
                  for k, v in self._params.items()})
             self._canvas_type_params[canvas_type] = params
 
@@ -563,8 +640,7 @@ class _Variant():
             r'\ncr = cairo.Context(surface)', expected)
 
         img_filename = f'{params["name"]}.png'
-        _write_cairo_images(expected, output_dirs.sub_path(img_filename),
-                            frozenset({_CanvasType.HTML_CANVAS}))
+        _write_cairo_images(expected, output_dirs.element / img_filename)
         params['expected_img'] = img_filename
 
 
@@ -577,6 +653,7 @@ class _VariantGrid:
         # Parameters rendered for each enabled canvas types.
         self._canvas_type_params = {
             }  # type: Mapping[_CanvasType, _MutableTestParams]
+        self._enabled = None
         self._file_name = None
         self._canvas_types = None
         self._template_type = None
@@ -586,6 +663,14 @@ class _VariantGrid:
         """Read only getter for the list of variant in this grid."""
         return self._variants
 
+    @property
+    def enabled(self) -> bool:
+        """File name to which this grid will be written."""
+        if self._enabled is None:
+            enabled_str = self._unique_param(_CanvasType, 'enabled')
+            self._enabled = (enabled_str.strip().lower() == 'true')
+        return self._enabled
+
     @property
     def file_name(self) -> str:
         """File name to which this grid will be written."""
@@ -608,10 +693,12 @@ class _VariantGrid:
                                                      'template_type')
         return self._template_type
 
-    def finalize(self, jinja_env: jinja2.Environment):
+    def finalize(self, jinja_env: jinja2.Environment,
+                 params_template_loader: MutableDictLoader):
         """Finalize this grid's variants, adding computed params fields."""
         for variant_id, variant in enumerate(self.variants):
-            variant.finalize_params(jinja_env, variant_id)
+            variant.finalize_params(jinja_env, variant_id,
+                                    params_template_loader)
 
         if len(self.variants) == 1:
             self._canvas_type_params = self.variants[0].canvas_type_params
@@ -839,8 +926,8 @@ class _VariantGrid:
                 ''')
 
         img_filename = f'{self.file_name}.png'
-        _write_cairo_images(cairo_code, output_dirs.sub_path(img_filename),
-                            frozenset([canvas_type]))
+        output_dir = output_dirs.path_for_canvas_type(canvas_type)
+        _write_cairo_images(cairo_code, output_dir / img_filename)
         self._canvas_type_params[canvas_type]['img_reference'] = img_filename
 
     def _generate_cairo_images(self, output_dirs: _OutputPaths) -> None:
@@ -933,8 +1020,11 @@ def _get_variant_dimensions(params: _TestParams) -> List[_VariantDimension]:
     ]
 
 
-def _get_variant_grids(test: Mapping[str, Any],
-                       jinja_env: jinja2.Environment) -> List[_VariantGrid]:
+def _get_variant_grids(
+    test: _TestParams,
+    jinja_env: jinja2.Environment,
+    params_template_loader: MutableDictLoader
+) -> List[_VariantGrid]:
     base_variant = _Variant.create_with_defaults(test)
     grid_width = base_variant.params.get('grid_width', 1)
     if not isinstance(grid_width, int):
@@ -952,7 +1042,7 @@ def _get_variant_grids(test: Mapping[str, Any],
             grids = [grid.add_dimension(variants) for grid in grids]
 
     for grid in grids:
-        grid.finalize(jinja_env)
+        grid.finalize(jinja_env, params_template_loader)
 
     return grids
 
@@ -994,8 +1084,13 @@ def generate_test_files(name_to_dir_file: str) -> None:
     output_dirs = _OutputPaths(element=pathlib.Path('..') / 'element',
                                offscreen=pathlib.Path('..') / 'offscreen')
 
+    params_template_loader = MutableDictLoader()
+
     jinja_env = jinja2.Environment(
-        loader=jinja2.PackageLoader('gentestutilsunion'),
+        loader=jinja2.ChoiceLoader([
+            jinja2.PackageLoader('gentestutilsunion'),
+            params_template_loader,
+        ]),
         keep_trailing_newline=True,
         trim_blocks=True,
         lstrip_blocks=True)
@@ -1037,7 +1132,9 @@ def generate_test_files(name_to_dir_file: str) -> None:
     used_variants = collections.defaultdict(set)
     for test in tests:
         print(test['name'])
-        for grid in _get_variant_grids(test, jinja_env):
+        for grid in _get_variant_grids(test, jinja_env, params_template_loader):
+            if not grid.enabled:
+                continue
             if test['name'] != grid.file_name:
                 print(f'  {grid.file_name}')
 
diff --git a/tests/wpt/tests/html/canvas/tools/name2dir.yaml b/tests/wpt/tests/html/canvas/tools/name2dir.yaml
index a62fab3a04e..bd032d4541a 100644
--- a/tests/wpt/tests/html/canvas/tools/name2dir.yaml
+++ b/tests/wpt/tests/html/canvas/tools/name2dir.yaml
@@ -1,5 +1,6 @@
 2d.transformation:                    "transformations"
-2d.color.space:                       'wide-gamut-canvas'
+2d.color.space:                       "wide-gamut-canvas"
+2d.color.type:                        "color-type"
 2d.composite:                         "compositing"
 2d.conformance.requirements:          "conformance-requirements"
 2d.drawImage:                         "drawing-images-to-the-canvas"
diff --git a/tests/wpt/tests/html/canvas/tools/templates/reftest_element_grid.html b/tests/wpt/tests/html/canvas/tools/templates/reftest_element_grid.html
index 559610160c4..f2bbb183358 100644
--- a/tests/wpt/tests/html/canvas/tools/templates/reftest_element_grid.html
+++ b/tests/wpt/tests/html/canvas/tools/templates/reftest_element_grid.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 {% if test_type == 'promise' %}<html class="reftest-wait">
 <script>pending_tests = {{ variants | length }};</script>
 {% endif %}
@@ -12,7 +13,7 @@
 {% if timeout %}<meta name="timeout" content="{{ timeout }}">
 {% endif %}
 <title>Canvas test: {{ name }}</title>
-<h1 style="font-size: 20px;">{{ name }}</h1>
+<h1>{{ name }}</h1>
 <p class="desc">{{ desc }}</p>
 {% if notes %}<p class="notes">{{ notes }}{% endif %}
 {% for image in images %}
@@ -23,18 +24,16 @@
       }}" class="resource"></svg>
 {% endfor %}
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat({{ grid_width }}, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: {{ grid_width }}">
 {% for variant in variants %}
 <span>
   {% for variant_name in variant.grid_variant_names %}
   <div>{{ variant_name }}</div>
   {% endfor %}
-  <canvas id="canvas{{ variant.id
+  <canvas class="grid-cell-content" id="canvas{{ variant.id
       }}" width="{{ variant.size[0]
       }}" height="{{ variant.size[1]
-      }}" style="outline: 1px solid"{{ variant.canvas }}>
+      }}"{{ variant.canvas }}>
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/tools/templates/reftest_grid.html b/tests/wpt/tests/html/canvas/tools/templates/reftest_grid.html
index f3e5aa74585..68a4f507cdc 100644
--- a/tests/wpt/tests/html/canvas/tools/templates/reftest_grid.html
+++ b/tests/wpt/tests/html/canvas/tools/templates/reftest_grid.html
@@ -2,7 +2,8 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <title>Canvas test: {{ name }}</title>
-<h1 style="font-size: 20px;">{{ name }}</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>{{ name }}</h1>
 <p class="desc">{{ desc }}</p>
 {% if notes %}<p class="notes">{{ notes }}{% endif %}
 {% for image in images %}
@@ -13,16 +14,14 @@
       }}" id="{{ svgimage }}" class="resource"></svg>
 {% endfor %}
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat({{ grid_width }}, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: {{ grid_width }}">
 {% for variant in variants %}
 <span>
   {% for variant_name in variant.grid_variant_names %}
   <div>{{ variant_name }}</div>
   {% endfor %}
-  <div style="width: {{ variant.size[0] }}px; height: {{ variant.size[1]
-              }}px; outline: 1px solid">
+  <div class="grid-cell-content"
+       style="width: {{ variant.size[0] }}px; height: {{ variant.size[1]}}px;">
     {{ variant.html_reference | trim | indent(4) }}
   </div>
 </span>
diff --git a/tests/wpt/tests/html/canvas/tools/templates/reftest_img_grid.html b/tests/wpt/tests/html/canvas/tools/templates/reftest_img_grid.html
index c222ccfc589..227184db2ea 100644
--- a/tests/wpt/tests/html/canvas/tools/templates/reftest_img_grid.html
+++ b/tests/wpt/tests/html/canvas/tools/templates/reftest_img_grid.html
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <title>Canvas test: {{ name }}</title>
-<h1 style="font-size: 20px;">{{ name }}</h1>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
+<h1>{{ name }}</h1>
 <p>{{ desc }}</p>
 {% if notes %}<p>{{ notes }}</p>{% endif %}
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat({{ grid_width }}, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: {{ grid_width }}">
 {% for variant in variants %}
 <span>
   {% for variant_name in variant.grid_variant_names %}
@@ -16,8 +15,8 @@
   {% set x_pos = ((loop.index0 % grid_width) | int) * variant.size[0] %}
   {% set y_pos = ((loop.index0 / grid_width) | int) * variant.size[1] %}
   <img src="{{ img_reference }}"
-       style="outline: 1px solid;
-              width: {{ variant.size[0] }}px;
+       class="grid-cell-content"
+       style="width: {{ variant.size[0] }}px;
               height: {{ variant.size[1] }}px;
               object-position: {{ -x_pos }}px {{ -y_pos }}px;
               object-fit: none;">
diff --git a/tests/wpt/tests/html/canvas/tools/templates/reftest_offscreen_grid.html b/tests/wpt/tests/html/canvas/tools/templates/reftest_offscreen_grid.html
index d79b12e2d16..a9553e82419 100644
--- a/tests/wpt/tests/html/canvas/tools/templates/reftest_offscreen_grid.html
+++ b/tests/wpt/tests/html/canvas/tools/templates/reftest_offscreen_grid.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 {% if test_type == 'promise' %}<html class="reftest-wait">
 <script>pending_tests = {{ variants | length }};</script>
 {% endif %}
@@ -10,22 +11,20 @@
 {% if timeout %}<meta name="timeout" content="{{ timeout }}">
 {% endif %}
 <title>Canvas test: {{ name }}</title>
-<h1 style="font-size: 20px;">{{ name }}</h1>
+<h1>{{ name }}</h1>
 <p class="desc">{{ desc }}</p>
 {% if notes %}<p class="notes">{{ notes }}{% endif %}
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat({{ grid_width }}, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: {{ grid_width }}">
 {% for variant in variants %}
 <span>
   {% for variant_name in variant.grid_variant_names %}
   <div>{{ variant_name }}</div>
   {% endfor %}
-  <canvas id="canvas{{ variant.id
+  <canvas class="grid-cell-content" id="canvas{{ variant.id
       }}" width="{{ variant.size[0]
       }}" height="{{ variant.size[1]
-      }}" style="outline: 1px solid"{{ variant.canvas }}>
+      }}"{{ variant.canvas }}>
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script type="module">
diff --git a/tests/wpt/tests/html/canvas/tools/templates/reftest_worker_grid.html b/tests/wpt/tests/html/canvas/tools/templates/reftest_worker_grid.html
index 06143d5da63..7cbe1977517 100644
--- a/tests/wpt/tests/html/canvas/tools/templates/reftest_worker_grid.html
+++ b/tests/wpt/tests/html/canvas/tools/templates/reftest_worker_grid.html
@@ -2,29 +2,28 @@
 <!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
 <meta charset="UTF-8">
 <html class="reftest-wait">
+<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
 <link rel="match" href="{{ reference_file }}">
 {% if fuzzy %}<meta name=fuzzy content="{{ fuzzy }}">
 {% endif %}
 {% if timeout %}<meta name="timeout" content="{{ timeout }}">
 {% endif %}
 <title>Canvas test: {{ name }}</title>
-<h1 style="font-size: 20px;">{{ name }}</h1>
+<h1>{{ name }}</h1>
 <p class="desc">{{ desc }}</p>
 {% if notes %}<p class="notes">{{ notes }}{% endif %}
 <script>pending_tests = {{ variants | length }};</script>
 
-<div style="display: grid; grid-gap: 4px;
-            grid-template-columns: repeat({{ grid_width }}, max-content);
-            font-size: 13px; text-align: center;">
+<div class="grid-container" style="--grid-width: {{ grid_width }}">
 {% for variant in variants %}
 <span>
   {% for variant_name in variant.grid_variant_names %}
   <div>{{ variant_name }}</div>
   {% endfor %}
-  <canvas id="canvas{{ variant.id
+  <canvas class="grid-cell-content" id="canvas{{ variant.id
       }}" width="{{ variant.size[0]
       }}" height="{{ variant.size[1]
-      }}" style="outline: 1px solid"{{ variant.canvas }}>
+      }}"{{ variant.canvas }}>
     <p class="fallback">FAIL (fallback content)</p>
   </canvas>
   <script id="myWorker{{ variant.id }}" type="text/worker">
diff --git a/tests/wpt/tests/html/canvas/tools/yaml-new/color_space.yaml b/tests/wpt/tests/html/canvas/tools/yaml-new/color_space.yaml
index 56f6d01d308..0582f495347 100644
--- a/tests/wpt/tests/html/canvas/tools/yaml-new/color_space.yaml
+++ b/tests/wpt/tests/html/canvas/tools/yaml-new/color_space.yaml
@@ -9,7 +9,7 @@
     ctx.fillStyle = color_style;
     ctx.fillRect(0, 0, 10, 10);
 
-    var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3", storageFormat: "uint8"}).data;
+    var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3"}).data;
     @assert pixel.length === pixel_expected.length;
     assert_approx_equals(pixel[0], pixel_expected[0], 2);
     assert_approx_equals(pixel[1], pixel_expected[1], 2);
@@ -26,7 +26,7 @@
     ctx.fillStyle = color_style;
     ctx.fillRect(0, 0, 10, 10);
 
-    var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data;
+    var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb"}).data;
     @assert pixel.length === pixel_expected.length;
     assert_approx_equals(pixel[0], pixel_expected[0], 2);
     assert_approx_equals(pixel[1], pixel_expected[1], 2);
diff --git a/tests/wpt/tests/html/canvas/tools/yaml-new/color_type.yaml b/tests/wpt/tests/html/canvas/tools/yaml-new/color_type.yaml
new file mode 100644
index 00000000000..58d7038af82
--- /dev/null
+++ b/tests/wpt/tests/html/canvas/tools/yaml-new/color_type.yaml
@@ -0,0 +1,93 @@
+- name: 2d.color.type.u8srgb.to.u8p3.to.u8srgb
+  desc: test display-p3 unorm8 canvas not storing 8-bit srgb data accurately
+  attributes: '{colorType: "unorm8", colorSpace: "display-p3"}'
+  code: |
+    // Consider the color in sRGB:
+    //   (5,250,128)/255
+    // In Display P3 this is:
+    //   (0.4504003868394956, 0.9659537930632748, 0.5523945982276097)
+    // Quantized to 8-bit, this is:
+    //   (115, 246, 141)/255
+    // Converted back to sRGB this is:
+    //   (8.909609662725, 249.672568247041, 128.228541784731)/255
+    // Quantized to 8-bit, this is:
+    //   (9, 250, 128)
+    var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                              1, 1, {colorSpace: "srgb"});
+    ctx.putImageData(input, 0, 0);
+    var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"srgb"});
+    const kEpsilon = 2;
+    assert_approx_equals(readback.data[0], 9, kEpsilon);
+    assert_approx_equals(readback.data[1], 250, kEpsilon);
+    assert_approx_equals(readback.data[2], 128, kEpsilon);
+
+- name: 2d.color.type.u8srgb.to.f16p3.to.u8srgb
+  desc: test display-p3 float16 canvas storing 8-bit srgb data accurately
+  attributes: '{colorType: "float16", colorSpace: "display-p3"}'
+  code: |
+    // Consider the color in sRGB:
+    //   (5,250,128)/255
+    // In Display P3 this is:
+    //   (0.450400386839, 0.9659537931, 0.55239459823)
+    // Quantized to float16, that should evaluate to:
+    //   (0x3735, 0x3BBA, 0x386B)
+    //   (0.450439453125, 0.9658203125, 0.55224609375)
+    // Converted back to sRGB this is:
+    //   (5.342920953809, 249.965067892273, 127.959124250169)/255
+    // Quantized to 8-bit, this is:
+    //   (5, 250, 128)
+    var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                              1, 1, {colorSpace: "srgb"});
+    ctx.putImageData(input, 0, 0);
+    var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"srgb"});
+    const kEpsilon = 2;
+    assert_approx_equals(readback.data[0], 5, kEpsilon);
+    assert_approx_equals(readback.data[1], 250, kEpsilon);
+    assert_approx_equals(readback.data[2], 128, kEpsilon);
+
+- name: 2d.color.type.u8p3.to.u8srgb.to.u8p3
+  desc: test srgb unorm8 canvas storing 8-bit display-p3 data accurately
+  attributes: '{colorType: "unorm8", colorSpace: "srgb"}'
+  code: |
+    // Consider the color in Display P3:
+    //   (5,250,128)/255
+    // In sRGB this is:
+    //   (-0.4990661502955996, 0.9982902153915844, 0.43901323244980783)
+    // Quantized to 8-bit, this is:
+    //   (0, 255, 112)/255
+    // Converted back to Display P3 this is:
+    //   (116.892405498713, 251.242468747889, 129.109129531237)/255
+    // Quantized to 8-bit, this is:
+    //   (116, 251, 129)
+    var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                              1, 1, {colorSpace: "display-p3"});
+    ctx.putImageData(input, 0, 0);
+    var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"display-p3"});
+    const kEpsilon = 2;
+    assert_approx_equals(readback.data[0], 116, kEpsilon);
+    assert_approx_equals(readback.data[1], 251, kEpsilon);
+    assert_approx_equals(readback.data[2], 129, kEpsilon);
+
+- name: 2d.color.type.u8p3.to.f16srgb.to.u8p3
+  desc: test srgb float16 canvas storing 8-bit display-p3 data accurately
+  attributes: '{colorType: "float16", colorSpace: "srgb"}'
+  code: |
+    // Consider the color in Display P3:
+    //   (5,250,128)/255
+    // In sRGB this is:
+    //   (-0.4990661502955996, 0.9982902153915844, 0.43901323244980783)
+    // Quantized to float16, this is:
+    //   (0xB7FC, 0x3BFC, 0x3706)
+    //   (-0.49902344,         0.9980469,          0.43896484)
+    // Converted back to Display P3 this is:
+    //   (4.783888129523, 249.938708036787, 127.979725000698)/255
+    // Quantized to 8-bit, this is:
+    //   (5, 250, 128)
+    var input = new ImageData(new Uint8ClampedArray([5, 250, 128, 255]),
+                              1, 1, {colorSpace: "display-p3"});
+    ctx.putImageData(input, 0, 0);
+    var readback = ctx.getImageData(0, 0, 1, 1, {colorSpace:"display-p3"});
+    const kEpsilon = 2;
+    assert_approx_equals(readback.data[0], 5, kEpsilon);
+    assert_approx_equals(readback.data[1], 250, kEpsilon);
+    assert_approx_equals(readback.data[2], 128, kEpsilon);
diff --git a/tests/wpt/tests/html/rendering/replaced-elements/the-option-element/option-label-whitespace-ref.html b/tests/wpt/tests/html/rendering/replaced-elements/the-option-element/option-label-whitespace-ref.html
new file mode 100644
index 00000000000..442e3479fbb
--- /dev/null
+++ b/tests/wpt/tests/html/rendering/replaced-elements/the-option-element/option-label-whitespace-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<select multiple>
+  <option>no label attribute</option>
+  <option>empty label attribute</option>
+  <option></option>
+</select>
+<br>
+
+<select>
+  <option>empty label attribute</option>
+</select>
+<br>
+
+<select>
+  <option></option>
+</select>
diff --git a/tests/wpt/tests/html/rendering/replaced-elements/the-option-element/option-label-whitespace.html b/tests/wpt/tests/html/rendering/replaced-elements/the-option-element/option-label-whitespace.html
new file mode 100644
index 00000000000..185d3ec1f49
--- /dev/null
+++ b/tests/wpt/tests/html/rendering/replaced-elements/the-option-element/option-label-whitespace.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/whatwg/html/issues/10955">
+<link rel=match href="option-label-whitespace-ref.html">
+
+<select multiple>
+  <option>no label attribute</option>
+  <option label="">empty label attribute</option>
+  <option label="  ">whitespace label attribute</option>
+</select>
+<br>
+
+<select>
+  <option label="">empty label attribute</option>
+</select>
+<br>
+
+<select>
+  <option label="  ">whitespace label attribute</option>
+</select>
diff --git a/tests/wpt/tests/html/semantics/embedded-content/the-video-element/video-transparent-controls-ref.html b/tests/wpt/tests/html/semantics/embedded-content/the-video-element/video-transparent-controls-ref.html
new file mode 100644
index 00000000000..4664cbfe2fd
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/embedded-content/the-video-element/video-transparent-controls-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<title>A .transparent ancestor should not affect video controls (ref)</title>
+<link rel=help href="crbug.com/396173457">
+<div>
+  <video controls>
+</div>
diff --git a/tests/wpt/tests/html/semantics/embedded-content/the-video-element/video-transparent-controls.html b/tests/wpt/tests/html/semantics/embedded-content/the-video-element/video-transparent-controls.html
new file mode 100644
index 00000000000..ede1f1da786
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/embedded-content/the-video-element/video-transparent-controls.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<title>A .transparent ancestor should not affect video controls</title>
+<link rel=help href="crbug.com/396173457">
+<link rel="match" href="video-transparent-controls-ref.html">
+<div class="transparent">
+  <video controls>
+</div>
diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-events.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-events.tentative.html
index a1f98bc0530..28abf1534c1 100644
--- a/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-events.tentative.html
+++ b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-events.tentative.html
@@ -40,7 +40,7 @@
     const option2 = wrapper.querySelector('.option2');
     const option3 = wrapper.querySelector('.option3');
     promise_test(async (t) => {
-      assert_false(select.matches(':open'));
+      assert_false(select.matches(':open'),'select should be closed at the start of the test');
       let eventList = [];
       function assert_events(expectedEvents,message) {
         message = message || "Mismatch";
@@ -60,8 +60,6 @@
       assert_events([
         'pointerdown on select at select', 'pointerdown on select at wrapper',
         'mousedown on select at select', 'mousedown on select at wrapper',
-        'focusin on select at select', 'focusin on select at wrapper',
-        'focusout on select at select', 'focusout on select at wrapper',
         'focusin on option1 at select', 'focusin on option1 at wrapper',
         'pointerup on select at select', 'pointerup on select at wrapper',
         'mouseup on select at select', 'mouseup on select at wrapper',
@@ -98,7 +96,7 @@
 
       // Press escape, no preventDefault
       await test_driver.send_keys(document.activeElement, keys.Escape);
-      assert_false(select.matches(':open'));
+      assert_false(select.matches(':open'),'select should be closed escape no preventDefault');
       assert_events([
         'keydown on option2 at select', 'keydown on option2 at wrapper',
         'focusout on option2 at select', 'focusout on option2 at wrapper',
@@ -126,7 +124,7 @@
 
       // Press enter to select an option, no preventDefault
       await test_driver.send_keys(document.activeElement, keys.Enter);
-      assert_false(select.matches(':open'));
+      assert_false(select.matches(':open'),'select should be closed enter no preventDefault');
       assert_equals(select.value,'two');
       assert_events([
         'keydown on option2 at select', 'keydown on option2 at wrapper',
@@ -144,13 +142,17 @@
       // Click on an option, with preventDefault
       wrapper.addEventListener('mouseup',(e) => e.preventDefault(),{once:true});
       assert_equals(select.selectedOptions[0].innerText,'two');
-      await test_driver.click(option1);
+      await (new test_driver.Actions()
+        .pointerMove(1, 1, {origin: option1})
+        .pointerDown()
+        .pointerUp())
+        .send();
       assert_true(select.matches(':open'),'click should be cancelled');
       assert_events([
         'pointerdown on option1 at select', 'pointerdown on option1 at wrapper',
         'mousedown on option1 at select', 'mousedown on option1 at wrapper',
         'focusout on option2 at select', 'focusout on option2 at wrapper',
-        'focusin on select at select', 'focusin on select at wrapper',
+        'focusin on option1 at select', 'focusin on option1 at wrapper',
         'pointerup on option1 at select', 'pointerup on option1 at wrapper',
         'mouseup on option1 at select', 'mouseup on option1 at wrapper',
         'click on option1 at select', 'click on option1 at wrapper'
@@ -158,8 +160,12 @@
 
       // Click on an option, no preventDefault
       assert_equals(select.selectedOptions[0].innerText,'two');
-      await test_driver.click(option1);
-      assert_false(select.matches(':open'));
+      await (new test_driver.Actions()
+        .pointerMove(1, 1, {origin: option1})
+        .pointerDown()
+        .pointerUp())
+        .send();
+      assert_false(select.matches(':open'),'select should be closed click option no preventDefault');
       assert_events([
         'pointerdown on option1 at select', 'pointerdown on option1 at wrapper',
         'mousedown on option1 at select', 'mousedown on option1 at wrapper',
@@ -167,6 +173,8 @@
         'mouseup on option1 at select', 'mouseup on option1 at wrapper',
         'input on select at select', 'input on select at wrapper',
         'change on select at select', 'change on select at wrapper',
+        'focusout on option1 at select', 'focusout on option1 at wrapper',
+        'focusin on select at select', 'focusin on select at wrapper',
         'click on option1 at select', 'click on option1 at wrapper'
       ],'click option, no preventDefault');
     },`Events, ${wrapper.dataset.description}`);
diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-initial-focus-display-animation.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-initial-focus-display-animation.tentative.html
new file mode 100644
index 00000000000..b02225bc8ac
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-initial-focus-display-animation.tentative.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+
+<select>
+  <option>option</option>
+</select>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+
+::picker(select) {
+  transition: display allow-discrete 1s, opacity 1s;
+}
+
+select:not(:open)::picker(select) {
+  opacity: 0;
+}
+</style>
+
+<script>
+const select = document.querySelector('select');
+const option = document.querySelector('option');
+promise_test(async () => {
+  await test_driver.click(select);
+  await new Promise(requestAnimationFrame);
+  await new Promise(requestAnimationFrame);
+  assert_equals(document.activeElement, option);
+}, 'Option initial focus should still work when a display animation is present.');
+</script>
diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-keyboard-behavior.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-keyboard-behavior.tentative.html
index f6722a70637..444a95e8528 100644
--- a/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-keyboard-behavior.tentative.html
+++ b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-keyboard-behavior.tentative.html
@@ -51,6 +51,7 @@ for (const id of ['defaultbutton', 'custombutton']) {
 
   async function closeListbox() {
     await test_driver.click(select);
+    select.focus();
     await new Promise(requestAnimationFrame);
   }
 
diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-listitems-crash.html b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-listitems-crash.html
new file mode 100644
index 00000000000..cdda243877f
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-listitems-crash.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class=test-wait>
+<link rel=help href="https://issues.chromium.org/issues/396475564">
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<script>
+const select = document.createElement('select');
+document.documentElement.appendChild(select);
+const div = document.createElement('div');
+select.appendChild(div);
+const optgroup = document.createElement('optgroup');
+div.appendChild(optgroup);
+
+(async () => {
+  await test_driver.bless();
+  document.querySelector('select').showPicker();
+  document.documentElement.classList.remove('test-wait');
+})();
+</script>
diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-parsing.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-parsing.tentative.html
index 780f2743f7c..cc6596b42fe 100644
--- a/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-parsing.tentative.html
+++ b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-parsing.tentative.html
@@ -85,8 +85,8 @@
 </select>
 
 <select class=test
-    data-description='Input tags should parse inside select instead of closing the select'
-    data-expect='<input>'>
+    data-description='Input tags should not parse inside select instead of closing the select'
+    data-expect=''>
     <input>
 </select>
 
diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-exit-animation.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-exit-animation.tentative.html
new file mode 100644
index 00000000000..c7acfaefe67
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-exit-animation.tentative.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://issues.chromium.org/issues/394133544">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<select>
+  <option>option</option>
+</select>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+
+
+select.animate::picker(select) {
+  transition-property: display, color/*, overlay*/;
+  transition-behavior: allow-discrete;
+  transition-duration: 100s;
+  transition-timing-function: steps(2, start);
+  color: white;
+}
+
+select.animate option {
+  transition-property: background-color;
+  transition-duration: 100s;
+  transition-timing-function: steps(2, start);
+  background-color: black;
+}
+
+::picker(select) {
+  color: white;
+}
+option {
+  background-color: black;
+}
+
+select.animate:not(:open)::picker(select) {
+  color: black;
+}
+select.animate:not(:open) option {
+  background-color: white;
+}
+</style>
+
+<script>
+const select = document.querySelector('select');
+const option = document.querySelector('option');
+promise_test(async () => {
+  await test_driver.click(select);
+  await new Promise(requestAnimationFrame);
+  select.classList.add('animate');
+  await new Promise(requestAnimationFrame);
+  await test_driver.click(select);
+  await new Promise(requestAnimationFrame);
+  await new Promise(requestAnimationFrame);
+
+  const style = getComputedStyle(option);
+  assert_equals(style.color, 'rgb(128, 128, 128)',
+    'color should transition based on the exit animation.');
+  assert_equals(style.backgroundColor, 'rgb(128, 128, 128)',
+    'background-color should transition based on the exit animation.');
+}, 'Top layer exit animations should work on ::picker(select) just like a popover.');
+</script>
diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-interactive-element-focus.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-interactive-element-focus.tentative.html
new file mode 100644
index 00000000000..39fa568aa25
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-interactive-element-focus.tentative.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+
+<select>
+  <button>invoker</button>
+  <button id=button>button</button>
+  <option>option</option>
+</select>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+</style>
+
+<script>
+function click(element) {
+  return (new test_driver.Actions()
+    .pointerMove(1, 1, {origin: element})
+    .pointerDown()
+    .pointerUp())
+    .send();
+}
+
+promise_test(async () => {
+  const select = document.querySelector('select');
+  const button = document.getElementById('button');
+  const input = document.createElement('input');
+  select.appendChild(input);
+
+  await click(select);
+  assert_true(select.matches(':open'),
+    'select should open after being clicked.');
+
+  await click(button);
+  assert_true(select.matches(':open'),
+    'select should stay open after clicking button in picker.');
+  assert_equals(document.activeElement, button, 'button');
+
+  await click(input);
+  assert_true(select.matches(':open'),
+    'select should stay open after clicking input in picker.');
+  assert_equals(document.activeElement, input, 'input');
+}, 'Clicking interactive elements inside the select picker should focus them.');
+</script>
diff --git a/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-starting-style.tentative.html b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-starting-style.tentative.html
new file mode 100644
index 00000000000..c653016875a
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/forms/the-select-element/customizable-select/select-picker-starting-style.tentative.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://issues.chromium.org/issues/394133544">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<select>
+  <option>option</option>
+</select>
+
+<style>
+select, ::picker(select) {
+  appearance: base-select;
+}
+
+::picker(select) {
+  color: white;
+}
+
+.animate::picker(select) {
+  transition: color 100s steps(2, start);
+}
+
+@starting-style {
+  .animate::picker(select) {
+    color: black;
+  }
+}
+</style>
+
+<script>
+const select = document.querySelector('select');
+const option = document.querySelector('option');
+promise_test(async () => {
+  await new Promise(requestAnimationFrame);
+  select.classList.add('animate');
+  await test_driver.click(select);
+  await new Promise(requestAnimationFrame);
+  await new Promise(requestAnimationFrame);
+
+  const style = getComputedStyle(option);
+  assert_equals(style.color, 'rgb(128, 128, 128)',
+    'color should transition based on @starting-style.');
+}, '@starting-style should work on ::picker(select) just like a popover.');
+</script>
diff --git a/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close-via-attribute.tentative.html b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close-via-attribute.tentative.html
index 4ccac5b31cf..fd4d0ba2a28 100644
--- a/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close-via-attribute.tentative.html
+++ b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-close-via-attribute.tentative.html
@@ -33,8 +33,8 @@ promise_test(async t => {
   await new Promise(resolve => t.step_timeout(resolve, 0));
   await new Promise(requestAnimationFrame);
 
-  assert_equals(document.activeElement, button,
-    'Previously focused element should be focused after waiting for a task.');
+  assert_not_equals(document.activeElement, button,
+    'Previously focused element should not be focused, even after waiting for a task.');
   assert_false(dialog.matches(':modal'),
     'The dialog should not match :modal after closing.');
   assert_false(cancelFired,
@@ -47,6 +47,9 @@ promise_test(async t => {
   await test_driver.click(button);
   assert_true(buttonFiredClick,
     'The page should not be inert or blocked after removing the open attribute.');
+  // Clean up
+  dialog.showModal();
+  dialog.close();
 }, 'Removing the open attribute from an open modal dialog should run the closing algorithm.');
 
 promise_test(async t => {
@@ -66,11 +69,14 @@ promise_test(async t => {
   await new Promise(resolve => t.step_timeout(resolve, 0));
   await new Promise(requestAnimationFrame);
 
-  assert_equals(document.activeElement, button,
-    'Previously focused element should be focused after waiting for a task.');
+  assert_not_equals(document.activeElement, button,
+    'Previously focused element should not be focused, even after waiting for a task.');
   assert_false(cancelFired,
     'The cancel event should not fire when removing the open attribute.');
   assert_true(closeFired,
     'The close event should be fired when removing the open attribute.');
+  // Clean up
+  dialog.show();
+  dialog.close();
 }, 'Removing the open attribute from an open non-modal dialog should fire a close event.');
 </script>
diff --git a/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-closedby-crash.html b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-closedby-crash.html
index d85f4e2c848..9c4fc11daec 100644
--- a/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-closedby-crash.html
+++ b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-closedby-crash.html
@@ -1,5 +1,10 @@
 <!DOCTYPE html>
+<link rel=author href="mailto:luke@warlow.dev">
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/#attr-dialog-closedby">
 
 <!-- This test passes if it does not crash. -->
 
 <dialog id="dialog" open closedby="closerequest">Dialog</dialog>
+<dialog id="dialog" open closedby="any">Dialog</dialog>
+<dialog id="dialog" open closedby="none">Dialog</dialog>
diff --git a/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-closedby-start-open.html b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-closedby-start-open.html
new file mode 100644
index 00000000000..52432ff1b2c
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-closedby-start-open.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<meta charset="utf-8">
+<meta name="timeout" content="long">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#dialog-light-dismiss">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="../../popovers/resources/popover-utils.js"></script>
+
+<dialog id=test1 open closedby="any"></dialog>
+
+<script>
+const ESC = '\uE00C';
+promise_test(async (t) => {
+  const dialog = document.querySelector('dialog#test1');
+  assert_true(dialog.open);
+  await new test_driver.send_keys(document.documentElement,ESC);
+  assert_false(dialog.open);
+  dialog.showModal();
+  assert_true(dialog.open);
+  await new test_driver.send_keys(document.documentElement,ESC);
+  assert_false(dialog.open);
+}, `Dialogs that start open and have closedby should still function`);
+</script>
+
+<dl>
+  <dt contenteditable></dt>
+  <dialog id=test2 open></dialog>
+</dl>
+
+<script>
+promise_test(async (t) => {
+  // This test case is pulled from `dialog-closewatcher-crash.html`.
+  const dialog = document.querySelector('dialog#test2');
+  document.querySelector('dl').addEventListener("focusin", () => {
+    dialog.showModal();
+  });
+  // This will trigger the focus-the-previous-element behavior, which will fire
+  // the `focusin` event.
+  dialog.open = false;
+  await new Promise(resolve => {
+    document.defaultView.requestIdleCallback(() => {
+      window.getSelection().addRange(document.createRange());
+      dialog.close();
+      resolve();
+    });
+  });
+  assert_true(dialog.open);
+  await new test_driver.send_keys(document.documentElement,ESC);
+  assert_false(dialog.open,'ESC should still work');
+}, `Opening and closing a dialog during the dialog focus fixup should still leave closedby functional`);
+</script>
diff --git a/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-open-add-closedby-crash.html b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-open-add-closedby-crash.html
index 028874d29ce..4255cf706f1 100644
--- a/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-open-add-closedby-crash.html
+++ b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-open-add-closedby-crash.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
+<link rel=author href="mailto:luke@warlow.dev">
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/#attr-dialog-closedby">
 
 <!-- This test passes if it does not crash. -->
 
 <dialog id="dialog" open>Dialog</dialog>
 
 <script>
-  window.onload = () => {
-      dialog.setAttribute('closedby', 'closerequest');
-  }
+window.onload = () => dialog.setAttribute('closedby', 'closerequest');
 </script>
diff --git a/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-requestclose-crash.html b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-requestclose-crash.html
index bfa400a7524..c4c4850a2d3 100644
--- a/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-requestclose-crash.html
+++ b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-requestclose-crash.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
+<link rel=author href="mailto:luke@warlow.dev">
+<link rel=author href="mailto:masonf@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/#attr-dialog-closedby">
 
 <!-- This test passes if it does not crash. -->
 
 <dialog id="dialog" open>Dialog</dialog>
 
 <script>
-    window.onload = () => {
-        dialog.requestClose();
-    }
+window.onload = () => dialog.requestClose();
 </script>
diff --git a/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-requestclose.html b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-requestclose.html
index 5cbad9c6519..3790926dda4 100644
--- a/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-requestclose.html
+++ b/tests/wpt/tests/html/semantics/interactive-elements/the-dialog-element/dialog-requestclose.html
@@ -144,4 +144,41 @@ async function setup(t,closedby) {
     }
   });
 });
+
+promise_test(async (t) => {
+  await setup(t);
+  dialog.open = true;
+  dialog.requestClose();
+  assert_false(dialog.open);
+},`requestClose basic behavior when dialog is open via attribute`);
+
+promise_test(async (t) => {
+  const signal = await setup(t);
+  let events = [];
+  dialog.addEventListener('cancel',() => events.push('cancel'),{signal});
+  dialog.addEventListener('close',() => events.push('close'),{signal});
+  dialog.open = true;
+  assert_array_equals(events,[]);
+  dialog.requestClose();
+  assert_false(dialog.open);
+  assert_array_equals(events,['cancel'],'close is scheduled');
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  assert_array_equals(events,['cancel','close']);
+},`requestClose fires cancel and close when dialog is open via attribute`);
+
+promise_test(async (t) => {
+  await setup(t);
+  dialog.open = true;
+  assert_equals(dialog.returnValue,'','Return value starts out empty');
+  const returnValue = 'The return value';
+  dialog.requestClose(returnValue);
+  assert_false(dialog.open);
+  assert_equals(dialog.returnValue,returnValue,'Return value should be set');
+  dialog.show();
+  dialog.close();
+  assert_equals(dialog.returnValue,returnValue,'Return value should not be changed by close()');
+  dialog.show();
+  dialog.close('another');
+  assert_equals(dialog.returnValue,'another','Return value changes via close(value)');
+},`requestClose(returnValue) passes along the return value when dialog is open via attribute`);
 </script>
diff --git a/tests/wpt/tests/html/semantics/popovers/button-type-popovertarget.html b/tests/wpt/tests/html/semantics/popovers/button-type-popovertarget.html
new file mode 100644
index 00000000000..c495a8d9115
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/popovers/button-type-popovertarget.html
@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:lwarlow@igalia.com">
+<link rel=help href="https://issues.chromium.org/issues/329118508">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id=mypopover popover=auto>popover</div>
+
+<iframe name=foo></iframe>
+<form id="form" target=foo action="about:blank">
+  <button id=reset-in-form type=reset popovertarget=mypopover>reset</button>
+  <button id=submit-in-form type=submit popovertarget=mypopover>submit</button>
+  <button id=button-in-form type=button popovertarget=mypopover>type=button</button>
+  <button id=invalid-in-form type=invalid popovertarget=mypopover>invalid</button>
+  <button id=missing-in-form popovertarget=mypopover>missing</button>
+</form>
+
+<button id=reset-attr-form type=reset popovertarget=mypopover form=form>reset</button>
+<button id=submit-attr-form type=submit popovertarget=mypopover form=form>submit</button>
+<button id=button-attr-form type=button popovertarget=mypopover form=form>type=button</button>
+<button id=invalid-attr-form type=invalid popovertarget=mypopover form=form>invalid</button>
+<button id=missing-attr-form popovertarget=mypopover form=form>missing</button>
+
+<button id=reset-outside-form type=reset popovertarget=mypopover>reset</button>
+<button id=submit-outside-form type=submit popovertarget=mypopover>submit</button>
+<button id=button-outside-form type=button popovertarget=mypopover>type=button</button>
+<button id=invalid-outside-form type=invalid popovertarget=mypopover>invalid</button>
+<button id=missing-outside-form popovertarget=mypopover>missing</button>
+
+<script>
+test((t) => {
+  let formReset = false;
+  function onReset(e) {
+    e.preventDefault();
+    formReset = true;
+  }
+  form.addEventListener('reset', onReset);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('reset', onReset);
+  });
+  document.getElementById('reset-in-form').click();
+  assert_true(formReset, 'type=reset should trigger form reset event');
+  assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
+}, 'Button type=reset in form should trigger form reset and toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('submit-in-form').click();
+  assert_true(formSubmit, 'type=submit should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
+}, 'Button type=submit in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-in-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'Button type=button in form should toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('invalid-in-form').click();
+  assert_true(formSubmit, 'type=invalid should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
+}, 'Button type=invalid in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('missing-in-form').click();
+  assert_true(formSubmit, 'missing type should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
+}, 'Button missing type in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  let formReset = false;
+  function onReset(e) {
+    e.preventDefault();
+    formReset = true;
+  }
+  form.addEventListener('reset', onReset);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('reset', onReset);
+  });
+  document.getElementById('reset-attr-form').click();
+  assert_true(formReset, 'type=reset should trigger form reset event');
+  assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
+}, 'Button type=reset with form attr should trigger form reset and toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('submit-attr-form').click();
+  assert_true(formSubmit, 'type=submit should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
+}, 'Button type=submit with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-attr-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'Button type=button with form attr should toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('invalid-attr-form').click();
+  assert_true(formSubmit, 'type=invalid should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
+}, 'Button type=invalid with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('missing-attr-form').click();
+  assert_true(formSubmit, 'missing type should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
+}, 'Button missing type with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('reset-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
+}, 'Button type=reset outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('submit-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=submit should toggle the popover');
+}, 'Button type=submit outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'Button type=button outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('invalid-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=invalid should toggle the popover');
+}, 'Button type=invalid outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('missing-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'missing type should toggle the popover');
+}, 'Button missing type outside form should toggle popover');
+</script>
diff --git a/tests/wpt/tests/html/semantics/popovers/button-type-reset-popovertarget.html b/tests/wpt/tests/html/semantics/popovers/button-type-reset-popovertarget.html
deleted file mode 100644
index 975eab0d66e..00000000000
--- a/tests/wpt/tests/html/semantics/popovers/button-type-reset-popovertarget.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<link rel=author href="mailto:jarhar@chromium.org">
-<link rel=help href="https://issues.chromium.org/issues/329118508">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-
-<div id=mypopover popover=auto>popover</div>
-
-<iframe name=foo></iframe>
-<form target=foo action="about:blank">
-  <button id=reset-in-form type=reset popovertarget=mypopover>reset</button>
-  <button id=submit-in-form type=submit popovertarget=mypopover>submit</button>
-  <button id=button-in-form type=button popovertarget=mypopover>type=button</button>
-</form>
-
-<button id=reset-outside-form type=reset popovertarget=mypopover>reset</button>
-<button id=submit-outside-form type=submit popovertarget=mypopover>submit</button>
-<button id=button-outside-form type=button popovertarget=mypopover>type=button</button>
-
-<script>
-test(() => {
-  const testButton = (id, expectedToToggle) => {
-    document.getElementById(id).click();
-    if (expectedToToggle) {
-      assert_true(mypopover.matches(':popover-open'),
-        `${id}: button should open the popover.`);
-    } else {
-      assert_false(mypopover.matches(':popover-open'),
-        `${id}: button should not open the popover.`);
-    }
-    if (mypopover.matches(':popover-open')) {
-      mypopover.hidePopover();
-    }
-  };
-
-  testButton('reset-in-form', false);
-  testButton('submit-in-form', false);
-  testButton('button-in-form', true);
-  testButton('reset-outside-form', true);
-  testButton('submit-outside-form', true);
-  testButton('button-outside-form', true);
-}, 'Button type=reset and type=submit should not run popover algorithms when in a form.');
-</script>
diff --git a/tests/wpt/tests/html/semantics/popovers/input-type-popovertarget.html b/tests/wpt/tests/html/semantics/popovers/input-type-popovertarget.html
new file mode 100644
index 00000000000..00e2e87e78e
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/popovers/input-type-popovertarget.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=author href="mailto:lwarlow@igalia.com">
+<link rel=help href="https://issues.chromium.org/issues/329118508">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id=mypopover popover=auto>popover</div>
+
+<iframe name=foo></iframe>
+<form id="form" target=foo action="about:blank">
+  <input id=reset-in-form type=reset popovertarget=mypopover value="reset">
+  <input id=submit-in-form type=submit popovertarget=mypopover value="submit">
+  <input id=button-in-form type=button popovertarget=mypopover value="type=button">
+  <input id=image-in-form type=image popovertarget=mypopover value="type=image">
+</form>
+
+<input id=reset-attr-form type=reset popovertarget=mypopover value="reset" form=form>
+<input id=submit-attr-form type=submit popovertarget=mypopover value="submit" form=form>
+<input id=button-attr-form type=button popovertarget=mypopover value="type=button" form=form>
+<input id=image-attr-form type=image popovertarget=mypopover value="type=image" form=form>
+
+<input id=reset-outside-form type=reset popovertarget=mypopover value="reset">
+<input id=submit-outside-form type=submit popovertarget=mypopover value="submit">
+<input id=button-outside-form type=button popovertarget=mypopover value="type=button">
+<input id=image-outside-form type=image popovertarget=mypopover value="type=image">
+
+<script>
+test((t) => {
+  let formReset = false;
+  function onReset(e) {
+    e.preventDefault();
+    formReset = true;
+  }
+  form.addEventListener('reset', onReset);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('reset', onReset);
+  });
+  document.getElementById('reset-in-form').click();
+  assert_true(formReset, 'type=reset should trigger form reset event');
+  assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
+}, 'input type=reset in form should trigger form reset and toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('submit-in-form').click();
+  assert_true(formSubmit, 'type=submit should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
+}, 'input type=submit in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-in-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'input type=button in form should toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('image-in-form').click();
+  assert_true(formSubmit, 'type=image should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=image should not toggle the popover');
+}, 'input type=image in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  let formReset = false;
+  function onReset(e) {
+    e.preventDefault();
+    formReset = true;
+  }
+  form.addEventListener('reset', onReset);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('reset', onReset);
+  });
+  document.getElementById('reset-attr-form').click();
+  assert_true(formReset, 'type=reset should trigger form reset event');
+  assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
+}, 'input type=reset with form attr should trigger form reset and toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('submit-attr-form').click();
+  assert_true(formSubmit, 'type=submit should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
+}, 'input type=submit with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-attr-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'input type=button with form attr should toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('image-attr-form').click();
+  assert_true(formSubmit, 'type=image should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=image should not toggle the popover');
+}, 'input type=image with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('reset-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
+}, 'input type=reset outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('submit-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=submit should toggle the popover');
+}, 'input type=submit outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'input type=button outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('image-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=image should toggle the popover');
+}, 'input type=image outside form should toggle popover');
+</script>
diff --git a/tests/wpt/tests/html/semantics/popovers/popover-focus-2.html b/tests/wpt/tests/html/semantics/popovers/popover-focus-2.html
index 552c8d8206b..5fc8e7adf98 100644
--- a/tests/wpt/tests/html/semantics/popovers/popover-focus-2.html
+++ b/tests/wpt/tests/html/semantics/popovers/popover-focus-2.html
@@ -173,3 +173,35 @@ promise_test(async t => {
   assert_equals(document.activeElement,otherElement,'focus does not move because it was not inside the popover');
 }, "Popover focus only returns to invoker when focus is within the popover");
 </script>
+
+<div id=no-focus-candidate>
+  <button popovertarget=no-focus-candidate-p tabindex="0">Toggle popover</button>
+  <div popover id=no-focus-candidate-p>
+    Popover with <button tabindex="0" popovertarget=no-focus-candidate-p2>focusable element</button>
+    <div popover id=no-focus-candidate-p2>Nested popover with <button tabindex="0">focusable element</button></div>
+  </div>
+</div>
+<script>
+promise_test(async t => {
+  const invoker = document.querySelector('#no-focus-candidate>button');
+  const popover = document.querySelector('#no-focus-candidate>[popover]');
+  const nestedPopover = document.querySelector('#no-focus-candidate>[popover]>[popover]');
+  invoker.focus(); // Make sure button is focused.
+  assert_equals(document.activeElement,invoker);
+  invoker.click(); // Activate the invoker
+  assert_true(popover.matches(':popover-open'), 'popover should be invoked by invoker');
+  assert_equals(document.activeElement,invoker, 'invoker should still be focused');
+  await sendTab();
+  assert_equals(document.activeElement,popover.querySelector('button'),'next up is the popover');
+  await sendEnter(); // Show nested popover
+  assert_true(nestedPopover.matches(':popover-open'), 'nested popover should be invoked by invoker');
+  await sendTab();
+  assert_equals(document.activeElement, nestedPopover.querySelector('button'), 'focus on the nested popover button');
+  popover.querySelector('button').disabled = true; // Make the invoker no longer a focus candidate.
+  await sendShiftTab();
+  assert_equals(document.activeElement, invoker, 'initial invoker should be focused, nested popover invoker is skipped since it is disabled');
+  nestedPopover.querySelector('button').focus();
+  await sendTab();
+  assert_equals(document.activeElement, document.body, 'no more focusable elements after the button');
+}, "Cases where the next focus candidate isn't in the direct parent scope");
+</script>
diff --git a/tests/wpt/tests/html/semantics/scripting-1/the-script-element/json-module/http-accept-header-checker.py b/tests/wpt/tests/html/semantics/scripting-1/the-script-element/json-module/http-accept-header-checker.py
new file mode 100644
index 00000000000..b7ecbb5f352
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/scripting-1/the-script-element/json-module/http-accept-header-checker.py
@@ -0,0 +1,6 @@
+def main(request, response):
+    accept = request.headers.get(b"accept", b"")
+    response_headers = [(b"Content-Type", b"application/json"),
+                        (b"Access-Control-Allow-Origin", b"*")]
+    return (200, response_headers,
+            b'{"accept": "' + accept + b'"}')
diff --git a/tests/wpt/tests/html/semantics/scripting-1/the-script-element/json-module/http-accept-header.sub.html b/tests/wpt/tests/html/semantics/scripting-1/the-script-element/json-module/http-accept-header.sub.html
new file mode 100644
index 00000000000..f29719d09a2
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/scripting-1/the-script-element/json-module/http-accept-header.sub.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>HTTP Accept header with JSON module requests</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+<body>
+<script type="module">
+  import json from "./http-accept-header-checker.py" with { type: "json"};
+  test(t => {
+    assert_equals(
+        json.accept, "application/json,*/*;q=0.5",
+        "The HTTP Accept header should be set to 'application/json' when statically importing a JSON module.");
+  }, "Static import of a JSON module should send a valid HTTP Accept header.");
+</script>
+
+<script type="module">
+promise_test(async () => {
+  const module = await import("./http-accept-header-checker.py", { with: { type: "json"} });
+  assert_equals(
+      module.default.accept, "application/json,*/*;q=0.5",
+      "The HTTP Accept header should be set to 'application/json' when dynamically importing a JSON module.");
+  }, "Dynamic import of a JSON module should send a valid HTTP Accept header.");
+</script>
+</body>
+</html>
diff --git a/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-event-dispatch.tentative.html b/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-event-dispatch.tentative.html
index 54216fdcdeb..be90823325b 100644
--- a/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-event-dispatch.tentative.html
+++ b/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-event-dispatch.tentative.html
@@ -195,8 +195,8 @@
     invokerbutton.setAttribute("form", "aform");
     invokerbutton.setAttribute("type", "reset");
     await clickOn(invokerbutton);
-    assert_false(called, "event was not called");
-  }, "event does NOT dispatch if button is form associated, with explicit type=reset");
+    assert_true(called, "event was called");
+  }, "event does dispatch if button is form associated, with explicit type=reset");
 
   promise_test(async function (t) {
     svgInvokee = document.createElementNS("http://www.w3.org/2000/svg", "svg");
diff --git a/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-type-behavior.tentative.html b/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-type-behavior.tentative.html
new file mode 100644
index 00000000000..f179ceb653f
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-type-behavior.tentative.html
@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:lwarlow@igalia.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id=mypopover popover=auto>popover</div>
+
+<iframe name=foo></iframe>
+<form id="form" target=foo action="about:blank">
+  <button id=reset-in-form type=reset commandfor=mypopover command=toggle-popover>reset</button>
+  <button id=submit-in-form type=submit commandfor=mypopover command=toggle-popover>submit</button>
+  <button id=button-in-form type=button commandfor=mypopover command=toggle-popover>type=button</button>
+  <button id=invalid-in-form type=invalid commandfor=mypopover command=toggle-popover>invalid</button>
+  <button id=missing-in-form commandfor=mypopover command=toggle-popover>missing</button>
+  <button id=missing-in-form-command-only command=toggle-popover>missing with command only</button>
+  <button id=missing-in-form-commandfor-only commandfor=mypopover >missing with commandfor only</button>
+</form>
+
+<button id=reset-attr-form type=reset commandfor=mypopover command=toggle-popover form=form>reset</button>
+<button id=submit-attr-form type=submit commandfor=mypopover command=toggle-popover form=form>submit</button>
+<button id=button-attr-form type=button commandfor=mypopover command=toggle-popover form=form>type=button</button>
+<button id=invalid-attr-form type=invalid commandfor=mypopover command=toggle-popover form=form>invalid</button>
+<button id=missing-attr-form commandfor=mypopover command=toggle-popover form=form>missing</button>
+<button id=missing-attr-form-command-only command=toggle-popover form=form>missing with command only</button>
+<button id=missing-attr-form-commandfor-only commandfor=mypopover form=form>missing with commandfor only</button>
+
+<button id=reset-outside-form type=reset commandfor=mypopover command=toggle-popover>reset</button>
+<button id=submit-outside-form type=submit commandfor=mypopover command=toggle-popover>submit</button>
+<button id=button-outside-form type=button commandfor=mypopover command=toggle-popover>type=button</button>
+<button id=invalid-outside-form type=invalid commandfor=mypopover command=toggle-popover>invalid</button>
+<button id=missing-outside-form commandfor=mypopover command=toggle-popover>missing</button>
+
+<script>
+test((t) => {
+  let formReset = false;
+  function onReset(e) {
+    e.preventDefault();
+    formReset = true;
+  }
+  form.addEventListener('reset', onReset);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('reset', onReset);
+  });
+  document.getElementById('reset-in-form').click();
+  assert_true(formReset, 'type=reset should trigger form reset event');
+  assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
+}, 'Button type=reset in form should trigger form reset and toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('submit-in-form').click();
+  assert_true(formSubmit, 'type=submit should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
+}, 'Button type=submit in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-in-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'Button type=button in form should not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('invalid-in-form').click();
+  assert_true(formSubmit, 'type=invalid should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
+}, 'Button type=invalid in form should trigger form submit and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('missing-in-form').click();
+  assert_false(formSubmit, 'missing type should not trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
+}, 'Button missing type in form should not trigger form submit and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('missing-in-form-command-only').click();
+  assert_false(formSubmit, 'missing type should not trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'missing type should not toggle the popover');
+}, 'Button missing type in form with only command should not trigger form submit and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('missing-in-form-commandfor-only').click();
+  assert_false(formSubmit, 'missing type should not trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'missing type should not toggle the popover');
+}, 'Button missing type in form with only commandfor should not trigger form submit and not toggle popover');
+
+test((t) => {
+  let formReset = false;
+  function onReset(e) {
+    e.preventDefault();
+    formReset = true;
+  }
+  form.addEventListener('reset', onReset);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('reset', onReset);
+  });
+  document.getElementById('reset-attr-form').click();
+  assert_true(formReset, 'type=reset should trigger form reset event');
+  assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
+}, 'Button type=reset with form attr should trigger form reset and toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('submit-attr-form').click();
+  assert_true(formSubmit, 'type=submit should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=submit should not toggle the popover');
+}, 'Button type=submit with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-attr-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'Button type=button with form attr should toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('invalid-attr-form').click();
+  assert_true(formSubmit, 'type=invalid should trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'type=invalid should not toggle the popover');
+}, 'Button type=invalid with form attr should trigger form submit and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('missing-attr-form-command-only').click();
+  assert_false(formSubmit, 'missing type should not trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'missing type should not toggle the popover');
+}, 'Button missing type with form attr and only command should not trigger form submit and not toggle popover');
+
+test((t) => {
+  let formSubmit = false;
+  function onSubmit(e) {
+    e.preventDefault();
+    formSubmit = true;
+  }
+  form.addEventListener('submit', onSubmit);
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+    form.removeEventListener('submit', onSubmit);
+  });
+  document.getElementById('missing-attr-form-commandfor-only').click();
+  assert_false(formSubmit, 'missing type should not trigger form submit event');
+  assert_false(mypopover.matches(':popover-open'), 'missing type should not toggle the popover');
+}, 'Button missing type with form attr and only commandfor should not trigger form submit and not toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('reset-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=reset should toggle the popover');
+}, 'Button type=reset outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('submit-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=submit should toggle the popover');
+}, 'Button type=submit outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('button-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=button should toggle the popover');
+}, 'Button type=button outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('invalid-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'type=invalid should toggle the popover');
+}, 'Button type=invalid outside form should toggle popover');
+
+test((t) => {
+  t.add_cleanup(() => {
+    mypopover.hidePopover();
+  });
+  document.getElementById('missing-outside-form').click();
+  assert_true(mypopover.matches(':popover-open'), 'missing type should toggle the popover');
+}, 'Button missing type outside form should toggle popover');
+</script>
diff --git a/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-type-reflection.tentative.html b/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-type-reflection.tentative.html
new file mode 100644
index 00000000000..972861486e8
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/button-type-reflection.tentative.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:lwarlow@igalia.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<iframe name=foo></iframe>
+<form id="form" target=foo action="about:blank">
+  <button id=reset-in-form type=reset commandfor=mypopover command=toggle-popover>reset</button>
+  <button id=submit-in-form type=submit commandfor=mypopover command=toggle-popover>submit</button>
+  <button id=button-in-form type=button commandfor=mypopover command=toggle-popover>type=button</button>
+  <button id=invalid-in-form type=invalid commandfor=mypopover command=toggle-popover>invalid</button>
+  <button id=missing-in-form commandfor=mypopover command=toggle-popover>missing</button>
+  <button id=missing-in-form-command-only command=toggle-popover>missing with command only</button>
+  <button id=missing-in-form-commandfor-only commandfor=mypopover >missing with commandfor only</button>
+</form>
+
+<button id=reset-attr-form type=reset commandfor=mypopover command=toggle-popover form=form>reset</button>
+<button id=submit-attr-form type=submit commandfor=mypopover command=toggle-popover form=form>submit</button>
+<button id=button-attr-form type=button commandfor=mypopover command=toggle-popover form=form>type=button</button>
+<button id=invalid-attr-form type=invalid commandfor=mypopover command=toggle-popover form=form>invalid</button>
+<button id=missing-attr-form commandfor=mypopover command=toggle-popover form=form>missing</button>
+<button id=missing-attr-form-command-only command=toggle-popover form=form>missing with command only</button>
+<button id=missing-attr-form-commandfor-only commandfor=mypopover form=form>missing with commandfor only</button>
+
+<button id=reset-outside-form type=reset commandfor=mypopover command=toggle-popover>reset</button>
+<button id=submit-outside-form type=submit commandfor=mypopover command=toggle-popover>submit</button>
+<button id=button-outside-form type=button commandfor=mypopover command=toggle-popover>type=button</button>
+<button id=invalid-outside-form type=invalid commandfor=mypopover command=toggle-popover>invalid</button>
+<button id=missing-outside-form commandfor=mypopover command=toggle-popover>missing</button>
+<button id=missing-outside-form-command-only command=toggle-popover>missing with command only</button>
+<button id=missing-outside-form-commandfor-only commandfor=mypopover>missing with commandfor only</button>
+
+<script>
+const data = {
+  'reset-in-form': 'reset',
+  'submit-in-form': 'submit',
+  'button-in-form': 'button',
+  'invalid-in-form': 'submit',
+  'missing-in-form': 'button',
+  'missing-in-form-command-only': 'button',
+  'missing-in-form-commandfor-only': 'button',
+  'reset-attr-form': 'reset',
+  'submit-attr-form': 'submit',
+  'button-attr-form': 'button',
+  'invalid-attr-form': 'submit',
+  'missing-attr-form': 'button',
+  'missing-attr-form-command-only': 'button',
+  'missing-attr-form-commandfor-only': 'button',
+  'reset-outside-form': 'reset',
+  'submit-outside-form': 'submit',
+  'button-outside-form': 'button',
+  'invalid-outside-form': 'submit',
+  'missing-outside-form': 'button',
+  'missing-outside-form-command-only': 'button',
+  'missing-outside-form-commandfor-only': 'button',
+};
+
+Object.entries(data).map(([id, expectedType]) => {
+  test(() => {
+    const button = document.getElementById(id);
+    assert_equals(button.type, expectedType, `type of ${id} should be ${expectedType}`);
+  }, `Button with id ${id} should reflect type correctly`);
+});
+</script>
diff --git a/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/command-reflection.tentative.html b/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/command-reflection.tentative.html
new file mode 100644
index 00000000000..cac07b732d7
--- /dev/null
+++ b/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/command-reflection.tentative.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<meta charset="utf-8" />
+<meta name="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" />
+<meta name="timeout" content="long" />
+<link rel="help" href="https://open-ui.org/components/invokers.explainer/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="resources/invoker-utils.js"></script>
+
+<div id="invokee"></div>
+<button id="invokerbutton" commandfor="invokee"></button>
+
+<script>
+  ['', 'show-modal', 'toggle-popover', 'hide-popover', 'show-popover', 'close', '--custom'].forEach(command => {
+    test(function (t) {
+      invokerbutton.command = command
+      assert_equals(invokerbutton.command, command, `invoker should reflect ${command} properly`);
+    }, `invoker should reflect ${command} properly`);
+  });
+  [
+    ['sHoW-MoDaL', 'show-modal'],
+    ['tOgGlE-pOpOvEr', 'toggle-popover'],
+    ['hIdE-pOpOvEr', 'hide-popover'],
+    ['sHoW-pOpOvEr', 'show-popover'],
+    ['ClOsE', 'close'],
+    ['--cUsToM', '--cUsToM'
+  ]].forEach(([cased, command]) => {
+    test(function (t) {
+      invokerbutton.command = cased
+        assert_equals(invokerbutton.command, command, `invoker should reflect odd cased ${cased} properly - as ${command}`);
+    }, `invoker should reflect odd cased ${cased} properly - as ${command}`);
+  });
+  ['invalid', 'show-invalid', 'foo-bar'].forEach(command => {
+    test(function (t) {
+      invokerbutton.command = command
+      assert_equals(invokerbutton.command, '', `invoker should reflect the invalid value "${command}" as the empty string`);
+    }, `invoker should reflect the invalid value "${command}" as the empty string`);
+  });
+</script>
diff --git a/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/interface.tentative.html b/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/interface.tentative.html
index 6821adf71fe..58f0b110c8b 100644
--- a/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/interface.tentative.html
+++ b/tests/wpt/tests/html/semantics/the-button-element/command-and-commandfor/interface.tentative.html
@@ -60,8 +60,8 @@
   test(function () {
     invoker.command = "fooBarBaz";
     assert_equals(invoker.getAttribute("command"), "fooBarBaz");
-    assert_equals(invoker.command, "fooBarBaz");
-  }, "command reflects same casing");
+    assert_equals(invoker.command, "");
+  }, "command reflects correctly for invalid");
 
   test(function () {
     invoker.command = "";
@@ -72,8 +72,8 @@
   test(function () {
     invoker.command = [1, 2, 3];
     assert_equals(invoker.getAttribute("command"), "1,2,3");
-    assert_equals(invoker.command, "1,2,3");
-  }, "command reflects tostring value");
+    assert_equals(invoker.command, "");
+  }, "command reflects correctly for invalid when array");
 
   test(function () {
     invoker.command = [];
@@ -83,6 +83,6 @@
 
   test(function () {
     invoker.command = {};
-    assert_equals(invoker.command, "[object Object]");
-  }, "command reflects tostring value 2");
+    assert_equals(invoker.command, "");
+  }, "command reflects correctly for invalid when object");
 </script>
diff --git a/tests/wpt/tests/interfaces/cssom-view.idl b/tests/wpt/tests/interfaces/cssom-view.idl
index f922bc81486..88abb078485 100644
--- a/tests/wpt/tests/interfaces/cssom-view.idl
+++ b/tests/wpt/tests/interfaces/cssom-view.idl
@@ -103,8 +103,11 @@ enum ScrollLogicalPosition { "start", "center", "end", "nearest" };
 dictionary ScrollIntoViewOptions : ScrollOptions {
   ScrollLogicalPosition block = "start";
   ScrollLogicalPosition inline = "nearest";
+  ScrollIntoViewContainer container = "all";
 };
 
+enum ScrollIntoViewContainer { "all", "nearest" };
+
 dictionary CheckVisibilityOptions {
     boolean checkOpacity = false;
     boolean checkVisibilityCSS = false;
diff --git a/tests/wpt/tests/interfaces/html.idl b/tests/wpt/tests/interfaces/html.idl
index 77e41b6eb9e..f10bb72e913 100644
--- a/tests/wpt/tests/interfaces/html.idl
+++ b/tests/wpt/tests/interfaces/html.idl
@@ -1305,12 +1305,15 @@ typedef (HTMLOrSVGImageElement or
 
 enum PredefinedColorSpace { "srgb", "display-p3" };
 
+enum CanvasColorType { "unorm8", "float16" };
+
 enum CanvasFillRule { "nonzero", "evenodd" };
 
 dictionary CanvasRenderingContext2DSettings {
   boolean alpha = true;
   boolean desynchronized = false;
   PredefinedColorSpace colorSpace = "srgb";
+  CanvasColorType colorType = "unorm8";
   boolean willReadFrequently = false;
 };
 
diff --git a/tests/wpt/tests/interfaces/media-capabilities.idl b/tests/wpt/tests/interfaces/media-capabilities.idl
index 94339b6d1dd..7bd8aca90c3 100644
--- a/tests/wpt/tests/interfaces/media-capabilities.idl
+++ b/tests/wpt/tests/interfaces/media-capabilities.idl
@@ -110,6 +110,8 @@ partial interface WorkerNavigator {
 
 [Exposed=(Window, Worker)]
 interface MediaCapabilities {
-  [NewObject] Promise<MediaCapabilitiesDecodingInfo> decodingInfo(MediaDecodingConfiguration configuration);
-  [NewObject] Promise<MediaCapabilitiesEncodingInfo> encodingInfo(MediaEncodingConfiguration configuration);
+  [NewObject] Promise<MediaCapabilitiesDecodingInfo> decodingInfo(
+      MediaDecodingConfiguration configuration);
+  [NewObject] Promise<MediaCapabilitiesEncodingInfo> encodingInfo(
+      MediaEncodingConfiguration configuration);
 };
diff --git a/tests/wpt/tests/interfaces/permissions-policy.idl b/tests/wpt/tests/interfaces/permissions-policy.idl
index 806d2eb80f6..b17304de8d0 100644
--- a/tests/wpt/tests/interfaces/permissions-policy.idl
+++ b/tests/wpt/tests/interfaces/permissions-policy.idl
@@ -28,4 +28,5 @@ interface PermissionsPolicyViolationReportBody : ReportBody {
   readonly attribute long? columnNumber;
   readonly attribute DOMString disposition;
   readonly attribute DOMString? allowAttribute;
+  readonly attribute DOMString? srcAttribute;
 };
diff --git a/tests/wpt/tests/interfaces/speech-api.idl b/tests/wpt/tests/interfaces/speech-api.idl
index e4ca6df5c43..025f9424f01 100644
--- a/tests/wpt/tests/interfaces/speech-api.idl
+++ b/tests/wpt/tests/interfaces/speech-api.idl
@@ -8,7 +8,6 @@ interface SpeechRecognition : EventTarget {
     constructor();
 
     // recognition parameters
-    attribute SpeechGrammarList grammars;
     attribute DOMString lang;
     attribute boolean continuous;
     attribute boolean interimResults;
@@ -44,7 +43,6 @@ enum SpeechRecognitionErrorCode {
     "network",
     "not-allowed",
     "service-not-allowed",
-    "bad-grammar",
     "language-not-supported"
 };
 
@@ -101,25 +99,6 @@ dictionary SpeechRecognitionEventInit : EventInit {
     required SpeechRecognitionResultList results;
 };
 
-// The object representing a speech grammar
-[Exposed=Window]
-interface SpeechGrammar {
-    attribute DOMString src;
-    attribute float weight;
-};
-
-// The object representing a speech grammar collection
-[Exposed=Window]
-interface SpeechGrammarList {
-    constructor();
-    readonly attribute unsigned long length;
-    getter SpeechGrammar item(unsigned long index);
-    undefined addFromURI(DOMString src,
-                    optional float weight = 1.0);
-    undefined addFromString(DOMString string,
-                    optional float weight = 1.0);
-};
-
 [Exposed=Window]
 interface SpeechSynthesis : EventTarget {
     readonly attribute boolean pending;
diff --git a/tests/wpt/tests/interfaces/web-animations-2.idl b/tests/wpt/tests/interfaces/web-animations-2.idl
index ad047f5733a..c4a0c2532d9 100644
--- a/tests/wpt/tests/interfaces/web-animations-2.idl
+++ b/tests/wpt/tests/interfaces/web-animations-2.idl
@@ -119,11 +119,19 @@ interface AnimationTrigger {
   constructor(optional AnimationTriggerOptions options = {});
   attribute AnimationTimeline timeline;
   attribute AnimationTriggerType type;
+  attribute any rangeStart;
+  attribute any rangeEnd;
+  attribute any exitRangeStart;
+  attribute any exitRangeEnd;
 };
 
 dictionary AnimationTriggerOptions {
   AnimationTimeline? timeline;
   AnimationTriggerType? type = "once";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeStart = "normal";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) rangeEnd = "normal";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeStart = "auto";
+  (TimelineRangeOffset or CSSNumericValue or CSSKeywordValue or DOMString) exitRangeEnd = "auto";
 };
 
 enum AnimationTriggerType { "once", "repeat", "alternate", "state" };
diff --git a/tests/wpt/tests/lint.ignore b/tests/wpt/tests/lint.ignore
index 4dd0b96460c..a91efc0cf1a 100644
--- a/tests/wpt/tests/lint.ignore
+++ b/tests/wpt/tests/lint.ignore
@@ -101,6 +101,7 @@ TRAILING WHITESPACE: webvtt/parsing/file-parsing/support/*.vtt
 TRAILING WHITESPACE: webvtt/parsing/file-parsing/tests/support/*.vtt
 TRAILING WHITESPACE: xhr/resources/headers-some-are-empty.asis
 TRAILING WHITESPACE: content-security-policy/support/manifest.json
+TRAILING WHITESPACE: dom/xslt/resources/testu1LINE.xml
 
 # Intentional use of print statements
 PRINT STATEMENT: dom/nodes/Document-createElement-namespace-tests/generate.py
diff --git a/tests/wpt/tests/long-animation-frame/tentative/loaf-source-location.html b/tests/wpt/tests/long-animation-frame/tentative/loaf-source-location.html
index b5982ea339e..59c026db69a 100644
--- a/tests/wpt/tests/long-animation-frame/tentative/loaf-source-location.html
+++ b/tests/wpt/tests/long-animation-frame/tentative/loaf-source-location.html
@@ -20,6 +20,8 @@ promise_test(async t => {
   assert_equals(script.sourceURL, location.href);
   assert_equals(script.sourceFunctionName, "non_bound_function");
   assert_greater_than(script.sourceCharPosition, 0);
+  assert_greater_than(script.sourceLine, 0);
+  assert_greater_than(script.sourceColumn, 0);
 }, "Source location should be extracted from non-bound functions");
 
 promise_test(async t => {
@@ -32,6 +34,8 @@ promise_test(async t => {
   assert_equals(script.sourceURL, location.href);
   assert_equals(script.sourceFunctionName, "my_bound_function");
   assert_greater_than(script.sourceCharPosition, 0);
+  assert_greater_than(script.sourceLine, 0);
+  assert_greater_than(script.sourceColumn, 0);
 }, "Source location should be extracted from bound functions");
 
 promise_test(async t => {
diff --git a/tests/wpt/tests/media/speech.wav b/tests/wpt/tests/media/speech.wav
new file mode 100644
index 0000000000000000000000000000000000000000..fd5e2f78d5c4762664d78c3d2f958b61002e7649
GIT binary patch
literal 95310
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
UU)FAfG%a{O$y{Rut4Zwt0l+ap%K!iX

literal 0
HcmV?d00001

diff --git a/tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-explicit-commit.html b/tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-explicit-commit.html
new file mode 100644
index 00000000000..7fa35676087
--- /dev/null
+++ b/tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-explicit-commit.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+promise_test(async t => {
+  // Wait for after the load event so that the navigation doesn't get converted
+  // into a replace navigation.
+  await new Promise(resolve => window.onload = () => t.step_timeout(resolve, 0));
+
+  let start_length = navigation.entries().length;
+  let start_hash = location.hash;
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({
+      handler: t.step_func(() => {
+        assert_equals(location.hash, start_hash);
+        assert_equals(new URL(e.destination.url).hash, "#push");
+
+        e.redirect("#redirect1");
+        assert_equals(location.hash, start_hash);
+        assert_equals(new URL(e.destination.url).hash, "#redirect1");
+
+        e.redirect("#redirect2");
+        assert_equals(location.hash, start_hash);
+        assert_equals(new URL(e.destination.url).hash, "#redirect2");
+
+        e.commit();
+        assert_equals(location.hash, "#redirect2");
+        assert_equals(new URL(e.destination.url).hash, "#redirect2");
+      }),
+      commit: "after-transition"
+    });
+  });
+  await navigation.navigate("#push").committed;
+  assert_equals(location.hash, "#redirect2");
+  assert_equals(navigation.entries().length, start_length + 1);
+}, "redirect() then commit()");
+</script>
+</body>
diff --git a/tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-push.html b/tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-push.html
new file mode 100644
index 00000000000..79b46ea4750
--- /dev/null
+++ b/tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-push.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+promise_test(async t => {
+  // Wait for after the load event so that the navigation doesn't get converted
+  // into a replace navigation.
+  await new Promise(resolve => window.onload = () => t.step_timeout(resolve, 0));
+
+  let start_length = navigation.entries().length;
+  let start_hash = location.hash;
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({
+      handler: t.step_func(() => {
+        assert_equals(location.hash, start_hash);
+        assert_equals(new URL(e.destination.url).hash, "#push");
+
+        e.redirect("#redirect1");
+        assert_equals(location.hash, start_hash);
+        assert_equals(new URL(e.destination.url).hash, "#redirect1");
+
+        e.redirect("#redirect2");
+        assert_equals(location.hash, start_hash);
+        assert_equals(new URL(e.destination.url).hash, "#redirect2");
+      }),
+      commit: "after-transition"
+    });
+  });
+  await navigation.navigate("#push").committed;
+  assert_equals(location.hash, "#redirect2");
+  assert_equals(navigation.entries().length, start_length + 1);
+}, "redirect() push");
+</script>
+</body>
diff --git a/tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-replace.html b/tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-replace.html
new file mode 100644
index 00000000000..e31f5884a27
--- /dev/null
+++ b/tests/wpt/tests/navigation-api/commit-behavior/after-transition-redirect-replace.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+promise_test(async t => {
+  // Wait for after the load event so that the navigation doesn't get converted
+  // into a replace navigation.
+  await new Promise(resolve => window.onload = () => t.step_timeout(resolve, 0));
+
+  let start_length = navigation.entries().length;
+  let start_hash = location.hash;
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({
+      handler: t.step_func(() => {
+        assert_equals(location.hash, start_hash);
+        assert_equals(new URL(e.destination.url).hash, "#replace");
+
+        e.redirect("#redirect1");
+        assert_equals(location.hash, start_hash);
+        assert_equals(new URL(e.destination.url).hash, "#redirect1");
+
+        e.redirect("#redirect2");
+        assert_equals(location.hash, start_hash);
+        assert_equals(new URL(e.destination.url).hash, "#redirect2");
+      }),
+      commit: "after-transition"
+    });
+  });
+  await navigation.navigate("#replace", { history: "replace" }).committed;
+  assert_equals(location.hash, "#redirect2");
+  assert_equals(navigation.entries().length, start_length);
+}, "redirect() replace");
+</script>
+</body>
diff --git a/tests/wpt/tests/navigation-api/commit-behavior/redirect-throws.html b/tests/wpt/tests/navigation-api/commit-behavior/redirect-throws.html
new file mode 100644
index 00000000000..4bb6f966071
--- /dev/null
+++ b/tests/wpt/tests/navigation-api/commit-behavior/redirect-throws.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+promise_test(async t => {
+  navigation.onnavigate = t.step_func(e => {
+    assert_throws_dom("InvalidStateError", () => e.redirect("#"));
+  });
+  await navigation.navigate("#").finished;
+}, "redirect() before intercept()");
+
+promise_test(async t => {
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({ handler: t.step_func(() => {
+      assert_throws_dom("InvalidStateError", () => e.redirect("#"));
+    }) });
+  });
+  await navigation.navigate("#").finished;
+}, "redirect() without commit behavior specified");
+
+promise_test(async t => {
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({
+      handler: t.step_func(() => {
+        assert_throws_dom("InvalidStateError", () => e.redirect("#"));
+      }),
+      commit: "immediate"
+    });
+  });
+  await navigation.navigate("#").finished;
+}, "redirect() with { commit: immediate }");
+
+promise_test(async t => {
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({ commit: "after-transition" });
+    assert_throws_dom("InvalidStateError", () => e.redirect("#"));
+  });
+  await navigation.navigate("#").finished;
+}, "redirect() during event dispatch");
+
+promise_test(async t => {
+  let navigate_event;
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({ commit: "after-transition" });
+    navigate_event = e;
+  });
+  await navigation.navigate("#").finished;
+  assert_throws_dom("InvalidStateError", () => navigate_event.redirect("#"));
+}, "redirect() after finish");
+
+promise_test(async t => {
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({
+      handler: t.step_func(() => {
+        e.commit();
+        assert_throws_dom("InvalidStateError", () => e.redirect("#"));
+      }),
+      commit: "after-transition"
+    });
+  });
+  await navigation.navigate("#").finished;
+}, "redirect() after commit()");
+
+promise_test(async t => {
+  // We need to grab an NavigationDestination to construct the event.
+  navigation.onnavigate = t.step_func(e => {
+    const event = new NavigateEvent("navigate", {
+      destination: e.destination,
+      signal: (new AbortController()).signal
+    });
+
+    assert_throws_dom("SecurityError", () => event.redirect("#"));
+  });
+  await navigation.navigate("#").finished;
+}, "redirect() on synthetic NavigateEvent");
+
+promise_test(async t => {
+  let i = document.createElement("iframe");
+  i.src = "about:blank";
+  document.body.appendChild(i);
+  i.contentWindow.navigation.onnavigate = t.step_func(e => {
+    e.intercept({
+      handler: t.step_func(() => {
+        let iframe_constructor = i.contentWindow.DOMException;
+        i.remove();
+        assert_throws_dom("InvalidStateError", iframe_constructor, () => e.redirect("#"));
+      }),
+      commit: "after-transition"
+    });
+  });
+  i.contentWindow.navigation.navigate("#");
+}, "redirect() in detached iframe");
+
+promise_test(async t => {
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({ handler: t.step_func(() => {
+      assert_throws_dom("SyntaxError", () => e.redirect("https://example.com\u0000mozilla.org"));
+    }),
+    commit: "after-transition" });
+  });
+  await navigation.navigate("#").finished;
+}, "redirect() to invalid url");
+
+promise_test(async t => {
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({ handler: t.step_func(() => {
+      assert_throws_dom("SecurityError", () => e.redirect("https://example.com"));
+    }),
+    commit: "after-transition" });
+  });
+  await navigation.navigate("#").finished;
+}, "redirect() to cross-origin url");
+
+promise_test(async t => {
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({ handler: t.step_func(() => {
+      assert_throws_dom("InvalidStateError", () => e.redirect("#"));
+    }),
+    commit: "after-transition" });
+  });
+  await navigation.reload().finished;
+}, "redirect() reload");
+
+promise_test(async t => {
+  // Wait for after the load event so that the navigation doesn't get converted
+  // into a replace navigation.
+  await new Promise(resolve => window.onload = () => t.step_timeout(resolve, 0));
+
+  await navigation.navigate("#forward").finished;
+
+  navigation.onnavigate = t.step_func(e => {
+    e.intercept({ handler: t.step_func(() => {
+      assert_throws_dom("InvalidStateError", () => e.redirect("#"));
+    }),
+    commit: "after-transition" });
+  });
+  await navigation.back().finished;
+}, "redirect() traverse");
+</script>
+</body>
diff --git a/tests/wpt/tests/navigation-api/ordering-and-transition/navigate-commit-after-transition-intercept-with-redirect.html b/tests/wpt/tests/navigation-api/ordering-and-transition/navigate-commit-after-transition-intercept-with-redirect.html
new file mode 100644
index 00000000000..1d7c47b5e73
--- /dev/null
+++ b/tests/wpt/tests/navigation-api/ordering-and-transition/navigate-commit-after-transition-intercept-with-redirect.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<meta name="variant" content="?no-currententrychange">
+<meta name="variant" content="?currententrychange">
+
+<script type="module">
+import { Recorder, hasVariant } from "./resources/helpers.mjs";
+
+promise_test(async t => {
+  // Wait for after the load event so that the navigation doesn't get converted
+  // into a replace navigation.
+  await new Promise(resolve => window.onload = () => t.step_timeout(resolve, 0));
+
+  const from = navigation.currentEntry;
+
+  const recorder = new Recorder({
+    skipCurrentChange: !hasVariant("currententrychange"),
+    finalExpectedEvent: "transition.finished fulfilled"
+  });
+
+  recorder.setUpNavigationAPIListeners();
+
+  navigation.addEventListener("navigate", e => {
+    e.intercept({ commit: "after-transition",
+                  async handler() {
+                    recorder.record("handler start");
+                    await new Promise(r => t.step_timeout(r, 0));
+                    recorder.record("handler async step 1a");
+                    e.redirect("#2");
+                    recorder.record("handler async step 1b");
+                    await new Promise(r => t.step_timeout(r, 0));
+                    recorder.record("handler async step 2a");
+                    e.commit();
+                    recorder.record("handler async step 2b");
+                    await new Promise(r => t.step_timeout(r, 0));
+                    recorder.record("handler async step 3");
+                  }
+                });
+  });
+
+  const result = navigation.navigate("#1");
+  recorder.setUpResultListeners(result);
+
+  Promise.resolve().then(() => recorder.record("promise microtask"));
+
+  await recorder.readyToAssert;
+
+  recorder.assert([
+    /* event name, location.hash value, navigation.transition properties */
+    ["navigate", "", null],
+    ["handler start", "", { from, navigationType: "push" }],
+    ["promise microtask", "", { from, navigationType: "push" }],
+    ["handler async step 1a", "", { from, navigationType: "push" }],
+    ["handler async step 1b", "", { from, navigationType: "push" }],
+    ["handler async step 2a", "", { from, navigationType: "push" }],
+    ["currententrychange", "#2", { from, navigationType: "push" }],
+    ["handler async step 2b", "#2", { from, navigationType: "push" }],
+    ["committed fulfilled", "#2", { from, navigationType: "push" }],
+    ["handler async step 3", "#2", { from, navigationType: "push" }],
+    ["navigatesuccess", "#2", { from, navigationType: "push" }],
+    ["finished fulfilled", "#2", null],
+    ["transition.finished fulfilled", "#2", null],
+  ]);
+}, "event and promise ordering for same-document navigation.navigate() intercepted by intercept() with { commit: 'after-transition' } and a redirect()");
+</script>
diff --git a/tests/wpt/tests/permissions-policy/reporting/camera-potential-report-only.https.html b/tests/wpt/tests/permissions-policy/reporting/camera-potential-report-only.https.html
index 9305f072559..e3b459390c7 100644
--- a/tests/wpt/tests/permissions-policy/reporting/camera-potential-report-only.https.html
+++ b/tests/wpt/tests/permissions-policy/reporting/camera-potential-report-only.https.html
@@ -14,6 +14,8 @@ var check_report_format = (reports, observer) => {
   assert_equals(report.url, document.location.href);
   assert_equals(report.body.featureId, "camera");
   assert_equals(report.body.disposition, "report");
+  assert_equals(report.body.allowAttribute, "camera");
+  assert_equals(report.body.srcAttribute, "/");
 };
 
 new ReportingObserver(t.step_func_done(check_report_format),
diff --git a/tests/wpt/tests/permissions-policy/reporting/camera-potential-reporting.https.html b/tests/wpt/tests/permissions-policy/reporting/camera-potential-reporting.https.html
index 7376f71db62..daaf1ea86a3 100644
--- a/tests/wpt/tests/permissions-policy/reporting/camera-potential-reporting.https.html
+++ b/tests/wpt/tests/permissions-policy/reporting/camera-potential-reporting.https.html
@@ -14,6 +14,8 @@ var check_report_format = (reports, observer) => {
   assert_equals(report.url, document.location.href);
   assert_equals(report.body.featureId, "camera");
   assert_equals(report.body.disposition, "enforce");
+  assert_equals(report.body.allowAttribute, "camera");
+  assert_equals(report.body.srcAttribute, "/");
 };
 
 new ReportingObserver(t.step_func_done(check_report_format),
diff --git a/tests/wpt/tests/permissions-policy/resources/digital-credentials-get.html b/tests/wpt/tests/permissions-policy/resources/digital-credentials-get.html
index 543417f230a..12a450a1ae4 100644
--- a/tests/wpt/tests/permissions-policy/resources/digital-credentials-get.html
+++ b/tests/wpt/tests/permissions-policy/resources/digital-credentials-get.html
@@ -11,17 +11,22 @@
         }
         let enabled = undefined;
         try {
-            await navigator.credentials.get(makeGetOptions([]));
+            // Provide a complete correct request to test permission policy.
+            await navigator.credentials.get(makeGetOptions("openid4vp"));
+            // If no exception is thrown, then the feature is allowed by
+            // the permission policy.
+            enabled  = true;
         } catch (e) {
             switch (e.name) {
+                // Unless a "NotAllowedError" exception is thrown, we assume
+                // the feature is allowed by permission policy. This is
+                // suitable for the tests that are using this helper method.
                 case "NotAllowedError":
                     enabled = false;
                     break;
-                case "TypeError":
+                default:
                     enabled = true;
                     break;
-                default:
-                    throw e;
             }
         } finally {
             window.parent.postMessage({ type, enabled }, "*");
diff --git a/tests/wpt/tests/png/cicp-chunk.html b/tests/wpt/tests/png/cicp-chunk.html
index 8add5d602ea..8d0a1a41adc 100644
--- a/tests/wpt/tests/png/cicp-chunk.html
+++ b/tests/wpt/tests/png/cicp-chunk.html
@@ -20,7 +20,7 @@ img.onload = () => {
   _addTest(function(canvas, ctx) {
     ctx.drawImage(img, 0, 0);
 
-    var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data;
+    var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb"}).data;
 
     // The pixel values stored are (51 red, 102 green, 153 blue).
     // These numbers are chosen because 0.2 * 255 = 51.
diff --git a/tests/wpt/tests/png/trns-chunk.html b/tests/wpt/tests/png/trns-chunk.html
index 3a24753382b..249903aa6e3 100644
--- a/tests/wpt/tests/png/trns-chunk.html
+++ b/tests/wpt/tests/png/trns-chunk.html
@@ -20,7 +20,7 @@ img.onload = () => {
   _addTest(function(canvas, ctx) {
     ctx.drawImage(img, 0, 0);
 
-    var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data;
+    var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb"}).data;
 
     const pixel_expected = [255, 0, 0, 0];
     const epsilon = 2;
diff --git a/tests/wpt/tests/preload/preload-csp.sub.html b/tests/wpt/tests/preload/preload-csp.sub.html
index 524844df2e0..a1b57b78b41 100644
--- a/tests/wpt/tests/preload/preload-csp.sub.html
+++ b/tests/wpt/tests/preload/preload-csp.sub.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; font-src 'none'; style-src 'none'; img-src 'none'; media-src 'none'; connect-src 'none'">
+<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'; font-src 'none'; style-src 'none'; img-src 'none'; media-src 'none';">
 <title>Makes sure that preload requests respect CSP</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
diff --git a/tests/wpt/tests/sanitizer-api/sethtml-tree-construction.sub.dat b/tests/wpt/tests/sanitizer-api/sethtml-tree-construction.sub.dat
index c5c30f61313..c4bb74e9693 100644
--- a/tests/wpt/tests/sanitizer-api/sethtml-tree-construction.sub.dat
+++ b/tests/wpt/tests/sanitizer-api/sethtml-tree-construction.sub.dat
@@ -586,3 +586,46 @@ test<div>p</div>tt<p>div</p><test>test</test>
 | <div>
 |   <b>
 
+#data
+<template><div>Hello</div></template>
+#config
+{}
+#document
+| <template>
+|   content
+|     <div>
+|       "Hello"
+
+#data
+<template><div>Hello</div></template>
+#config
+{ "elements": ["div"]}
+#document
+
+#data
+<template><div>Hello</div></template>
+#config
+{ "elements": ["template"]}
+#document
+| <template>
+|   content
+
+#data
+<template><div>Hello</div></template>
+#config
+{ "elements": ["div", "template"]}
+#document
+| <template>
+|   content
+|     <div>
+|       "Hello"
+
+#data
+<template><div>Hello</div></template>
+#config
+{ "elements": ["template"], "replaceWithChildrenElements": ["div"]}
+#document
+| <template>
+|   content
+|     "Hello"
+
diff --git a/tests/wpt/tests/sanitizer-api/support/html5lib-testcase-support.js b/tests/wpt/tests/sanitizer-api/support/html5lib-testcase-support.js
index fbfe81a1780..4d07af87f86 100644
--- a/tests/wpt/tests/sanitizer-api/support/html5lib-testcase-support.js
+++ b/tests/wpt/tests/sanitizer-api/support/html5lib-testcase-support.js
@@ -206,11 +206,13 @@ function assert_subtree_equals(node1, node2) {
     current1 = tree1.nextNode();
     current2 = tree2.nextNode();
 
+    if (!current1) break;
+
     // Conceptually, we only want to check whether a.isEqualNode(b). But that
     // yields terrible error messages ("expected true but got false"). With
     // this being a test suite and all, let's invest a bit of effort into nice
     // error messages.
-    if (current1 && !current1.isEqualNode(current2)) {
+    if (!current1.isEqualNode(current2)) {
       let breadcrumbs = "";
       let current = current1;
       while (current) {
@@ -222,7 +224,13 @@ function assert_subtree_equals(node1, node2) {
       assert_true(current1.isEqualNode(current2),
           `${current1}.isEqual(${current2}) fails. Path: ${breadcrumbs}.`);
     }
-   } while (current1);
+
+    // NodeIterator does not recurse into template contents. So we need to do
+    // this manually.
+    if (is_html_template(current1) && is_html_template(current2)) {
+      assert_subtree_equals(current1.content, current2.content);
+    }
+  } while (current1);
 
   // Ensure that both iterators have come to an end.
   assert_false(!!current2, "Additional nodes at the of node2.");
diff --git a/tests/wpt/tests/screen-capture/tentative/getdisplaymedia-captured-surface-resolution.https.html b/tests/wpt/tests/screen-capture/tentative/getdisplaymedia-captured-surface-resolution.https.html
new file mode 100644
index 00000000000..00a5c9bec83
--- /dev/null
+++ b/tests/wpt/tests/screen-capture/tentative/getdisplaymedia-captured-surface-resolution.https.html
@@ -0,0 +1,176 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>getDisplayMedia CapturedurfaceResolution</title>
+<meta name="timeout" content="long">
+<button id="button">User gesture</button>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/webrtc/RTCPeerConnection-helper.js"></script>
+<video id="display"></video>
+<script>
+  'use strict';
+
+  const stopTracks = stream => stream.getTracks().forEach(track => track.stop());
+
+  async function getDisplayMedia(constraints) {
+    const p = new Promise(r => button.onclick = r);
+    await test_driver.click(button);
+    await p;
+    return navigator.mediaDevices.getDisplayMedia(constraints);
+  }
+
+  promise_test(async t => {
+    var video = document.createElement("video");
+    const stream = await getDisplayMedia({ displaySurface: "monitor" });
+    await test_driver.set_permission({ name: 'window-management' }, 'granted');
+    const screenDetails = await window.getScreenDetails();
+    video.srcObject = stream;
+    await video.play();
+
+    const onFrame = (now, metadata) => {
+      const track = video.srcObject.getVideoTracks()[0];
+      assert_not_equals(video.srcObject, null);
+      let settings = track.getSettings();
+      assert_greater_than(settings.physicalWidth, 0);
+      assert_greater_than(settings.physicalHeight, 0);
+      assert_equals(settings.physicalWidth / screenDetails.screens[0].devicePixelRatio, settings.logicalWidth);
+      assert_equals(settings.physicalHeight / screenDetails.screens[0].devicePixelRatio, settings.logicalHeight);
+    };
+    video.requestVideoFrameCallback(onFrame);
+  }, "getDisplayMedia() and resolution for captured surface type monitor");
+
+  promise_test(async t => {
+    var video = document.createElement("video");
+    const stream = await getDisplayMedia({ displaySurface: "window" });
+    await test_driver.set_permission({ name: 'window-management' }, 'granted');
+    const screenDetails = await window.getScreenDetails();
+    video.srcObject = stream;
+    await video.play();
+
+    const onFrame = (now, metadata) => {
+      const track = video.srcObject.getVideoTracks()[0];
+      assert_not_equals(video.srcObject, null);
+      let settings = track.getSettings();
+      assert_greater_than(settings.physicalWidth, 0);
+      assert_greater_than(settings.physicalHeight, 0);
+      assert_equals(settings.physicalWidth / screenDetails.screens[0].devicePixelRatio, settings.logicalWidth);
+      assert_equals(settings.physicalHeight / screenDetails.screens[0].devicePixelRatio, settings.logicalHeight);
+    };
+    video.requestVideoFrameCallback(onFrame);
+
+  }, "getDisplayMedia() and resolution for captured surface type window");
+
+  promise_test(async t => {
+    var video = document.createElement("video");
+    const stream = await getDisplayMedia({ displaySurface: "browser" });
+    video.srcObject = stream;
+    await video.play();
+
+    const onFrame = (now, metadata) => {
+      const track = video.srcObject.getVideoTracks()[0];
+      assert_not_equals(video.srcObject, null);
+      let settings = track.getSettings();
+      assert_greater_than(settings.physicalWidth, 0);
+      assert_greater_than(settings.physicalHeight, 0);
+      assert_equals(settings.physicalWidth / window.devicePixelRatio, settings.logicalWidth);
+      assert_equals(settings.physicalHeight / window.devicePixelRatio, settings.logicalHeight);
+    };
+    video.requestVideoFrameCallback(onFrame);
+
+  }, "getDisplayMedia() and resolution for captured surface type browser");
+
+  promise_test(async t => {
+    var video = document.createElement("video");
+    const stream = await getDisplayMedia({ displaySurface: "monitor" });
+    await test_driver.set_permission({ name: 'window-management' }, 'granted');
+    const screenDetails = await window.getScreenDetails();
+    video.srcObject = stream;
+    await video.play();
+
+    const onFrame = async (now, metadata) => {
+      const track = video.srcObject.getVideoTracks()[0];
+      assert_not_equals(video.srcObject, null);
+      let settings = track.getSettings();
+      let oldWidth = settings.width;
+      let oldHeight = settings.height;
+      let oldPhysicalWidth = settings.physicalWidth;
+      let oldPhysicalHeight = settings.physicalHeight;
+      assert_greater_than(settings.width, 0);
+      assert_greater_than(settings.height, 0);
+
+      await track.applyConstraints({ width: { max: oldWidth / 2 }, height: { max: oldHeight / 2 } });
+      settings = track.getSettings();
+      assert_less_than_equal(settings.width, oldWidth);
+      assert_less_than_equal(settings.height, oldHeight);
+      assert_equals(oldPhysicalWidth, settings.physicalWidth);
+      assert_equals(oldPhysicalHeight, settings.physicalHeight);
+      assert_equals(oldPhysicalWidth / screenDetails.screens[0].devicePixelRatio, settings.logicalWidth);
+      assert_equals(oldPhysicalHeight / screenDetails.screens[0].devicePixelRatio, settings.logicalHeight);
+    };
+    video.requestVideoFrameCallback(onFrame);
+  }, "applyConstraints() should not change the physical and logical size of captured surface type monitor");
+
+  promise_test(async t => {
+    var video = document.createElement("video");
+    const stream = await getDisplayMedia({ displaySurface: "window" });
+    await test_driver.set_permission({ name: 'window-management' }, 'granted');
+    const screenDetails = await window.getScreenDetails();
+    video.srcObject = stream;
+    await video.play();
+
+    const onFrame = async (now, metadata) => {
+      const track = video.srcObject.getVideoTracks()[0];
+      assert_not_equals(video.srcObject, null);
+      let settings = track.getSettings();
+      let oldWidth = settings.width;
+      let oldHeight = settings.height;
+      let oldPhysicalWidth = settings.physicalWidth;
+      let oldPhysicalHeight = settings.physicalHeight;
+      assert_greater_than(settings.width, 0);
+      assert_greater_than(settings.height, 0);
+
+      await track.applyConstraints({ width: { max: oldWidth / 2 }, height: { max: oldHeight / 2 } });
+      settings = track.getSettings();
+      assert_less_than_equal(settings.width, oldWidth);
+      assert_less_than_equal(settings.height, oldHeight);
+      assert_equals(oldPhysicalWidth, settings.physicalWidth);
+      assert_equals(oldPhysicalHeight, settings.physicalHeight);
+      assert_equals(oldPhysicalWidth / screenDetails.screens[0].devicePixelRatio, settings.logicalWidth);
+      assert_equals(oldPhysicalHeight / screenDetails.screens[0].devicePixelRatio, settings.logicalHeight);
+    };
+    video.requestVideoFrameCallback(onFrame);
+  }, "applyConstraints() should not change the physical and logical size of captured surface type window");
+
+  promise_test(async t => {
+    var video = document.createElement("video");
+    const stream = await getDisplayMedia({ displaySurface: "browser" });
+    video.srcObject = stream;
+    await video.play();
+
+    const onFrame = async (now, metadata) => {
+      const track = video.srcObject.getVideoTracks()[0];
+      assert_not_equals(video.srcObject, null);
+      let settings = track.getSettings();
+      let oldWidth = settings.width;
+      let oldHeight = settings.height;
+      let oldPhysicalWidth = settings.physicalWidth;
+      let oldPhysicalHeight = settings.physicalHeight;
+      assert_greater_than(settings.width, 0);
+      assert_greater_than(settings.height, 0);
+
+      await track.applyConstraints({ width: { max: oldWidth / 2 }, height: { max: oldHeight / 2 } });
+      settings = track.getSettings();
+      assert_less_than_equal(settings.width, oldWidth);
+      assert_less_than_equal(settings.height, oldHeight);
+      assert_equals(oldPhysicalWidth, settings.physicalWidth);
+      assert_equals(oldPhysicalHeight, settings.physicalHeight);
+      assert_equals(oldPhysicalWidth / window.devicePixelRatio, settings.logicalWidth);
+      assert_equals(oldPhysicalHeight / window.devicePixelRatio, settings.logicalHeight);
+    };
+    video.requestVideoFrameCallback(onFrame);
+  }, "applyConstraints() should not change the physical and logical size of captured surface type browser");
+
+
+</script>
\ No newline at end of file
diff --git a/tests/wpt/tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative.html b/tests/wpt/tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative.html
index d91dfe924b7..04d8a8a3cb2 100644
--- a/tests/wpt/tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative.html
+++ b/tests/wpt/tests/scroll-animations/css/animation-timeline-view-functional-notation.tentative.html
@@ -462,12 +462,16 @@ promise_test(async t => {
     div.style.animationTimeline = "view(), view(inline)";
   });
 
+  const assert_font_size_equals = (expected, description) => {
+      assert_approx_equals(parseFloat(getComputedStyle(div).fontSize), parseFloat(expected), 0.0001, 'At exit 0% inline');
+  };
+
   await scrollLeft(container, 0);
-  assert_equals(getComputedStyle(div).fontSize, '10px', 'At exit 0% inline');
+  assert_font_size_equals('10px', 'At exit 0% inline');
   await scrollLeft(container, 50);
-  assert_equals(getComputedStyle(div).fontSize, '15px', 'At exit 50% inline');
+  assert_font_size_equals('15px', 'At exit 50% inline');
   await scrollLeft(container, 100);
-  assert_equals(getComputedStyle(div).fontSize, '20px', 'At exit 100% inline');
+  assert_font_size_equals('20px', 'At exit 100% inline');
 
   await scrollLeft(container, 0);
 
@@ -480,7 +484,7 @@ promise_test(async t => {
 
   await scrollLeft(container, 50);
   await scrollTop(container, 50);
-  assert_equals(getComputedStyle(div).fontSize, '15px', 'At exit 50% inline');
+  assert_font_size_equals('15px', 'At exit 50% inline');
   assert_equals(getComputedStyle(div).opacity, '0.5', 'At exit 50% block');
 }, 'animation-timeline: view(), view(inline)');
 
diff --git a/tests/wpt/tests/scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html b/tests/wpt/tests/scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html
index 25ce1675533..0997908ae95 100644
--- a/tests/wpt/tests/scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html
+++ b/tests/wpt/tests/scroll-animations/css/progress-based-animation-animation-longhand-properties.tentative.html
@@ -30,6 +30,10 @@
 
 setup(assert_implements_animation_timeline);
 
+const assert_translate_equals = (target, expected, description) => {
+    assert_approx_equals(parseFloat(getComputedStyle(target).translate), parseFloat(expected), 0.0001, description);
+};
+
 const createTargetAndScroller = function(t) {
   let container = document.createElement('div');
   container.id = 'container';
@@ -77,7 +81,7 @@ promise_test(async t => {
   });
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '25px');
+  assert_translate_equals(target, '25px');
 }, 'animation-duration');
 
 promise_test(async t => {
@@ -86,7 +90,7 @@ promise_test(async t => {
   target.style.animationTimeline = 'scroll(nearest)';
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '100px');
+  assert_translate_equals(target, '100px');
 }, 'animation-duration: 0s');
 
 
@@ -102,17 +106,17 @@ promise_test(async t => {
   });
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '25px');
+  assert_translate_equals(target, '25px');
 
   // Let animation become 50% in the 1st iteration.
   target.style.animationIterationCount = '2';
   await waitForCSSScrollTimelineStyle();
-  assert_equals(getComputedStyle(target).translate, '50px');
+  assert_translate_equals(target, '50px');
 
   // Let animation become 0% in the 2nd iteration.
   target.style.animationIterationCount = '4';
   await waitForCSSScrollTimelineStyle();
-  assert_equals(getComputedStyle(target).translate, '0px');
+  assert_translate_equals(target, '0px');
 }, 'animation-iteration-count');
 
 promise_test(async t => {
@@ -124,7 +128,7 @@ promise_test(async t => {
   });
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '0px');
+  assert_translate_equals(target, '0px');
 }, 'animation-iteration-count: 0');
 
 promise_test(async t => {
@@ -136,7 +140,7 @@ promise_test(async t => {
   });
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '100px');
+  assert_translate_equals(target, '100px');
 }, 'animation-iteration-count: infinite');
 
 
@@ -152,7 +156,7 @@ promise_test(async t => {
   });
 
   await scrollTop(scroller, 25) // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '25px');
+  assert_translate_equals(target, '25px');
 }, 'animation-direction: normal');
 
 promise_test(async t => {
@@ -164,7 +168,7 @@ promise_test(async t => {
   });
 
   await scrollTop(scroller, 25); // 25% in the reversing direction.
-  assert_equals(getComputedStyle(target).translate, '75px');
+  assert_translate_equals(target, '75px');
 }, 'animation-direction: reverse');
 
 promise_test(async t => {
@@ -177,10 +181,10 @@ promise_test(async t => {
   });
 
   await scrollTop(scroller, 10); // 20% in the 1st iteration.
-  assert_equals(getComputedStyle(target).translate, '20px');
+  assert_translate_equals(target, '20px');
 
   await scrollTop(scroller, 60); // 20% in the 2nd iteration (reversing direction).
-  assert_equals(getComputedStyle(target).translate, '80px');
+  assert_translate_equals(target, '80px');
 }, 'animation-direction: alternate');
 
 promise_test(async t => {
@@ -193,10 +197,10 @@ promise_test(async t => {
   });
 
   await scrollTop(scroller, 10); // 20% in the 1st iteration (reversing direction).
-  assert_equals(getComputedStyle(target).translate, '80px');
+  assert_translate_equals(target, '80px');
 
   await scrollTop(scroller, 60); // 20% in the 2nd iteration.
-  assert_equals(getComputedStyle(target).translate, '20px');
+  assert_translate_equals(target, '20px');
 }, 'animation-direction: alternate-reverse');
 
 
@@ -212,7 +216,7 @@ promise_test(async t => {
   });
 
   await scrollTop(scroller, 25); // [0, 100].
-  assert_equals(getComputedStyle(target).translate, '25px');
+  assert_translate_equals(target, '25px');
 
   //    (start delay: 10s)    (duration: 10s)
   //         before              active
@@ -223,13 +227,13 @@ promise_test(async t => {
   // Let animation be in before phase.
   target.style.animationDelay = '10s';
   target.style.animationDelayStart = '10s'; // crbug.com/1375994
-  assert_equals(getComputedStyle(target).translate, 'none');
+  assert_translate_equals(target, 'none');
 
   await scrollTop(scroller, 50); // The animation enters active phase.
-  assert_equals(getComputedStyle(target).translate, '0px');
+  assert_translate_equals(target, '0px');
 
   await scrollTop(scroller, 75); // The ieration progress is 50%.
-  assert_equals(getComputedStyle(target).translate, '50px');
+  assert_translate_equals(target, '50px');
 }, 'animation-delay with a positive value');
 
 promise_test(async t => {
@@ -248,7 +252,7 @@ promise_test(async t => {
   target.style.animationDelay = '-5s';
   target.style.animationDelayStart = '-5s'; // crbug.com/1375994
   await waitForCSSScrollTimelineStyle();
-  assert_equals(getComputedStyle(target).translate, '60px');
+  assert_translate_equals(target, '60px');
 }, 'animation-delay with a negative value');
 
 
@@ -266,11 +270,11 @@ promise_test(async t => {
   });
 
   await scrollTop(scroller, 25);
-  assert_equals(getComputedStyle(target).translate, 'none');
+  assert_translate_equals(target, 'none');
 
   target.style.animationFillMode = 'backwards';
   await waitForCSSScrollTimelineStyle();
-  assert_equals(getComputedStyle(target).translate, '0px');
+  assert_translate_equals(target, '0px');
 }, 'animation-fill-mode');
 
 </script>
diff --git a/tests/wpt/tests/scroll-animations/css/pseudo-on-scroller-named-timeline.html b/tests/wpt/tests/scroll-animations/css/pseudo-on-scroller-named-timeline.html
new file mode 100644
index 00000000000..be93144a458
--- /dev/null
+++ b/tests/wpt/tests/scroll-animations/css/pseudo-on-scroller-named-timeline.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Animating pseduo-element on scroller using named timeline</title>
+</head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="./support/testcommon.js"></script>
+<script src="testcommon.js"></script>
+<style type="text/css">
+.scroller {
+  overflow: scroll;
+  width: 100px;
+  height: 100px;
+  margin: 1em;
+  outline: 1px solid;
+  scroll-timeline: --t1 y;
+}
+.pseudo::before {
+  content: "";
+  display: block;
+  width: 50px;
+  height: 50px;
+  background: red;
+  animation: bg linear;
+  animation-timeline: --t1;
+}
+
+.content {
+    width: 200px;
+  height: 200px;
+    background-color: yellow;
+}
+@keyframes bg {
+  from {
+    background: rgb(0, 255, 0);
+  }
+  to {
+    background: rgb(0, 0, 255);
+  }
+}
+</style>
+<body>
+  <div class="scroller pseudo">
+    <div class="content">
+    </div>
+
+  </div>
+  <div id="log"></div>
+</body>
+<script type="text/javascript">
+  'use strict';
+
+  promise_test(async t => {
+    await waitForCSSScrollTimelineStyle();
+    const scroller = document.querySelector('.scroller');
+    assert_equals(getComputedStyle(scroller, ':before').backgroundColor,
+                  'rgb(0, 255, 0)');
+  }, `named timeline on pseudo-element attaches to parent scroll container`);
+</script>
+</html>
diff --git a/tests/wpt/tests/scroll-animations/css/timeline-scope-computed.tentative.html b/tests/wpt/tests/scroll-animations/css/timeline-scope-computed.tentative.html
index 814933f7266..2e0a024a600 100644
--- a/tests/wpt/tests/scroll-animations/css/timeline-scope-computed.tentative.html
+++ b/tests/wpt/tests/scroll-animations/css/timeline-scope-computed.tentative.html
@@ -5,22 +5,22 @@
 <script src="/css/support/computed-testcommon.js"></script>
 </head>
 <style>
-  #outer { timeline-scope: foo; }
-  #target { timeline-scope: bar; }
+  #outer { timeline-scope: --foo; }
+  #target { timeline-scope: --bar; }
 </style>
 <div id="outer">
   <div id="target"></div>
 </div>
 <script>
 test_computed_value('timeline-scope', 'initial', 'none');
-test_computed_value('timeline-scope', 'inherit', 'foo');
+test_computed_value('timeline-scope', 'inherit', '--foo');
 test_computed_value('timeline-scope', 'unset', 'none');
 test_computed_value('timeline-scope', 'revert', 'none');
 test_computed_value('timeline-scope', 'none');
-test_computed_value('timeline-scope', 'test');
-test_computed_value('timeline-scope', 'foo, bar');
-test_computed_value('timeline-scope', 'bar, foo');
-test_computed_value('timeline-scope', 'a, b, c, D, e');
+test_computed_value('timeline-scope', '--test');
+test_computed_value('timeline-scope', '--foo, --bar');
+test_computed_value('timeline-scope', '--bar, --foo');
+test_computed_value('timeline-scope', '--a, --b, --c, --D, --e');
 
 test(() => {
   let style = getComputedStyle(document.getElementById('target'));
diff --git a/tests/wpt/tests/scroll-animations/css/timeline-scope-parsing.tentative.html b/tests/wpt/tests/scroll-animations/css/timeline-scope-parsing.tentative.html
index 2885cb758de..61bf6975a81 100644
--- a/tests/wpt/tests/scroll-animations/css/timeline-scope-parsing.tentative.html
+++ b/tests/wpt/tests/scroll-animations/css/timeline-scope-parsing.tentative.html
@@ -12,12 +12,12 @@ test_valid_value('timeline-scope', 'unset');
 test_valid_value('timeline-scope', 'revert');
 
 test_valid_value('timeline-scope', 'none');
-test_valid_value('timeline-scope', 'abc');
-test_valid_value('timeline-scope', '  abc', 'abc');
-test_valid_value('timeline-scope', 'aBc');
-test_valid_value('timeline-scope', 'foo, bar');
-test_valid_value('timeline-scope', 'bar, foo');
-test_valid_value('timeline-scope', 'auto');
+test_valid_value('timeline-scope', '--abc');
+test_valid_value('timeline-scope', '  --abc', '--abc');
+test_valid_value('timeline-scope', '--aBc');
+test_valid_value('timeline-scope', '--foo, --bar');
+test_valid_value('timeline-scope', '--bar, --foo');
+test_valid_value('timeline-scope', '--auto');
 
 test_invalid_value('timeline-scope', 'none, abc');
 test_invalid_value('timeline-scope', '10px');
@@ -25,5 +25,11 @@ test_invalid_value('timeline-scope', 'foo bar');
 test_invalid_value('timeline-scope', '"foo" "bar"');
 test_invalid_value('timeline-scope', 'rgb(1, 2, 3)');
 test_invalid_value('timeline-scope', '#fefefe');
+test_invalid_value('timeline-scope', 'abc');
+test_invalid_value('timeline-scope', '  abc', 'abc');
+test_invalid_value('timeline-scope', 'aBc');
+test_invalid_value('timeline-scope', 'foo, bar');
+test_invalid_value('timeline-scope', 'bar, foo');
+test_invalid_value('timeline-scope', 'auto');
 
 </script>
diff --git a/tests/wpt/tests/scroll-animations/css/view-timeline-animation.html b/tests/wpt/tests/scroll-animations/css/view-timeline-animation.html
index 1bf034a742f..af78b08439f 100644
--- a/tests/wpt/tests/scroll-animations/css/view-timeline-animation.html
+++ b/tests/wpt/tests/scroll-animations/css/view-timeline-animation.html
@@ -79,8 +79,12 @@
     assert_equals(getComputedStyle(target).zIndex, '50');
     await scrollTop(scroller, 200); // 100% (exit 100%)
     assert_equals(getComputedStyle(target).zIndex, '100');
+    await scrollTop(scroller, 201); // now over the 100% scroll offset, but "fill: forwards" lets the animation apply.
+    assert_equals(getComputedStyle(target).zIndex, '100');
     document.getAnimations()[0].effect.updateTiming( { fill: 'none' });
     assert_equals(getComputedStyle(target).zIndex, '-1');
+    await scrollTop(scroller, 200); // now back to the 100% scroll offset.
+    assert_equals(getComputedStyle(target).zIndex, '100');
   }, 'Default view-timeline');
 </script>
 
@@ -114,8 +118,12 @@
     assert_equals(getComputedStyle(target).zIndex, '50');
     await scrollLeft(scroller, 200); // 100% (exit 100%)
     assert_equals(getComputedStyle(target).zIndex, '100');
+    await scrollLeft(scroller, 201); // now over the 100% scroll offset, but "fill: forwards" lets the animation apply.
+    assert_equals(getComputedStyle(target).zIndex, '100');
     document.getAnimations()[0].effect.updateTiming( { fill: 'none' });
     assert_equals(getComputedStyle(target).zIndex, '-1');
+    await scrollLeft(scroller, 200); // now back to the 100% scroll offset.
+    assert_equals(getComputedStyle(target).zIndex, '100');
   }, 'Horizontal view-timeline');
 </script>
 
@@ -197,6 +205,9 @@
     await scrollTop(scroller, 200); // 100% (exit 100%)
     assert_equals(getComputedStyle(target_v).zIndex, '100');
     assert_equals(getComputedStyle(target_h).zIndex, '-1');
+    await scrollTop(scroller, 201); // now over the 100% scroll offset, but "fill: forwards" lets the animation apply.
+    assert_equals(getComputedStyle(target_v).zIndex, '100');
+    assert_equals(getComputedStyle(target_h).zIndex, '-1');
     document.getElementById('target_v').getAnimations()[0].
         effect.updateTiming({ fill: 'none' });
     assert_equals(getComputedStyle(target_v).zIndex, '-1');
@@ -215,9 +226,17 @@
     await scrollLeft(scroller, 200); // 100% (exit 100%)
     assert_equals(getComputedStyle(target_v).zIndex, '-1');
     assert_equals(getComputedStyle(target_h).zIndex, '100');
+    await scrollLeft(scroller, 201); // now over the 100% scroll offset, but "fill: forwards" lets the animation apply.
+    assert_equals(getComputedStyle(target_v).zIndex, '-1');
+    assert_equals(getComputedStyle(target_h).zIndex, '100');
     document.getElementById('target_h').getAnimations()[0].
         effect.updateTiming({ fill: 'none' });
     assert_equals(getComputedStyle(target_v).zIndex, '-1');
     assert_equals(getComputedStyle(target_h).zIndex, '-1');
+
+    await scrollTop(scroller, 200);  // now back to the 100% scroll offset.
+    await scrollLeft(scroller, 200); // now back to the 100% scroll offset.
+    assert_equals(getComputedStyle(target_v).zIndex, '100');
+    assert_equals(getComputedStyle(target_h).zIndex, '100');
   }, 'Multiple view-timelines on the same element');
 </script>
diff --git a/tests/wpt/tests/scroll-animations/css/view-timeline-lookup.html b/tests/wpt/tests/scroll-animations/css/view-timeline-lookup.html
index 067ac1fa969..aaef959d992 100644
--- a/tests/wpt/tests/scroll-animations/css/view-timeline-lookup.html
+++ b/tests/wpt/tests/scroll-animations/css/view-timeline-lookup.html
@@ -217,7 +217,7 @@
 <script>
   promise_test(async (t) => {
     await inflate(t, timeline_ancestor_closer_timeline_wins);
-    assert_equals(getComputedStyle(target).zIndex, 'auto');
+    assert_equals(getComputedStyle(target).zIndex, '0');
   }, 'timeline-scope on ancestor sibling, closer timeline wins');
 </script>
 
diff --git a/tests/wpt/tests/scroll-animations/css/view-timeline-pseudo-on-scroller.html b/tests/wpt/tests/scroll-animations/css/view-timeline-pseudo-on-scroller.html
new file mode 100644
index 00000000000..1cd0e021d2f
--- /dev/null
+++ b/tests/wpt/tests/scroll-animations/css/view-timeline-pseudo-on-scroller.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Animating pseduo-element on scroller</title>
+</head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="./support/testcommon.js"></script>
+<script src="testcommon.js"></script>
+<style type="text/css">
+.scroller {
+  overflow: scroll;
+  width: 100px;
+  height: 100px;
+  margin: 1em;
+  outline: 1px solid;
+}
+.pseudo::before {
+  content: "";
+  display: inline;
+  width: 100px;
+  height: 50px;
+  background: red;
+  animation: bg linear;
+  animation-timeline: view(inline);
+}
+
+.content {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+
+@keyframes bg {
+  from {
+    background: rgb(0, 255, 0);
+  }
+  to {
+    background: rgb(0, 0, 255);
+  }
+}
+</style>
+<body>
+  <div class="scroller pseudo">
+    <div class="content"></div>
+  </div>
+  <div id="log"></div>
+</body>
+<script type="text/javascript">
+  'use strict';
+
+  promise_test(async t => {
+    await waitForCSSScrollTimelineStyle();
+    const scroller = document.querySelector('.scroller');
+    assert_equals(getComputedStyle(scroller, ':before').backgroundColor,
+                  'rgb(0, 0, 255)');
+  }, `view() on pseudo-element attaches to parent scroll container`);
+</script>
+</html>
diff --git a/tests/wpt/tests/scroll-animations/view-timelines/intermediate-transform.html b/tests/wpt/tests/scroll-animations/view-timelines/intermediate-transform.html
index 8d332eaf264..24d1ea5c43f 100644
--- a/tests/wpt/tests/scroll-animations/view-timelines/intermediate-transform.html
+++ b/tests/wpt/tests/scroll-animations/view-timelines/intermediate-transform.html
@@ -49,7 +49,7 @@
     const anim = target.animate({ backgroundColor: ['green', 'red' ] },
                                 { timeline: timeline });
     await new Promise(requestAnimationFrame);
-    assert_px_equals(timeline.startOffset, 654, 'startOffset');
-    assert_px_equals(timeline.endOffset, 954, 'endOffset');
+    assert_px_equals(timeline.startOffset, 604, 'startOffset');
+    assert_px_equals(timeline.endOffset, 904, 'endOffset');
   });
 </script>
diff --git a/tests/wpt/tests/serial/serialPort_loopback-manual.https.html b/tests/wpt/tests/serial/serialPort_loopback-manual.https.html
index bf876b6610b..95dc2498d2a 100644
--- a/tests/wpt/tests/serial/serialPort_loopback-manual.https.html
+++ b/tests/wpt/tests/serial/serialPort_loopback-manual.https.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+<meta name="timeout" content="long">
 <html>
   <head>
     <meta charset="utf-8">
diff --git a/tests/wpt/tests/shadow-dom/HighlightRegistry-highlightsFromPoint.html b/tests/wpt/tests/shadow-dom/HighlightRegistry-highlightsFromPoint.html
new file mode 100644
index 00000000000..5244f923e34
--- /dev/null
+++ b/tests/wpt/tests/shadow-dom/HighlightRegistry-highlightsFromPoint.html
@@ -0,0 +1,150 @@
+<!doctype html>
+<body>
+<meta name="author" title="Fernando Fiori" href="mailto:ffiori@microsoft.com">
+<meta name="assert" content="HighlightRegistry.highlightsFromPoint returns the Highlights present at at a given point inside the shadow roots passed as argument.">
+<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/highlight/HighlightsFromPointsExplainer.md">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+::highlight(example-highlight) {
+    background-color: rgba(0, 255, 255, 0.5);
+}
+::highlight(example-highlight-2) {
+    background-color: rgba(255, 255, 0, 0.5);
+}
+body {
+    font-family: monospace;
+}
+</style>
+<span id="container"></span>
+<script>
+    test(() => {
+        assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(10, 10, {shadowRoots: [container]}); });
+        container.setHTMLUnsafe(`
+            <div id="host">
+                <template shadowrootmode=open></template>
+            </div>`);
+        const shadowRoot = host.shadowRoot;
+        assert_throws_js(TypeError, () => { CSS.highlights.highlightsFromPoint(10, 10, {shadowRoots: [shadowRoot, container]}); });
+    }, 'CSS.highlights.highlightsFromPoint() should throw when called with nodes that are not ShadowRoot objects in options.');
+
+    test(() => {
+        container.setHTMLUnsafe(`
+            <div id="host">
+                <template shadowrootmode=open>
+                    <span>0123456789</span>
+                </template>
+            </div>`);
+        const shadowRoot = host.shadowRoot;
+        const spanInShadowDOM = shadowRoot.querySelector("span");
+
+        let range = new Range();
+        range.setStart(spanInShadowDOM.childNodes[0], 2);
+        range.setEnd(spanInShadowDOM.childNodes[0], 10);
+        let range2 = new Range();
+        range2.setStart(spanInShadowDOM.childNodes[0], 5);
+        range2.setEnd(spanInShadowDOM.childNodes[0], 10);
+
+        // Set two Highlights in the shadow tree in this way: 01[234[56789]]
+        let highlight = new Highlight(range);
+        CSS.highlights.set("example-highlight", highlight);
+        let highlight2 = new Highlight(range2);
+        CSS.highlights.set("example-highlight-2", highlight2);
+
+        const spanBoundingRectangle = spanInShadowDOM.getBoundingClientRect();
+        const characterWidth = spanBoundingRectangle.width / spanInShadowDOM.textContent.length;
+
+        // Get x and y coordinates between '0' and '1'.
+        let x = spanBoundingRectangle.left + characterWidth;
+        let y = spanBoundingRectangle.top + spanBoundingRectangle.height / 2;
+        let highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});
+        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the coordinates provided point at no Highlights');
+
+        // Get x and y coordinates between '2' and '3'.
+        x = spanBoundingRectangle.left + 3 * characterWidth;
+        highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});
+        assert_equals(highlights.length, 1, 'CSS.highlights.highlightsFromPoint() returns exactly one Highlight when the given coordinates point at a Highlight under the shadow root provided');
+        assert_equals(highlights[0], highlight, 'CSS.highlights.highlightsFromPoint() returns the Highlight present at the given coordinates when it\'s under the shadow root provided');
+
+        highlights = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the coordinates provided point at one Highlight in the shadow DOM but shadowRoots provided is empty');
+
+        // Get x and y coordinates between '6' and '7'.
+        // Same priority for the Highlights, break tie by order of registration.
+        x = spanBoundingRectangle.left + 7 * characterWidth;
+        highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});
+        assert_equals(highlights.length, 2, 'CSS.highlights.highlightsFromPoint() returns exactly two Highlights when the coordinates provided point at two overlapping Highlights');
+        assert_equals(highlights[0], highlight2, 'CSS.highlights.highlightsFromPoint() returns first the Highlight registered last when both Highlights present at the point provided have the same priority');
+        assert_equals(highlights[1], highlight, 'CSS.highlights.highlightsFromPoint() returns last the Highlight registered first when both Highlights present at the point provided have the same priority');
+    }, 'CSS.highlights.highlightsFromPoint() returns Highlights present at a given point inside a shadow tree in the right order.');
+
+    test(() => {
+        container.setHTMLUnsafe(
+            `0123456789<div id=host>
+                <template shadowrootmode=open>
+                    <span>0123456789</span>
+                </template>
+            </div>0123456789`);
+
+        const host = document.querySelector("#host");
+        const shadowRoot = host.shadowRoot;
+        const spanInShadowDOM = shadowRoot.querySelector("span");
+
+        const spanBoundingRectangle = spanInShadowDOM.getBoundingClientRect();
+        const characterWidth = spanBoundingRectangle.width / spanInShadowDOM.textContent.length;
+        const characterHeight = spanBoundingRectangle.height;
+
+        let range = new Range();
+        range.setStart(container.childNodes[0], 0);
+        range.setEnd(container.childNodes[2], 5);
+
+        // Set a Highlight with a range like this one:
+        // [0123456789
+        //  0123456789
+        //  01234]56789
+        // But only the first and third lines are highlighted because the second line belongs on a shadow tree.
+        const highlight = new Highlight(range);
+        CSS.highlights.set("example-highlight", highlight);
+
+        // Get x and y coordinates between '0' and '1' in the first line.
+        let x = spanBoundingRectangle.left + characterWidth;
+        let y = container.getBoundingClientRect().top + characterHeight / 2.0;
+        let highlights = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlights.length, 1, 'CSS.highlights.highlightsFromPoint() returns one Highlight present at the coordinates provided');
+        assert_equals(highlights[0], highlight, 'CSS.highlights.highlightsFromPoint() returns the Highlight present at the given coordinates even when no shadowRoots are provided because it\'s outside the shadow DOM');
+
+        // Now move y to the second line (inside shadow DOM).
+        y += characterHeight;
+        highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});
+        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the given coordinates point at text under the shadow root provided even when there is a Highlight set with a Range that starts and ends in the regular DOM surrounding it, even when shadowRoots are provided');
+
+        highlights = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the given coordinates point at text under the shadow root provided even when there is a Highlight set with a Range that starts and ends in the regular DOM surrounding it');
+
+        // Now move y to the third line.
+        y += characterHeight;
+        highlights = CSS.highlights.highlightsFromPoint(x, y);
+        assert_equals(highlights.length, 1, 'CSS.highlights.highlightsFromPoint() returns one Highlight present at the coordinates provided');
+        assert_equals(highlights[0], highlight, 'CSS.highlights.highlightsFromPoint() returns the Highlight present at the given coordinates because it\'s outside of the shadow DOM');
+
+        // Set a Highlight with a range like this one:
+        // [0123456789
+        //  01234]56789
+        //  0123456789
+        // Here nothing is highlighted since the range starts in the light DOM and ends in the shadow DOM.
+        CSS.highlights.clear();
+        const staticRange = new StaticRange({startContainer: container.childNodes[0], startOffset: 0, endContainer: spanInShadowDOM.childNodes[0], endOffset: 5})
+        CSS.highlights.set("example-highlight", new Highlight(staticRange));
+
+        // Set x and y coordinates between '0' and '1' in the first line.
+        y = container.getBoundingClientRect().top + characterHeight / 2.0;
+        highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});
+        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the given coordinates point at text in the light DOM that is not highlighted even when there is a Highlight set with a StaticRange that starts in the light DOM and ends in the shadow DOM surrounding it');
+
+        // Now move y to the second line (inside shadow DOM).
+        y += characterHeight;
+        highlights = CSS.highlights.highlightsFromPoint(x, y, {shadowRoots: [shadowRoot]});
+        assert_equals(highlights.length, 0, 'CSS.highlights.highlightsFromPoint() returns no Highlights when the given coordinates point at text in the shadow DOM that is not highlighted even when there is a Highlight set with a StaticRange that starts in the light DOM and ends in the shadow DOM surrounding it');
+    }, 'CSS.highlights.highlightsFromPoint() doesn\'t return Highlights that are not painted at the given coordinates even when they fall inside the Highlights\' ranges');
+</script>
+</body>
diff --git a/tests/wpt/tests/shadow-dom/focus-navigation/reading-flow/tentative/flex-flow.html b/tests/wpt/tests/shadow-dom/focus-navigation/reading-flow/tentative/flex-flow.html
index e6998105608..a956ae476fa 100644
--- a/tests/wpt/tests/shadow-dom/focus-navigation/reading-flow/tentative/flex-flow.html
+++ b/tests/wpt/tests/shadow-dom/focus-navigation/reading-flow/tentative/flex-flow.html
@@ -17,6 +17,10 @@
     order: -1;
 }
 
+.wrapper button:nth-child(5) {
+  reading-order: -1;
+}
+
 .wrapper {
     display: flex;
     flex-wrap: wrap;
@@ -24,7 +28,7 @@
 }
 </style>
 
-<div class="test-case" data-expect="C1,A1,B1,D1,E1"
+<div class="test-case" data-expect="E1,C1,A1,B1,D1"
       data-description="Flex items in flexbox should follow flex-flow reading flow">
   <div class="wrapper" style="width: 200px">
     <button id="A1">Item A</button>
@@ -35,7 +39,7 @@
   </div>
 </div>
 
-<div class="test-case" data-expect="C2,A2,B2,D2,E2"
+<div class="test-case" data-expect="E2,C2,A2,B2,D2"
       data-description="Flex items in rtl flexbox should follow flex-flow reading flow">
   <div class="wrapper" style="width: 200px; direction: rtl">
     <button id="A2">Item A</button>
@@ -46,7 +50,7 @@
   </div>
 </div>
 
-<div class="test-case" data-expect="C3,A3,B3,D3,E3"
+<div class="test-case" data-expect="E3,C3,A3,B3,D3"
       data-description="Flex items in vertical-lr flexbox should follow flex-flow reading flow">
   <div class="wrapper" style="height: 200px; writing-mode: vertical-lr">
     <button id="A3">Item A</button>
diff --git a/tests/wpt/tests/shadow-dom/focus-navigation/reading-flow/tentative/grid-auto-flow-reading-order.html b/tests/wpt/tests/shadow-dom/focus-navigation/reading-flow/tentative/grid-auto-flow-reading-order.html
new file mode 100644
index 00000000000..66741122ef4
--- /dev/null
+++ b/tests/wpt/tests/shadow-dom/focus-navigation/reading-flow/tentative/grid-auto-flow-reading-order.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="timeout" content="long">
+<title>CSS Display: reading-order with value grid-auto-flow dense</title>
+<link rel="help" href="https://drafts.csswg.org/css-display-4/#reading-flow">
+<link rel="author" title="Di Zhang" href="mailto:dizhangg@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src='../../resources/shadow-dom.js'></script>
+<script src="../../resources/focus-utils.js"></script>
+
+<style>
+.wrapper {
+ display: grid;
+ grid-template-columns: repeat(3, 150px);
+ grid-auto-flow: dense;
+ reading-flow: grid-rows;
+}
+
+.top { reading-order: -1; }
+
+</style>
+
+<div class="test-case" data-expect="a4,a1,a2,a3,a5,a6"
+      data-description="Grid items should follow grid-rows reading flow, but let reading-order can move item's focus order to the top.">
+  <div class="wrapper">
+   <button id=a1>Item 1</button>
+   <button id=a2>Item 2</button>
+   <button id=a3>Item 3</button>
+   <button id=a4 class="top">Item 4</button>
+   <button id=a5>Item 5</button>
+   <button id=a6>Item 6</button>
+  </div>
+</div>
+
+<br>
+
+<div class="test-case" data-expect="b3,b5,b4,b6,b1,b2"
+      data-description="Grid items should follow reading flow, mix of reading-order and order values.">
+  <div class="wrapper">
+   <button id=b1 style="order: 2; reading-order: 2">order: 2 reading-order: 2</button>
+   <button id=b2 style="order: -1; reading-order: 6">order: -1; reading-order: 6</button>
+   <button id=b3 style="order: 1; reading-order: -1">order: 1; reading-order: -1</button>
+   <button id=b4 style="order: -2; reading-order: 2">order: -2; reading-order: 2</button>
+   <button id=b5 style="order: 0; reading-order: 0">order: 0; reading-order: 0</button>
+   <button id=b6 style="order: -1; reading-order: 2">order: -1; reading-order: 2</button>
+  </div>
+</div>
+
+
+<script>
+runFocusTestCases();
+</script>
diff --git a/tests/wpt/tests/shape-detection/detection-ImageDataUint16StorageFormat.https.window.js b/tests/wpt/tests/shape-detection/detection-ImageDataUint16StorageFormat.https.window.js
deleted file mode 100644
index 1afe087abf0..00000000000
--- a/tests/wpt/tests/shape-detection/detection-ImageDataUint16StorageFormat.https.window.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// META: script=/shape-detection/resources/shapedetection-helpers.js
-
-const imgUint16 = new ImageData(1024, 1024, {storageFormat: 'uint16'});
-
-// These tests verify that a Detector's detect() can process ImageData with
-// uint16 storage format.
-const imageDataTests = [
-  {
-    createDetector: () => {
-      return new FaceDetector();
-    },
-    mockTestName: 'FaceDetectionTest',
-    name:
-        'FaceDetector.detect() can process uint16 storage format ImageData'
-  },
-  {
-    createDetector: () => {
-      return new BarcodeDetector();
-    },
-    mockTestName: 'BarcodeDetectionTest',
-    name:
-        'BarcodeDetector.detect() can process uint16 storage format ImageData'
-  },
-  {
-    createDetector: () => {
-      return new TextDetector();
-    },
-    mockTestName: 'TextDetectionTest',
-    name:
-        'TextDetector.detect() can process uint16 storage format ImageData'
-  }
-];
-
-for (let imageDataTest of imageDataTests) {
-  detection_test(imageDataTest.mockTestName, async () => {
-    let detector = imageDataTest.createDetector();
-    await detector.detect(imgUint16);
-  }, imageDataTest.name);
-}
diff --git a/tests/wpt/tests/speculation-rules/WEB_FEATURES.yml b/tests/wpt/tests/speculation-rules/WEB_FEATURES.yml
new file mode 100644
index 00000000000..bfdb07c4e1e
--- /dev/null
+++ b/tests/wpt/tests/speculation-rules/WEB_FEATURES.yml
@@ -0,0 +1,3 @@
+features:
+- name: speculation-rules
+  files: "**"
diff --git a/tests/wpt/tests/speculation-rules/prerender/cancel-prerendering-after-clear-site-data-cache.https.html b/tests/wpt/tests/speculation-rules/prerender/cancel-prerendering-after-clear-site-data-cache.https.html
new file mode 100644
index 00000000000..cb6dc281d89
--- /dev/null
+++ b/tests/wpt/tests/speculation-rules/prerender/cancel-prerendering-after-clear-site-data-cache.https.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<title>clear-site-data-cache cancels prerenders</title>
+<meta name="timeout" content="long">
+<body>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/speculation-rules/resources/utils.js"></script>
+<script src="/speculation-rules/prerender/resources/utils.js"></script>
+<script src="/common/utils.js"></script>
+<script src="/common/get-host-info.sub.js"></script>
+<script src="/common/dispatcher/dispatcher.js"></script>
+<script src="/html/browsers/browsing-the-web/remote-context-helper/resources/remote-context-helper.js"></script>
+<script>
+setup(() => assertSpeculationRulesIsSupported());
+
+promise_test(async t => {
+
+  const rcHelper = new RemoteContextHelper();
+  const referrerRC = await rcHelper.addWindow({
+    origin: 'HTTPS_ORIGIN'
+  }, {
+    features: 'noopener'
+  });
+  const prerenderedRC = await addPrerenderRC(referrerRC, {
+    origin: 'HTTPS_REMOTE_ORIGIN',
+    headers: [
+      ['Supports-Loading-Mode', 'credentialed-prerender']
+    ]
+  });
+
+  // Open new window with url to clear cache data through Clear-Site-Data header.
+  // Ensure that the cache is cleared before the navigation.
+  const gotMessage = new Promise(resolve => {
+    window.addEventListener('message', e => {
+      resolve(e.data);
+    }, {
+      once: true
+    });
+  });
+  let cache_helper = "cache_helper=" + self.crypto.randomUUID() + "&";
+  new_window = window.open("../../clear-site-data/support/clear-site-data-cache.py?" + cache_helper + "response=single_html&cache&clear_first=all");
+  await gotMessage;
+
+  // Because Clear-Site-Header response header is sent, the existing prerender
+  // is expected to be canceled.
+  // And the navigation is expected to create another page instead of activation.
+  referrerRC.navigateTo(prerenderedRC.url);
+  assert_equals(await getActivationStart(prerenderedRC), 0);
+});
+</script>
+</body>
+</html>
diff --git a/tests/wpt/tests/speech-api/SpeechRecognition-availableOnDevice.https.html b/tests/wpt/tests/speech-api/SpeechRecognition-availableOnDevice.https.html
new file mode 100644
index 00000000000..5b395976b96
--- /dev/null
+++ b/tests/wpt/tests/speech-api/SpeechRecognition-availableOnDevice.https.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>SpeechRecognition availableOnDevice</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+promise_test(async (t) => {
+  const lang = "en-US";
+  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+  // Test that it returns a promise.
+  const resultPromise = SpeechRecognition.availableOnDevice(lang);
+  assert_true(
+    resultPromise instanceof Promise,
+    "availableOnDevice should return a Promise."
+  );
+
+  // Verify the resolved value is a boolean.
+  const result = await resultPromise;
+  assert_true(
+    typeof result === "boolean",
+    "The resolved value of the availableOnDevice promise should be a boolean."
+  );
+}, "SpeechRecognition.availableOnDevice resolves with a boolean value.");
+</script>
diff --git a/tests/wpt/tests/speech-api/SpeechRecognition-concurrentMediaStreamTrack-manual.https.html b/tests/wpt/tests/speech-api/SpeechRecognition-concurrentMediaStreamTrack-manual.https.html
new file mode 100644
index 00000000000..9da5cc63478
--- /dev/null
+++ b/tests/wpt/tests/speech-api/SpeechRecognition-concurrentMediaStreamTrack-manual.https.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<title>SpeechRecognition Concurrent MediaStreamTracks</title>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async function getAudioTrackFromFile(filePath) {
+    const audioContext = new AudioContext();
+    const response = await fetch(filePath);
+    const arrayBuffer = await response.arrayBuffer();
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    const source = audioContext.createBufferSource();
+    source.buffer = audioBuffer;
+
+    const destination = audioContext.createMediaStreamDestination();
+    source.connect(destination);
+    source.start();
+
+    return destination.stream.getAudioTracks()[0];
+}
+
+promise_test(async (t) => {
+    const lang = "en-US";
+    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+    // Create two SpeechRecognition instances
+    const speechRecognition1 = new SpeechRecognition();
+    speechRecognition1.mode = 'cloud-only';
+    speechRecognition1.lang = lang;
+    const speechRecognition2 = new SpeechRecognition();
+    speechRecognition2.mode = 'cloud-only';
+    speechRecognition2.lang = lang;
+
+    const audioTrack1 = await getAudioTrackFromFile("/media/speech.wav");
+    const audioTrack2 = await getAudioTrackFromFile("/media/speech.wav");
+
+    assert_true(audioTrack1 instanceof MediaStreamTrack, "Audio track 1 should be a valid MediaStreamTrack");
+    assert_true(audioTrack2 instanceof MediaStreamTrack, "Audio track 2 should be a valid MediaStreamTrack");
+
+    const recognitionPromise1 = new Promise((resolve) => {
+        speechRecognition1.onresult = (event) => {
+            const transcript = event.results[0][0].transcript;
+            resolve(transcript);
+        };
+    });
+
+    const recognitionPromise2 = new Promise((resolve) => {
+        speechRecognition2.onresult = (event) => {
+            const transcript = event.results[0][0].transcript;
+            resolve(transcript);
+        };
+    });
+
+    speechRecognition1.start(audioTrack1);
+    speechRecognition2.start(audioTrack2);
+
+    const transcript1 = await recognitionPromise1;
+    const transcript2 = await recognitionPromise2;
+
+    assert_equals(transcript1.toLowerCase(), "this is a sentence in a single segment", "Speech recognition 1 should correctly recognize speech");
+    assert_equals(transcript2.toLowerCase(), "this is a sentence in a single segment", "Speech recognition 2 should correctly recognize speech");
+}, "Two SpeechRecognition instances should simultaneously recognize speech from audio files.");
+</script>
+</html>
diff --git a/tests/wpt/tests/speech-api/SpeechRecognition-installOnDevice.https.html b/tests/wpt/tests/speech-api/SpeechRecognition-installOnDevice.https.html
new file mode 100644
index 00000000000..6c6fa37b6cd
--- /dev/null
+++ b/tests/wpt/tests/speech-api/SpeechRecognition-installOnDevice.https.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>SpeechRecognition installOnDevice</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+promise_test(async (t) => {
+  const validLang = "en-US";
+  const invalidLang = "invalid language code";
+  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+
+  // Test that it returns a promise.
+  const validResultPromise = SpeechRecognition.installOnDevice(validLang);
+  assert_true(
+    validResultPromise instanceof Promise,
+    "installOnDevice should return a Promise."
+  );
+
+  // Verify the resolved value is a boolean.
+  const validResult = await validResultPromise;
+  assert_true(
+    typeof validResult === "boolean",
+    "The resolved value of the installOnDevice promise should be a boolean."
+  );
+
+  // Verify that the method returns true when called with a supported language code.
+  assert_equals(
+    validResult,
+    true,
+    "installOnDevice should resolve with `true` when called with a supported language code."
+  );
+
+  // Test that it returns a promise.
+  const invalidResultPromise = SpeechRecognition.installOnDevice(invalidLang);
+  const invalidResult = await invalidResultPromise;
+  assert_equals(
+    invalidResult,
+    false,
+    "installOnDevice should resolve with `false` when called with an unsupported language code."
+  );
+}, "SpeechRecognition.installOnDevice resolves with a boolean value.");
+</script>
diff --git a/tests/wpt/tests/speech-api/SpeechRecognition-installOnDeviceSpeechRecognition.https.html b/tests/wpt/tests/speech-api/SpeechRecognition-installOnDeviceSpeechRecognition.https.html
deleted file mode 100644
index 05d8b424c39..00000000000
--- a/tests/wpt/tests/speech-api/SpeechRecognition-installOnDeviceSpeechRecognition.https.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<title>SpeechRecognition installOnDeviceSpeechRecognition</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script>
-promise_test(async (t) => {
-  const validLang = "en-US";
-  const invalidLang = "invalid language code";
-  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-  const speechRecognition = new SpeechRecognition();
-
-  // Ensure the installOnDeviceSpeechRecognition method exists.
-  assert_true(
-    "installOnDeviceSpeechRecognition" in speechRecognition,
-    "SpeechRecognition should have the installOnDeviceSpeechRecognition method."
-  );
-
-  // Test that it returns a promise.
-  const validResultPromise = speechRecognition.installOnDeviceSpeechRecognition(validLang);
-  assert_true(
-    validResultPromise instanceof Promise,
-    "installOnDeviceSpeechRecognition should return a Promise."
-  );
-
-  // Verify the resolved value is a boolean.
-  const validResult = await validResultPromise;
-  assert_true(
-    typeof validResult === "boolean",
-    "The resolved value of the installOnDeviceSpeechRecognition promise should be a boolean."
-  );
-
-  // Verify that the method returns true when called with a supported language code.
-  assert_equals(
-    validResult,
-    true,
-    "installOnDeviceSpeechRecognition should resolve with `true` when called with a supported language code."
-  );
-
-  // Test that it returns a promise.
-  const invalidResultPromise = speechRecognition.installOnDeviceSpeechRecognition(invalidLang);
-  const invalidResult = await invalidResultPromise;
-  assert_equals(
-    invalidResult,
-    false,
-    "installOnDeviceSpeechRecognition should resolve with `false` when called with an unsupported language code."
-  );
-}, "SpeechRecognition.installOnDeviceSpeechRecognition resolves with a boolean value.");
-</script>
diff --git a/tests/wpt/tests/speech-api/SpeechRecognition-mediaStreamTrack-manual.https.html b/tests/wpt/tests/speech-api/SpeechRecognition-mediaStreamTrack-manual.https.html
new file mode 100644
index 00000000000..01a5cd0825e
--- /dev/null
+++ b/tests/wpt/tests/speech-api/SpeechRecognition-mediaStreamTrack-manual.https.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<title>SpeechRecognition MediaStreamTrack</title>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+async function getAudioTrackFromFile(filePath) {
+    const audioContext = new AudioContext();
+    const response = await fetch(filePath);
+    const arrayBuffer = await response.arrayBuffer();
+    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+    const source = audioContext.createBufferSource();
+    source.buffer = audioBuffer;
+
+    const destination = audioContext.createMediaStreamDestination();
+    source.connect(destination);
+    source.start();
+
+    return destination.stream.getAudioTracks()[0];
+}
+
+promise_test(async (t) => {
+    const lang = "en-US";
+    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const speechRecognition = new SpeechRecognition();
+    speechRecognition.mode = 'cloud-only';
+    speechRecognition.lang = lang;
+    const audioTrack = await getAudioTrackFromFile("/media/speech.wav");
+
+    assert_true(audioTrack instanceof MediaStreamTrack, "Audio track should be a valid MediaStreamTrack");
+
+    const recognitionPromise = new Promise((resolve) => {
+        speechRecognition.onresult = (event) => {
+            const transcript = event.results[0][0].transcript;
+            resolve(transcript);
+        };
+    });
+
+    speechRecognition.start(audioTrack);
+
+    const transcript = await recognitionPromise;
+    assert_equals(transcript.toLowerCase(), "this is a sentence in a single segment", "Speech recognition should correctly recognize 'hello world'");
+
+    // Start speech recognition without a media stream track on the same instance should fail.
+    try {
+      speechRecognition.start();
+      assert_unreached();
+    } catch (e) {
+      assert_equals(e.name, "InvalidStateError", "Second call to start() should throw an InvalidStateError");
+    }
+}, "SpeechRecognition should recognize speech from an audio file.");
+</script>
+</html>
diff --git a/tests/wpt/tests/speech-api/SpeechRecognition-onDeviceWebSpeechAvailable.https.html b/tests/wpt/tests/speech-api/SpeechRecognition-onDeviceWebSpeechAvailable.https.html
deleted file mode 100644
index f04bfead92a..00000000000
--- a/tests/wpt/tests/speech-api/SpeechRecognition-onDeviceWebSpeechAvailable.https.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<title>SpeechRecognition onDeviceWebSpeechAvailable</title>
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-<script>
-promise_test(async (t) => {
-  const lang = "en-US";
-  window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-  const speechRecognition = new SpeechRecognition();
-
-  // Ensure the onDeviceWebSpeechAvailable method exists.
-  assert_true(
-    "onDeviceWebSpeechAvailable" in speechRecognition,
-    "SpeechRecognition should have the onDeviceWebSpeechAvailable method."
-  );
-
-  // Test that it returns a promise.
-  const resultPromise = speechRecognition.onDeviceWebSpeechAvailable(lang);
-  assert_true(
-    resultPromise instanceof Promise,
-    "onDeviceWebSpeechAvailable should return a Promise."
-  );
-
-  // Verify the resolved value is a boolean.
-  const result = await resultPromise;
-  assert_true(
-    typeof result === "boolean",
-    "The resolved value of the onDeviceWebSpeechAvailable promise should be a boolean."
-  );
-
-  // Verify that method returns false if on-device speech recognition is not installed.
-  assert_equals(
-    result,
-    false,
-    "onDeviceWebSpeechAvailable should resolve with `false` if on-device speech recognition is not installed."
-  );
-}, "SpeechRecognition.onDeviceWebSpeechAvailable resolves with a boolean value.");
-</script>
diff --git a/tests/wpt/tests/storage-access-api/helpers.js b/tests/wpt/tests/storage-access-api/helpers.js
index a698fac6491..3c03ead13b9 100644
--- a/tests/wpt/tests/storage-access-api/helpers.js
+++ b/tests/wpt/tests/storage-access-api/helpers.js
@@ -277,21 +277,14 @@ function FetchFromFrame(frame, url) {
     { command: "cors fetch", url }, frame.contentWindow);
 }
 
-// Makes a subresource request to the provided host in the given frame with
-// the mode set to 'no-cors'
+// Makes a subresource request to the provided host in the given frame with the
+// mode set to 'no-cors'. Returns a promise that resolves with undefined, since
+// no-cors responses are opaque to JavaScript.
 function NoCorsFetchFromFrame(frame, url) {
   return PostMessageAndAwaitReply(
     { command: "no-cors fetch", url }, frame.contentWindow);
 }
 
-// Makes a subresource request to the provided host in the given frame with
-// the mode set to 'no-cors', and returns the cookies that were included in the
-// request.
-function NoCorsSubresourceCookiesFromFrame(frame, host) {
-  const url = `${host}/storage-access-api/resources/echo-cookie-header.py`;
-  return NoCorsFetchFromFrame(frame, url);
-}
-
 // Tries to set storage access policy, ignoring any errors.
 //
 // Note: to discourage the writing of tests that assume unpartitioned cookie
diff --git a/tests/wpt/tests/storage-access-api/requestStorageAccess-cross-site-sibling-iframes.sub.https.window.js b/tests/wpt/tests/storage-access-api/requestStorageAccess-cross-site-sibling-iframes.sub.https.window.js
index 528b1616368..8ffa9e178b1 100644
--- a/tests/wpt/tests/storage-access-api/requestStorageAccess-cross-site-sibling-iframes.sub.https.window.js
+++ b/tests/wpt/tests/storage-access-api/requestStorageAccess-cross-site-sibling-iframes.sub.https.window.js
@@ -76,7 +76,6 @@
 
     assert_false(cookieStringHasCookie("foo", "bar",  await FetchSubresourceCookiesFromFrame(crossOriginFrame, wwwAlt)), "crossOriginFrame making cross-site subresource request to sibling iframe's host should not include cookies.");
 
-    assert_false(cookieStringHasCookie("foo", "bar", await NoCorsSubresourceCookiesFromFrame(crossOriginFrame, www)), "crossSiteFrame making no-cors cross-site subresource request to sibling iframe's host should not include cookies.");
     assert_false(cookieStringHasCookie("cookie", "monster", await FetchSubresourceCookiesFromFrame(crossSiteFrame, www)),"crossSiteFrame making cross-site subresource request to sibling iframe's host should not include cookies.");
 
   }, "Cross-site sibling iframes should not be able to take advantage of the existing permission grant requested by others.");
diff --git a/tests/wpt/tests/storage-access-api/resources/embedded_responder.js b/tests/wpt/tests/storage-access-api/resources/embedded_responder.js
index fb3bef40b2d..8710bfe8d78 100644
--- a/tests/wpt/tests/storage-access-api/resources/embedded_responder.js
+++ b/tests/wpt/tests/storage-access-api/resources/embedded_responder.js
@@ -82,9 +82,12 @@ window.addEventListener("message", async (event) => {
     case "cors fetch":
       reply(await fetch(event.data.url, {mode: 'cors', credentials: 'include'}).then((resp) => resp.text()));
       break;
-    case "no-cors fetch":
-      reply(await fetch(event.data.url, {mode: 'no-cors', credentials: 'include'}).then((resp) => resp.text()));
+    case "no-cors fetch": {
+      const resp = await fetch(event.data.url, {mode: 'no-cors', credentials: 'include'});
+      await resp.text();
+      reply(undefined);
       break;
+    }
     case "start_dedicated_worker":
       worker = new Worker("embedded_worker.py");
       reply(undefined);
diff --git a/tests/wpt/tests/subresource-integrity/signatures/tentative/csp.window.js b/tests/wpt/tests/subresource-integrity/signatures/tentative/csp.window.js
new file mode 100644
index 00000000000..e72e49dd209
--- /dev/null
+++ b/tests/wpt/tests/subresource-integrity/signatures/tentative/csp.window.js
@@ -0,0 +1,47 @@
+// META: script=helper.js
+
+// Here, we're replicating many of the tests from `script.window.js`, but
+// doing so in the presence of a CSP that requires the RFC's test key to
+// be asserted as integrity metadata.
+
+// First, enforce CSP:
+const el = document.createElement('meta');
+el.httpEquiv = "content-security-policy";
+el.content = `script-src 'ed25519-${kValidKeys['rfc']}'`;
+document.head.appendChild(el);
+
+// Unsigned scripts should not load, regardless of integrity metadata:
+generate_script_test(kUnsignedShouldBlock, "", EXPECT_BLOCKED,
+                     "No signature, no integrity check: loads.");
+
+generate_script_test(kUnsignedShouldBlock, "ed25519-???", EXPECT_BLOCKED,
+                     "No signature, malformed integrity check: loads.");
+
+generate_script_test(kUnsignedShouldBlock, `ed25519-${kValidKeys['rfc']}`, EXPECT_BLOCKED,
+                     "No signature, integrity check: blocked.");
+
+// Signed scripts should load iff valid integrity metadata is explicitly asserted:
+generate_script_test(kSignedShouldBlock, "", EXPECT_BLOCKED,
+                     "Valid signature, no integrity check: blocked.");
+generate_script_test(kSignedShouldBlock, "ed25519-???", EXPECT_BLOCKED,
+                     "Valid signature, malformed integrity check: blocked.");
+generate_script_test(kSignedShouldExecute, `ed25519-${kValidKeys['rfc']}`, EXPECT_LOADED,
+                     "Valid signature, valid integrity check: loads.");
+generate_script_test(kSignedShouldExecute, `ed25519-${kValidKeys['rfc']} ed25519-${kValidKeys['arbitrary']}`, EXPECT_BLOCKED,
+                     "Valid signature, one matching and one mismatched integrity check: blocked.");
+generate_script_test(kSignedShouldBlock, `ed25519-${kValidKeys['arbitrary']}`, EXPECT_BLOCKED,
+                     "Valid signature, mismatched integrity check: blocked.");
+
+// Likewise, scripts signed with multiple signatures will still require valid integrity metadata to be asserted:
+generate_script_test(kMultiplySignedShouldBlock, "", EXPECT_BLOCKED,
+                     "Valid signatures, no integrity check: blocked.");
+generate_script_test(kMultiplySignedShouldBlock, "ed25519-???", EXPECT_BLOCKED,
+                     "Valid signatures, malformed integrity check: blocked.");
+generate_script_test(kMultiplySignedShouldExecute, `ed25519-${kValidKeys['rfc']}`, EXPECT_LOADED,
+                     "Valid signatures, integrity check matches one: loads.");
+generate_script_test(kMultiplySignedShouldBlock, `ed25519-${kValidKeys['arbitrary']}`, EXPECT_BLOCKED,
+                     "Valid signatures, integrity check matches the other: blocked.");
+generate_script_test(kMultiplySignedShouldBlock, `ed25519-${kValidKeys['rfc']} ed25519-${kValidKeys['arbitrary']}`, EXPECT_BLOCKED,
+                     "Valid signatures, integrity check matches both, but only one in CSP: blocked.");
+generate_script_test(kMultiplySignedShouldBlock, `ed25519-${kInvalidKey}`, EXPECT_BLOCKED,
+                     "Valid signatures, integrity check matches neither: blocked.");
diff --git a/tests/wpt/tests/subresource-integrity/signatures/tentative/helper.js b/tests/wpt/tests/subresource-integrity/signatures/tentative/helper.js
index 51d57eec059..29ed6449c26 100644
--- a/tests/wpt/tests/subresource-integrity/signatures/tentative/helper.js
+++ b/tests/wpt/tests/subresource-integrity/signatures/tentative/helper.js
@@ -72,6 +72,83 @@ function generate_fetch_test(request_data, integrity, expectation, description)
   }, "`fetch()`: " + description);
 }
 
+/*
+ * Script tests
+ *
+ * Metadata for a script which expects to execute correctly and a script that
+ * does not.
+ */
+const kScriptToExecute = {
+  body: "window.hello = `world`;",
+  hash: "PZJ+9CdAAIacg7wfUe4t/RkDQJVKM0mCZ2K7qiRhHFc=",
+
+  signatures: {
+    // ```
+    // "unencoded-digest";sf: sha-256=:PZJ+9CdAAIacg7wfUe4t/RkDQJVKM0mCZ2K7qiRhHFc=:
+    // "@signature-params": ("unencoded-digest";sf);keyid="JrQLj5P/89iXES9+vFgrIy29clF9CC/oPPsw3c5D0bs=";tag="sri"
+    // ```
+    rfc: "A1wOGCGrcfN34uMe2Umt7hJ6Su1MQFUL1QuT5nmk1R8I761eXUt2Zv4D5fOt1h1+4DlHPiA1FVwfJLbwlWnpBw==",
+
+    // ```
+    // "unencoded-digest";sf: sha-256=:PZJ+9CdAAIacg7wfUe4t/RkDQJVKM0mCZ2K7qiRhHFc=:
+    // "@signature-params": ("unencoded-digest";sf);keyid="xDnP380zcL4rJ76rXYjeHlfMyPZEOqpJYjsjEppbuXE=";tag="sri"
+    // ```
+    arbitrary: "odk/ec9gO/DCcLPa1xSW1cSmB2s4XU3iDOxJAiod4v5/YBESjvwEJNAO9x4Frn/7rRIZ7sL5LwRNaymdHokOBQ=="
+  }
+};
+
+const kScriptToBlock = {
+  body: "assert_unreached(`This code should not execute.`);",
+  hash: "FUSFR1N3vTmSGbI7q9jaMbHq+ogNeBfpznOIufaIfpc=",
+
+  signatures: {
+    // ```
+    // "unencoded-digest";sf: sha-256=:FUSFR1N3vTmSGbI7q9jaMbHq+ogNeBfpznOIufaIfpc=:
+    // "@signature-params": ("unencoded-digest";sf);keyid="JrQLj5P/89iXES9+vFgrIy29clF9CC/oPPsw3c5D0bs=";tag="sri"
+    // ```
+    rfc: "bR3fU6kzmMLol4GIcgj19+It0GB0dlKrD4ssH+SCz0vTLAdT3zt6Kfq4V60NnDdn62XGNr20b0TEKtfcremcDw==",
+
+    // ```
+    // "unencoded-digest";sf: sha-256=:FUSFR1N3vTmSGbI7q9jaMbHq+ogNeBfpznOIufaIfpc=:
+    // "@signature-params": ("unencoded-digest";sf);keyid="xDnP380zcL4rJ76rXYjeHlfMyPZEOqpJYjsjEppbuXE";tag="sri"
+    // ```
+    arbitrary: "+5Iol+V65SW2qkpsTCyqYQJC4NZIsUGeNbO5kS9WdTboa9gg/nV6LwnySM02612YvPm++671nN9dBDJPYncuBA=="
+  }
+};
+
+// These constants use the metadata above to create dictionaries that can be
+// passed into `generate_script_test` below.
+const kUnsignedShouldExecute = { body: kScriptToExecute['body'] };
+const kUnsignedShouldBlock = { body: kScriptToBlock['body'] };
+const kSignedShouldExecute = {
+  body: kScriptToExecute['body'],
+  digest: `sha-256=:${kScriptToExecute['hash']}:`,
+  signatureInput: `signature=("unencoded-digest";sf);keyid="${kValidKeys['rfc']}";tag="sri"`,
+  signature: `signature=:${kScriptToExecute['signatures']['rfc']}:`
+};
+const kSignedShouldBlock = {
+  body: kScriptToBlock['body'],
+  digest: `sha-256=:${kScriptToBlock['hash']}:`,
+  signatureInput: `signature=("unencoded-digest";sf);keyid="${kValidKeys['rfc']}";tag="sri"`,
+  signature: `signature=:${kScriptToBlock['signatures']['rfc']}:`
+};
+const kMultiplySignedShouldExecute = {
+  body: kScriptToExecute['body'],
+  digest: `sha-256=:${kScriptToExecute['hash']}:`,
+  signatureInput: `signature1=("unencoded-digest";sf);keyid="${kValidKeys['rfc']}";tag="sri", ` +
+                  `signature2=("unencoded-digest";sf);keyid="${kValidKeys['arbitrary']}";tag="sri"`,
+  signature: `signature1=:${kScriptToExecute['signatures']['rfc']}:, ` +
+             `signature2=:${kScriptToExecute['signatures']['arbitrary']}:`
+};
+const kMultiplySignedShouldBlock = {
+  body: kScriptToBlock['body'],
+  digest: `sha-256=:${kScriptToBlock['hash']}:`,
+  signatureInput: `signature1=("unencoded-digest";sf);keyid="${kValidKeys['rfc']}";tag="sri", ` +
+                  `signature2=("unencoded-digest";sf);keyid="${kValidKeys['arbitrary']}";tag="sri"`,
+  signature: `signature1=:${kScriptToBlock['signatures']['rfc']}:, ` +
+             `signature2=:${kScriptToBlock['signatures']['arbitrary']}:`
+};
+
 function generate_script_test(request_data, integrity, expectation, description) {
   async_test(t => {
     let s = document.createElement('script');
diff --git a/tests/wpt/tests/subresource-integrity/signatures/tentative/script.window.js b/tests/wpt/tests/subresource-integrity/signatures/tentative/script.window.js
index f8a2572535f..d4c4e57b270 100644
--- a/tests/wpt/tests/subresource-integrity/signatures/tentative/script.window.js
+++ b/tests/wpt/tests/subresource-integrity/signatures/tentative/script.window.js
@@ -5,73 +5,14 @@
 // and `<script integrity>` assertions.
 //
 
-
-const kScriptToExecute = {
-  body: "window.hello = `world`;",
-  hash: "PZJ+9CdAAIacg7wfUe4t/RkDQJVKM0mCZ2K7qiRhHFc=",
-
-  signatures: {
-    // ```
-    // "unencoded-digest";sf: sha-256=:PZJ+9CdAAIacg7wfUe4t/RkDQJVKM0mCZ2K7qiRhHFc=:
-    // "@signature-params": ("unencoded-digest";sf);keyid="JrQLj5P/89iXES9+vFgrIy29clF9CC/oPPsw3c5D0bs=";tag="sri"
-    // ```
-    rfc: "A1wOGCGrcfN34uMe2Umt7hJ6Su1MQFUL1QuT5nmk1R8I761eXUt2Zv4D5fOt1h1+4DlHPiA1FVwfJLbwlWnpBw==",
-
-    // ```
-    // "unencoded-digest";sf: sha-256=:PZJ+9CdAAIacg7wfUe4t/RkDQJVKM0mCZ2K7qiRhHFc=:
-    // "@signature-params": ("unencoded-digest";sf);keyid="xDnP380zcL4rJ76rXYjeHlfMyPZEOqpJYjsjEppbuXE=";tag="sri"
-    // ```
-    arbitrary: "odk/ec9gO/DCcLPa1xSW1cSmB2s4XU3iDOxJAiod4v5/YBESjvwEJNAO9x4Frn/7rRIZ7sL5LwRNaymdHokOBQ=="
-  }
-};
-
-const kScriptToBlock = {
-  body: "assert_unreached(`This code should not execute.`);",
-  hash: "FUSFR1N3vTmSGbI7q9jaMbHq+ogNeBfpznOIufaIfpc=",
-
-  signatures: {
-    // ```
-    // "unencoded-digest";sf: sha-256=:FUSFR1N3vTmSGbI7q9jaMbHq+ogNeBfpznOIufaIfpc=:
-    // "@signature-params": ("unencoded-digest";sf);keyid="JrQLj5P/89iXES9+vFgrIy29clF9CC/oPPsw3c5D0bs=";tag="sri"
-    // ```
-    rfc: "bR3fU6kzmMLol4GIcgj19+It0GB0dlKrD4ssH+SCz0vTLAdT3zt6Kfq4V60NnDdn62XGNr20b0TEKtfcremcDw==",
-
-    // ```
-    // "unencoded-digest";sf: sha-256=:FUSFR1N3vTmSGbI7q9jaMbHq+ogNeBfpznOIufaIfpc=:
-    // "@signature-params": ("unencoded-digest";sf);keyid="xDnP380zcL4rJ76rXYjeHlfMyPZEOqpJYjsjEppbuXE";tag="sri"
-    // ```
-    arbitrary: "+5Iol+V65SW2qkpsTCyqYQJC4NZIsUGeNbO5kS9WdTboa9gg/nV6LwnySM02612YvPm++671nN9dBDJPYncuBA=="
-  }
-};
-
-//
-// Equally exciting helper functions
-//
-
-// Executable: unsigned.
-const kUnsigned = { body: kScriptToExecute['body'] };
-generate_script_test(kUnsigned, "", EXPECT_LOADED,
+generate_script_test(kUnsignedShouldExecute, "", EXPECT_LOADED,
                      "No signature, no integrity check: loads.");
 
-generate_script_test(kUnsigned, "ed25519-???", EXPECT_LOADED,
+generate_script_test(kUnsignedShouldExecute, "ed25519-???", EXPECT_LOADED,
                      "No signature, malformed integrity check: loads.");
 
-generate_script_test(kUnsigned, `ed25519-${kValidKeys['rfc']}`, EXPECT_BLOCKED,
-                     "No signature, valid integrity check: loads.");
-
-// Executable and non-executable scripts signed with RFC's test key.
-const kSignedShouldExecute = {
-  body: kScriptToExecute['body'],
-  digest: `sha-256=:${kScriptToExecute['hash']}:`,
-  signatureInput: `signature=("unencoded-digest";sf);keyid="${kValidKeys['rfc']}";tag="sri"`,
-  signature: `signature=:${kScriptToExecute['signatures']['rfc']}:`
-};
-const kSignedShouldBlock = {
-  body: kScriptToBlock['body'],
-  digest: `sha-256=:${kScriptToBlock['hash']}:`,
-  signatureInput: `signature=("unencoded-digest";sf);keyid="${kValidKeys['rfc']}";tag="sri"`,
-  signature: `signature=:${kScriptToBlock['signatures']['rfc']}:`
-};
+generate_script_test(kUnsignedShouldBlock, `ed25519-${kValidKeys['rfc']}`, EXPECT_BLOCKED,
+                     "No signature, integrity check: blocked.");
 
 // Should load:
 generate_script_test(kSignedShouldExecute, "", EXPECT_LOADED,
@@ -88,22 +29,6 @@ generate_script_test(kSignedShouldBlock, `ed25519-${kValidKeys['arbitrary']}`, E
                      "Valid signature, mismatched integrity check: blocked.");
 
 // Executable and non-executable scripts signed with RFC's test key and the arbitrary key:
-const kMultiplySignedShouldExecute = {
-  body: kScriptToExecute['body'],
-  digest: `sha-256=:${kScriptToExecute['hash']}:`,
-  signatureInput: `signature1=("unencoded-digest";sf);keyid="${kValidKeys['rfc']}";tag="sri", ` +
-                  `signature2=("unencoded-digest";sf);keyid="${kValidKeys['arbitrary']}";tag="sri"`,
-  signature: `signature1=:${kScriptToExecute['signatures']['rfc']}:, ` +
-             `signature2=:${kScriptToExecute['signatures']['arbitrary']}:`
-};
-const kMultiplySignedShouldBlock = {
-  body: kScriptToBlock['body'],
-  digest: `sha-256=:${kScriptToBlock['hash']}:`,
-  signatureInput: `signature1=("unencoded-digest";sf);keyid="${kValidKeys['rfc']}";tag="sri", ` +
-                  `signature2=("unencoded-digest";sf);keyid="${kValidKeys['arbitrary']}";tag="sri"`,
-  signature: `signature1=:${kScriptToBlock['signatures']['rfc']}:, ` +
-             `signature2=:${kScriptToBlock['signatures']['arbitrary']}:`
-};
 generate_script_test(kMultiplySignedShouldExecute, "", EXPECT_LOADED,
                      "Valid signatures, no integrity check: loads.");
 generate_script_test(kMultiplySignedShouldExecute, "ed25519-???", EXPECT_LOADED,
diff --git a/tests/wpt/tests/svg/pservers/reftests/fill-fallback-currentcolor-1.svg b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-currentcolor-1.svg
new file mode 100644
index 00000000000..81d12ba4ddc
--- /dev/null
+++ b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-currentcolor-1.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <h:link rel="match" href="reference/green-100x100.svg"/>
+  <linearGradient id="lg">
+    <stop stop-color="#008000"/>
+  </linearGradient>
+  <!-- Test that 'fill' on the 'rect' uses the gradient 'lg'. -->
+  <g color="#ff0000" fill="#ff0000">
+    <rect width="100" height="100" fill="url(#lg) currentColor"/>
+  </g>
+</svg>
diff --git a/tests/wpt/tests/svg/pservers/reftests/fill-fallback-currentcolor-2.svg b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-currentcolor-2.svg
new file mode 100644
index 00000000000..12d4ce2876c
--- /dev/null
+++ b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-currentcolor-2.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <h:link rel="match" href="reference/green-100x100.svg"/>
+  <!-- Test that 'fill' on the 'rect' falls back to currentColor (green). -->
+  <g color="#008000" fill="#ff0000">
+    <rect width="100" height="100" fill="url(#notfound) currentColor"/>
+  </g>
+</svg>
diff --git a/tests/wpt/tests/svg/pservers/reftests/fill-fallback-invalid-uri.svg b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-invalid-uri.svg
new file mode 100644
index 00000000000..5522eb1c4c4
--- /dev/null
+++ b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-invalid-uri.svg
@@ -0,0 +1,5 @@
+<svg fill="red" xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <h:link rel="match" href="reference/green-100x100.svg"/>
+  <rect width="100" height="100" fill="green"/>
+  <rect width="100" height="100" fill="url(#nonexisting)"/>
+</svg>
diff --git a/tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-1.svg b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-1.svg
new file mode 100644
index 00000000000..ea3ae302516
--- /dev/null
+++ b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-1.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <h:link rel="match" href="reference/green-100x100.svg"/>
+  <linearGradient id="lg">
+    <stop stop-color="#008000"/>
+  </linearGradient>
+  <!-- Test that 'fill' on the 'rect' uses the gradient 'lg'. -->
+  <rect width="100" height="100" fill="url(#lg) none"/>
+</svg>
diff --git a/tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-2.svg b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-2.svg
new file mode 100644
index 00000000000..9f786e150f2
--- /dev/null
+++ b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-2.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <h:link rel="match" href="reference/green-100x100.svg"/>
+  <rect width="100" height="100" fill="#008000"/>
+  <!-- Test that 'fill' on the 'rect' falls back to 'none'. -->
+  <g fill="#ff0000">
+    <rect width="100" height="100" fill="url(#notfound) none"/>
+  </g>
+</svg>
diff --git a/tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-3.svg b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-3.svg
new file mode 100644
index 00000000000..6652243e1ea
--- /dev/null
+++ b/tests/wpt/tests/svg/pservers/reftests/fill-fallback-none-3.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" fill="red">
+  <h:link rel="match" href="reference/green-100x100.svg"/>
+  <linearGradient id="working">
+    <stop stop-color="green"/>
+  </linearGradient>
+  <rect width="100" height="100" fill="green"/>
+  <rect width="100" height="100" fill="url(#broken) none" stroke="url(#working)" stroke-width="0"/>
+</svg>
diff --git a/tests/wpt/tests/svg/pservers/reftests/stroke-fallback-invalid-uri.svg b/tests/wpt/tests/svg/pservers/reftests/stroke-fallback-invalid-uri.svg
new file mode 100644
index 00000000000..38b34b8ed9a
--- /dev/null
+++ b/tests/wpt/tests/svg/pservers/reftests/stroke-fallback-invalid-uri.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" stroke="red" stroke-width="50">
+  <h:link rel="match" href="reference/green-100x100.svg"/>
+  <rect x="25" y="25" width="50" height="50" fill="none" stroke="green"/>
+  <rect x="25" y="25" width="50" height="50" fill="none" stroke="url(#nonexisting)"/>
+</svg>
diff --git a/tests/wpt/tests/tools/ci/run_tc.py b/tests/wpt/tests/tools/ci/run_tc.py
index 25cfaee2fc1..a729bc8878c 100755
--- a/tests/wpt/tests/tools/ci/run_tc.py
+++ b/tests/wpt/tests/tools/ci/run_tc.py
@@ -272,7 +272,7 @@ def setup_environment(args):
         install_chrome(args.channel)
 
     # These browsers use dbus for various features.
-    if any(b in args.browser for b in ["chrome", "webkitgtk_minibrowser"]):
+    if any(b in args.browser for b in ["chrome", "webkitgtk_minibrowser", "wpewebkit_minibrowser"]):
         start_dbus()
 
     if args.xvfb:
diff --git a/tests/wpt/tests/tools/ci/taskcluster-run.py b/tests/wpt/tests/tools/ci/taskcluster-run.py
index 3badcf3b496..3affde80c7e 100755
--- a/tests/wpt/tests/tools/ci/taskcluster-run.py
+++ b/tests/wpt/tests/tools/ci/taskcluster-run.py
@@ -24,7 +24,7 @@ def get_browser_args(product, channel, artifact_path):
     if product == "chrome" or product == "chromium":
         # Taskcluster machines do not have GPUs, so use software rendering via --enable-swiftshader.
         return ["--enable-swiftshader", "--install-browser", "--install-webdriver"]
-    if product == "webkitgtk_minibrowser":
+    if product in ["webkitgtk_minibrowser", "wpewebkit_minibrowser"]:
         # Using 4 parallel jobs gives 4x speed-up even on a 1-core machine and doesn't cause extra timeouts.
         # See: https://github.com/web-platform-tests/wpt/issues/38723#issuecomment-1470938179
         return ["--install-browser", "--processes=4"]
@@ -80,9 +80,11 @@ def main(product, channel, commit_range, artifact_path, wpt_args):
         "--no-pause",
         "--no-restart-on-unexpected",
         "--install-fonts",
-        "--no-headless",
         "--verify-log-full"
     ]
+    # Enable headless mode for WPE MiniBrowser because it can't work under Xvfb/X11 (needs Wayland)
+    wpt_args.append("--headless" if product == "wpewebkit_minibrowser" else "--no-headless")
+
     wpt_args += get_browser_args(product, channel, artifact_path)
 
     # Hack to run servo with one process only for wdspec
diff --git a/tests/wpt/tests/tools/ci/tc/tasks/test.yml b/tests/wpt/tests/tools/ci/tc/tasks/test.yml
index 727b6083bd1..947ecff2592 100644
--- a/tests/wpt/tests/tools/ci/tc/tasks/test.yml
+++ b/tests/wpt/tests/tools/ci/tc/tasks/test.yml
@@ -102,6 +102,8 @@ components:
 
   browser-webkitgtk_minibrowser: {}
 
+  browser-wpewebkit_minibrowser: {}
+
   browser-chrome: {}
 
   browser-chromium: {}
@@ -227,6 +229,24 @@ tasks:
               use:
                 - trigger-weekly
                 - trigger-push
+            - vars:
+                browser: wpewebkit_minibrowser
+                channel: nightly
+              use:
+                - trigger-daily
+                - trigger-push
+            - vars:
+                browser: wpewebkit_minibrowser
+                channel: stable
+              use:
+                - trigger-weekly
+                - trigger-push
+            - vars:
+                browser: wpewebkit_minibrowser
+                channel: beta
+              use:
+                - trigger-weekly
+                - trigger-push
             - vars:
                 browser: servo
                 channel: nightly
diff --git a/tests/wpt/tests/tools/ci/tc/tests/test_valid.py b/tests/wpt/tests/tools/ci/tc/tests/test_valid.py
index 3e7150c7097..3b5f7c3e89c 100644
--- a/tests/wpt/tests/tools/ci/tc/tests/test_valid.py
+++ b/tests/wpt/tests/tools/ci/tc/tests/test_valid.py
@@ -269,6 +269,22 @@ def test_verify_payload():
       'wpt-webkitgtk_minibrowser-nightly-testharness-14',
       'wpt-webkitgtk_minibrowser-nightly-testharness-15',
       'wpt-webkitgtk_minibrowser-nightly-testharness-16',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-1',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-2',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-3',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-4',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-5',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-6',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-7',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-8',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-9',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-10',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-11',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-12',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-13',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-14',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-15',
+      'wpt-wpewebkit_minibrowser-nightly-testharness-16',
       'wpt-servo-nightly-testharness-1',
       'wpt-servo-nightly-testharness-2',
       'wpt-servo-nightly-testharness-3',
@@ -339,6 +355,12 @@ def test_verify_payload():
       'wpt-webkitgtk_minibrowser-nightly-reftest-4',
       'wpt-webkitgtk_minibrowser-nightly-reftest-5',
       'wpt-webkitgtk_minibrowser-nightly-reftest-6',
+      'wpt-wpewebkit_minibrowser-nightly-reftest-1',
+      'wpt-wpewebkit_minibrowser-nightly-reftest-2',
+      'wpt-wpewebkit_minibrowser-nightly-reftest-3',
+      'wpt-wpewebkit_minibrowser-nightly-reftest-4',
+      'wpt-wpewebkit_minibrowser-nightly-reftest-5',
+      'wpt-wpewebkit_minibrowser-nightly-reftest-6',
       'wpt-servo-nightly-reftest-1',
       'wpt-servo-nightly-reftest-2',
       'wpt-servo-nightly-reftest-3',
@@ -359,6 +381,8 @@ def test_verify_payload():
       'wpt-chrome-stable-wdspec-2',
       'wpt-webkitgtk_minibrowser-nightly-wdspec-1',
       'wpt-webkitgtk_minibrowser-nightly-wdspec-2',
+      'wpt-wpewebkit_minibrowser-nightly-wdspec-1',
+      'wpt-wpewebkit_minibrowser-nightly-wdspec-2',
       'wpt-servo-nightly-wdspec-1',
       'wpt-servo-nightly-wdspec-2',
       'wpt-firefox_android-nightly-wdspec-1',
@@ -367,6 +391,7 @@ def test_verify_payload():
       'wpt-chromium-nightly-crashtest-1',
       'wpt-chrome-stable-crashtest-1',
       'wpt-webkitgtk_minibrowser-nightly-crashtest-1',
+      'wpt-wpewebkit_minibrowser-nightly-crashtest-1',
       'wpt-servo-nightly-crashtest-1',
       'wpt-firefox_android-nightly-crashtest-1',
       'wpt-firefox-stable-print-reftest-1',
diff --git a/tests/wpt/tests/tools/wptrunner/wptrunner/executors/executorwebdriver.py b/tests/wpt/tests/tools/wptrunner/wptrunner/executors/executorwebdriver.py
index 7513887998d..32c61f045ad 100644
--- a/tests/wpt/tests/tools/wptrunner/wptrunner/executors/executorwebdriver.py
+++ b/tests/wpt/tests/tools/wptrunner/wptrunner/executors/executorwebdriver.py
@@ -795,6 +795,8 @@ class WebDriverBidiProtocol(WebDriverProtocol):
 
 class WebDriverRun(TimedRunner):
     def set_timeout(self):
+        if not self.timeout:
+            return
         try:
             self.protocol.base.set_timeout(self.timeout + self.extra_timeout)
         except webdriver_error.UnknownErrorException:
@@ -976,11 +978,14 @@ class WebDriverTestharnessExecutor(TestharnessExecutor, TestDriverExecutorMixin)
     def do_test(self, test):
         url = self.test_url(test)
 
+        timeout = (test.timeout * self.timeout_multiplier if self.debug_info is None
+                   else None)
+
         success, data = WebDriverRun(self.logger,
                                      self.do_testharness,
                                      self.protocol,
                                      url,
-                                     test.timeout * self.timeout_multiplier,
+                                     timeout,
                                      self.extra_timeout).run()
 
         if success:
@@ -1096,11 +1101,13 @@ class WebDriverRefTestExecutor(RefTestExecutor, TestDriverExecutorMixin):
         assert viewport_size is None
         assert dpi is None
 
+        timeout = self.timeout_multiplier * test.timeout if self.debug_info is None else None
+
         return WebDriverRun(self.logger,
                             self._screenshot,
                             self.protocol,
                             self.test_url(test),
-                            test.timeout,
+                            timeout,
                             self.extra_timeout).run()
 
     def _screenshot(self, protocol, url, timeout):
diff --git a/tests/wpt/tests/trusted-types/TrustedTypePolicyFactory-getAttributeType.html b/tests/wpt/tests/trusted-types/TrustedTypePolicyFactory-getAttributeType.html
new file mode 100644
index 00000000000..c59798e7090
--- /dev/null
+++ b/tests/wpt/tests/trusted-types/TrustedTypePolicyFactory-getAttributeType.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js" ></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./support/namespaces.js"></script>
+<script src="./support/attributes.js"></script>
+<script>
+  // Verify getAttributeType() for each testcase of trustedTypeDataForAttribute.
+  trustedTypeDataForAttribute.forEach(testData => {
+    test(() => {
+      let type = trustedTypes.getAttributeType(
+          testData.element().tagName,
+          testData.attrName,
+          testData.element().namespaceURI,
+          testData.attrNS);
+      assert_equals(type, testData.type);
+    }, `getAttributeType(
+          "${testData.element().tagName}",
+          "${testData.attrName}",
+          "${testData.element().namespaceURI}",
+          "${testData.attrNS}") == "${testData.type}"`);
+  });
+</script>
diff --git a/tests/wpt/tests/trusted-types/set-attributes-mutations-in-callback.tentative.html b/tests/wpt/tests/trusted-types/set-attributes-mutations-in-callback.tentative.html
new file mode 100644
index 00000000000..76ea84cf254
--- /dev/null
+++ b/tests/wpt/tests/trusted-types/set-attributes-mutations-in-callback.tentative.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js" ></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./support/namespaces.js"></script>
+<script src="./support/attributes.js"></script>
+<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script';">
+<iframe id="iframe"></iframe>
+<script>
+  // Create a default policy, which performs a mutation and transform its input.
+  const input_string = "unsafe_input";
+  const output_string = "safe_output";
+  const other_string = "other_value";
+  let applyMutation, finalChecks;
+  function testCleanup() {
+    applyMutation = undefined;
+    finalChecks = undefined;
+  }
+  function createTrustedType(input) {
+    if (window.applyMutation) {
+      assert_equals(input, input_string);
+      window.applyMutation();
+    }
+    return output_string;
+  }
+  trustedTypes.createPolicy("default", {
+    createHTML: createTrustedType,
+    createScript: createTrustedType,
+    createScriptURL: createTrustedType,
+  });
+
+  function assertReturnValue(api, returnValue, attributeNodeInCallback) {
+    switch (api) {
+      case "Element.setAttribute":
+      case "Element.setAttributeNS":
+        assert_equals(returnValue, undefined);
+        break;
+      case "Element.setAttributeNode":
+      case "Element.setAttributeNodeNS":
+      case "NamedNodeMap.setNamedItem":
+      case "NamedNodeMap.setNamedItemNS":
+        assert_equals(returnValue, attributeNodeInCallback);
+        break;
+      case "Attr.value":
+      case "Node.nodeValue":
+      case "Node.textContent":
+        assert_equals(returnValue, input_string);
+        break;
+      default:
+        assert_unreached();
+     }
+  }
+
+  const mutationsData = {
+    "delete other attribute before": function(setterData, testData) {
+      let element = testData.element();
+      // The attribute map ordering is not specified, but we assume
+      // beforeName/afterName are respectively placed before/after attrName.
+      let beforeName = `A`;
+      let afterName = `${testData.attrName}Z`;
+      element.setAttributeNS(testData.attrNS, beforeName, other_string);
+      element.setAttributeNS(testData.attrNS, testData.attrName,
+                             createTrustedOutput(testData.type, other_string));
+      element.setAttributeNS(testData.attrNS, afterName, other_string);
+      window.applyMutation = function() {
+        element.removeAttributeNS(testData.attrNS, beforeName);
+        attributeNodeInCallback = findAttribute(element, testData.attrNS,
+                                                testData.attrName);
+      };
+      const returnValue = setterData.runSetter(element, testData.attrNS,
+                                               testData.attrName,
+                                               input_string, testData.type);
+      assert_equals(element.attributes.length, 2);
+      assert_equals(element.getAttributeNS(testData.attrNS,
+                                           testData.attrName), output_string);
+      assert_true(element.hasAttributeNS(testData.attrNS, afterName));
+      assertReturnValue(setterData.api, returnValue, attributeNodeInCallback);
+    },
+    "delete attribute": function(setterData, testData) {
+      let element = testData.element();
+      // The attribute map ordering is not specified, but we assume
+      // beforeName/afterName are respectively placed before/after attrName.
+      let beforeName = `A`;
+      let afterName = `${testData.attrName}Z`;
+      element.setAttributeNS(testData.attrNS, beforeName, other_string);
+      element.setAttributeNS(testData.attrNS, testData.attrName,
+                             createTrustedOutput(testData.type, other_string));
+      element.setAttributeNS(testData.attrNS, afterName, other_string);
+      window.applyMutation = function() {
+        element.removeAttributeNS(testData.attrNS, testData.attrName);
+      };
+      const returnValue = setterData.runSetter(element, testData.attrNS,
+                                               testData.attrName,
+                                               input_string, testData.type);
+      switch (setterData.api) {
+        case "Element.setAttribute":
+        case "Element.setAttributeNS":
+        case "Element.setAttributeNode":
+        case "Element.setAttributeNodeNS":
+        case "NamedNodeMap.setNamedItem":
+        case "NamedNodeMap.setNamedItemNS":
+          // These APIs successfully sets the attribute on the element, even
+          // though it was deleted by the default policy's callback.
+          assert_equals(element.attributes.length, 3);
+          assert_equals(element.getAttributeNS(testData.attrNS,
+                                               testData.attrName),
+                        output_string);
+          break;
+        case "Attr.value":
+        case "Node.nodeValue":
+        case "Node.textContent":
+          // These APIs successfully sets the attribute node value, but that
+          // node is detached from the element by the default policy's callback.
+          assert_equals(element.attributes.length, 2);
+          assert_equals(setterData.lastAttributeNode.nodeValue, output_string);
+          break;
+        default:
+          assert_unreached();
+      }
+      assert_true(element.hasAttributeNS(testData.attrNS, beforeName));
+      assert_true(element.hasAttributeNS(testData.attrNS, afterName));
+      assertReturnValue(setterData.api, returnValue, null);
+    },
+    "modify attribute": function(setterData, testData) {
+      let element = testData.element();
+      let attributeNodeInCallback;
+      window.applyMutation = function() {
+        element.setAttributeNS(testData.attrNS, testData.attrName,
+                               createTrustedOutput(testData.type,
+                                                    other_string));
+        attributeNodeInCallback = findAttribute(element, testData.attrNS,
+                                                testData.attrName);
+      };
+      const returnValue = setterData.runSetter(element, testData.attrNS,
+                                               testData.attrName,
+                                               input_string, testData.type);
+      assert_equals(element.attributes.length, 1);
+      assert_equals(element.getAttributeNS(testData.attrNS,
+                                           testData.attrName), output_string);
+      assertReturnValue(setterData.api, returnValue, attributeNodeInCallback);
+    },
+    "move attribute node to another element": function(setterData, testData) {
+      let element = testData.element();
+      element.setAttributeNS(testData.attrNS, testData.attrName,
+                             createTrustedOutput(testData.type, other_string));
+      let otherElement = testData.element();
+      window.applyMutation = function() {
+        window.applyMutation = undefined;
+        let ownerElement = setterData.lastAttributeNode.ownerElement;
+        if (ownerElement) {
+          ownerElement.removeAttributeNode(setterData.lastAttributeNode);
+        }
+        otherElement.setAttributeNode(setterData.lastAttributeNode);
+      };
+      let returnValue;
+      switch (setterData.api) {
+        case "Element.setAttribute":
+        case "Element.setAttributeNS":
+          // These APIs successfully sets the attribute on the element, but the
+          // default policy's callback also sets it on the other element.
+          returnValue = setterData.runSetter(element, testData.attrNS,
+                                             testData.attrName,
+                                             input_string, testData.type);
+          assert_equals(element.attributes.length, 1);
+          assert_equals(element.getAttributeNS(testData.attrNS,
+                                               testData.attrName),
+                        output_string);
+          assert_equals(otherElement.attributes.length, 1);
+          assert_equals(otherElement.getAttributeNS(testData.attrNS,
+                                                    testData.attrName),
+                        output_string);
+          break;
+        case "Element.setAttributeNode":
+        case "Element.setAttributeNodeNS":
+        case "NamedNodeMap.setNamedItem":
+        case "NamedNodeMap.setNamedItemNS":
+          // These APIs throw a InUseAttributeError, but the default policy's
+          // callback still sets the attribute on the other element.
+          assert_throws_dom("InUseAttributeError", _ => {
+            returnValue = setterData.runSetter(element, testData.attrNS,
+                                               testData.attrName,
+                                               input_string, testData.type);
+          });
+          assert_equals(element.attributes.length, 1);
+          assert_equals(element.getAttributeNS(testData.attrNS,
+                                               testData.attrName),
+                        other_string);
+          assert_equals(otherElement.attributes.length, 1);
+          assert_equals(otherElement.getAttributeNS(testData.attrNS,
+                                                    testData.attrName),
+                        output_string);
+          break;
+        case "Attr.value":
+        case "Node.nodeValue":
+        case "Node.textContent":
+          // These APIs successfully sets the attribute node value, the default
+          // policy's callback moved that node on the other element.
+          returnValue = setterData.runSetter(element, testData.attrNS,
+                                             testData.attrName,
+                                             input_string, testData.type);
+          assert_equals(element.attributes.length, 0);
+          assert_equals(otherElement.attributes.length, 1);
+          assert_equals(otherElement.getAttributeNS(testData.attrNS,
+                                                  testData.attrName),
+                        output_string);
+          break;
+        default:
+          assert_unreached();
+      }
+      assertReturnValue(setterData.api, returnValue, undefined);
+    },
+  };
+
+  // Set an attribute for each testcase of trustedTypeDataForAttribute that are
+  // trusted type sinks and verify that the default policy works.
+  for (let mutationName of Object.keys(mutationsData)) {
+    const mutationData = mutationsData[mutationName];
+    attributeSetterData.forEach(setterData => {
+      trustedTypeDataForAttribute.forEach(testData => {
+        if (testData.attrNS && !setterData.acceptNS) return;
+        if (testData.type == null) return;
+        test(t => {
+          t.add_cleanup(testCleanup);
+          mutationData(setterData, testData);
+        }, `${setterData.api} works for \
+elementNS=${testData.element().namespaceURI}, \
+element=${testData.element().tagName}, \
+${testData.attrNS ? 'attrNS='+testData.attrNS+', ' : ''}\
+attrName=${testData.attrName} (${mutationName})`);
+      });
+    });
+  }
+</script>
diff --git a/tests/wpt/tests/trusted-types/set-attributes-no-require-trusted-types.html b/tests/wpt/tests/trusted-types/set-attributes-no-require-trusted-types.html
new file mode 100644
index 00000000000..6733eab9d34
--- /dev/null
+++ b/tests/wpt/tests/trusted-types/set-attributes-no-require-trusted-types.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js" ></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./support/namespaces.js"></script>
+<script src="./support/attributes.js"></script>
+<script>
+  // Set an attribute for each testcase of trustedTypeDataForAttribute and
+  // verify this works normally.
+  attributeSetterData.forEach(setterData => {
+    trustedTypeDataForAttribute.forEach(testData => {
+      if (testData.attrNS && !setterData.acceptNS) return;
+      test(() => {
+        let element = testData.element();
+        setterData.runSetter(element, testData.attrNS, testData.attrName,
+                             "somevalue", testData.type);
+        assert_equals(element.getAttributeNS(testData.attrNS,
+                                             testData.attrName), "somevalue");
+      }, `${setterData.api} works for \
+elementNS=${testData.element().namespaceURI}, \
+element=${testData.element().tagName}, \
+${testData.attrNS ? 'attrNS='+testData.attrNS+', ' : ''}\
+attrName=${testData.attrName} with a plain string`);
+    });
+  });
+</script>
diff --git a/tests/wpt/tests/trusted-types/set-attributes-require-trusted-types-default-policy.html b/tests/wpt/tests/trusted-types/set-attributes-require-trusted-types-default-policy.html
new file mode 100644
index 00000000000..b2b4b386d1e
--- /dev/null
+++ b/tests/wpt/tests/trusted-types/set-attributes-require-trusted-types-default-policy.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js" ></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./support/namespaces.js"></script>
+<script src="./support/attributes.js"></script>
+<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script';">
+<script>
+  // Create a default policy that check its arguments and transform its input.
+  const input_string = "unsafe_input";
+  const output_string = "safe_output";
+  let seenSinkName;
+  function resetSeenSinkName() {
+    seenSinkName = undefined;
+  }
+  function createTrustedType(type) {
+    return function(input, trustedTypeName, sinkName) {
+      assert_equals(input, input_string);
+      assert_equals(trustedTypeName, type);
+      assert_equals(seenSinkName, undefined);
+      seenSinkName = sinkName;
+      return output_string;
+    }
+  }
+  trustedTypes.createPolicy("default", {
+    createHTML: createTrustedType("TrustedHTML"),
+    createScript: createTrustedType("TrustedScript"),
+    createScriptURL: createTrustedType("TrustedScriptURL")
+  });
+
+  // Set an attribute for each testcase of trustedTypeDataForAttribute. The CSP
+  // rule will force the default policy for those corresponding to trusted
+  // type sinks.
+  attributeSetterData.forEach(setterData => {
+    trustedTypeDataForAttribute.forEach(testData => {
+      if (testData.attrNS && !setterData.acceptNS) return;
+      test(t => {
+        t.add_cleanup(resetSeenSinkName);
+        let element = testData.element();
+        setterData.runSetter(element, testData.attrNS, testData.attrName,
+                             input_string, testData.type);
+        let value = element.getAttributeNS(testData.attrNS, testData.attrName);
+        if (testData.type != null) {
+          // This is a trusted type sink and default policy applies.
+          assert_equals(seenSinkName, testData.sink);
+          assert_equals(value, output_string);
+        } else {
+          // Otherwise, this works normally.
+          assert_equals(seenSinkName, undefined);
+          assert_equals(value, input_string);
+        }
+    }, `${setterData.api} \
+${testData.type ? 'applies' : 'does not apply'} default policy for \
+elementNS=${testData.element().namespaceURI}, \
+element=${testData.element().tagName}, \
+${testData.attrNS ? 'attrNS='+testData.attrNS+', ' : ''}\
+attrName=${testData.attrName}`);
+    });
+  });
+
+  // For attributes that are trusted type sinks, try setting them to a value
+  // that has the expected trusted type.
+  attributeSetterData.forEach(setterData => {
+    trustedTypeDataForAttribute.forEach(testData => {
+      if (testData.attrNS && !setterData.acceptNS) return;
+      if (!testData.type) return;
+      test(t => {
+        t.add_cleanup(resetSeenSinkName);
+        let element = testData.element();
+        let trustedInput = createTrustedOutput(testData.type, input_string);
+        setterData.runSetter(element, testData.attrNS, testData.attrName,
+                             trustedInput, testData.type);
+        let value = element.getAttributeNS(testData.attrNS, testData.attrName);
+        if (setterData.acceptTrustedTypeArgumentInIDL) {
+          // Passing a trusted type should work normally.
+          assert_equals(seenSinkName, undefined);
+          assert_equals(value, input_string);
+        } else {
+          // TrustedType arguments will be converted to a string when passed
+          // to this setter, so the default policy applies.
+          assert_equals(seenSinkName, testData.sink);
+          assert_equals(value, output_string);
+        }
+      }, `${setterData.api} \
+${!setterData.acceptTrustedTypeArgumentInIDL ? 'applies' : 'does not apply'} \
+default policy for elementNS=${testData.element().namespaceURI}, \
+element=${testData.element().tagName}, \
+${testData.attrNS ? 'attrNS='+testData.attrNS+', ' : ''} \
+attrName=${testData.attrName} and a ${testData.type} input.`);
+    });
+  });
+</script>
diff --git a/tests/wpt/tests/trusted-types/set-attributes-require-trusted-types-no-default-policy.html b/tests/wpt/tests/trusted-types/set-attributes-require-trusted-types-no-default-policy.html
new file mode 100644
index 00000000000..6f909bbc042
--- /dev/null
+++ b/tests/wpt/tests/trusted-types/set-attributes-require-trusted-types-no-default-policy.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js" ></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./support/namespaces.js"></script>
+<script src="./support/attributes.js"></script>
+<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script';">
+<script>
+  // Set an attribute for each testcase of trustedTypeDataForAttribute. The CSP
+  // rule and a null default policy will block those corresponding to trusted
+  // type sinks.
+  attributeSetterData.forEach(setterData => {
+    trustedTypeDataForAttribute.forEach(testData => {
+      if (testData.attrNS && !setterData.acceptNS) return;
+      test(() => {
+        let element = testData.element();
+        if (testData.type != null) {
+          // This is a trusted type sink and should be blocked.
+          assert_throws_js(TypeError, () => {
+            setterData.runSetter(element, testData.attrNS, testData.attrName,
+                                 "neverset", testData.type);
+          });
+        } else {
+          // Otherwise, this works normally.
+          setterData.runSetter(element, testData.attrNS, testData.attrName,
+                               "somevalue", testData.type);
+          assert_equals(element.getAttributeNS(testData.attrNS,
+                                               testData.attrName), "somevalue");
+        }
+      }, `${setterData.api} \
+${testData.type ? 'throws' : 'works'} for \
+elementNS=${testData.element().namespaceURI}, \
+element=${testData.element().tagName}, \
+${testData.attrNS ? 'attrNS='+testData.attrNS+', ' : ''} \
+attrName=${testData.attrName} with a plain string`);
+    });
+  });
+
+  // For attributes that are trusted type sinks, try setting them to a value
+  // that has the expected trusted type.
+  attributeSetterData.forEach(setterData => {
+    trustedTypeDataForAttribute.forEach(testData => {
+      if (!testData.type) return;
+      if (testData.attrNS && !setterData.acceptNS) return;
+      test(() => {
+        let element = testData.element();
+        let trustedInput = createTrustedOutput(testData.type, "somevalue");
+        if (setterData.acceptTrustedTypeArgumentInIDL) {
+          // Passing a trusted type should work normally.
+          setterData.runSetter(element, testData.attrNS, testData.attrName,
+                               trustedInput, testData.type);
+          assert_equals(element.getAttributeNS(testData.attrNS,
+                                               testData.attrName), "somevalue");
+        } else {
+          // TrustedType arguments will be converted to a string when passed
+          // to this setter, so this is still blocked.
+          assert_throws_js(TypeError, () => {
+            setterData.runSetter(element, testData.attrNS, testData.attrName,
+                                 "neverset", testData.type);
+          });
+        }
+      }, `${setterData.api} \
+${setterData.acceptTrustedTypeArgumentInIDL ? 'works' : 'throws'} for \
+elementNS=${testData.element().namespaceURI}, \
+element=${testData.element().tagName}, \
+${testData.attrNS ? 'attrNS='+testData.attrNS+', ' : ''} \
+attrName=${testData.attrName} with a ${testData.type} input.`);
+    });
+  });
+</script>
diff --git a/tests/wpt/tests/trusted-types/support/attributes.js b/tests/wpt/tests/trusted-types/support/attributes.js
new file mode 100644
index 00000000000..7c373ae9e58
--- /dev/null
+++ b/tests/wpt/tests/trusted-types/support/attributes.js
@@ -0,0 +1,317 @@
+const policyWithoutModification =
+  window.trustedTypes.createPolicy('policyWithoutModification', {
+    createHTML: s => s,
+    createScript: s => s,
+    createScriptURL: s => s,
+  });
+
+function createTrustedOutput(type, input) {
+  return type ?
+    policyWithoutModification[type.replace("Trusted", "create")](input) : input;
+}
+
+// This is an array of test cases for testing callers to the
+// "Get Trusted Type data for attribute" algorithm e.g. via
+// Element.setAttributeNS() or TrustedTypePolicyFactory.getAttributeType().
+// https://w3c.github.io/trusted-types/dist/spec/#abstract-opdef-get-trusted-type-data-for-attribute
+//
+// The test cases are described by objects with the following members:
+// - element: a function creating a DOM Element in current document.
+// - attrNS: the namespace of the attribute.
+// - attrName: the local name of the attribute.
+// - type: the required trusted type of the element's attribute as one of the
+//   string "TrustedHTML", "TrustedScript", "TrustedScriptURL" ; or null if the
+//   this element's attribute does not correspond to any trusted type sink.
+// - sink (optional): If element's attribute is a trusted type sink, this is
+//   a string with the corresponding sink name.
+const trustedTypeDataForAttribute = [
+  // Valid trusted type sinks for attributes as defined by
+  // https://w3c.github.io/trusted-types/dist/spec/#abstract-opdef-get-trusted-type-data-for-attribute
+  // For a more complete coverage of event handler content attributes, see
+  // set-event-handlers-content-attributes.tentative.html and
+  // TrustedTypePolicyFactory-getAttributeType-event-handler-content-attributes.tentative.html
+  {
+    element: _ => document.createElement("div"),
+    attrNS: null,
+    attrName: "onclick",
+    type: "TrustedScript",
+    sink: "Element onclick"
+  },
+  {
+    element: _ => document.createElementNS(NSURI_SVG, "g"),
+    attrNS: null,
+    attrName: "ondblclick",
+    type: "TrustedScript",
+    sink: "Element ondblclick"
+  },
+  {
+    element: _ => document.createElementNS(NSURI_MATHML, "mrow"),
+    attrNS: null,
+    attrName: "onmousedown",
+    type: "TrustedScript",
+    sink: "Element onmousedown"
+  },
+  {
+    element: _ => document.createElementNS(NSURI_FOO, "foo"),
+    attrNS: null,
+    attrName: "onmouseup",
+    type: "TrustedScript",
+    sink: "Element onmouseup"
+  },
+  {
+    element: _ => document.createElement("iframe"),
+    attrNS: null,
+    attrName: "srcdoc",
+    type: "TrustedHTML",
+    sink: "HTMLIFrameElement srcdoc",
+  },
+  {
+    element: _ => document.createElement("script"),
+    attrNS: null,
+    attrName: "src",
+    type: "TrustedScriptURL",
+    sink: "HTMLScriptElement src",
+  },
+  {
+    element: _ => document.createElementNS(NSURI_SVG, "script"),
+    attrNS: null,
+    attrName: "href",
+    type: "TrustedScriptURL",
+    sink: "SVGScriptElement href",
+  },
+  {
+    element: _ => document.createElementNS(NSURI_SVG, "script"),
+    attrNS: NSURI_XLINK,
+    attrName: "href",
+    type: "TrustedScriptURL",
+    sink: "SVGScriptElement href",
+  },
+  // Below are some cases that are not trusted type sinks.
+  {
+    // event handler attribute name with non-null namespace.
+    element: _ => document.createElement("div"),
+    attrNS: NSURI_FOO,
+    attrName: "onclick",
+    type: null,
+  },
+  {
+    // unknown event handler attribute name.
+    element: _ => document.createElement("div"),
+    attrNS: null,
+    attrName: "ondoesnotexist",
+    type: null,
+  },
+  {
+    // div attribute that is not protected.
+    element: _ => document.createElement("div"),
+    attrNS: null,
+    attrName: "data-onclick",
+    type: null,
+  },
+  {
+    // srcdoc with element's local name that is not iframe.
+    element: _ => document.createElement("div"),
+    attrNS: null,
+    attrName: "srcdoc",
+    type: null,
+  },
+  {
+    // srcdoc with element's namespace that is not null.
+    element: _ => document.createElementNS(NSURI_FOO, "iframe"),
+    attrNS: null,
+    attrName: "srcdoc",
+    type: null,
+  },
+  {
+    // srcdoc with non-null namespace.
+    element: _ => document.createElement("iframe"),
+    attrNS: NSURI_FOO,
+    attrName: "srcdoc",
+    type: null,
+  },
+  {
+    // iframe attribute name that is not protected.
+    element: _ => document.createElement("iframe"),
+    attrNS: null,
+    attrName: "data-srcdoc",
+    type: null,
+  },
+  {
+    // src with element's local name that is not script.
+    element: _ => document.createElement("div"),
+    attrNS: null,
+    attrName: "src",
+    type: null,
+  },
+  {
+    // src with element's namespace that is not null.
+    element: _ => document.createElementNS(NSURI_FOO, "script"),
+    attrNS: null,
+    attrName: "src",
+    type: null,
+  },
+  {
+    // src with non-null namespace.
+    element: _ => document.createElement("script"),
+    attrNS: NSURI_FOO,
+    attrName: "src",
+    type: null,
+  },
+  {
+    // script attribute name that is not protected.
+    element: _ => document.createElement("script"),
+    attrNS: null,
+    attrName: "data-src",
+    type: null,
+  },
+  {
+    // href with element's local name that is not script.
+    element: _ => document.createElementNS(NSURI_SVG, "g"),
+    attrNS: null,
+    attrName: "href",
+    type: null,
+  },
+  {
+    // href with element's namespace that is not SVG.
+    element: _ => document.createElement("script"),
+    attrNS: null,
+    attrName: "href",
+    type: null,
+  },
+  {
+    // href with namespace that is neither null nor xlink.
+    element: _ => document.createElementNS(NSURI_SVG, "script"),
+    attrNS: NSURI_FOO,
+    attrName: "href",
+    type: null,
+  },
+  {
+    // unknown svg script attribute name.
+    element: _ => document.createElementNS(NSURI_SVG, "script"),
+    attrNS: null,
+    attrName: "src",
+    type: null,
+  },
+];
+
+function findAttribute(element, attrNS, attrName) {
+  for (let i = 0; i < element.attributes.length; i++) {
+    let attr = element.attributes[i];
+    if (attr.namespaceURI === attrNS &&
+        attr.localName === attrName) {
+      return attr;
+    }
+  }
+}
+
+// This is an array of DOM APIs allowing to set attribute values, described as
+// objects with the following members:
+// - api: the name of the API (e.g "Element.setAttribute").
+// - acceptNS: Whether a attribute namespace can be specified as a parameter to
+//   this API (e.g. setAttributeNS) or if it always works on the null namespace
+//   (e.g. setAttribute).
+// - acceptTrustedTypeArgumentInIDL: Whether the IDL of the API accepts a
+//   Trusted Type (https://w3c.github.io/trusted-types/dist/spec/#integrations)
+//   as a parameter (e.g. setAttribute) or if it will otherwise just convert
+//   such a parameter to a string (e.g. setAttributeNode).
+// - runSetter: a function that runs the API to set the element's attribute to
+//   the specified value. Before being executed, it may need to create an
+//   attribute node. The attribute node before execution (existing or created)
+//   is saved on runSetter.lastAttributeNode.
+const attributeSetterData = [
+  {
+    api: "Element.setAttribute",
+    acceptNS: false,
+    acceptTrustedTypeArgumentInIDL: true,
+    runSetter: function(element, attrNS, attrName, attrValue) {
+      assert_equals(attrNS, null);
+      this.lastAttributeNode = findAttribute(element, attrNS, attrName);
+      return element.setAttribute(attrName, attrValue);
+    },
+  },
+  {
+    api: "Element.setAttributeNS",
+    acceptNS: true,
+    acceptTrustedTypeArgumentInIDL: true,
+    runSetter: function(element, attrNS, attrName, attrValue) {
+      this.lastAttributeNode = findAttribute(element, attrNS, attrName);
+      return element.setAttributeNS(attrNS, attrName, attrValue);
+    },
+  },
+  {
+    api: "Element.setAttributeNode",
+    acceptNS: true,
+    acceptTrustedTypeArgumentInIDL: false,
+    setterClass: "setAttributeNode",
+    runSetter: function(element, attrNS, attrName, attrValue, type) {
+      this.lastAttributeNode = document.createAttributeNS(attrNS, attrName);
+      this.lastAttributeNode.value = attrValue;
+      return element.setAttributeNode(this.lastAttributeNode);
+    },
+  },
+  {
+    api: "Element.setAttributeNodeNS",
+    acceptNS: true,
+    acceptTrustedTypeArgumentInIDL: false,
+    runSetter: function(element, attrNS, attrName, attrValue, type) {
+      this.lastAttributeNode = document.createAttributeNS(attrNS, attrName);
+      this.lastAttributeNode.value = attrValue;
+      return element.setAttributeNodeNS(this.lastAttributeNode);
+    },
+  },
+  {
+    api: "NamedNodeMap.setNamedItem",
+    acceptNS: true,
+    acceptTrustedTypeArgumentInIDL: false,
+    runSetter: function(element, attrNS, attrName, attrValue, type) {
+      const nodeMap = element.attributes;
+      this.lastAttributeNode = document.createAttributeNS(attrNS, attrName);
+      this.lastAttributeNode.value = attrValue;
+      return nodeMap.setNamedItem(this.lastAttributeNode);
+    },
+  },
+  {
+    api: "NamedNodeMap.setNamedItemNS",
+    acceptNS: true,
+    acceptTrustedTypeArgumentInIDL: false,
+    runSetter: function(element, attrNS, attrName, attrValue, type) {
+      const nodeMap = element.attributes;
+      this.lastAttributeNode = document.createAttributeNS(attrNS, attrName);
+      this.lastAttributeNode.value = attrValue;
+      return nodeMap.setNamedItemNS(this.lastAttributeNode);
+    },
+  },
+  {
+    api:"Attr.value",
+    acceptNS: true,
+      acceptTrustedTypeArgumentInIDL: false,
+      runSetter: function(element, attrNS, attrName, attrValue, type) {
+      element.setAttributeNS(attrNS, attrName, createTrustedOutput(type, ""));
+      this.lastAttributeNode = findAttribute(element, attrNS, attrName);
+      assert_true(!!this.lastAttributeNode);
+      return (this.lastAttributeNode.value = attrValue);
+    },
+  },
+  {
+    api: "Node.nodeValue",
+    acceptNS: true,
+    acceptTrustedTypeArgumentInIDL: false,
+    runSetter: function(element, attrNS, attrName, attrValue, type) {
+      element.setAttributeNS(attrNS, attrName, createTrustedOutput(type, ""));
+      this.lastAttributeNode = findAttribute(element, attrNS, attrName);
+      assert_true(!!this.lastAttributeNode);
+      return (this.lastAttributeNode.nodeValue = attrValue);
+    },
+  },
+  {
+    api: "Node.textContent",
+    acceptNS: true,
+    acceptTrustedTypeArgumentInIDL: false,
+    runSetter: function(element, attrNS, attrName, attrValue, type) {
+      element.setAttributeNS(attrNS, attrName, createTrustedOutput(type, ""));
+      this.lastAttributeNode = findAttribute(element, attrNS, attrName);
+      assert_true(!!this.lastAttributeNode);
+      return (this.lastAttributeNode.textContent = attrValue);
+    },
+  },
+];
diff --git a/tests/wpt/tests/wasm/jsapi/js-string/basic.tentative.any.js b/tests/wpt/tests/wasm/jsapi/js-string/basic.any.js
similarity index 99%
rename from tests/wpt/tests/wasm/jsapi/js-string/basic.tentative.any.js
rename to tests/wpt/tests/wasm/jsapi/js-string/basic.any.js
index de4a21c976b..174bab32eb1 100644
--- a/tests/wpt/tests/wasm/jsapi/js-string/basic.tentative.any.js
+++ b/tests/wpt/tests/wasm/jsapi/js-string/basic.any.js
@@ -1,4 +1,4 @@
-// META: global=window,dedicatedworker,jsshell,shadowrealm
+// META: global=window,dedicatedworker,jsshell
 // META: script=/wasm/jsapi/assertions.js
 // META: script=/wasm/jsapi/wasm-module-builder.js
 // META: script=/wasm/jsapi/js-string/polyfill.js
diff --git a/tests/wpt/tests/wasm/jsapi/js-string/constants.tentative.any.js b/tests/wpt/tests/wasm/jsapi/js-string/constants.any.js
similarity index 96%
rename from tests/wpt/tests/wasm/jsapi/js-string/constants.tentative.any.js
rename to tests/wpt/tests/wasm/jsapi/js-string/constants.any.js
index ef391a90b7a..90cf94df76e 100644
--- a/tests/wpt/tests/wasm/jsapi/js-string/constants.tentative.any.js
+++ b/tests/wpt/tests/wasm/jsapi/js-string/constants.any.js
@@ -1,4 +1,4 @@
-// META: global=window,dedicatedworker,jsshell,shadowrealm
+// META: global=window,dedicatedworker,jsshell
 // META: script=/wasm/jsapi/wasm-module-builder.js
 
 // Instantiate a module with an imported global and return the global.
diff --git a/tests/wpt/tests/wasm/jsapi/js-string/imports.tentative.any.js b/tests/wpt/tests/wasm/jsapi/js-string/imports.any.js
similarity index 92%
rename from tests/wpt/tests/wasm/jsapi/js-string/imports.tentative.any.js
rename to tests/wpt/tests/wasm/jsapi/js-string/imports.any.js
index c357760befb..d4e16dc47d0 100644
--- a/tests/wpt/tests/wasm/jsapi/js-string/imports.tentative.any.js
+++ b/tests/wpt/tests/wasm/jsapi/js-string/imports.any.js
@@ -1,4 +1,4 @@
-// META: global=window,dedicatedworker,jsshell,shadowrealm
+// META: global=window,dedicatedworker,jsshell
 // META: script=/wasm/jsapi/wasm-module-builder.js
 
 test(() => {
diff --git a/tests/wpt/tests/web-animations/interfaces/AnimationTrigger/constructor.html b/tests/wpt/tests/web-animations/interfaces/AnimationTrigger/constructor.html
new file mode 100644
index 00000000000..e7b632fd90f
--- /dev/null
+++ b/tests/wpt/tests/web-animations/interfaces/AnimationTrigger/constructor.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>AnimationTrigger constructor</title>
+<link rel="help"
+      href="https://drafts.csswg.org/web-animations-2/#the-animationtrigger-interface">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../testcommon.js"></script>
+<body>
+<script>
+
+  test(t => {
+    const trigger = new AnimationTrigger();
+    assert_equals(trigger.type, "once", "default type is once.");
+    assert_equals(trigger.timeline, document.timeline,
+      "default timeline is document.timeline.");
+    assert_equals(trigger.rangeStart, "normal", "default rangeStart is normal");
+    assert_equals(trigger.rangeEnd, "normal", "default rangeEnd is normal");
+    assert_equals(trigger.exitRangeStart, "normal",
+      "default exitRangeStart is normal");
+    assert_equals(trigger.exitRangeStart, "normal",
+      "default exitRangeEnd is normal");
+  }, "Default values when no property bag is supplied");
+
+  test(t => {
+    const trigger = new AnimationTrigger({});
+    assert_equals(trigger.type, "once", "default type is once.");
+    assert_equals(trigger.timeline, document.timeline,
+      "default timeline is document.timeline.");
+    assert_equals(trigger.rangeStart, "normal", "default rangeStart is normal");
+    assert_equals(trigger.rangeEnd, "normal", "default rangeEnd is normal");
+    assert_equals(trigger.exitRangeStart, "normal",
+      "default exitRangeStart is normal");
+    assert_equals(trigger.exitRangeEnd, "normal",
+      "default exitRangeEnd is normal");
+  }, "Default values when an empty property bag is supplied.");
+
+  test(t => {
+    const scroll_timeline = new ScrollTimeline();
+    const trigger = new AnimationTrigger({
+      type: "repeat",
+      timeline: scroll_timeline,
+      rangeStart: "contain 10%",
+      rangeEnd: "contain 90%",
+      exitRangeStart: "cover 10%",
+      exitRangeEnd: "cover 90%"
+    });
+    assert_equals(trigger.type, "repeat", "default type is repeat.");
+    assert_equals(trigger.timeline, scroll_timeline,
+      "timeline is supplied scroll timeline.");
+    assert_equals(trigger.rangeStart, "contain 10%",
+      "rangeStart is supplied value");
+    assert_equals(trigger.rangeEnd, "contain 90%",
+      "rangeEnd is supplied value");
+    assert_equals(trigger.exitRangeStart, "cover 10%",
+      "exitRangeStart is supplied value");
+    assert_equals(trigger.exitRangeEnd, "cover 90%",
+      "exitRangeEnd is supplied value");
+  }, "All values supplied (scroll timeline).");
+
+  test(t => {
+    const view_timeline = new ViewTimeline();
+    const trigger = new AnimationTrigger({
+      type: "repeat",
+      timeline: view_timeline,
+      rangeStart: "contain 10%",
+      rangeEnd: "contain 90%",
+      exitRangeStart: "cover 10%",
+      exitRangeEnd: "cover 90%"
+    });
+    assert_equals(trigger.type, "repeat", "type is supplied type.");
+    assert_equals(trigger.timeline, view_timeline,
+      "timeline is supplied scroll timeline.");
+    assert_equals(trigger.rangeStart, "contain 10%",
+      "rangeStart is supplied value");
+    assert_equals(trigger.rangeEnd, "contain 90%",
+      "rangeEnd is supplied value");
+    assert_equals(trigger.exitRangeStart, "cover 10%",
+      "exitRangeStart is supplied value");
+    assert_equals(trigger.exitRangeEnd, "cover 90%",
+      "exitRangeEnd is supplied value");
+  }, "All values supplied (view timeline).");
+
+  test(t => {
+    const trigger = new AnimationTrigger();
+    assert_equals(trigger.type, "once", "default type is once.");
+    trigger.type = "alternate";
+    assert_equals(trigger.type, "alternate", "valid type change is honored.");
+    trigger.type = "etanretla";
+    assert_equals(trigger.type, "alternate", "invalid type change is ignored.");
+  }, "Set AnimationTrigger.type.");
+
+  test(t => {
+    const trigger = new AnimationTrigger();
+    assert_equals(trigger.timeline, document.timeline,
+      "default timeline is document.timeline.");
+    const scroll_timeline = new ScrollTimeline();
+    trigger.timeline = scroll_timeline;
+    assert_equals(trigger.timeline, scroll_timeline,
+      "valid timeline change is honored.");
+    assert_throws_js(TypeError, () => {
+      trigger.timeline = document.createElement("div");
+    });
+    assert_equals(trigger.timeline, scroll_timeline,
+      "invalid timeline change is ignored.");
+  }, "Set AnimationTrigger.timeline.");
+
+  test(t => {
+    const trigger = new AnimationTrigger();
+    assert_equals(trigger.rangeStart, "normal",
+    "default rangeStart is normal.");
+    const rangeOffset = { rangeName: "entry", offset: CSS.percent("20") };
+    // Valid values
+    trigger.rangeStart = rangeOffset;
+    assert_true(typeof(trigger.rangeStart) == "object",
+      "trigger.rangeStart is an object");
+    assert_equals(trigger.rangeStart.rangeName, rangeOffset.rangeName,
+      "valid rangeStart (TimelineRange.rangeName) change is honored.");
+    assert_equals(trigger.rangeStart.offset, rangeOffset.offset,
+      "valid rangeStart (TimelineRange.offset) change is honored.");
+    trigger.rangeStart = "contain 10%";
+    assert_equals(trigger.rangeStart, "contain 10%",
+      "valid rangeStart (string) change is honored.");
+
+    // Invalid values
+    let func = () => {
+      trigger.rangeStart = "totally not a valid rangeStart";
+    }
+    assert_throws_js(TypeError, func);
+    func = () => {
+      trigger.rangeStart = { rangeName: 'invalid' };
+    }
+    assert_throws_js(TypeError, func);
+    func = () => {
+      trigger.rangeStart = { offset: 'invalid' };
+    }
+    assert_throws_js(TypeError, func);
+  }, "Set AnimationTrigger.rangeStart.");
+</script>
diff --git a/tests/wpt/tests/webaudio/the-audio-api/the-audioworklet-interface/audioworkletprocessor-no-process-function.https.html b/tests/wpt/tests/webaudio/the-audio-api/the-audioworklet-interface/audioworkletprocessor-no-process-function.https.html
new file mode 100644
index 00000000000..e5578c6f97c
--- /dev/null
+++ b/tests/wpt/tests/webaudio/the-audio-api/the-audioworklet-interface/audioworkletprocessor-no-process-function.https.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<title>Test consistency of processing after resume()</title>
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script>
+
+const modulePath = 'audioworkletprocessor-no-process.js';
+
+// Verifies that an AudioWorkletProcessor without a defined process function
+// will throw an error when process() is called during the rendering quantum,
+// rather than during registration or construction.
+// https://webaudio.github.io/web-audio-api/#rendering-loop.
+promise_test(async () => {
+  // Ensures that no error occurs during registration (.addModule) or
+  // construction (new AudioWorkletNode), but in during processing
+  // after context.resume().
+  const context = new AudioContext();
+  await context.suspend();
+
+  // Registers the processor.
+  await context.audioWorklet.addModule(modulePath);
+
+  // Calls the constructor of the processor.
+  const node =
+      new AudioWorkletNode(context, 'audioworkletprocessor-no-process');
+  await new Promise((resolve) => {
+    node.port.onmessage = (event) => {
+      assert_equals(event.data.state, 'created');
+      resolve();
+    }
+  });
+
+  // `context.resume()` should trigger the processor to start processing,
+  // which will throw an error for an undefined process() method.
+  return new Promise(async (resolve) => {
+    node.onprocessorerror = (event) => {
+      resolve();
+    };
+
+    await context.resume();
+  });
+}, 'Test an AudioWorkletProcessor with undefined process function.');
+
+</script>
diff --git a/tests/wpt/tests/webaudio/the-audio-api/the-audioworklet-interface/audioworkletprocessor-no-process.js b/tests/wpt/tests/webaudio/the-audio-api/the-audioworklet-interface/audioworkletprocessor-no-process.js
new file mode 100644
index 00000000000..0b856a20b12
--- /dev/null
+++ b/tests/wpt/tests/webaudio/the-audio-api/the-audioworklet-interface/audioworkletprocessor-no-process.js
@@ -0,0 +1,19 @@
+'use strict';
+
+/**
+ * @class NoProcessDef
+ * @extends AudioWorkletProcessor
+ *
+ * This processor class demonstrates an AudioWorkletProcessor with no
+ * process named function defined.
+ */
+class NoProcessDef extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.port.postMessage({
+      state: 'created',
+    });
+  }
+}
+
+registerProcessor('audioworkletprocessor-no-process', NoProcessDef);
diff --git a/tests/wpt/tests/webcodecs/utils.js b/tests/wpt/tests/webcodecs/utils.js
index f09334677a6..d2d7195d6b0 100644
--- a/tests/wpt/tests/webcodecs/utils.js
+++ b/tests/wpt/tests/webcodecs/utils.js
@@ -157,27 +157,6 @@ function testUnconfiguredCodec(test, codec, codecInput) {
 
 const kSRGBPixel = [50, 100, 150, 255];
 const kP3Pixel = [62, 99, 146, 255];
-const kRec2020Pixel = [87, 106, 151, 255];
-
-const kCanvasOptionsP3Uint8 = {
-  colorSpace: 'display-p3',
-  pixelFormat: 'uint8'
-};
-
-const kImageSettingOptionsP3Uint8 = {
-  colorSpace: 'display-p3',
-  storageFormat: 'uint8'
-};
-
-const kCanvasOptionsRec2020Uint8 = {
-  colorSpace: 'rec2020',
-  pixelFormat: 'uint8'
-};
-
-const kImageSettingOptionsRec2020Uint8 = {
-  colorSpace: 'rec2020',
-  storageFormat: 'uint8'
-};
 
 function testCanvas(ctx, width, height, expected_pixel, imageSetting, assert_compares) {
   // The dup getImageData is to workaournd crbug.com/1100233
diff --git a/tests/wpt/tests/webcodecs/videoDecoder-codec-specific-orientation.https.any.js b/tests/wpt/tests/webcodecs/videoDecoder-codec-specific-orientation.https.any.js
new file mode 100644
index 00000000000..9fb1714a7b1
--- /dev/null
+++ b/tests/wpt/tests/webcodecs/videoDecoder-codec-specific-orientation.https.any.js
@@ -0,0 +1,60 @@
+// META: global=window,dedicatedworker
+// META: script=videoDecoder-codec-specific-setup.js
+// META: variant=?av1
+// META: variant=?vp8
+// META: variant=?vp9
+// META: variant=?h264_avc
+// META: variant=?h264_annexb
+// META: variant=?h265_hevc
+// META: variant=?h265_annexb
+
+promise_test(async t => {
+  await checkImplements();
+  const config = {
+    ...CONFIG,
+    rotation: 90,
+    flip: true,
+  };
+
+  const support = await VideoDecoder.isConfigSupported(config);
+  assert_true(support.supported, 'supported');
+  assert_equals(support.config.rotation, config.rotation, 'rotation');
+  assert_equals(support.config.flip, config.flip, 'flip');
+}, 'Test that isConfigSupported() with orientation');
+
+promise_test(async t => {
+  await checkImplements();
+  const callbacks = {};
+  const decoder = createVideoDecoder(t, callbacks);
+  let active_config = {
+    ...CONFIG,
+    rotation: 90,
+    flip: true,
+  };
+  decoder.configure(active_config);
+  decoder.decode(CHUNKS[0]);
+  decoder.decode(CHUNKS[1]);
+
+  let outputs = 0;
+  callbacks.output = frame => {
+    outputs++;
+    assert_equals(frame.rotation, active_config.rotation, 'rotation');
+    assert_equals(frame.flip, active_config.flip, 'flip');
+    frame.close();
+  };
+
+  await decoder.flush();
+  assert_equals(outputs, 2, 'outputs');
+
+  // Reconfigure with a different orientation.
+  active_config = {
+    ...CONFIG,
+    rotation: 180,
+    flip: false,
+  };
+  decoder.configure(active_config);
+  decoder.decode(CHUNKS[0]);
+  decoder.decode(CHUNKS[1]);
+  await decoder.flush();
+  assert_equals(outputs, 4, 'outputs');
+}, 'Decode frames with orientation metadata');
diff --git a/tests/wpt/tests/webcodecs/videoDecoder-codec-specific-setup.js b/tests/wpt/tests/webcodecs/videoDecoder-codec-specific-setup.js
new file mode 100644
index 00000000000..19d1a10cb22
--- /dev/null
+++ b/tests/wpt/tests/webcodecs/videoDecoder-codec-specific-setup.js
@@ -0,0 +1,209 @@
+const AV1_DATA = {
+  src: 'av1.mp4',
+  config: {
+    codec: 'av01.0.04M.08',
+    codedWidth: 320,
+    codedHeight: 240,
+    visibleRect: {x: 0, y: 0, width: 320, height: 240},
+    displayWidth: 320,
+    displayHeight: 240,
+  },
+  chunks: [
+    {offset: 48, size: 1938}, {offset: 1986, size: 848},
+    {offset: 2834, size: 3}, {offset: 2837, size: 47}, {offset: 2884, size: 3},
+    {offset: 2887, size: 116}, {offset: 3003, size: 3},
+    {offset: 3006, size: 51}, {offset: 3057, size: 25},
+    {offset: 3082, size: 105}
+  ]
+};
+
+const VP8_DATA = {
+  src: 'vp8.webm',
+  config: {
+    codec: 'vp8',
+    codedWidth: 320,
+    codedHeight: 240,
+    visibleRect: {x: 0, y: 0, width: 320, height: 240},
+    displayWidth: 320,
+    displayHeight: 240,
+  },
+  chunks: [
+    {offset: 522, size: 4826}, {offset: 5355, size: 394},
+    {offset: 5756, size: 621}, {offset: 6384, size: 424},
+    {offset: 6815, size: 532}, {offset: 7354, size: 655},
+    {offset: 8016, size: 670}, {offset: 8693, size: 2413},
+    {offset: 11113, size: 402}, {offset: 11522, size: 686}
+  ]
+};
+
+const VP9_DATA = {
+  src: 'vp9.mp4',
+  // TODO(sandersd): Verify that the file is actually level 1.
+  config: {
+    codec: 'vp09.00.10.08',
+    codedWidth: 320,
+    codedHeight: 240,
+    displayAspectWidth: 320,
+    displayAspectHeight: 240,
+  },
+  chunks: [
+    {offset: 44, size: 3315}, {offset: 3359, size: 203},
+    {offset: 3562, size: 245}, {offset: 3807, size: 172},
+    {offset: 3979, size: 312}, {offset: 4291, size: 170},
+    {offset: 4461, size: 195}, {offset: 4656, size: 181},
+    {offset: 4837, size: 356}, {offset: 5193, size: 159}
+  ]
+};
+
+const H264_AVC_DATA = {
+  src: 'h264.mp4',
+  config: {
+    codec: 'avc1.64000b',
+    description: {offset: 9490, size: 45},
+    codedWidth: 320,
+    codedHeight: 240,
+    displayAspectWidth: 320,
+    displayAspectHeight: 240,
+  },
+  chunks: [
+    {offset: 48, size: 4140}, {offset: 4188, size: 604},
+    {offset: 4792, size: 475}, {offset: 5267, size: 561},
+    {offset: 5828, size: 587}, {offset: 6415, size: 519},
+    {offset: 6934, size: 532}, {offset: 7466, size: 523},
+    {offset: 7989, size: 454}, {offset: 8443, size: 528}
+  ]
+};
+
+const H264_ANNEXB_DATA = {
+  src: 'h264.annexb',
+  config: {
+    codec: 'avc1.64000b',
+    codedWidth: 320,
+    codedHeight: 240,
+    displayAspectWidth: 320,
+    displayAspectHeight: 240,
+  },
+  chunks: [
+    {offset: 0, size: 4175}, {offset: 4175, size: 602},
+    {offset: 4777, size: 473}, {offset: 5250, size: 559},
+    {offset: 5809, size: 585}, {offset: 6394, size: 517},
+    {offset: 6911, size: 530}, {offset: 7441, size: 521},
+    {offset: 7962, size: 452}, {offset: 8414, size: 526}
+  ]
+};
+
+const H265_HEVC_DATA = {
+  src: 'h265.mp4',
+  config: {
+    codec: 'hev1.1.6.L60.90',
+    description: {offset: 5821, size: 2406},
+    codedWidth: 320,
+    codedHeight: 240,
+    displayAspectWidth: 320,
+    displayAspectHeight: 240,
+  },
+  chunks: [
+    {offset: 44, size: 2515}, {offset: 2559, size: 279},
+    {offset: 2838, size: 327}, {offset: 3165, size: 329},
+    {offset: 3494, size: 308}, {offset: 3802, size: 292},
+    {offset: 4094, size: 352}, {offset: 4446, size: 296},
+    {offset: 4742, size: 216}, {offset: 4958, size: 344}
+  ]
+};
+
+const H265_ANNEXB_DATA = {
+  src: 'h265.annexb',
+  config: {
+    codec: 'hev1.1.6.L60.90',
+    codedWidth: 320,
+    codedHeight: 240,
+    displayAspectWidth: 320,
+    displayAspectHeight: 240,
+  },
+  chunks: [
+    {offset: 0, size: 4894}, {offset: 4894, size: 279},
+    {offset: 5173, size: 327}, {offset: 5500, size: 329},
+    {offset: 5829, size: 308}, {offset: 6137, size: 292},
+    {offset: 6429, size: 352}, {offset: 6781, size: 296},
+    {offset: 7077, size: 216}, {offset: 7293, size: 344}
+  ]
+};
+
+// Allows mutating `callbacks` after constructing the VideoDecoder, wraps calls
+// in t.step().
+function createVideoDecoder(t, callbacks) {
+  return new VideoDecoder({
+    output(frame) {
+      if (callbacks && callbacks.output) {
+        t.step(() => callbacks.output(frame));
+      } else {
+        t.unreached_func('unexpected output()');
+      }
+    },
+    error(e) {
+      if (callbacks && callbacks.error) {
+        t.step(() => callbacks.error(e));
+      } else {
+        t.unreached_func('unexpected error()');
+      }
+    }
+  });
+}
+
+function createCorruptChunk(index) {
+  let bad_data = CHUNK_DATA[index];
+  for (var i = 0; i < bad_data.byteLength; i += 4)
+    bad_data[i] = 0xFF;
+  return new EncodedVideoChunk(
+      {type: 'delta', timestamp: index, data: bad_data});
+}
+
+// Create a view of an ArrayBuffer.
+function view(buffer, {offset, size}) {
+  return new Uint8Array(buffer, offset, size);
+}
+
+async function checkImplements() {
+  // Don't run any tests if the codec is not supported.
+  assert_equals('function', typeof VideoDecoder.isConfigSupported);
+  let supported = false;
+  try {
+    // TODO(sandersd): To properly support H.264 in AVC format, this should
+    // include the `description`. For now this test assumes that H.264 Annex B
+    // support is the same as H.264 AVC support.
+    const support = await VideoDecoder.isConfigSupported({codec: CONFIG.codec});
+    supported = support.supported;
+  } catch (e) {
+  }
+  assert_implements_optional(supported, CONFIG.codec + ' unsupported');
+}
+
+let CONFIG = null;
+let CHUNK_DATA = null;
+let CHUNKS = null;
+promise_setup(async () => {
+  const data = {
+    '?av1': AV1_DATA,
+    '?vp8': VP8_DATA,
+    '?vp9': VP9_DATA,
+    '?h264_avc': H264_AVC_DATA,
+    '?h264_annexb': H264_ANNEXB_DATA,
+    '?h265_hevc': H265_HEVC_DATA,
+    '?h265_annexb': H265_ANNEXB_DATA
+  }[location.search];
+
+  // Fetch the media data and prepare buffers.
+  const response = await fetch(data.src);
+  const buf = await response.arrayBuffer();
+
+  CONFIG = {...data.config};
+  if (data.config.description) {
+    CONFIG.description = view(buf, data.config.description);
+  }
+
+  CHUNK_DATA = data.chunks.map((chunk, i) => view(buf, chunk));
+
+  CHUNKS = CHUNK_DATA.map(
+      (data, i) => new EncodedVideoChunk(
+          {type: i == 0 ? 'key' : 'delta', timestamp: i, duration: 1, data}));
+});
diff --git a/tests/wpt/tests/webcodecs/videoDecoder-codec-specific.https.any.js b/tests/wpt/tests/webcodecs/videoDecoder-codec-specific.https.any.js
index 1c3b8f120db..21beaa0f4b7 100644
--- a/tests/wpt/tests/webcodecs/videoDecoder-codec-specific.https.any.js
+++ b/tests/wpt/tests/webcodecs/videoDecoder-codec-specific.https.any.js
@@ -1,4 +1,5 @@
 // META: global=window,dedicatedworker
+// META: script=videoDecoder-codec-specific-setup.js
 // META: variant=?av1
 // META: variant=?vp8
 // META: variant=?vp9
@@ -7,217 +8,6 @@
 // META: variant=?h265_hevc
 // META: variant=?h265_annexb
 
-const AV1_DATA = {
-  src: 'av1.mp4',
-  config: {
-    codec: 'av01.0.04M.08',
-    codedWidth: 320,
-    codedHeight: 240,
-    visibleRect: {x: 0, y: 0, width: 320, height: 240},
-    displayWidth: 320,
-    displayHeight: 240,
-  },
-  chunks: [
-    {offset: 48, size: 1938}, {offset: 1986, size: 848},
-    {offset: 2834, size: 3}, {offset: 2837, size: 47}, {offset: 2884, size: 3},
-    {offset: 2887, size: 116}, {offset: 3003, size: 3},
-    {offset: 3006, size: 51}, {offset: 3057, size: 25},
-    {offset: 3082, size: 105}
-  ]
-};
-
-const VP8_DATA = {
-  src: 'vp8.webm',
-  config: {
-    codec: 'vp8',
-    codedWidth: 320,
-    codedHeight: 240,
-    visibleRect: {x: 0, y: 0, width: 320, height: 240},
-    displayWidth: 320,
-    displayHeight: 240,
-  },
-  chunks: [
-    {offset: 522, size: 4826}, {offset: 5355, size: 394},
-    {offset: 5756, size: 621}, {offset: 6384, size: 424},
-    {offset: 6815, size: 532}, {offset: 7354, size: 655},
-    {offset: 8016, size: 670}, {offset: 8693, size: 2413},
-    {offset: 11113, size: 402}, {offset: 11522, size: 686}
-  ]
-};
-
-const VP9_DATA = {
-  src: 'vp9.mp4',
-  // TODO(sandersd): Verify that the file is actually level 1.
-  config: {
-    codec: 'vp09.00.10.08',
-    codedWidth: 320,
-    codedHeight: 240,
-    displayAspectWidth: 320,
-    displayAspectHeight: 240,
-  },
-  chunks: [
-    {offset: 44, size: 3315}, {offset: 3359, size: 203},
-    {offset: 3562, size: 245}, {offset: 3807, size: 172},
-    {offset: 3979, size: 312}, {offset: 4291, size: 170},
-    {offset: 4461, size: 195}, {offset: 4656, size: 181},
-    {offset: 4837, size: 356}, {offset: 5193, size: 159}
-  ]
-};
-
-const H264_AVC_DATA = {
-  src: 'h264.mp4',
-  config: {
-    codec: 'avc1.64000b',
-    description: {offset: 9490, size: 45},
-    codedWidth: 320,
-    codedHeight: 240,
-    displayAspectWidth: 320,
-    displayAspectHeight: 240,
-  },
-  chunks: [
-    {offset: 48, size: 4140}, {offset: 4188, size: 604},
-    {offset: 4792, size: 475}, {offset: 5267, size: 561},
-    {offset: 5828, size: 587}, {offset: 6415, size: 519},
-    {offset: 6934, size: 532}, {offset: 7466, size: 523},
-    {offset: 7989, size: 454}, {offset: 8443, size: 528}
-  ]
-};
-
-const H264_ANNEXB_DATA = {
-  src: 'h264.annexb',
-  config: {
-    codec: 'avc1.64000b',
-    codedWidth: 320,
-    codedHeight: 240,
-    displayAspectWidth: 320,
-    displayAspectHeight: 240,
-  },
-  chunks: [
-    {offset: 0, size: 4175}, {offset: 4175, size: 602},
-    {offset: 4777, size: 473}, {offset: 5250, size: 559},
-    {offset: 5809, size: 585}, {offset: 6394, size: 517},
-    {offset: 6911, size: 530}, {offset: 7441, size: 521},
-    {offset: 7962, size: 452}, {offset: 8414, size: 526}
-  ]
-};
-
-const H265_HEVC_DATA = {
-  src: 'h265.mp4',
-  config: {
-    codec: 'hev1.1.6.L60.90',
-    description: {offset: 5821, size: 2406},
-    codedWidth: 320,
-    codedHeight: 240,
-    displayAspectWidth: 320,
-    displayAspectHeight: 240,
-  },
-  chunks: [
-    {offset: 44, size: 2515}, {offset: 2559, size: 279},
-    {offset: 2838, size: 327}, {offset: 3165, size: 329},
-    {offset: 3494, size: 308}, {offset: 3802, size: 292},
-    {offset: 4094, size: 352}, {offset: 4446, size: 296},
-    {offset: 4742, size: 216}, {offset: 4958, size: 344}
-  ]
-};
-
-const H265_ANNEXB_DATA = {
-  src: 'h265.annexb',
-  config: {
-    codec: 'hev1.1.6.L60.90',
-    codedWidth: 320,
-    codedHeight: 240,
-    displayAspectWidth: 320,
-    displayAspectHeight: 240,
-  },
-  chunks: [
-    {offset: 0, size: 4894}, {offset: 4894, size: 279},
-    {offset: 5173, size: 327}, {offset: 5500, size: 329},
-    {offset: 5829, size: 308}, {offset: 6137, size: 292},
-    {offset: 6429, size: 352}, {offset: 6781, size: 296},
-    {offset: 7077, size: 216}, {offset: 7293, size: 344}
-  ]
-};
-
-// Allows mutating `callbacks` after constructing the VideoDecoder, wraps calls
-// in t.step().
-function createVideoDecoder(t, callbacks) {
-  return new VideoDecoder({
-    output(frame) {
-      if (callbacks && callbacks.output) {
-        t.step(() => callbacks.output(frame));
-      } else {
-        t.unreached_func('unexpected output()');
-      }
-    },
-    error(e) {
-      if (callbacks && callbacks.error) {
-        t.step(() => callbacks.error(e));
-      } else {
-        t.unreached_func('unexpected error()');
-      }
-    }
-  });
-}
-
-function createCorruptChunk(index) {
-  let bad_data = CHUNK_DATA[index];
-  for (var i = 0; i < bad_data.byteLength; i += 4)
-    bad_data[i] = 0xFF;
-  return new EncodedVideoChunk(
-      {type: 'delta', timestamp: index, data: bad_data});
-}
-
-// Create a view of an ArrayBuffer.
-function view(buffer, {offset, size}) {
-  return new Uint8Array(buffer, offset, size);
-}
-
-async function checkImplements() {
-  // Don't run any tests if the codec is not supported.
-  assert_equals("function", typeof VideoDecoder.isConfigSupported);
-  let supported = false;
-  try {
-    // TODO(sandersd): To properly support H.264 in AVC format, this should
-    // include the `description`. For now this test assumes that H.264 Annex B
-    // support is the same as H.264 AVC support.
-    const support =
-        await VideoDecoder.isConfigSupported({codec: CONFIG.codec});
-    supported = support.supported;
-  } catch (e) {
-  }
-  assert_implements_optional(supported, CONFIG.codec + ' unsupported');
-}
-
-let CONFIG = null;
-let CHUNK_DATA = null;
-let CHUNKS = null;
-promise_setup(async () => {
-  const data = {
-    '?av1': AV1_DATA,
-    '?vp8': VP8_DATA,
-    '?vp9': VP9_DATA,
-    '?h264_avc': H264_AVC_DATA,
-    '?h264_annexb': H264_ANNEXB_DATA,
-    '?h265_hevc': H265_HEVC_DATA,
-    '?h265_annexb': H265_ANNEXB_DATA
-  }[location.search];
-
-  // Fetch the media data and prepare buffers.
-  const response = await fetch(data.src);
-  const buf = await response.arrayBuffer();
-
-  CONFIG = {...data.config};
-  if (data.config.description) {
-    CONFIG.description = view(buf, data.config.description);
-  }
-
-  CHUNK_DATA = data.chunks.map((chunk, i) => view(buf, chunk));
-
-  CHUNKS = CHUNK_DATA.map(
-      (data, i) => new EncodedVideoChunk(
-          {type: i == 0 ? 'key' : 'delta', timestamp: i, duration: 1, data}));
-});
-
 promise_test(async t => {
   await checkImplements();
   const support = await VideoDecoder.isConfigSupported(CONFIG);
diff --git a/tests/wpt/tests/webcodecs/videoFrame-drawImage.any.js b/tests/wpt/tests/webcodecs/videoFrame-drawImage.any.js
index 9830181c4f5..8fcd38a807c 100644
--- a/tests/wpt/tests/webcodecs/videoFrame-drawImage.any.js
+++ b/tests/wpt/tests/webcodecs/videoFrame-drawImage.any.js
@@ -25,22 +25,16 @@ test(_ => {
 
 test(_ => {
   return testDrawImageFromVideoFrame(
-      48, 36, kP3Pixel, kCanvasOptionsP3Uint8, {colorSpaceConversion: 'none'},
-      kImageSettingOptionsP3Uint8);
+      48, 36, kP3Pixel, {colorSpace: 'display-p3'}, {colorSpaceConversion: 'none'},
+      {colorSpace: 'display-p3'});
 }, 'drawImage(VideoFrame) with canvas(48x36 display-p3 uint8).');
 
 test(_ => {
   return testDrawImageFromVideoFrame(
-      480, 360, kP3Pixel, kCanvasOptionsP3Uint8, {colorSpaceConversion: 'none'},
-      kImageSettingOptionsP3Uint8);
+      480, 360, kP3Pixel, {colorSpace: 'display-p3'}, {colorSpaceConversion: 'none'},
+      {colorSpace: 'display-p3'});
 }, 'drawImage(VideoFrame) with canvas(480x360 display-p3 uint8).');
 
-test(_ => {
-  return testDrawImageFromVideoFrame(
-      48, 36, kRec2020Pixel, kCanvasOptionsRec2020Uint8,
-      {colorSpaceConversion: 'none'}, kImageSettingOptionsRec2020Uint8);
-}, 'drawImage(VideoFrame) with canvas(48x36 rec2020 uint8).');
-
 test(_ => {
   let width = 128;
   let height = 128;
@@ -101,4 +95,4 @@ test(_ => {
                                 [255, 255, 255, 255]);
   assert_array_equals(peekPixel(ctx, width - 1, height - 1),
                                 [255, 255, 255, 255]);
-}, 'drawImage with display size != visible size');
\ No newline at end of file
+}, 'drawImage with display size != visible size');
diff --git a/tests/wpt/tests/webcodecs/videoFrame-orientation.any.js b/tests/wpt/tests/webcodecs/videoFrame-orientation.any.js
index f4b3d9f10f8..28405764c90 100644
--- a/tests/wpt/tests/webcodecs/videoFrame-orientation.any.js
+++ b/tests/wpt/tests/webcodecs/videoFrame-orientation.any.js
@@ -23,8 +23,9 @@ function make4x2VideoFrame(rotation, flip) {
   });
 }
 
-test(_ => {
-  let frame = make4x2VideoFrame(-315, true);
+// Verifies various properties about a frame created frommake4x2VideoFrame()
+// with flip=true and a 90 degree rotation.
+function validateOrientedFrame(frame) {
   assert_equals(frame.visibleRect.width, 4, 'visibleRect.width');
   assert_equals(frame.visibleRect.height, 2, 'visibleRect.height');
   assert_equals(frame.rotation, 90, 'rotation');
@@ -56,6 +57,11 @@ test(_ => {
   check_pixel(1, 0, [0, 0, 255]);
   check_pixel(0, 3, [255, 0, 0]);
   check_pixel(1, 3, [0, 255, 0]);
+}
+
+test(_ => {
+  let frame = make4x2VideoFrame(-315, true);
+  validateOrientedFrame(frame);
 }, 'Test oriented VideoFrame from ArrayBuffer');
 
 test(_ => {
@@ -81,3 +87,10 @@ test(_ => {
     }
   }
 }, 'Test combinations of rotation and flip');
+
+test(_ => {
+  let orig_frame = make4x2VideoFrame(0, false);
+  let frame = new VideoFrame(orig_frame, {rotation: -315, flip: true});
+  orig_frame.close();
+  validateOrientedFrame(frame);
+}, 'Test orientation of wrapped VideoFrame');
diff --git a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/context_destroyed/context_destroyed.py b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/context_destroyed/context_destroyed.py
index ac964b67687..254708c725a 100644
--- a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/context_destroyed/context_destroyed.py
+++ b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/context_destroyed/context_destroyed.py
@@ -332,3 +332,34 @@ async def test_new_user_context(
     )
 
     remove_listener()
+
+
+async def test_with_user_context_subscription(
+    bidi_session,
+    subscribe_events,
+    create_user_context,
+    wait_for_events
+):
+    user_context = await create_user_context()
+
+    await subscribe_events(
+        events=[CONTEXT_DESTROYED_EVENT], user_contexts=[user_context]
+    )
+
+    context = await bidi_session.browsing_context.create(
+        type_hint="tab", user_context=user_context
+    )
+
+    with wait_for_events([CONTEXT_DESTROYED_EVENT]) as waiter:
+        await bidi_session.browsing_context.close(context=context["context"])
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+        assert len(events) == 1
+
+        assert_browsing_context(
+            events[0][1],
+            context["context"],
+            children=0,
+            url="about:blank",
+            parent=None,
+            user_context=user_context,
+        )
diff --git a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigate/navigate.py b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigate/navigate.py
index 8f2fd4822ab..83e5f776316 100644
--- a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigate/navigate.py
+++ b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigate/navigate.py
@@ -1,6 +1,7 @@
 import asyncio
 
 import pytest
+import webdriver.bidi.error as error
 from webdriver.bidi.modules.script import ContextTarget
 
 from . import navigate_and_assert
@@ -8,6 +9,8 @@ from ... import any_string
 
 pytestmark = pytest.mark.asyncio
 
+USER_PROMPT_OPENED_EVENT = "browsingContext.userPromptOpened"
+
 
 async def test_payload(bidi_session, inline, new_tab):
     url = inline("<div>foo</div>")
@@ -81,12 +84,10 @@ async def test_relative_url(bidi_session, new_tab, url):
         "/webdriver/tests/bidi/browsing_context/support/empty.html"
     )
 
-    # Navigate to page1 with wait=interactive to make sure the document's base URI
-    # was updated.
-    await navigate_and_assert(bidi_session, new_tab, url_before, "interactive")
+    await navigate_and_assert(bidi_session, new_tab, url_before, "none")
 
     url_after = url_before.replace("empty.html", "other.html")
-    await navigate_and_assert(bidi_session, new_tab, url_after, "interactive")
+    await navigate_and_assert(bidi_session, new_tab, url_after, "none")
 
 
 async def test_same_document_navigation_in_before_unload(bidi_session, new_tab, url):
@@ -110,25 +111,44 @@ async def test_same_document_navigation_in_before_unload(bidi_session, new_tab,
 
 
 @pytest.mark.capabilities({"unhandledPromptBehavior": {'beforeUnload': 'ignore'}})
-async def test_wait_none_with_beforeunload_prompt(
-    bidi_session, new_tab, setup_beforeunload_page, inline
-):
+@pytest.mark.parametrize("value", ["none", "interactive", "complete"])
+@pytest.mark.parametrize("accept", [True, False])
+async def test_navigate_with_beforeunload_prompt(bidi_session, new_tab,
+        setup_beforeunload_page, inline, subscribe_events, wait_for_event,
+        wait_for_future_safe, value, accept):
     await setup_beforeunload_page(new_tab)
 
+    await subscribe_events(events=[USER_PROMPT_OPENED_EVENT])
+    on_prompt_opened = wait_for_event(USER_PROMPT_OPENED_EVENT)
+
     url_after = inline("<div>foo</div>")
 
-    result = await bidi_session.browsing_context.navigate(
-        context=new_tab["context"], url=url_after, wait="none"
+    navigated_future = asyncio.create_task(
+        bidi_session.browsing_context.navigate(context=new_tab["context"],
+                                               url=url_after, wait=value))
+
+    # Wait for the prompt to open.
+    await wait_for_future_safe(on_prompt_opened)
+    # Make sure the navigation is not finished.
+    assert not navigated_future.done(), "Navigation should not be finished before prompt is handled."
+
+    await bidi_session.browsing_context.handle_user_prompt(
+        context=new_tab["context"], accept=accept
     )
 
-    assert result["url"] == url_after
-    any_string(result["navigation"])
+    if accept:
+        await navigated_future
+    else:
+        with pytest.raises(error.UnknownErrorException):
+            await wait_for_future_safe(navigated_future)
 
 
 @pytest.mark.capabilities({"unhandledPromptBehavior": {'beforeUnload': 'ignore'}})
-async def test_wait_none_with_beforeunload_prompt_in_iframe(
-    bidi_session, new_tab, setup_beforeunload_page, inline
-):
+@pytest.mark.parametrize("value", ["none", "interactive", "complete"])
+@pytest.mark.parametrize("accept", [True, False])
+async def test_navigate_with_beforeunload_prompt_in_iframe(bidi_session,
+        new_tab, setup_beforeunload_page, inline, subscribe_events,
+        wait_for_event, wait_for_future_safe, value, accept):
     page = inline(f"""<iframe src={inline("foo")}></iframe>""")
     await bidi_session.browsing_context.navigate(
         context=new_tab["context"], url=page, wait="complete"
@@ -139,35 +159,69 @@ async def test_wait_none_with_beforeunload_prompt_in_iframe(
 
     await setup_beforeunload_page(iframe_context)
 
+    await subscribe_events(events=[USER_PROMPT_OPENED_EVENT])
+    on_prompt_opened = wait_for_event(USER_PROMPT_OPENED_EVENT)
+
     url_after = inline("<div>foo</div>")
 
-    result = await bidi_session.browsing_context.navigate(
-        context=iframe_context["context"], url=url_after, wait="none"
+    navigated_future = asyncio.create_task(
+        bidi_session.browsing_context.navigate(
+            context=iframe_context["context"], url=url_after, wait=value))
+
+    # Wait for the prompt to open.
+    await wait_for_future_safe(on_prompt_opened)
+    # Make sure the navigation is not finished.
+    assert not navigated_future.done(), "Navigation should not be finished before prompt is handled."
+
+    await bidi_session.browsing_context.handle_user_prompt(
+        context=new_tab["context"], accept=accept
     )
 
-    assert result["url"] == url_after
-    any_string(result["navigation"])
+    if accept:
+        await navigated_future
+    else:
+        with pytest.raises(error.UnknownErrorException):
+            await wait_for_future_safe(navigated_future)
 
 
 @pytest.mark.capabilities({"unhandledPromptBehavior": {'beforeUnload': 'ignore'}})
-async def test_wait_none_with_beforeunload_prompt_in_iframe_navigate_in_top_context(
-    bidi_session, new_tab, setup_beforeunload_page, inline
-):
+@pytest.mark.parametrize("value", ["none", "interactive", "complete"])
+@pytest.mark.parametrize("accept", [True, False])
+async def test_navigate_with_beforeunload_prompt_in_iframe_navigate_in_top_context(
+        bidi_session, new_tab, setup_beforeunload_page, inline,
+        subscribe_events, wait_for_event, wait_for_future_safe, value, accept):
     page = inline(f"""<iframe src={inline("foo")}></iframe>""")
     await bidi_session.browsing_context.navigate(
         context=new_tab["context"], url=page, wait="complete"
     )
 
-    contexts = await bidi_session.browsing_context.get_tree(root=new_tab["context"])
+    contexts = await bidi_session.browsing_context.get_tree(
+        root=new_tab["context"])
     iframe_context = contexts[0]["children"][0]
 
     await setup_beforeunload_page(iframe_context)
 
+    await subscribe_events(events=[USER_PROMPT_OPENED_EVENT])
+    on_prompt_opened = wait_for_event(USER_PROMPT_OPENED_EVENT)
+
     url_after = inline("<div>foo</div>")
 
-    result = await bidi_session.browsing_context.navigate(
-        context=new_tab["context"], url=url_after, wait="none"
+    navigated_future = asyncio.create_task(
+        bidi_session.browsing_context.navigate(
+            context=new_tab["context"], url=url_after, wait=value
+        ))
+
+    # Wait for the prompt to open.
+    await wait_for_future_safe(on_prompt_opened)
+    # Make sure the navigation is not finished.
+    assert not navigated_future.done(), "Navigation should not be finished before prompt is handled."
+
+    await bidi_session.browsing_context.handle_user_prompt(
+        context=new_tab["context"], accept=accept
     )
 
-    assert result["url"] == url_after
-    any_string(result["navigation"])
+    if accept:
+        await navigated_future
+    else:
+        with pytest.raises(error.UnknownErrorException):
+            await wait_for_future_safe(navigated_future)
diff --git a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigate/wait.py b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigate/wait.py
index 3a351e10890..e19e516baf3 100644
--- a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigate/wait.py
+++ b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigate/wait.py
@@ -28,11 +28,9 @@ async def test_expected_url(bidi_session, inline, new_tab, value):
         context=new_tab["context"], url=url, wait=value
     )
     assert result["url"] == url
-    if value != "none":
-        contexts = await bidi_session.browsing_context.get_tree(
-            root=new_tab["context"], max_depth=0
-        )
-        assert contexts[0]["url"] == url
+    contexts = await bidi_session.browsing_context.get_tree(
+        root=new_tab["context"], max_depth=0)
+    assert contexts[0]["url"] == url
 
 
 @pytest.mark.parametrize(
@@ -49,10 +47,10 @@ async def test_slow_image_blocks_load(bidi_session, inline, new_tab, wait, expec
 
     await wait_for_navigation(bidi_session, new_tab["context"], url, wait, expect_timeout)
 
-    # We cannot assert the URL for "none" by definition, and for "complete", since
-    # we expect a timeout. For the timeout case, the wait_for_navigation helper will
-    # resume  after 1 second, there is no guarantee that the URL has been updated.
-    if wait == "interactive":
+    # We cannot assert the URL for "complete", since we expect a timeout. For
+    # this case, the wait_for_navigation helper will resume  after 1 second,
+    # there is no guarantee that the URL has been updated.
+    if wait != "complete":
         contexts = await bidi_session.browsing_context.get_tree(
             root=new_tab["context"], max_depth=0
         )
diff --git a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigation_started/navigation_started.py b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigation_started/navigation_started.py
index 599708a5de8..80d6907acfa 100644
--- a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigation_started/navigation_started.py
+++ b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/navigation_started/navigation_started.py
@@ -435,20 +435,35 @@ async def test_with_beforeunload_prompt(
     subscribe_events,
     setup_beforeunload_page,
 ):
-    await subscribe_events(events=[NAVIGATION_STARTED_EVENT])
+    await subscribe_events(events=[NAVIGATION_STARTED_EVENT, USER_PROMPT_OPENED_EVENT])
     await setup_beforeunload_page(new_tab)
     target_url = url("/webdriver/tests/support/html/default.html", domain="alt")
 
     on_navigation_started = wait_for_event(NAVIGATION_STARTED_EVENT)
-    result = await bidi_session.browsing_context.navigate(
-        context=new_tab["context"], url=target_url, wait="none"
+    on_user_prompt_opened = wait_for_event(USER_PROMPT_OPENED_EVENT)
+
+    # Trigger navigation, but don't wait for it to be finished.
+    navigation_future = asyncio.create_task(
+        bidi_session.browsing_context.navigate(
+            context=new_tab["context"], url=target_url, wait="none"
+        ))
+
+    navigation_started_event = await wait_for_future_safe(on_navigation_started)
+
+    assert navigation_started_event["context"] == new_tab["context"]
+    assert navigation_started_event["url"] == target_url
+
+    # Finish navigation to prevent navigation leak.
+    await wait_for_future_safe(on_user_prompt_opened)
+
+    await bidi_session.browsing_context.handle_user_prompt(
+        context=new_tab["context"], accept=True
     )
 
-    event = await wait_for_future_safe(on_navigation_started)
-
-    assert event["context"] == new_tab["context"]
-    assert event["navigation"] == result["navigation"]
-    assert event["url"] == target_url
+    navigation_result = await navigation_future
+    assert navigation_result["url"] == target_url
+    assert navigation_result["navigation"] == navigation_started_event[
+        "navigation"]
 
 
 @pytest.mark.capabilities({"unhandledPromptBehavior": {"beforeUnload": "ignore"}})
diff --git a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/reload/wait.py b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/reload/wait.py
index a9f113a2a9a..30e44e1f7c0 100644
--- a/tests/wpt/tests/webdriver/tests/bidi/browsing_context/reload/wait.py
+++ b/tests/wpt/tests/webdriver/tests/bidi/browsing_context/reload/wait.py
@@ -7,6 +7,8 @@ from ... import any_string
 
 pytestmark = pytest.mark.asyncio
 
+USER_PROMPT_OPENED_EVENT = "browsingContext.userPromptOpened"
+
 
 async def wait_for_reload(bidi_session, context, wait, expect_timeout):
     # Ultimately, "interactive" and "complete" should support a timeout argument.
@@ -38,13 +40,12 @@ async def test_expected_url(bidi_session, inline, new_tab, wait):
         wait=wait
     )
 
-    if wait != "none":
-        assert reload_result["navigation"] != navigate_result["navigation"]
-        assert reload_result["url"] == url
+    assert reload_result["navigation"] != navigate_result["navigation"]
+    assert reload_result["url"] == url
 
-        contexts = await bidi_session.browsing_context.get_tree(
-            root=new_tab["context"], max_depth=0)
-        assert contexts[0]["url"] == url
+    contexts = await bidi_session.browsing_context.get_tree(
+        root=new_tab["context"], max_depth=0)
+    assert contexts[0]["url"] == url
 
 
 @pytest.mark.parametrize(
@@ -68,10 +69,10 @@ async def test_slow_image_blocks_load(bidi_session, inline, new_tab, wait,
     await wait_for_reload(bidi_session, new_tab["context"], wait,
                           expect_timeout)
 
-    # We cannot assert the URL for "none" by definition, and for "complete", since
-    # we expect a timeout. For the timeout case, the wait_for_navigation helper will
-    # resume after 1 second, there is no guarantee that the URL has been updated.
-    if wait == "interactive":
+    # We cannot assert the URL for "complete", since we expect a timeout. For
+    # this case, the wait_for_navigation helper will resume after 1 second,
+    # there is no guarantee that the URL has been updated.
+    if wait != "complete":
         contexts = await bidi_session.browsing_context.get_tree(
             root=new_tab["context"], max_depth=0)
         assert contexts[0]["url"] == url
@@ -175,16 +176,29 @@ async def test_slow_script_blocks_domContentLoaded(bidi_session, inline,
     remove_listener_1()
 
 
-@pytest.mark.capabilities({"unhandledPromptBehavior": {"beforeUnload": "ignore"}})
-async def test_wait_none_with_beforeunload_prompt(
-    bidi_session, new_tab, setup_beforeunload_page, url
-):
+@pytest.mark.parametrize("wait", ["none", "interactive", "complete"], )
+@pytest.mark.capabilities(
+    {"unhandledPromptBehavior": {"beforeUnload": "ignore"}})
+async def test_beforeunload_prompt(bidi_session, new_tab,
+        setup_beforeunload_page, url, subscribe_events, wait, wait_for_event):
     page_url = url("/webdriver/tests/support/html/beforeunload.html")
     await setup_beforeunload_page(new_tab)
 
-    result = await bidi_session.browsing_context.reload(
-        context=new_tab["context"], wait="none"
-    )
+    await subscribe_events(events=[USER_PROMPT_OPENED_EVENT])
+    on_prompt_opened = wait_for_event(USER_PROMPT_OPENED_EVENT)
 
-    assert result["url"] == page_url
-    any_string(result["navigation"])
+    reloaded_future = asyncio.create_task(
+        bidi_session.browsing_context.reload(context=new_tab["context"],
+                                             wait=wait))
+
+    await on_prompt_opened
+    # Make sure the navigation is not finished.
+    assert not reloaded_future.done(), "Reload should not be finished before prompt is handled."
+
+    await bidi_session.browsing_context.handle_user_prompt(
+        context=new_tab["context"], accept=True)
+
+    reloaded_result = await reloaded_future
+
+    assert reloaded_result["url"] == page_url
+    any_string(reloaded_result["navigation"])
diff --git a/tests/wpt/tests/webdriver/tests/bidi/input/perform_actions/invalid.py b/tests/wpt/tests/webdriver/tests/bidi/input/perform_actions/invalid.py
index ad7dab39935..c78090d2c67 100644
--- a/tests/wpt/tests/webdriver/tests/bidi/input/perform_actions/invalid.py
+++ b/tests/wpt/tests/webdriver/tests/bidi/input/perform_actions/invalid.py
@@ -432,7 +432,7 @@ async def test_params_pointer_action_move_coordinate_missing(
 
 
 @pytest.mark.parametrize("coordinate", ["x", "y"])
-@pytest.mark.parametrize("value", [None, "foo", True, 0.1, [], {}])
+@pytest.mark.parametrize("value", [None, "foo", True, [], {}])
 async def test_params_pointer_action_move_coordinate_invalid_type(
         perform_actions, coordinate, value):
     action = create_pointer_action(
diff --git a/tests/wpt/tests/webdriver/tests/bidi/network/fetch_error/fetch_error.py b/tests/wpt/tests/webdriver/tests/bidi/network/fetch_error/fetch_error.py
index bdb66722ce9..ea08c99a5ef 100644
--- a/tests/wpt/tests/webdriver/tests/bidi/network/fetch_error/fetch_error.py
+++ b/tests/wpt/tests/webdriver/tests/bidi/network/fetch_error/fetch_error.py
@@ -152,19 +152,16 @@ async def test_navigation_id(
     assert fetch_error_event["navigation"] is None
 
     on_fetch_error = wait_for_event(FETCH_ERROR_EVENT)
-    result = await bidi_session.browsing_context.navigate(
+    asyncio.ensure_future(bidi_session.browsing_context.navigate(
         context=new_tab["context"],
-        url=PAGE_INVALID_URL,
-    )
+        url=PAGE_INVALID_URL))
     fetch_error_event = await wait_for_future_safe(on_fetch_error)
 
     expected_request = {"method": "GET", "url": PAGE_INVALID_URL}
     assert_fetch_error_event(
         fetch_error_event,
         expected_request=expected_request,
-        navigation=result["navigation"],
     )
-    assert fetch_error_event["navigation"] == result["navigation"]
 
 
 @pytest.mark.parametrize(
@@ -320,10 +317,10 @@ async def test_redirect_navigation(
     on_fetch_error = wait_for_event(FETCH_ERROR_EVENT)
     on_response_completed = wait_for_event(RESPONSE_COMPLETED_EVENT)
 
-    result = await bidi_session.browsing_context.navigate(
+    asyncio.ensure_future(bidi_session.browsing_context.navigate(
         context=new_tab["context"],
         url=redirect_url,
-    )
+    ))
 
     wait = AsyncPoll(bidi_session, timeout=2)
     fetch_error_event = await on_fetch_error
@@ -333,14 +330,12 @@ async def test_redirect_navigation(
     assert_response_event(
         response_completed_event,
         expected_request=expected_request,
-        navigation=result["navigation"],
         redirect_count=0,
     )
     expected_request = {"method": "GET", "url": PAGE_INVALID_URL}
     assert_fetch_error_event(
         fetch_error_event,
         expected_request=expected_request,
-        navigation=result["navigation"],
         redirect_count=1,
     )
 
diff --git a/tests/wpt/tests/webdriver/tests/bidi/session/subscribe/user_contexts.py b/tests/wpt/tests/webdriver/tests/bidi/session/subscribe/user_contexts.py
index ee7c65ca44d..f98221ba7e3 100644
--- a/tests/wpt/tests/webdriver/tests/bidi/session/subscribe/user_contexts.py
+++ b/tests/wpt/tests/webdriver/tests/bidi/session/subscribe/user_contexts.py
@@ -2,8 +2,9 @@ import pytest
 
 from ... import create_console_api_message, recursive_compare
 
+pytestmark = pytest.mark.asyncio
+
 
-@pytest.mark.asyncio
 async def test_subscribe_one_user_context(bidi_session, subscribe_events, create_user_context, wait_for_events):
     user_context = await create_user_context()
 
@@ -33,7 +34,6 @@ async def test_subscribe_one_user_context(bidi_session, subscribe_events, create
         )
 
 
-@pytest.mark.asyncio
 async def test_subscribe_multiple_user_contexts(bidi_session, subscribe_events, wait_for_events, create_user_context):
     user_context = await create_user_context()
 
@@ -54,3 +54,291 @@ async def test_subscribe_multiple_user_contexts(bidi_session, subscribe_events,
         await create_console_api_message(bidi_session, other_context, "text2")
         events = await waiter.get_events(lambda events : len(events) >= 2)
         assert len(events) == 2
+
+
+async def test_buffered_event(
+    bidi_session, subscribe_events, create_user_context, wait_for_events
+):
+    user_context = await create_user_context()
+
+    new_context = await bidi_session.browsing_context.create(
+        type_hint="tab", user_context=user_context
+    )
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        await create_console_api_message(bidi_session, new_context, "text1")
+        events = await waiter.get_events(lambda events: len(events) >= 0)
+
+        # Make sure we didn't receive any events
+        assert len(events) == 0
+
+        # Subscribe to user context and make sure we received the buffered event.
+        await subscribe_events(events=["log.entryAdded"], user_contexts=[user_context])
+
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": "text1",
+            },
+            events[0][1],
+        )
+
+
+async def test_subscribe_to_user_context_and_then_globally(
+    bidi_session, subscribe_events, create_user_context, new_tab, wait_for_events
+):
+    user_context = await create_user_context()
+    new_context_in_user_context = await bidi_session.browsing_context.create(
+        user_context=user_context, type_hint="tab"
+    )
+
+    # Subscribe for log events to a specific user context
+    await subscribe_events(events=["log.entryAdded"], user_contexts=[user_context])
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in another user context
+        event_expected_text = await create_console_api_message(
+            bidi_session, new_tab, "text1"
+        )
+
+        events = await waiter.get_events(lambda events: len(events) >= 0)
+
+        assert len(events) == 0
+
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text2"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+        # Subscribe for log events globally
+        await subscribe_events(events=["log.entryAdded"])
+
+        events = await waiter.get_events(lambda events: len(events) >= 2)
+
+        # Check that we received the buffered event
+        assert len(events) == 2
+        recursive_compare(
+            {
+                "text": event_expected_text,
+            },
+            events[1][1],
+        )
+
+        # Trigger again events in each context
+        expected_text = await create_console_api_message(bidi_session, new_tab, "text3")
+        events = await waiter.get_events(lambda events: len(events) >= 3)
+
+        assert len(events) == 3
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[2][1],
+        )
+
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text4"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 4)
+
+        assert len(events) == 4
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[3][1],
+        )
+
+
+async def test_subscribe_to_user_context_and_then_to_browsing_context(
+    bidi_session, subscribe_events, create_user_context, wait_for_events
+):
+    user_context = await create_user_context()
+    new_context_in_user_context = await bidi_session.browsing_context.create(
+        user_context=user_context, type_hint="tab"
+    )
+
+    # Subscribe for log events to a specific user context
+    await subscribe_events(events=["log.entryAdded"], user_contexts=[user_context])
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the observed context
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Subscribe for log events to the browsing context
+    # in the observed user context.
+    await subscribe_events(
+        events=["log.entryAdded"], contexts=[new_context_in_user_context["context"]]
+    )
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger again the event
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text2"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Create a new context in the default user context
+    new_context_in_default_user_context = await bidi_session.browsing_context.create(
+        type_hint="tab"
+    )
+
+    # Subscribe for log events to the browsing context
+    # in the default user context.
+    await subscribe_events(
+        events=["log.entryAdded"],
+        contexts=[new_context_in_default_user_context["context"]],
+    )
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger again the event
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_default_user_context, "text3"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+
+async def test_subscribe_globally_and_then_to_user_context(
+    bidi_session, subscribe_events, create_user_context, wait_for_events
+):
+    user_context = await create_user_context()
+    new_context_in_user_context = await bidi_session.browsing_context.create(
+        user_context=user_context, type_hint="tab"
+    )
+
+    # Subscribe for log events globally
+    await subscribe_events(events=["log.entryAdded"])
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Subscribe for log events to a specific user context
+    await subscribe_events(events=["log.entryAdded"], user_contexts=[user_context])
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger the event again.
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text2"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+
+async def test_subscribe_to_browsing_context_and_then_to_user_context(
+    bidi_session, subscribe_events, create_user_context, wait_for_events
+):
+    user_context = await create_user_context()
+    new_context_in_user_context = await bidi_session.browsing_context.create(
+        user_context=user_context, type_hint="tab"
+    )
+
+    # Subscribe for log events to browsing context
+    await subscribe_events(
+        events=["log.entryAdded"], contexts=[new_context_in_user_context["context"]]
+    )
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Subscribe for log events to a specific user context
+    await subscribe_events(events=["log.entryAdded"], user_contexts=[user_context])
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger the event again.
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text2"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+        # Create a new context in the targeted user context
+        new_context_in_user_context_2 = await bidi_session.browsing_context.create(
+            user_context=user_context, type_hint="tab"
+        )
+
+        # Trigger again the event
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context_2, "text3"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 2)
+
+        assert len(events) == 2
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[1][1],
+        )
diff --git a/tests/wpt/tests/webdriver/tests/bidi/session/unsubscribe/subscriptions.py b/tests/wpt/tests/webdriver/tests/bidi/session/unsubscribe/subscriptions.py
index b79621ff5a1..1012229f469 100644
--- a/tests/wpt/tests/webdriver/tests/bidi/session/unsubscribe/subscriptions.py
+++ b/tests/wpt/tests/webdriver/tests/bidi/session/unsubscribe/subscriptions.py
@@ -5,7 +5,9 @@ from ... import create_console_api_message, recursive_compare
 pytestmark = pytest.mark.asyncio
 
 
-async def test_unsubscribe_with_subscription_id(bidi_session, top_context):
+async def test_unsubscribe_with_subscription_id(
+    bidi_session, top_context, wait_for_events
+):
     result = await bidi_session.session.subscribe(
         events=["log.entryAdded"], contexts=[top_context["context"]]
     )
@@ -13,19 +15,11 @@ async def test_unsubscribe_with_subscription_id(bidi_session, top_context):
     # Unsubscribe from log events in one of the contexts
     await bidi_session.session.unsubscribe(subscriptions=[result["subscription"]])
 
-    # Track all received log.entryAdded events in the events array
-    events = []
-
-    async def on_event(method, data):
-        events.append(data)
-
-    remove_listener = bidi_session.add_event_listener("log.entryAdded", on_event)
-
-    # Trigger console event
-    await create_console_api_message(bidi_session, top_context, "text1")
-    assert len(events) == 0
-
-    remove_listener()
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event
+        await create_console_api_message(bidi_session, top_context, "text1")
+        events = await waiter.get_events(lambda events: len(events) >= 0)
+        assert len(events) == 0
 
 
 async def test_unsubscribe_with_multiple_subscription_ids(
@@ -69,7 +63,7 @@ async def test_unsubscribe_with_multiple_subscription_ids(
 
 
 async def test_unsubscribe_from_one_of_the_context(
-    bidi_session, top_context, new_tab, wait_for_event, wait_for_future_safe
+    bidi_session, top_context, new_tab, wait_for_events
 ):
     # Subscribe for log events to multiple contexts
     result_1 = await bidi_session.session.subscribe(
@@ -81,32 +75,93 @@ async def test_unsubscribe_from_one_of_the_context(
     # Unsubscribe from log events in one of the subscriptions
     await bidi_session.session.unsubscribe(subscriptions=[result_1["subscription"]])
 
-    # Track all received log.entryAdded events in the events array
-    events = []
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the unsubscribed context
+        await create_console_api_message(bidi_session, top_context, "text1")
+        events = await waiter.get_events(lambda events: len(events) >= 0)
+        assert len(events) == 0
 
-    async def on_event(method, data):
-        events.append(data)
+        # Trigger another console event in the still observed context
+        expected_text = await create_console_api_message(bidi_session, new_tab, "text2")
+        events = await waiter.get_events(lambda events: len(events) >= 1)
 
-    remove_listener = bidi_session.add_event_listener("log.entryAdded", on_event)
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
 
-    # Trigger console event in the unsubscribed context
-    await create_console_api_message(bidi_session, top_context, "text1")
-    assert len(events) == 0
+    await bidi_session.session.unsubscribe(subscriptions=[result_2["subscription"]])
 
-    # Trigger another console event in the still observed context
-    on_entry_added = wait_for_event("log.entryAdded")
-    expected_text = await create_console_api_message(bidi_session, new_tab, "text2")
-    await wait_for_future_safe(on_entry_added)
 
-    assert len(events) == 1
-    recursive_compare(
-        {
-            "text": expected_text,
-        },
-        events[0],
+async def test_unsubscribe_from_closed_context(bidi_session):
+    new_context = await bidi_session.browsing_context.create(type_hint="tab")
+    result = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], contexts=[new_context["context"]]
     )
 
-    remove_listener()
+    # Close the context.
+    await bidi_session.browsing_context.close(context=new_context["context"])
+
+    # Unsubscribe using subscription id to make sure that there is no error.
+    await bidi_session.session.unsubscribe(subscriptions=[result["subscription"]])
+
+
+async def test_subscribe_twice_to_context_and_unsubscribe_once(
+    bidi_session, new_tab, wait_for_events
+):
+    # Subscribe twice to a context
+    result_1 = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], contexts=[new_tab["context"]]
+    )
+    result_2 = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], contexts=[new_tab["context"]]
+    )
+
+    # Unsubscribe once
+    await bidi_session.session.unsubscribe(subscriptions=[result_1["subscription"]])
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the still observed context
+        expected_text = await create_console_api_message(bidi_session, new_tab, "text")
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    await bidi_session.session.unsubscribe(subscriptions=[result_2["subscription"]])
+
+
+async def test_subscribe_twice_to_globally_and_unsubscribe_once(
+    bidi_session, new_tab, wait_for_events
+):
+    # Subscribe twice globally
+    result_1 = await bidi_session.session.subscribe(events=["log.entryAdded"])
+    result_2 = await bidi_session.session.subscribe(events=["log.entryAdded"])
+
+    # Unsubscribe once
+    await bidi_session.session.unsubscribe(subscriptions=[result_1["subscription"]])
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event
+        expected_text = await create_console_api_message(bidi_session, new_tab, "text")
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
     await bidi_session.session.unsubscribe(subscriptions=[result_2["subscription"]])
 
 
@@ -161,7 +216,7 @@ async def test_unsubscribe_partially_from_one_event(bidi_session, top_context, i
 
 
 async def test_unsubscribe_partially_from_one_context(
-    bidi_session, top_context, new_tab, wait_for_event, wait_for_future_safe
+    bidi_session, top_context, new_tab, wait_for_events
 ):
     # Subscribe for log events to multiple contexts at once
     result = await bidi_session.session.subscribe(
@@ -172,41 +227,33 @@ async def test_unsubscribe_partially_from_one_context(
         events=["log.entryAdded"], contexts=[top_context["context"]]
     )
 
-    # Track all received log.entryAdded events in the events array
-    events = []
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the unsubscribed context
+        await create_console_api_message(bidi_session, top_context, "text1")
+        events = await waiter.get_events(lambda events: len(events) >= 0)
+        assert len(events) == 0
 
-    async def on_event(method, data):
-        events.append(data)
+        # Trigger another console event in the still observed context
+        expected_text = await create_console_api_message(bidi_session, new_tab, "text2")
+        events = await waiter.get_events(lambda events: len(events) >= 1)
 
-    remove_listener = bidi_session.add_event_listener("log.entryAdded", on_event)
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
 
-    # Trigger console event in the unsubscribed context
-    await create_console_api_message(bidi_session, top_context, "text1")
-    assert len(events) == 0
+        # Unsubscribe from subscription.
+        await bidi_session.session.unsubscribe(subscriptions=[result["subscription"]])
 
-    # Trigger another console event in the still observed context
-    on_entry_added = wait_for_event("log.entryAdded")
-    expected_text = await create_console_api_message(bidi_session, new_tab, "text2")
-    await wait_for_future_safe(on_entry_added)
+        # Trigger another console event
+        await create_console_api_message(bidi_session, new_tab, "text2")
 
-    assert len(events) == 1
-    recursive_compare(
-        {
-            "text": expected_text,
-        },
-        events[0],
-    )
-
-    # Unsubscribe from subscription.
-    await bidi_session.session.unsubscribe(subscriptions=[result["subscription"]])
-
-    # Trigger another console event
-    await create_console_api_message(bidi_session, new_tab, "text2")
-
-    # Make sure that there're no new events
-    assert len(events) == 1
-
-    remove_listener()
+        # Make sure that there're no new events
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+        assert len(events) == 1
 
 
 async def test_unsubscribe_with_event_and_subscriptions(bidi_session, new_tab, inline):
@@ -241,3 +288,344 @@ async def test_unsubscribe_with_event_and_subscriptions(bidi_session, new_tab, i
 
     remove_listener_domContentLoaded()
     remove_listener_load()
+
+
+async def test_unsubscribe_globally_with_one_context_subscription(
+    bidi_session, new_tab, wait_for_events
+):
+    # Subscribe for log events to one context
+    result_one_context = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], contexts=[new_tab["context"]]
+    )
+    # Subscribe globally
+    result_globally = await bidi_session.session.subscribe(events=["log.entryAdded"])
+
+    # Unsubscribe from log events globally
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_globally["subscription"]]
+    )
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the still observed context
+        expected_text = await create_console_api_message(bidi_session, new_tab, "text")
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Unsubscribe from subscription.
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_one_context["subscription"]]
+    )
+
+
+async def test_unsubscribe_from_one_context_with_global_subscription(
+    bidi_session, new_tab, wait_for_events
+):
+    # Subscribe for log events to one context
+    result_one_context = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], contexts=[new_tab["context"]]
+    )
+    # Subscribe globally
+    result_globally = await bidi_session.session.subscribe(events=["log.entryAdded"])
+
+    # Unsubscribe from log events from one context
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_one_context["subscription"]]
+    )
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the still observed context
+        expected_text = await create_console_api_message(bidi_session, new_tab, "text")
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Unsubscribe from subscription.
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_globally["subscription"]]
+    )
+
+
+async def test_unsubscribe_globally_with_user_context_subscription(
+    bidi_session, wait_for_events, create_user_context
+):
+    user_context = await create_user_context()
+    new_context_in_user_context = await bidi_session.browsing_context.create(
+        user_context=user_context, type_hint="tab"
+    )
+    # Subscribe for log events to user context
+    result_user_context = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], user_contexts=[user_context]
+    )
+    # Subscribe globally
+    result_globally = await bidi_session.session.subscribe(events=["log.entryAdded"])
+    # Unsubscribe from log events globally
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_globally["subscription"]]
+    )
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the still observed context
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Unsubscribe from subscription.
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_user_context["subscription"]]
+    )
+
+
+async def test_unsubscribe_globally_with_user_context_and_context_subscription(
+    bidi_session, wait_for_events, create_user_context
+):
+    user_context = await create_user_context()
+    new_context_in_user_context = await bidi_session.browsing_context.create(
+        user_context=user_context, type_hint="tab"
+    )
+
+    # Subscribe for log events to context
+    result_user_context = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], contexts=[new_context_in_user_context["context"]]
+    )
+    # Subscribe for log events to user context
+    result_user_context = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], user_contexts=[user_context]
+    )
+    # Subscribe globally
+    result_globally = await bidi_session.session.subscribe(events=["log.entryAdded"])
+
+    # Unsubscribe from log events globally
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_globally["subscription"]]
+    )
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the still observed context
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Unsubscribe from subscription.
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_user_context["subscription"]]
+    )
+
+
+async def test_unsubscribe_from_user_context_with_global_subscription(
+    bidi_session, wait_for_events, create_user_context
+):
+    user_context = await create_user_context()
+    new_context_in_user_context = await bidi_session.browsing_context.create(
+        user_context=user_context, type_hint="tab"
+    )
+
+    # Subscribe for log events to user context
+    result_user_context = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], user_contexts=[user_context]
+    )
+    # Subscribe globally
+    result_globally = await bidi_session.session.subscribe(events=["log.entryAdded"])
+
+    # Unsubscribe from log events in user context
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_user_context["subscription"]]
+    )
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the still observed context
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Unsubscribe from subscription.
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_globally["subscription"]]
+    )
+
+
+async def test_unsubscribe_from_user_context(
+    bidi_session, create_user_context, wait_for_events
+):
+    user_context = await create_user_context()
+    new_context_in_user_context = await bidi_session.browsing_context.create(
+        user_context=user_context, type_hint="tab"
+    )
+
+    result = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], user_contexts=[user_context]
+    )
+
+    # Unsubscribe from log events in the user context
+    await bidi_session.session.unsubscribe(subscriptions=[result["subscription"]])
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event
+        await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text1"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 0)
+        assert len(events) == 0
+
+
+async def test_unsubscribe_from_user_context_twice(
+    bidi_session, create_user_context, wait_for_events
+):
+    user_context = await create_user_context()
+    new_context_in_user_context = await bidi_session.browsing_context.create(
+        user_context=user_context, type_hint="tab"
+    )
+
+    # Subscribe to log events in the user context twice
+    result_1 = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], user_contexts=[user_context]
+    )
+    result_2 = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], user_contexts=[user_context]
+    )
+
+    # Unsubscribe from log events in the user context once
+    await bidi_session.session.unsubscribe(subscriptions=[result_1["subscription"]])
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the still observed context
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Unsubscribe from subscription.
+    await bidi_session.session.unsubscribe(subscriptions=[result_2["subscription"]])
+
+
+async def test_unsubscribe_from_user_context_with_context_subscription(
+    bidi_session, wait_for_events, create_user_context
+):
+    user_context = await create_user_context()
+    new_context_in_user_context = await bidi_session.browsing_context.create(
+        user_context=user_context, type_hint="tab"
+    )
+
+    # Subscribe for log events to context
+    result_context = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], contexts=[new_context_in_user_context["context"]]
+    )
+    # Subscribe for log events to user context
+    result_user_context = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], user_contexts=[user_context]
+    )
+
+    # Unsubscribe from log events from user context
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_user_context["subscription"]]
+    )
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the still observed context
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Unsubscribe from subscription.
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_context["subscription"]]
+    )
+
+
+async def test_unsubscribe_from_context_with_user_context_subscription(
+    bidi_session, wait_for_events, create_user_context
+):
+    user_context = await create_user_context()
+    new_context_in_user_context = await bidi_session.browsing_context.create(
+        user_context=user_context, type_hint="tab"
+    )
+
+    # Subscribe for log events to context
+    result_context = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], contexts=[new_context_in_user_context["context"]]
+    )
+    # Subscribe for log events to user context
+    result_user_context = await bidi_session.session.subscribe(
+        events=["log.entryAdded"], user_contexts=[user_context]
+    )
+
+    # Unsubscribe from log events from context
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_context["subscription"]]
+    )
+
+    with wait_for_events(["log.entryAdded"]) as waiter:
+        # Trigger console event in the still observed context
+        expected_text = await create_console_api_message(
+            bidi_session, new_context_in_user_context, "text"
+        )
+        events = await waiter.get_events(lambda events: len(events) >= 1)
+
+        assert len(events) == 1
+        recursive_compare(
+            {
+                "text": expected_text,
+            },
+            events[0][1],
+        )
+
+    # Unsubscribe from subscription.
+    await bidi_session.session.unsubscribe(
+        subscriptions=[result_user_context["subscription"]]
+    )
diff --git a/tests/wpt/tests/webdriver/tests/classic/add_cookie/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/add_cookie/user_prompts.py
index f58aacd02a7..3a819f19666 100644
--- a/tests/wpt/tests/webdriver/tests/classic/add_cookie/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/add_cookie/user_prompts.py
@@ -23,7 +23,7 @@ def check_user_prompt_closed_without_exception(session, url, create_dialog):
 
         session.url = url("/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = add_cookie(session, new_cookie)
         assert_success(response)
@@ -45,10 +45,11 @@ def check_user_prompt_closed_with_exception(session, url, create_dialog):
 
         session.url = url("/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = add_cookie(session, new_cookie)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -68,12 +69,13 @@ def check_user_prompt_not_closed_but_exception(session, url, create_dialog):
 
         session.url = url("/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = add_cookie(session, new_cookie)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         with pytest.raises(NoSuchCookieException):
diff --git a/tests/wpt/tests/webdriver/tests/classic/back/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/back/user_prompts.py
index 1020a6aaa61..1b4bf0bbc53 100644
--- a/tests/wpt/tests/webdriver/tests/classic/back/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/back/user_prompts.py
@@ -52,7 +52,7 @@ def check_beforeunload_implicitly_accepted(session, url):
 @pytest.fixture
 def check_user_prompt_closed_without_exception(session, create_dialog, pages):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = back(session)
         assert_success(response)
@@ -67,10 +67,11 @@ def check_user_prompt_closed_without_exception(session, create_dialog, pages):
 @pytest.fixture
 def check_user_prompt_closed_with_exception(session, create_dialog, pages):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = back(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -82,12 +83,13 @@ def check_user_prompt_closed_with_exception(session, create_dialog, pages):
 @pytest.fixture
 def check_user_prompt_not_closed_but_exception(session, create_dialog, pages):
     def check_user_prompt_not_closed_but_exception(dialog_type):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = back(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert session.url == pages[1]
diff --git a/tests/wpt/tests/webdriver/tests/classic/close_window/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/close_window/user_prompts.py
index 37928f97589..090b3d281f0 100644
--- a/tests/wpt/tests/webdriver/tests/classic/close_window/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/close_window/user_prompts.py
@@ -38,7 +38,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog):
         new_handle = session.new_window()
         session.window_handle = new_handle
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = close(session)
         assert_success(response)
@@ -60,10 +60,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog):
         new_handle = session.new_window()
         session.window_handle = new_handle
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = close(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -78,12 +79,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog):
         new_handle = session.new_window()
         session.window_handle = new_handle
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = close(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert new_handle in session.handles
diff --git a/tests/wpt/tests/webdriver/tests/classic/delete_all_cookies/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/delete_all_cookies/user_prompts.py
index 03f34d9f6f9..91d3ab3844c 100644
--- a/tests/wpt/tests/webdriver/tests/classic/delete_all_cookies/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/delete_all_cookies/user_prompts.py
@@ -15,7 +15,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, create_co
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         create_cookie("foo", value="bar", path="/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = delete_all_cookies(session)
         assert_success(response)
@@ -32,10 +32,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, create_cooki
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         create_cookie("foo", value="bar", path="/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = delete_all_cookies(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -49,12 +50,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, create_co
     def check_user_prompt_not_closed_but_exception(dialog_type):
         create_cookie("foo", value="bar", path="/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = delete_all_cookies(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert session.cookies() != []
diff --git a/tests/wpt/tests/webdriver/tests/classic/delete_cookie/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/delete_cookie/user_prompts.py
index 1ed7db6e8e3..62f41dbdb5d 100644
--- a/tests/wpt/tests/webdriver/tests/classic/delete_cookie/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/delete_cookie/user_prompts.py
@@ -16,7 +16,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, create_co
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         create_cookie("foo", value="bar", path="/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = delete_cookie(session, "foo")
         assert_success(response)
@@ -34,10 +34,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, create_cooki
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         create_cookie("foo", value="bar", path="/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = delete_cookie(session, "foo")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -51,12 +52,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, create_co
     def check_user_prompt_not_closed_but_exception(dialog_type):
         create_cookie("foo", value="bar", path="/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = delete_cookie(session, "foo")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert session.cookies("foo")
diff --git a/tests/wpt/tests/webdriver/tests/classic/element_clear/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/element_clear/user_prompts.py
index ccf048bc0a5..5ac2052fc4e 100644
--- a/tests/wpt/tests/webdriver/tests/classic/element_clear/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/element_clear/user_prompts.py
@@ -15,7 +15,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
 
         assert element.property("value") == "foo"
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = element_clear(session, element)
         assert_success(response)
@@ -36,10 +36,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
 
         assert element.property("value") == "foo"
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = element_clear(session, element)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -57,12 +58,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
 
         assert element.property("value") == "foo"
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = element_clear(session, element)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert element.property("value") == "foo"
diff --git a/tests/wpt/tests/webdriver/tests/classic/element_click/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/element_click/user_prompts.py
index a4c62cbca77..e8fc892c5c7 100644
--- a/tests/wpt/tests/webdriver/tests/classic/element_click/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/element_click/user_prompts.py
@@ -43,7 +43,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<input type=text>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = element_click(session, element)
         assert_success(response)
@@ -61,10 +61,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<input type=text>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = element_click(session, element)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -79,12 +80,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<input type=text>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = element_click(session, element)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert session.active_element != element
diff --git a/tests/wpt/tests/webdriver/tests/classic/element_send_keys/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/element_send_keys/user_prompts.py
index c1046840fa4..1ed3c7cbdac 100644
--- a/tests/wpt/tests/webdriver/tests/classic/element_send_keys/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/element_send_keys/user_prompts.py
@@ -19,7 +19,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<input type=text>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = element_send_keys(session, element, "foo")
         assert_success(response)
@@ -37,10 +37,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<input type=text>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = element_send_keys(session, element, "foo")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -55,12 +56,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<input type=text>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = element_send_keys(session, element, "foo")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert element.property("value") == ""
diff --git a/tests/wpt/tests/webdriver/tests/classic/execute_async_script/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/execute_async_script/user_prompts.py
index 5243b372e5a..805157fbc3a 100644
--- a/tests/wpt/tests/webdriver/tests/classic/execute_async_script/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/execute_async_script/user_prompts.py
@@ -44,7 +44,7 @@ def check_beforeunload_implicitly_accepted(session, url):
 @pytest.fixture
 def check_user_prompt_closed_without_exception(session, create_dialog):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = execute_async_script(session, "window.result = 1; arguments[0](1);")
         assert_success(response, 1)
@@ -61,10 +61,11 @@ def check_user_prompt_closed_without_exception(session, create_dialog):
 @pytest.fixture
 def check_user_prompt_closed_with_exception(session, create_dialog):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = execute_async_script(session, "window.result = 1; arguments[0](1);")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -76,12 +77,13 @@ def check_user_prompt_closed_with_exception(session, create_dialog):
 @pytest.fixture
 def check_user_prompt_not_closed_but_exception(session, create_dialog):
     def check_user_prompt_not_closed_but_exception(dialog_type):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = execute_async_script(session, "window.result = 1; arguments[0](1);")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert session.execute_script("return window.result;") is None
diff --git a/tests/wpt/tests/webdriver/tests/classic/execute_script/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/execute_script/user_prompts.py
index 74d4c47fc06..a92f908f2cb 100644
--- a/tests/wpt/tests/webdriver/tests/classic/execute_script/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/execute_script/user_prompts.py
@@ -40,7 +40,7 @@ def check_beforeunload_implicitly_accepted(session, url):
 @pytest.fixture
 def check_user_prompt_closed_without_exception(session, create_dialog):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = execute_script(session, "window.result = 1; return 1;")
         assert_success(response, 1)
@@ -55,10 +55,11 @@ def check_user_prompt_closed_without_exception(session, create_dialog):
 @pytest.fixture
 def check_user_prompt_closed_with_exception(session, create_dialog):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = execute_script(session, "window.result = 1; return 1;")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -70,12 +71,13 @@ def check_user_prompt_closed_with_exception(session, create_dialog):
 @pytest.fixture
 def check_user_prompt_not_closed_but_exception(session, create_dialog):
     def check_user_prompt_not_closed_but_exception(dialog_type):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = execute_script(session, "window.result = 1; return 1;")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert session.execute_script("return window.result;") is None
diff --git a/tests/wpt/tests/webdriver/tests/classic/find_element/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/find_element/user_prompts.py
index ada8e8ebee3..e7193d11071 100644
--- a/tests/wpt/tests/webdriver/tests/classic/find_element/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/find_element/user_prompts.py
@@ -22,7 +22,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<p>bar</p>")
         element = session.find.css("p", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_element(session, "css selector", "p")
         value = assert_success(response)
@@ -39,10 +39,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         session.url = inline("<p>bar</p>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_element(session, "css selector", "p")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -54,12 +55,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         session.url = inline("<p>bar</p>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_element(session, "css selector", "p")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/find_element_from_element/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/find_element_from_element/user_prompts.py
index 0537a786189..1fb6fa18749 100644
--- a/tests/wpt/tests/webdriver/tests/classic/find_element_from_element/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/find_element_from_element/user_prompts.py
@@ -25,7 +25,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         outer_element = session.find.css("div", all=False)
         inner_element = session.find.css("p", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_element(session, outer_element.id, "css selector", "p")
         value = assert_success(response)
@@ -43,10 +43,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<div><p>bar</p><div>")
         outer_element = session.find.css("div", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_element(session, outer_element.id, "css selector", "p")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -59,12 +60,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<div><p>bar</p><div>")
         outer_element = session.find.css("div", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_element(session, outer_element.id, "css selector", "p")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/find_element_from_shadow_root/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/find_element_from_shadow_root/user_prompts.py
index 3e3381e7853..f1e96f64afb 100644
--- a/tests/wpt/tests/webdriver/tests/classic/find_element_from_shadow_root/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/find_element_from_shadow_root/user_prompts.py
@@ -30,7 +30,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, get_test_
             return arguments[0].shadowRoot.querySelector('input')
             """, args=(host,))
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_element(session, shadow_root.id, "css selector", "input")
         value = assert_success(response)
@@ -50,10 +50,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, get_test_pag
         host = session.find.css("custom-element", all=False)
         shadow_root = host.shadow_root
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_element(session, shadow_root.id, "css selector", "input")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -68,12 +69,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, get_test_
         host = session.find.css("custom-element", all=False)
         shadow_root = host.shadow_root
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_element(session, shadow_root.id, "css selector", "input")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/find_elements/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/find_elements/user_prompts.py
index f9a45e52751..767e9b5bbc3 100644
--- a/tests/wpt/tests/webdriver/tests/classic/find_elements/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/find_elements/user_prompts.py
@@ -22,7 +22,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<p>bar</p>")
         element = session.find.css("p", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_elements(session, "css selector", "p")
         value = assert_success(response)
@@ -41,10 +41,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         session.url = inline("<p>bar</p>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_elements(session, "css selector", "p")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -56,12 +57,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         session.url = inline("<p>bar</p>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_elements(session, "css selector", "p")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/find_elements_from_element/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/find_elements_from_element/user_prompts.py
index 467bec09a1b..b9332b433cd 100644
--- a/tests/wpt/tests/webdriver/tests/classic/find_elements_from_element/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/find_elements_from_element/user_prompts.py
@@ -25,7 +25,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         outer_element = session.find.css("div", all=False)
         inner_element = session.find.css("p", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_elements(session, outer_element.id, "css selector", "p")
         value = assert_success(response)
@@ -45,10 +45,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<div><p>bar</p><div>")
         outer_element = session.find.css("div", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_elements(session, outer_element.id, "css selector", "p")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -61,12 +62,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<div><p>bar</p><div>")
         outer_element = session.find.css("div", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_elements(session, outer_element.id, "css selector", "p")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/find_elements_from_shadow_root/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/find_elements_from_shadow_root/user_prompts.py
index 45986ad6dab..41dc75227d9 100644
--- a/tests/wpt/tests/webdriver/tests/classic/find_elements_from_shadow_root/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/find_elements_from_shadow_root/user_prompts.py
@@ -29,7 +29,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, get_test_
             return arguments[0].shadowRoot.querySelector("input")
             """, args=(host,))
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_elements(session, shadow_root.id, "css selector", "input")
         value = assert_success(response)
@@ -51,10 +51,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, get_test_pag
         host = session.find.css("custom-element", all=False)
         shadow_root = host.shadow_root
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_elements(session, shadow_root.id, "css selector", "input")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -69,12 +70,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, get_test_
         host = session.find.css("custom-element", all=False)
         shadow_root = host.shadow_root
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = find_elements(session, shadow_root.id, "css selector", "input")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/forward/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/forward/user_prompts.py
index dfcba6469d5..1bf8a54e431 100644
--- a/tests/wpt/tests/webdriver/tests/classic/forward/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/forward/user_prompts.py
@@ -55,7 +55,7 @@ def check_beforeunload_implicitly_accepted(session, url):
 @pytest.fixture
 def check_user_prompt_closed_without_exception(session, create_dialog, pages):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = forward(session)
         assert_success(response)
@@ -71,10 +71,11 @@ def check_user_prompt_closed_without_exception(session, create_dialog, pages):
 @pytest.fixture
 def check_user_prompt_closed_with_exception(session, create_dialog, pages):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = forward(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -86,12 +87,13 @@ def check_user_prompt_closed_with_exception(session, create_dialog, pages):
 @pytest.fixture
 def check_user_prompt_not_closed_but_exception(session, create_dialog, pages):
     def check_user_prompt_not_closed_but_exception(dialog_type):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = forward(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert session.url == pages[0]
diff --git a/tests/wpt/tests/webdriver/tests/classic/fullscreen_window/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/fullscreen_window/user_prompts.py
index 106bc457f0c..cb99c468bf1 100644
--- a/tests/wpt/tests/webdriver/tests/classic/fullscreen_window/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/fullscreen_window/user_prompts.py
@@ -16,7 +16,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         assert not is_fullscreen(session)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = fullscreen(session)
         assert_success(response)
@@ -32,10 +32,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         assert not is_fullscreen(session)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = fullscreen(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
         assert not is_fullscreen(session)
@@ -48,12 +49,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         assert not is_fullscreen(session)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = fullscreen(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert not is_fullscreen(session)
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_active_element/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_active_element/user_prompts.py
index 1ff77697b70..a78c2ed158a 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_active_element/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_active_element/user_prompts.py
@@ -20,7 +20,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         session.url = inline("<input type=text>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_active_element(session)
         element = assert_success(response)
@@ -37,10 +37,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         session.url = inline("<input type=text>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_active_element(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -52,12 +53,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         session.url = inline("<input type=text>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_active_element(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_computed_label/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_computed_label/user_prompts.py
new file mode 100644
index 00000000000..232ecb52926
--- /dev/null
+++ b/tests/wpt/tests/webdriver/tests/classic/get_computed_label/user_prompts.py
@@ -0,0 +1,120 @@
+# META: timeout=long
+
+import pytest
+
+from tests.support.asserts import assert_error, assert_success, assert_dialog_handled
+
+
+def get_computed_label(session, element_id):
+    return session.transport.send(
+        "GET", "session/{session_id}/element/{element_id}/computedlabel".format(
+            session_id=session.session_id,
+            element_id=element_id))
+
+
+@pytest.fixture
+def check_user_prompt_closed_without_exception(session, create_dialog, inline):
+    def check_user_prompt_closed_without_exception(dialog_type, retval):
+        session.url = inline("<button>ok</button>")
+        element = session.find.css("button", all=False)
+
+        create_dialog(dialog_type, text="cheese")
+
+        response = get_computed_label(session, element.id)
+        assert_success(response, "ok")
+
+        assert_dialog_handled(
+            session, expected_text=dialog_type, expected_retval=retval)
+
+    return check_user_prompt_closed_without_exception
+
+
+@pytest.fixture
+def check_user_prompt_closed_with_exception(session, create_dialog, inline):
+    def check_user_prompt_closed_with_exception(dialog_type, retval):
+        session.url = inline("<button>ok</button>")
+        element = session.find.css("button", all=False)
+
+        create_dialog(dialog_type, text="cheese")
+
+        response = get_computed_label(session, element.id)
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
+
+        assert_dialog_handled(
+            session, expected_text=dialog_type, expected_retval=retval)
+
+    return check_user_prompt_closed_with_exception
+
+
+@pytest.fixture
+def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
+    def check_user_prompt_not_closed_but_exception(dialog_type):
+        session.url = inline("<button>ok</button>")
+        element = session.find.css("button", all=False)
+
+        create_dialog(dialog_type, text="cheese")
+
+        response = get_computed_label(session, element.id)
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
+
+        assert session.alert.text == "cheese"
+        session.alert.dismiss()
+
+    return check_user_prompt_not_closed_but_exception
+
+
+@pytest.mark.capabilities({"unhandledPromptBehavior": "accept"})
+@pytest.mark.parametrize("dialog_type, retval", [
+    ("alert", None),
+    ("confirm", True),
+    ("prompt", ""),
+])
+def test_accept(check_user_prompt_closed_without_exception, dialog_type, retval):
+    check_user_prompt_closed_without_exception(dialog_type, retval)
+
+
+@pytest.mark.capabilities({"unhandledPromptBehavior": "accept and notify"})
+@pytest.mark.parametrize("dialog_type, retval", [
+    ("alert", None),
+    ("confirm", True),
+    ("prompt", ""),
+])
+def test_accept_and_notify(check_user_prompt_closed_with_exception, dialog_type, retval):
+    check_user_prompt_closed_with_exception(dialog_type, retval)
+
+
+@pytest.mark.capabilities({"unhandledPromptBehavior": "dismiss"})
+@pytest.mark.parametrize("dialog_type, retval", [
+    ("alert", None),
+    ("confirm", False),
+    ("prompt", None),
+])
+def test_dismiss(check_user_prompt_closed_without_exception, dialog_type, retval):
+    check_user_prompt_closed_without_exception(dialog_type, retval)
+
+
+@pytest.mark.capabilities({"unhandledPromptBehavior": "dismiss and notify"})
+@pytest.mark.parametrize("dialog_type, retval", [
+    ("alert", None),
+    ("confirm", False),
+    ("prompt", None),
+])
+def test_dismiss_and_notify(check_user_prompt_closed_with_exception, dialog_type, retval):
+    check_user_prompt_closed_with_exception(dialog_type, retval)
+
+
+@pytest.mark.capabilities({"unhandledPromptBehavior": "ignore"})
+@pytest.mark.parametrize("dialog_type", ["alert", "confirm", "prompt"])
+def test_ignore(check_user_prompt_not_closed_but_exception, dialog_type):
+    check_user_prompt_not_closed_but_exception(dialog_type)
+
+
+@pytest.mark.parametrize("dialog_type, retval", [
+    ("alert", None),
+    ("confirm", False),
+    ("prompt", None),
+])
+def test_default(check_user_prompt_closed_with_exception, dialog_type, retval):
+    check_user_prompt_closed_with_exception(dialog_type, retval)
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_computed_role/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_computed_role/user_prompts.py
new file mode 100644
index 00000000000..1029b8a9742
--- /dev/null
+++ b/tests/wpt/tests/webdriver/tests/classic/get_computed_role/user_prompts.py
@@ -0,0 +1,120 @@
+# META: timeout=long
+
+import pytest
+
+from tests.support.asserts import assert_error, assert_success, assert_dialog_handled
+
+
+def get_computed_role(session, element_id):
+    return session.transport.send(
+        "GET", "session/{session_id}/element/{element_id}/computedrole".format(
+            session_id=session.session_id,
+            element_id=element_id))
+
+
+@pytest.fixture
+def check_user_prompt_closed_without_exception(session, create_dialog, inline):
+    def check_user_prompt_closed_without_exception(dialog_type, retval):
+        session.url = inline("<input role=searchbox>")
+        element = session.find.css("input", all=False)
+
+        create_dialog(dialog_type, text="cheese")
+
+        response = get_computed_role(session, element.id)
+        assert_success(response, "searchbox")
+
+        assert_dialog_handled(
+            session, expected_text=dialog_type, expected_retval=retval)
+
+    return check_user_prompt_closed_without_exception
+
+
+@pytest.fixture
+def check_user_prompt_closed_with_exception(session, create_dialog, inline):
+    def check_user_prompt_closed_with_exception(dialog_type, retval):
+        session.url = inline("<input role=searchbox>")
+        element = session.find.css("input", all=False)
+
+        create_dialog(dialog_type, text="cheese")
+
+        response = get_computed_role(session, element.id)
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
+
+        assert_dialog_handled(
+            session, expected_text=dialog_type, expected_retval=retval)
+
+    return check_user_prompt_closed_with_exception
+
+
+@pytest.fixture
+def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
+    def check_user_prompt_not_closed_but_exception(dialog_type):
+        session.url = inline("<input role=searchbox>")
+        element = session.find.css("input", all=False)
+
+        create_dialog(dialog_type, text="cheese")
+
+        response = get_computed_role(session, element.id)
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
+
+        assert session.alert.text == "cheese"
+        session.alert.dismiss()
+
+    return check_user_prompt_not_closed_but_exception
+
+
+@pytest.mark.capabilities({"unhandledPromptBehavior": "accept"})
+@pytest.mark.parametrize("dialog_type, retval", [
+    ("alert", None),
+    ("confirm", True),
+    ("prompt", ""),
+])
+def test_accept(check_user_prompt_closed_without_exception, dialog_type, retval):
+    check_user_prompt_closed_without_exception(dialog_type, retval)
+
+
+@pytest.mark.capabilities({"unhandledPromptBehavior": "accept and notify"})
+@pytest.mark.parametrize("dialog_type, retval", [
+    ("alert", None),
+    ("confirm", True),
+    ("prompt", ""),
+])
+def test_accept_and_notify(check_user_prompt_closed_with_exception, dialog_type, retval):
+    check_user_prompt_closed_with_exception(dialog_type, retval)
+
+
+@pytest.mark.capabilities({"unhandledPromptBehavior": "dismiss"})
+@pytest.mark.parametrize("dialog_type, retval", [
+    ("alert", None),
+    ("confirm", False),
+    ("prompt", None),
+])
+def test_dismiss(check_user_prompt_closed_without_exception, dialog_type, retval):
+    check_user_prompt_closed_without_exception(dialog_type, retval)
+
+
+@pytest.mark.capabilities({"unhandledPromptBehavior": "dismiss and notify"})
+@pytest.mark.parametrize("dialog_type, retval", [
+    ("alert", None),
+    ("confirm", False),
+    ("prompt", None),
+])
+def test_dismiss_and_notify(check_user_prompt_closed_with_exception, dialog_type, retval):
+    check_user_prompt_closed_with_exception(dialog_type, retval)
+
+
+@pytest.mark.capabilities({"unhandledPromptBehavior": "ignore"})
+@pytest.mark.parametrize("dialog_type", ["alert", "confirm", "prompt"])
+def test_ignore(check_user_prompt_not_closed_but_exception, dialog_type):
+    check_user_prompt_not_closed_but_exception(dialog_type)
+
+
+@pytest.mark.parametrize("dialog_type, retval", [
+    ("alert", None),
+    ("confirm", False),
+    ("prompt", None),
+])
+def test_default(check_user_prompt_closed_with_exception, dialog_type, retval):
+    check_user_prompt_closed_with_exception(dialog_type, retval)
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_current_url/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_current_url/user_prompts.py
index d657c188241..3359e730208 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_current_url/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_current_url/user_prompts.py
@@ -15,7 +15,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<p id=1>")
         expected_url = session.url
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_current_url(session)
         assert_success(response, expected_url)
@@ -30,10 +30,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         session.url = inline("<p id=1>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_current_url(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -45,12 +46,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         session.url = inline("<p id=1>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_current_url(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_element_attribute/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_element_attribute/user_prompts.py
index 009cb1e5fa1..872d530ffe1 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_element_attribute/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_element_attribute/user_prompts.py
@@ -19,7 +19,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_attribute(session, element.id, "id")
         assert_success(response, "foo")
@@ -35,10 +35,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_attribute(session, element.id, "id")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -51,12 +52,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_attribute(session, element.id, "id")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_element_css_value/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_element_css_value/user_prompts.py
index b1f9a3fb0a0..d5c942dd871 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_element_css_value/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_element_css_value/user_prompts.py
@@ -22,7 +22,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("""<input style="display: block">""")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_css_value(session, element.id, "display")
         assert_success(response, "block")
@@ -38,10 +38,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("""<input style="display: block">""")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_css_value(session, element.id, "display")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -54,12 +55,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("""<input style="display: block">""")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_css_value(session, element.id, "display")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_element_property/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_element_property/user_prompts.py
index e5e76947863..1db033a3ebd 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_element_property/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_element_property/user_prompts.py
@@ -17,7 +17,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_property(session, element.id, "id")
         assert_success(response, "foo")
@@ -33,10 +33,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_property(session, element.id, "id")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -49,12 +50,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_property(session, element.id, "id")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_element_rect/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_element_rect/user_prompts.py
index 20131603381..d040b32c71c 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_element_rect/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_element_rect/user_prompts.py
@@ -22,7 +22,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<input>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_rect(session, element.id)
         assert_success(response, element_rect(session, element))
@@ -38,10 +38,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<input>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_rect(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -54,12 +55,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<input>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_rect(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_element_shadow_root/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_element_shadow_root/user_prompts.py
index 5b991bac26b..66eda0045af 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_element_shadow_root/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_element_shadow_root/user_prompts.py
@@ -18,7 +18,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, get_test_
         session.url = get_test_page()
         element = session.find.css("custom-element", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_shadow_root(session, element.id)
         value = assert_success(response)
@@ -35,10 +35,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, get_test_pag
         session.url = get_test_page()
         element = session.find.css("custom-element", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_shadow_root(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -51,12 +52,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, get_test_
         session.url = get_test_page()
         element = session.find.css("custom-element", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_shadow_root(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_element_tag_name/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_element_tag_name/user_prompts.py
index 89697d0ad6a..d9965fa19a7 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_element_tag_name/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_element_tag_name/user_prompts.py
@@ -16,7 +16,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_tag_name(session, element.id)
         assert_success(response, "input")
@@ -32,10 +32,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_tag_name(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -48,12 +49,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_tag_name(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_element_text/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_element_text/user_prompts.py
index 9f0bb386cdf..93a99ac3cc3 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_element_text/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_element_text/user_prompts.py
@@ -18,7 +18,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<p id=foo>bar</p>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_text(session, element.id)
         assert_success(response, "bar")
@@ -34,10 +34,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<p id=foo>bar</p>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_text(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -50,12 +51,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<p id=foo>bar</p>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_element_text(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_named_cookie/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_named_cookie/user_prompts.py
index f1669d6c998..ec6d27bfc97 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_named_cookie/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_named_cookie/user_prompts.py
@@ -17,7 +17,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, create_co
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         create_cookie("foo", value="bar", path="/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_named_cookie(session, "foo")
         cookie = assert_success(response)
@@ -35,10 +35,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, create_cooki
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         create_cookie("foo", value="bar", path="/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_named_cookie(session, "foo")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -50,12 +51,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, create_co
     def check_user_prompt_not_closed_but_exception(dialog_type):
         create_cookie("foo", value="bar", path="/common/blank.html")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_named_cookie(session, "foo")
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_page_source/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_page_source/user_prompts.py
index 13cb31595e6..b9745645ea4 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_page_source/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_page_source/user_prompts.py
@@ -16,7 +16,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<div/>")
         expected = session.execute_script("return document.documentElement.outerHTML")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_page_source(session)
         assert_success(response, expected)
@@ -31,10 +31,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         session.url = inline("<div/>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_page_source(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -46,12 +47,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         session.url = inline("<div/>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_page_source(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_title/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_title/user_prompts.py
index 0fd51e46f32..8e011d23924 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_title/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_title/user_prompts.py
@@ -16,7 +16,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<title>Foo</title>")
         expected_title = session.title
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_title(session)
         assert_success(response, expected_title)
@@ -31,10 +31,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         session.url = inline("<title>Foo</title>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_title(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -46,12 +47,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         session.url = inline("<title>Foo</title>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_title(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_window_handle/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_window_handle/user_prompts.py
index 0bd660cfa1f..f3bae4e4407 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_window_handle/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_window_handle/user_prompts.py
@@ -15,12 +15,12 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         window_handle = session.window_handle
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_window_handle(session)
         assert_success(response, window_handle)
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_window_handles/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_window_handles/user_prompts.py
index 217e9849b44..5b5310c5074 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_window_handles/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_window_handles/user_prompts.py
@@ -15,12 +15,12 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         window_handles = session.handles
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_window_handles(session)
         assert_success(response, window_handles)
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/get_window_rect/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/get_window_rect/user_prompts.py
index 37c8da6bd38..4f927435c3e 100644
--- a/tests/wpt/tests/webdriver/tests/classic/get_window_rect/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/get_window_rect/user_prompts.py
@@ -15,7 +15,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         original_rect = session.window.rect
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_window_rect(session)
         assert_success(response, original_rect)
@@ -32,10 +32,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         original_rect = session.window.rect
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_window_rect(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -47,12 +48,13 @@ def check_user_prompt_closed_with_exception(session, create_dialog):
 @pytest.fixture
 def check_user_prompt_not_closed_but_exception(session, create_dialog):
     def check_user_prompt_not_closed_but_exception(dialog_type):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = get_window_rect(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/is_element_enabled/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/is_element_enabled/user_prompts.py
index a3af947d516..45db225dbfe 100644
--- a/tests/wpt/tests/webdriver/tests/classic/is_element_enabled/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/is_element_enabled/user_prompts.py
@@ -12,7 +12,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo disabled>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = is_element_enabled(session, element.id)
         assert_success(response, False)
@@ -28,10 +28,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo disabled>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = is_element_enabled(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -44,12 +45,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo disabled>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = is_element_enabled(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/is_element_selected/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/is_element_selected/user_prompts.py
index 96da2c08bd7..f88b7b52a90 100644
--- a/tests/wpt/tests/webdriver/tests/classic/is_element_selected/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/is_element_selected/user_prompts.py
@@ -19,7 +19,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         element = session.find.css("#foo", all=False)
         element.send_keys("foo")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = is_element_selected(session, element.id)
         assert_success(response, True)
@@ -35,10 +35,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo type=checkbox checked>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = is_element_selected(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -51,12 +52,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<input id=foo type=checkbox checked>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = is_element_selected(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/maximize_window/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/maximize_window/user_prompts.py
index 032edc893a5..7cf3ca2f741 100644
--- a/tests/wpt/tests/webdriver/tests/classic/maximize_window/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/maximize_window/user_prompts.py
@@ -15,7 +15,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         original_size = session.window.size
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = maximize(session)
         assert_success(response)
@@ -32,10 +32,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         original_size = session.window.size
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = maximize(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -49,12 +50,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         original_size = session.window.size
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = maximize(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert session.window.size == original_size
diff --git a/tests/wpt/tests/webdriver/tests/classic/minimize_window/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/minimize_window/user_prompts.py
index 19059b3c395..5c797f81f4d 100644
--- a/tests/wpt/tests/webdriver/tests/classic/minimize_window/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/minimize_window/user_prompts.py
@@ -15,7 +15,7 @@ def minimize(session):
 def check_user_prompt_closed_without_exception(session, create_dialog):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         assert not document_hidden(session)
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = minimize(session)
         assert_success(response)
@@ -30,10 +30,11 @@ def check_user_prompt_closed_without_exception(session, create_dialog):
 def check_user_prompt_closed_with_exception(session, create_dialog):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         assert not document_hidden(session)
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = minimize(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
         assert not document_hidden(session)
@@ -45,12 +46,13 @@ def check_user_prompt_closed_with_exception(session, create_dialog):
 def check_user_prompt_not_closed_but_exception(session, create_dialog):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         assert not document_hidden(session)
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = minimize(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert not document_hidden(session)
diff --git a/tests/wpt/tests/webdriver/tests/classic/navigate_to/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/navigate_to/user_prompts.py
index db8d094ebbd..2714b5ae769 100644
--- a/tests/wpt/tests/webdriver/tests/classic/navigate_to/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/navigate_to/user_prompts.py
@@ -42,7 +42,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         url = inline("<div/>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = navigate_to(session, url)
         assert_success(response)
@@ -59,10 +59,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         url = inline("<div/>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = navigate_to(session, url)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -76,12 +77,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         url = inline("<div/>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = navigate_to(session, url)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert session.url != url
diff --git a/tests/wpt/tests/webdriver/tests/classic/new_window/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/new_window/user_prompts.py
index 0d841468ee4..327994066b9 100644
--- a/tests/wpt/tests/webdriver/tests/classic/new_window/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/new_window/user_prompts.py
@@ -16,7 +16,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         original_handles = session.handles
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = new_window(session)
         value = assert_success(response)
@@ -36,10 +36,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         original_handles = session.handles
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = new_window(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -53,12 +54,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         original_handles = session.handles
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = new_window(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert len(session.handles) == len(original_handles)
diff --git a/tests/wpt/tests/webdriver/tests/classic/perform_actions/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/perform_actions/user_prompts.py
index 7fcd720624b..04ba3e04f94 100644
--- a/tests/wpt/tests/webdriver/tests/classic/perform_actions/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/perform_actions/user_prompts.py
@@ -21,7 +21,7 @@ actions = [{
 @pytest.fixture
 def check_user_prompt_closed_without_exception(session, create_dialog, key_chain, key_reporter):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = perform_actions(session, actions)
         assert_success(response)
@@ -36,10 +36,11 @@ def check_user_prompt_closed_without_exception(session, create_dialog, key_chain
 @pytest.fixture
 def check_user_prompt_closed_with_exception(session, create_dialog, key_chain, key_reporter):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = perform_actions(session, actions)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -51,12 +52,13 @@ def check_user_prompt_closed_with_exception(session, create_dialog, key_chain, k
 @pytest.fixture
 def check_user_prompt_not_closed_but_exception(session, create_dialog, key_reporter):
     def check_user_prompt_not_closed_but_exception(dialog_type):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = perform_actions(session, actions)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert get_keys(key_reporter) == ""
diff --git a/tests/wpt/tests/webdriver/tests/classic/print/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/print/user_prompts.py
index ade1c38a5c4..27900986bb5 100644
--- a/tests/wpt/tests/webdriver/tests/classic/print/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/print/user_prompts.py
@@ -10,7 +10,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         session.url = inline("<input/>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = do_print(session, {})
         value = assert_success(response)
@@ -27,10 +27,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         session.url = inline("<input/>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = do_print(session, {})
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -42,12 +43,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         session.url = inline("<input/>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = do_print(session, {})
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/refresh/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/refresh/user_prompts.py
index 5787533b572..6f30cf6613d 100644
--- a/tests/wpt/tests/webdriver/tests/classic/refresh/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/refresh/user_prompts.py
@@ -43,7 +43,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<div id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = refresh(session)
         assert_success(response)
@@ -62,10 +62,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<div id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = refresh(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -80,12 +81,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<div id=foo>")
         element = session.find.css("#foo", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = refresh(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert element.property("id") == "foo"
diff --git a/tests/wpt/tests/webdriver/tests/classic/set_timeouts/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/set_timeouts/user_prompts.py
index a98d87e9b2e..339b0c31f03 100644
--- a/tests/wpt/tests/webdriver/tests/classic/set_timeouts/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/set_timeouts/user_prompts.py
@@ -14,12 +14,12 @@ def set_timeouts(session, timeouts):
 @pytest.fixture
 def check_user_prompt_not_closed(session, create_dialog):
     def check_user_prompt_not_closed(dialog_type):
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = set_timeouts(session, {"script": 100})
         assert_success(response)
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert session.timeouts.script == 100
diff --git a/tests/wpt/tests/webdriver/tests/classic/set_window_rect/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/set_window_rect/user_prompts.py
index e55c2d77f8c..baab00b7cba 100644
--- a/tests/wpt/tests/webdriver/tests/classic/set_window_rect/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/set_window_rect/user_prompts.py
@@ -16,7 +16,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         original_rect = session.window.rect
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = set_window_rect(session, {
             "width": original_rect["width"] + 10, "height": original_rect["height"] + 10})
@@ -34,11 +34,12 @@ def check_user_prompt_closed_with_exception(session, create_dialog):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         original_rect = session.window.rect
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = set_window_rect(session, {
             "width": original_rect["width"] + 10, "height": original_rect["height"] + 10})
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -52,13 +53,14 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         original_rect = session.window.rect
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = set_window_rect(session, {
             "width": original_rect["width"] + 10, "height": original_rect["height"] + 10})
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
         assert session.window.rect == original_rect
diff --git a/tests/wpt/tests/webdriver/tests/classic/take_element_screenshot/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/take_element_screenshot/user_prompts.py
index 39fefe9325a..bf14f09868b 100644
--- a/tests/wpt/tests/webdriver/tests/classic/take_element_screenshot/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/take_element_screenshot/user_prompts.py
@@ -21,7 +21,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
         session.url = inline("<input/>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = take_element_screenshot(session, element.id)
         value = assert_success(response)
@@ -39,10 +39,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
         session.url = inline("<input/>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = take_element_screenshot(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -55,12 +56,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
         session.url = inline("<input/>")
         element = session.find.css("input", all=False)
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = take_element_screenshot(session, element.id)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/classic/take_screenshot/user_prompts.py b/tests/wpt/tests/webdriver/tests/classic/take_screenshot/user_prompts.py
index 7d57f8f2716..9a93f417ba4 100644
--- a/tests/wpt/tests/webdriver/tests/classic/take_screenshot/user_prompts.py
+++ b/tests/wpt/tests/webdriver/tests/classic/take_screenshot/user_prompts.py
@@ -15,7 +15,7 @@ def check_user_prompt_closed_without_exception(session, create_dialog, inline):
     def check_user_prompt_closed_without_exception(dialog_type, retval):
         session.url = inline("<input/>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = take_screenshot(session)
         value = assert_success(response)
@@ -32,10 +32,11 @@ def check_user_prompt_closed_with_exception(session, create_dialog, inline):
     def check_user_prompt_closed_with_exception(dialog_type, retval):
         session.url = inline("<input/>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = take_screenshot(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
         assert_dialog_handled(session, expected_text=dialog_type, expected_retval=retval)
 
@@ -47,12 +48,13 @@ def check_user_prompt_not_closed_but_exception(session, create_dialog, inline):
     def check_user_prompt_not_closed_but_exception(dialog_type):
         session.url = inline("<input/>")
 
-        create_dialog(dialog_type, text=dialog_type)
+        create_dialog(dialog_type, text="cheese")
 
         response = take_screenshot(session)
-        assert_error(response, "unexpected alert open")
+        assert_error(response, "unexpected alert open",
+                     data={"text": "cheese"})
 
-        assert session.alert.text == dialog_type
+        assert session.alert.text == "cheese"
         session.alert.dismiss()
 
     return check_user_prompt_not_closed_but_exception
diff --git a/tests/wpt/tests/webdriver/tests/support/asserts.py b/tests/wpt/tests/webdriver/tests/support/asserts.py
index b87a7eb46cf..1c626a735d5 100644
--- a/tests/wpt/tests/webdriver/tests/support/asserts.py
+++ b/tests/wpt/tests/webdriver/tests/support/asserts.py
@@ -1,4 +1,5 @@
 import imghdr
+import json
 from base64 import decodebytes
 
 from webdriver import NoSuchAlertException, WebDriverException, WebElement
@@ -39,7 +40,7 @@ errors = {
 }
 
 
-def assert_error(response, error_code):
+def assert_error(response, error_code, data=None):
     """
     Verify that the provided webdriver.Response instance described
     a valid error response as defined by `dfn-send-an-error` and
@@ -47,12 +48,18 @@ def assert_error(response, error_code):
 
     :param response: ``webdriver.Response`` instance.
     :param error_code: String value of the expected error code
+    :param data: Optional dictionary containing additional information about the error.
     """
     assert response.status == errors[error_code]
+
     assert "value" in response.body
     assert response.body["value"]["error"] == error_code
     assert isinstance(response.body["value"]["message"], str)
     assert isinstance(response.body["value"]["stacktrace"], str)
+
+    if data is not None:
+        assert response.body["value"]["data"] == data
+
     assert_response_headers(response.headers)
 
 
@@ -71,6 +78,7 @@ def assert_success(response, value=None):
         assert response.body["value"] == value
 
     assert_response_headers(response.headers)
+
     return response.body.get("value")
 
 
diff --git a/tests/wpt/tests/webnn/conformance_tests/dequantizeLinear.https.any.js b/tests/wpt/tests/webnn/conformance_tests/dequantizeLinear.https.any.js
index 5ac15593e4e..ecca03660f4 100644
--- a/tests/wpt/tests/webnn/conformance_tests/dequantizeLinear.https.any.js
+++ b/tests/wpt/tests/webnn/conformance_tests/dequantizeLinear.https.any.js
@@ -100,7 +100,52 @@ const dequantizeLinearTests = [
     }
   },
   {
-    'name': 'dequantizeLinear uint8 1D constant tensor broadcasting zeroPoint',
+    'name': 'dequantizeLinear uint8 1D constant tensor',
+    'graph': {
+      'inputs': {
+        'dequantizeLinearInput': {
+          'data': [12, 24, 35, 123],
+          'descriptor': {shape: [4], dataType: 'uint8'},
+          'constant': true
+        },
+        'dequantizeLinearScale': {
+          'data': [
+            9.343092918395996,
+            0.2800687253475189,
+            4.617084980010986,
+            1.1202747821807861,
+          ],
+          'descriptor': {shape: [4], dataType: 'float32'},
+          'constant': true
+        },
+        'dequantizeLinearZeroPoint': {
+          'data': [128, 128, 128, 128],
+          'descriptor': {shape: [4], dataType: 'uint8'},
+          'constant': true
+        }
+      },
+      'operators': [{
+        'name': 'dequantizeLinear',
+        'arguments': [
+          {'input': 'dequantizeLinearInput'},
+          {'scale': 'dequantizeLinearScale'},
+          {'zeroPoint': 'dequantizeLinearZeroPoint'}
+        ],
+        'outputs': 'dequantizeLinearOutput'
+      }],
+      'expectedOutputs': {
+        'dequantizeLinearOutput': {
+          'data': [
+            -1083.798828125, -29.127147674560547, -429.388916015625,
+            -5.601373672485352
+          ],
+          'descriptor': {shape: [4], dataType: 'float32'}
+        }
+      }
+    }
+  },
+  {
+    'name': 'dequantizeLinear uint8 1D constant tensor with negative scale',
     'graph': {
       'inputs': {
         'dequantizeLinearInput': {
@@ -542,9 +587,7 @@ const dequantizeLinearTests = [
         },
         'dequantizeLinearScale': {
           'data': [
-            1.1202747821807861,
-            -4.617084980010986,
-            6.2405495643615723,
+            1.1202747821807861, -4.617084980010986, 6.2405495643615723,
             3.841923713684082
           ],
           'descriptor': {shape: [2, 2], dataType: 'float32'},
diff --git a/tests/wpt/webgl/meta/conformance/textures/misc/texture-video-transparent.html.ini b/tests/wpt/webgl/meta/conformance/textures/misc/texture-video-transparent.html.ini
index f215746989a..2984bb14285 100644
--- a/tests/wpt/webgl/meta/conformance/textures/misc/texture-video-transparent.html.ini
+++ b/tests/wpt/webgl/meta/conformance/textures/misc/texture-video-transparent.html.ini
@@ -1420,3 +1420,6 @@
 
   [WebGL test #8: right is blue, but: at (4, 4) expected: 255,0,0 was 0,0,0\n0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255]
     expected: FAIL
+
+  [WebGL test #0: neither left is green nor right is blue \nat (4, 4) expected: 0,255,0 was 0,0,0\nat (20, 4) expected: 0,0,255 was 0,0,0\n0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255\n0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255,0,0,0,255]
+    expected: FAIL