Merging upstream version 126.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

23 files changed, 576 insertions, 500 deletions

diff --git a/testing/web-platform/tests/html/canvas/tools/gentest.py b/testing/web-platform/tests/html/canvas/tools/gentest.py
index 36cb7fe0f6..784005fc9a 100644
--- a/testing/web-platform/tests/html/canvas/tools/gentest.py
+++ b/testing/web-platform/tests/html/canvas/tools/gentest.py
@@ -1,3 +1,4 @@
+"""Script invoking the old and the new Canvas test generator."""
 # To use this script:
 # -make a python virtual environment somewhere (it doesn't matter where)
 #   python3 -m venv venv
@@ -9,10 +10,10 @@
 #   python3 gentest.py
 
 from gentestutils import genTestUtils
-from gentestutilsunion import genTestUtils_union
+import gentestutilsunion
 
 genTestUtils('../element', '../element', 'templates.yaml',
              'name2dir-canvas.yaml', False)
 genTestUtils('../offscreen', '../offscreen', 'templates.yaml',
              'name2dir-offscreen.yaml', True)
-genTestUtils_union('name2dir.yaml')
+gentestutilsunion.generate_test_files('name2dir.yaml')
diff --git a/testing/web-platform/tests/html/canvas/tools/gentestutilsunion.py b/testing/web-platform/tests/html/canvas/tools/gentestutilsunion.py
index d7042810be..57077f6057 100644
--- a/testing/web-platform/tests/html/canvas/tools/gentestutilsunion.py
+++ b/testing/web-platform/tests/html/canvas/tools/gentestutilsunion.py
@@ -1,3 +1,4 @@
+"""Generates Canvas tests from YAML file definitions."""
 # Current code status:
 #
 # This was originally written by Philip Taylor for use at
@@ -28,7 +29,8 @@
 #
 # * Test the tests, add new ones to Git, remove deleted ones from Git, etc.
 
-from typing import Any, DefaultDict, List, Mapping, Optional, Set, Tuple
+from typing import Any, DefaultDict, FrozenSet, List, Mapping, MutableMapping
+from typing import Optional, Set, Tuple
 
 import re
 import collections
@@ -36,10 +38,12 @@ import dataclasses
 import enum
 import importlib
 import itertools
-import jinja2
 import os
 import pathlib
 import sys
+import textwrap
+
+import jinja2
 
 try:
     import cairocffi as cairo  # type: ignore
@@ -61,12 +65,12 @@ class InvalidTestDefinitionError(Error):
     """Raised on invalid test definition."""
 
 
-def _doubleQuoteEscape(string: str) -> str:
+def _double_quote_escape(string: str) -> str:
     return string.replace('\\', '\\\\').replace('"', '\\"')
 
 
-def _escapeJS(string: str) -> str:
-    string = _doubleQuoteEscape(string)
+def _escape_js(string: str) -> str:
+    string = _double_quote_escape(string)
     # Kind of an ugly hack, for nicer failure-message output.
     string = re.sub(r'\[(\w+)\]', r'[\\""+(\1)+"\\"]', string)
     return string
@@ -135,15 +139,15 @@ def _expand_nonfinite(method: str, argstr: str, tail: str) -> str:
         match = re.match('<(.*)>', arg)
         if match is None:
             raise InvalidTestDefinitionError(
-                f"Expected arg to match format '<(.*)>', but was: {arg}")
+                f'Expected arg to match format "<(.*)>", but was: {arg}')
         a = match.group(1)
         args.append(a.split(' '))
     calls = []
     # Start with the valid argument list.
     call = [args[j][0] for j in range(len(args))]
     # For each argument alone, try setting it to all its invalid values:
-    for i in range(len(args)):
-        for a in args[i][1:]:
+    for i, arg in enumerate(args):
+        for a in arg[1:]:
             c2 = call[:]
             c2[i] = a
             calls.append(c2)
@@ -162,7 +166,8 @@ def _expand_nonfinite(method: str, argstr: str, tail: str) -> str:
 
     f(call, 0, 0)
 
-    return '\n'.join('%s(%s)%s' % (method, ', '.join(c), tail) for c in calls)
+    str_calls = (', '.join(c) for c in calls)
+    return '\n'.join(f'{method}({params}){tail}' for params in str_calls)
 
 
 def _get_test_sub_dir(name: str, name_to_sub_dir: Mapping[str, str]) -> str:
@@ -170,7 +175,7 @@ def _get_test_sub_dir(name: str, name_to_sub_dir: Mapping[str, str]) -> str:
         if name.startswith(prefix):
             return name_to_sub_dir[prefix]
     raise InvalidTestDefinitionError(
-        'Test "%s" has no defined target directory mapping' % name)
+        f'Test "{name}" has no defined target directory mapping')
 
 
 def _remove_extra_newlines(text: str) -> str:
@@ -183,6 +188,7 @@ def _remove_extra_newlines(text: str) -> str:
     text = re.sub(r'\\-\n\s*', '', text, flags=re.MULTILINE | re.DOTALL)
     return text
 
+
 def _expand_test_code(code: str) -> str:
     code = re.sub(r' @moz-todo', '', code)
 
@@ -215,48 +221,59 @@ def _expand_test_code(code: str) -> str:
                   flags=re.MULTILINE | re.DOTALL)
 
     code = re.sub(
-        r'@assert (.*) === (.*);', lambda m: '_assertSame(%s, %s, "%s", "%s");'
-        % (m.group(1), m.group(2), _escapeJS(m.group(1)), _escapeJS(m.group(2))
-           ), code)
+        r'@assert (.*) === (.*);', lambda m:
+        (f'_assertSame({m.group(1)}, {m.group(2)}, '
+         f'"{_escape_js(m.group(1))}", "{_escape_js(m.group(2))}");'), code)
 
     code = re.sub(
         r'@assert (.*) !== (.*);', lambda m:
-        '_assertDifferent(%s, %s, "%s", "%s");' % (m.group(1), m.group(
-            2), _escapeJS(m.group(1)), _escapeJS(m.group(2))), code)
+        (f'_assertDifferent({m.group(1)}, {m.group(2)}, '
+         f'"{_escape_js(m.group(1))}", "{_escape_js(m.group(2))}");'), code)
 
     code = re.sub(
-        r'@assert (.*) =~ (.*);', lambda m: 'assert_regexp_match(%s, %s);' % (
-            m.group(1), m.group(2)), code)
+        r'@assert (.*) =~ (.*);',
+        lambda m: f'assert_regexp_match({m.group(1)}, {m.group(2)});', code)
 
     code = re.sub(
-        r'@assert (.*);', lambda m: '_assert(%s, "%s");' % (m.group(
-            1), _escapeJS(m.group(1))), code)
+        r'@assert (.*);',
+        lambda m: f'_assert({m.group(1)}, "{_escape_js(m.group(1))}");', code)
 
-    assert ('@' not in code)
+    assert '@' not in code
 
     return code
 
 
-class CanvasType(str, enum.Enum):
-    HTML_CANVAS = 'htmlcanvas'
-    OFFSCREEN_CANVAS = 'offscreencanvas'
-    WORKER = 'worker'
+_TestParams = Mapping[str, Any]
+_MutableTestParams = MutableMapping[str, Any]
+
 
+class _CanvasType(str, enum.Enum):
+    HTML_CANVAS = 'HtmlCanvas'
+    OFFSCREEN_CANVAS = 'OffscreenCanvas'
+    WORKER = 'Worker'
 
-def _get_enabled_canvas_types(test: Mapping[str, Any]) -> Set[CanvasType]:
-    return {CanvasType(t.lower()) for t in test.get('canvasType', CanvasType)}
+
+class _TemplateType(str, enum.Enum):
+    REFERENCE = 'reference'
+    HTML_REFERENCE = 'html_reference'
+    TESTHARNESS = 'testharness'
 
 
 @dataclasses.dataclass
-class TestConfig:
-    out_dir: str
-    image_out_dir: str
+class _OutputPaths:
+    element: str
+    offscreen: str
+
+    def sub_path(self, sub_dir: str):
+        """Create a new _OutputPaths that is a subpath of this _OutputPath."""
+        return _OutputPaths(element=os.path.join(self.element, sub_dir),
+                            offscreen=os.path.join(self.offscreen, sub_dir))
 
 
-def _validate_test(test: Mapping[str, Any]):
+def _validate_test(test: _TestParams):
     if test.get('expected', '') == 'green' and re.search(
             r'@assert pixel .* 0,0,0,0;', test['code']):
-        print('Probable incorrect pixel test in %s' % test['name'])
+        print(f'Probable incorrect pixel test in {test["name"]}')
 
     if 'size' in test and (not isinstance(test['size'], list)
                            or len(test['size']) != 2):
@@ -264,21 +281,20 @@ def _validate_test(test: Mapping[str, Any]):
             f'Invalid canvas size "{test["size"]}" in test {test["name"]}. '
             'Expected an array with two numbers.')
 
-    if 'test_type' in test and test['test_type'] != 'promise':
-        raise InvalidTestDefinitionError(
-            f'Test {test["name"]}\' test_type is invalid, it only accepts '
-            '"promise" now for creating promise test type in the template '
-            'file.')
+    if test['template_type'] == _TemplateType.TESTHARNESS:
+        valid_test_types = {'sync', 'async', 'promise'}
+    else:
+        valid_test_types = {'promise'}
 
-    if 'reference' in test and 'html_reference' in test:
+    test_type = test.get('test_type')
+    if test_type is not None and test_type not in valid_test_types:
         raise InvalidTestDefinitionError(
-            f'Test {test["name"]} is invalid, "reference" and "html_reference" '
-            'can\'t both be specified at the same time.')
+            f'Invalid test_type: {test_type}. '
+            f'Valid values are: {valid_test_types}.')
 
 
-def _render_template(jinja_env: jinja2.Environment,
-                     template: jinja2.Template,
-                     params: Mapping[str, Any]) -> str:
+def _render_template(jinja_env: jinja2.Environment, template: jinja2.Template,
+                     params: _TestParams) -> str:
     """Renders the specified jinja template.
 
     The template is repetitively rendered until no more changes are observed.
@@ -294,236 +310,276 @@ def _render_template(jinja_env: jinja2.Environment,
 
 
 def _render(jinja_env: jinja2.Environment, template_name: str,
-            params: Mapping[str, Any]):
-    params = dict(params)
-    params.update({
-        # Render the code on its own, as it could contain templates expanding
-        # to multuple lines. This is needed to get proper indentation of the
-        # code in the main template.
-        'code': _render_template(jinja_env,
-                                 jinja_env.from_string(params['code']),
-                                 params)
-    })
-
-    return _render_template(jinja_env, jinja_env.get_template(template_name),
-                            params)
-
-
-def _write_reference_test(jinja_env: jinja2.Environment,
-                          params: Mapping[str, Any],
-                          enabled_tests: Set[CanvasType],
-                          canvas_path: str, offscreen_path: str):
-    if CanvasType.HTML_CANVAS in enabled_tests:
-        html_params = dict(params)
-        html_params.update({'canvas_type': CanvasType.HTML_CANVAS.value})
-        pathlib.Path(f'{canvas_path}.html').write_text(
-            _render(jinja_env, "reftest_element.html", html_params), 'utf-8')
-    if CanvasType.OFFSCREEN_CANVAS in enabled_tests:
-        offscreen_params = dict(params)
-        offscreen_params.update({
-            'canvas_type': CanvasType.OFFSCREEN_CANVAS.value
-        })
-        pathlib.Path(f'{offscreen_path}.html').write_text(
-            _render(jinja_env, "reftest_offscreen.html", offscreen_params),
-            'utf-8')
-    if CanvasType.WORKER in enabled_tests:
-        worker_params = dict(params)
-        worker_params.update({'canvas_type': CanvasType.WORKER.value})
-        pathlib.Path(f'{offscreen_path}.w.html').write_text(
-            _render(jinja_env, "reftest_worker.html", worker_params), 'utf-8')
-
-    js_ref = params.get('reference', '')
-    html_ref = params.get('html_reference', '')
-    ref_params = dict(params)
-    ref_params.update({
-        'is_test_reference': True,
-        'code': js_ref or html_ref
-    })
-    ref_template_name = 'reftest_element.html' if js_ref else 'reftest.html'
-    if CanvasType.HTML_CANVAS in enabled_tests:
-        pathlib.Path(f'{canvas_path}-expected.html').write_text(
-            _render(jinja_env, ref_template_name, ref_params), 'utf-8')
-    if {CanvasType.OFFSCREEN_CANVAS, CanvasType.WORKER} & enabled_tests:
-        pathlib.Path(f'{offscreen_path}-expected.html').write_text(
-            _render(jinja_env, ref_template_name, ref_params), 'utf-8')
-
-
-def _write_testharness_test(jinja_env: jinja2.Environment,
-                            params: Mapping[str, Any],
-                            enabled_tests: Set[CanvasType],
-                            canvas_path: str,
-                            offscreen_path: str):
-    # Create test cases for canvas and offscreencanvas.
-    if CanvasType.HTML_CANVAS in enabled_tests:
-        html_params = dict(params)
-        html_params.update({'canvas_type': CanvasType.HTML_CANVAS.value})
-        pathlib.Path(f'{canvas_path}.html').write_text(
-            _render(jinja_env, "testharness_element.html", html_params),
-            'utf-8')
-
-    if CanvasType.OFFSCREEN_CANVAS in enabled_tests:
-        offscreen_params = dict(params)
-        offscreen_params.update({
-            'canvas_type': CanvasType.OFFSCREEN_CANVAS.value
-        })
-        pathlib.Path(f'{offscreen_path}.html').write_text(
-            _render(jinja_env, "testharness_offscreen.html", offscreen_params),
-            'utf-8')
-
-    if CanvasType.WORKER in enabled_tests:
-        worker_params = dict(params)
-        worker_params.update({'canvas_type': CanvasType.WORKER.value})
-        pathlib.Path(f'{offscreen_path}.worker.js').write_text(
-            _render(jinja_env, "testharness_worker.js", worker_params),
-            'utf-8')
-
-
-def _generate_expected_image(expected: str, name: str, sub_dir: str,
-                             enabled_canvas_types: Set[CanvasType],
-                             html_canvas_cfg: TestConfig,
-                             offscreen_canvas_cfg: TestConfig) -> str:
-    """Creates a reference image using Cairo and returns the file location."""
-    if expected == 'green':
-        return '/images/green-100x50.png'
-    if expected == 'clear':
-        return '/images/clear-100x50.png'
-    if ';' in expected:
-        print('Found semicolon in %s' % name)
-    expected = re.sub(
-        r'^size (\d+) (\d+)',
-        r'surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, \1, \2)'
-        r'\ncr = cairo.Context(surface)', expected)
-
-    if CanvasType.HTML_CANVAS in enabled_canvas_types:
-        expected_canvas = (
-            expected + "\nsurface.write_to_png('%s.png')\n" %
-            os.path.join(html_canvas_cfg.image_out_dir, sub_dir, name))
-        eval(compile(expected_canvas, '<test %s>' % name, 'exec'), {},
-             {'cairo': cairo})
-
-    if {CanvasType.OFFSCREEN_CANVAS, CanvasType.WORKER} & enabled_canvas_types:
-        expected_offscreen = (
-            expected + "\nsurface.write_to_png('%s.png')\n" %
-            os.path.join(offscreen_canvas_cfg.image_out_dir, sub_dir, name))
-        eval(compile(expected_offscreen, '<test %s>' % name, 'exec'), {},
-             {'cairo': cairo})
-
-    return '%s.png' % name
-
-
-def _generate_test(test: Mapping[str, Any], jinja_env: jinja2.Environment,
-                   name_to_sub_dir: Mapping[str, str],
-                   used_tests: DefaultDict[str, Set[CanvasType]],
-                   html_canvas_cfg: TestConfig,
-                   offscreen_canvas_cfg: TestConfig) -> None:
-    _validate_test(test)
-
-    name = test['name']
-
-    sub_dir = _get_test_sub_dir(name, name_to_sub_dir)
-    enabled_canvas_types = _get_enabled_canvas_types(test)
-
-    # Defaults:
-    params = {
-        'desc': '',
-        'size': [100, 50],
-    }
-
-    params.update(test)
-
-    # Render parameters used in the test name.
-    name = jinja_env.from_string(name).render(params)
-    print('\r(%s)' % name, ' ' * 32, '\t')
-
-    expected_img = None
-    if 'expected' in test and test['expected'] is not None:
-        expected_img = _generate_expected_image(test['expected'], name,
-                                                sub_dir, enabled_canvas_types,
-                                                html_canvas_cfg,
-                                                offscreen_canvas_cfg)
-
-    params.update({
-        'code': _expand_test_code(test['code']),
-        'expected_img': expected_img
-    })
-
-    already_tested = used_tests[name].intersection(enabled_canvas_types)
-    if already_tested:
-        raise InvalidTestDefinitionError(
-            f'Test {name} is defined twice for types {already_tested}')
-    used_tests[name].update(enabled_canvas_types)
+            params: _TestParams, output_file_name: str):
+    template = jinja_env.get_template(template_name)
+    file_content = _render_template(jinja_env, template, params)
+    pathlib.Path(output_file_name).write_text(file_content, 'utf-8')
+
+
+def _preprocess_code(jinja_env: jinja2.Environment, code: str,
+                     params: _TestParams) -> str:
+    code = _expand_test_code(code)
+    # Render the code on its own, as it could contain templates expanding
+    # to multiple lines. This is needed to get proper indentation of the
+    # code in the main template.
+    code = _render_template(jinja_env, jinja_env.from_string(code), params)
+    return code
 
-    canvas_path = os.path.join(html_canvas_cfg.out_dir, sub_dir, name)
-    offscreen_path = os.path.join(offscreen_canvas_cfg.out_dir, sub_dir, name)
-    if 'manual' in test:
-        canvas_path += '-manual'
-        offscreen_path += '-manual'
 
-    if 'reference' in test or 'html_reference' in test:
-        _write_reference_test(jinja_env, params, enabled_canvas_types,
-                              canvas_path, offscreen_path)
-    else:
-        _write_testharness_test(jinja_env, params, enabled_canvas_types,
-                                canvas_path, offscreen_path)
+class _Variant():
+
+    def __init__(self, params: _MutableTestParams) -> None:
+        self._params = params
+
+    @property
+    def params(self) -> _TestParams:
+        """Read-only getter for this variant's param dict."""
+        return self._params
+
+    @staticmethod
+    def create_with_defaults(test: _TestParams) -> '_Variant':
+        """Create a _Variant from the specified params.
+
+        Default values are added for certain parameters, if missing."""
+        params = {
+            'desc': '',
+            'size': [100, 50],
+            'variant_names': [],
+        }
+        params.update(test)
+        return _Variant(params)
 
+    def _get_variant_name(self, jinja_env: jinja2.Environment) -> str:
+        name = self.params['name']
+        if self.params.get('append_variants_to_name', True):
+            name = '.'.join([name] + self.params['variant_names'])
 
-def _recursive_expand_variant_matrix(test_list: List[Mapping[str, Any]],
-                                     variant_matrix: List[Mapping[str, Any]],
+        name = jinja_env.from_string(name).render(self.params)
+        return name
+
+    def _get_file_name(self) -> str:
+        file_name = self.params['name']
+
+        if 'manual' in self.params:
+            file_name += '-manual'
+
+        return file_name
+
+    def _get_canvas_types(self) -> FrozenSet[_CanvasType]:
+        canvas_types = self.params.get('canvas_types', _CanvasType)
+        invalid_types = {
+            type
+            for type in canvas_types if type not in list(_CanvasType)
+        }
+        if invalid_types:
+            raise InvalidTestDefinitionError(
+                f'Invalid canvas_types: {list(invalid_types)}. '
+                f'Accepted values are: {[t.value for t in _CanvasType]}')
+        return frozenset(_CanvasType(t) for t in canvas_types)
+
+    def _get_template_type(self) -> _TemplateType:
+        if 'reference' in self.params and 'html_reference' in self.params:
+            raise InvalidTestDefinitionError(
+                f'Test {self.params["name"]} is invalid, "reference" and '
+                '"html_reference" can\'t both be specified at the same time.')
+
+        if 'reference' in self.params:
+            return _TemplateType.REFERENCE
+        if 'html_reference' in self.params:
+            return _TemplateType.HTML_REFERENCE
+        return _TemplateType.TESTHARNESS
+
+    def finalize_params(self, jinja_env: jinja2.Environment) -> None:
+        """Finalize this variant by adding computed param fields."""
+        self._params['name'] = self._get_variant_name(jinja_env)
+        self._params['file_name'] = self._get_file_name()
+        self._params['canvas_types'] = self._get_canvas_types()
+        self._params['template_type'] = self._get_template_type()
+
+        if 'reference' in self._params:
+            self._params['reference'] = _preprocess_code(
+                jinja_env, self._params['reference'], self._params)
+
+        if 'html_reference' in self._params:
+            self._params['html_reference'] = _preprocess_code(
+                jinja_env, self._params['html_reference'], self._params)
+
+        code_params = dict(self.params)
+        if _CanvasType.HTML_CANVAS in self.params['canvas_types']:
+            code_params['canvas_type'] = _CanvasType.HTML_CANVAS.value
+            self._params['code_element'] = _preprocess_code(
+                jinja_env, self._params['code'], code_params)
+
+        if _CanvasType.OFFSCREEN_CANVAS in self.params['canvas_types']:
+            code_params['canvas_type'] = _CanvasType.OFFSCREEN_CANVAS.value
+            self._params['code_offscreen'] = _preprocess_code(
+                jinja_env, self._params['code'], code_params)
+
+        if _CanvasType.WORKER in self.params['canvas_types']:
+            code_params['canvas_type'] = _CanvasType.WORKER.value
+            self._params['code_worker'] = _preprocess_code(
+                jinja_env, self._params['code'], code_params)
+
+        _validate_test(self._params)
+
+    def generate_expected_image(self, output_dirs: _OutputPaths) -> None:
+        """Creates a reference image using Cairo and save filename in params."""
+        if 'expected' not in self.params:
+            return
+
+        expected = self.params['expected']
+        name = self.params['name']
+
+        if expected == 'green':
+            self._params['expected_img'] = '/images/green-100x50.png'
+            return
+        if expected == 'clear':
+            self._params['expected_img'] = '/images/clear-100x50.png'
+            return
+        if ';' in expected:
+            print(f'Found semicolon in {name}')
+        expected = re.sub(
+            r'^size (\d+) (\d+)',
+            r'surface = cairo.ImageSurface(cairo.FORMAT_ARGB32, \1, \2)'
+            r'\ncr = cairo.Context(surface)', expected)
+
+        output_paths = output_dirs.sub_path(name)
+        if _CanvasType.HTML_CANVAS in self.params['canvas_types']:
+            expected_canvas = (
+                f'{expected}\n'
+                f'surface.write_to_png("{output_paths.element}.png")\n')
+            eval(compile(expected_canvas, f'<test {name}>', 'exec'), {},
+                 {'cairo': cairo})
+
+        if {_CanvasType.OFFSCREEN_CANVAS, _CanvasType.WORKER
+            } & self.params['canvas_types']:
+            expected_offscreen = (
+                f'{expected}\n'
+                f'surface.write_to_png("{output_paths.offscreen}.png")\n')
+            eval(compile(expected_offscreen, f'<test {name}>', 'exec'), {},
+                 {'cairo': cairo})
+
+        self._params['expected_img'] = f'{name}.png'
+
+    def _write_reference_test(self, jinja_env: jinja2.Environment,
+                              output_files: _OutputPaths):
+        params = dict(self.params)
+        if _CanvasType.HTML_CANVAS in params['canvas_types']:
+            _render(jinja_env, 'reftest_element.html', params,
+                    f'{output_files.element}.html')
+        if _CanvasType.OFFSCREEN_CANVAS in params['canvas_types']:
+            _render(jinja_env, 'reftest_offscreen.html', params,
+                    f'{output_files.offscreen}.html')
+        if _CanvasType.WORKER in params['canvas_types']:
+            _render(jinja_env, 'reftest_worker.html', params,
+                    f'{output_files.offscreen}.w.html')
+
+        params['is_test_reference'] = True
+        is_html_ref = params['template_type'] == _TemplateType.HTML_REFERENCE
+        ref_template = 'reftest.html' if is_html_ref else 'reftest_element.html'
+        if _CanvasType.HTML_CANVAS in params['canvas_types']:
+            _render(jinja_env, ref_template, params,
+                    f'{output_files.element}-expected.html')
+        if {_CanvasType.OFFSCREEN_CANVAS, _CanvasType.WORKER
+            } & params['canvas_types']:
+            _render(jinja_env, ref_template, params,
+                    f'{output_files.offscreen}-expected.html')
+
+    def _write_testharness_test(self, jinja_env: jinja2.Environment,
+                                output_files: _OutputPaths):
+        # Create test cases for canvas and offscreencanvas.
+        if _CanvasType.HTML_CANVAS in self.params['canvas_types']:
+            _render(jinja_env, 'testharness_element.html', self.params,
+                    f'{output_files.element}.html')
+
+        if _CanvasType.OFFSCREEN_CANVAS in self.params['canvas_types']:
+            _render(jinja_env, 'testharness_offscreen.html', self.params,
+                    f'{output_files.offscreen}.html')
+
+        if _CanvasType.WORKER in self.params['canvas_types']:
+            _render(jinja_env, 'testharness_worker.js', self.params,
+                    f'{output_files.offscreen}.worker.js')
+
+    def generate_test(self, jinja_env: jinja2.Environment,
+                      output_dirs: _OutputPaths) -> None:
+        """Generate the test files to the specified output dirs."""
+        output_files = output_dirs.sub_path(self.params['file_name'])
+
+        if self.params['template_type'] in (_TemplateType.REFERENCE,
+                                            _TemplateType.HTML_REFERENCE):
+            self._write_reference_test(jinja_env, output_files)
+        else:
+            self._write_testharness_test(jinja_env, output_files)
+
+
+def _recursive_expand_variant_matrix(original_test: _TestParams,
+                                     variant_matrix: List[_TestParams],
                                      current_selection: List[Tuple[str, Any]],
-                                     original_test: Mapping[str, Any]):
+                                     test_variants: List[_Variant]):
     if len(current_selection) == len(variant_matrix):
         # Selection for each variant is done, so add a new test to test_list.
-        test = original_test.copy()
+        test = dict(original_test)
         variant_name_list = []
-        should_append_variant_names = original_test.get(
-            'append_variants_to_name', True)
         for variant_name, variant_params in current_selection:
-            variant_name_list.append(variant_name)
-            # Append variant name. Variant names starting with '_' are
-            # not appended, which is useful to create variants with the same
-            # name in different folders (element vs. offscreen).
-            if (should_append_variant_names
-                    and not variant_name.startswith('_')):
-                test['name'] += '.' + variant_name
             test.update(variant_params)
-            # Expose variant names as a list so they can be used from the yaml
-            # files, which helps with better naming of tests.
-            test.update({'variant_names': variant_name_list})
-        test_list.append(test)
+            variant_name_list.append(variant_name)
+        # Expose variant names as a list so they can be used from the yaml
+        # files, which helps with better naming of tests.
+        test.update({'variant_names': variant_name_list})
+        test_variants.append(_Variant.create_with_defaults(test))
     else:
         # Continue the recursion with each possible selection for the current
         # variant.
         variant = variant_matrix[len(current_selection)]
         for variant_options in variant.items():
             current_selection.append(variant_options)
-            _recursive_expand_variant_matrix(test_list, variant_matrix,
-                                             current_selection, original_test)
+            _recursive_expand_variant_matrix(original_test, variant_matrix,
+                                             current_selection, test_variants)
             current_selection.pop()
 
 
-def _expand_variant_matrix(
-        variant_matrix: List[Mapping[str, Any]],
-        original_test: Mapping[str, Any]) -> List[Mapping[str, Any]]:
+def _get_variants(test: _TestParams) -> List[_Variant]:
     current_selection = []
-    matrix_tests = []
-    _recursive_expand_variant_matrix(matrix_tests, variant_matrix,
-                                     current_selection, original_test)
-    return matrix_tests
+    test_variants = []
+    variants = test.get('variants', [])
+    if not isinstance(variants, list):
+        raise InvalidTestDefinitionError(
+            textwrap.dedent("""
+            Variants must be specified as a list of variant dimensions, e.g.:
+              variants:
+              - dimension1-variant1:
+                  param: ...
+                dimension1-variant2:
+                  param: ...
+              - dimension2-variant1:
+                  param: ...
+                dimension2-variant2:
+                  param: ..."""))
+    _recursive_expand_variant_matrix(test, variants, current_selection,
+                                     test_variants)
+    return test_variants
+
+
+def _check_uniqueness(tested: DefaultDict[str, Set[_CanvasType]], name: str,
+                      canvas_types: FrozenSet[_CanvasType]) -> None:
+    already_tested = tested[name].intersection(canvas_types)
+    if already_tested:
+        raise InvalidTestDefinitionError(
+            f'Test {name} is defined twice for types {already_tested}')
+    tested[name].update(canvas_types)
 
 
-def genTestUtils_union(NAME2DIRFILE: str) -> None:
-    CANVASOUTPUTDIR = '../element'
-    CANVASIMAGEOUTPUTDIR = '../element'
-    OFFSCREENCANVASOUTPUTDIR = '../offscreen'
-    OFFSCREENCANVASIMAGEOUTPUTDIR = '../offscreen'
+def generate_test_files(name_to_dir_file: str) -> None:
+    """Generate Canvas tests from YAML file definition."""
+    output_dirs = _OutputPaths(element='../element', offscreen='../offscreen')
 
     jinja_env = jinja2.Environment(
-        loader=jinja2.PackageLoader("gentestutilsunion"),
+        loader=jinja2.PackageLoader('gentestutilsunion'),
         keep_trailing_newline=True,
         trim_blocks=True,
         lstrip_blocks=True)
 
-    jinja_env.filters['double_quote_escape'] = _doubleQuoteEscape
+    jinja_env.filters['double_quote_escape'] = _double_quote_escape
 
     # Run with --test argument to run unit tests.
     if len(sys.argv) > 1 and sys.argv[1] == '--test':
@@ -531,16 +587,19 @@ def genTestUtils_union(NAME2DIRFILE: str) -> None:
         doctest.testmod()
         sys.exit()
 
-    name_to_sub_dir = yaml.safe_load(pathlib.Path(NAME2DIRFILE).read_text())
+    name_to_sub_dir = (yaml.safe_load(
+        pathlib.Path(name_to_dir_file).read_text(encoding='utf-8')))
 
     tests = []
     test_yaml_directory = 'yaml-new'
-    TESTSFILES = [
+    yaml_files = [
         os.path.join(test_yaml_directory, f)
         for f in os.listdir(test_yaml_directory) if f.endswith('.yaml')
     ]
-    for t in sum(
-        [yaml.safe_load(pathlib.Path(f).read_text()) for f in TESTSFILES], []):
+    for t in sum([
+            yaml.safe_load(pathlib.Path(f).read_text(encoding='utf-8'))
+            for f in yaml_files
+    ], []):
         if 'DISABLED' in t:
             continue
         if 'meta' in t:
@@ -550,14 +609,11 @@ def genTestUtils_union(NAME2DIRFILE: str) -> None:
             tests.append(t)
 
     # Ensure the test output directories exist.
-    testdirs = [
-        CANVASOUTPUTDIR, OFFSCREENCANVASOUTPUTDIR, CANVASIMAGEOUTPUTDIR,
-        OFFSCREENCANVASIMAGEOUTPUTDIR
-    ]
+    test_dirs = [output_dirs.element, output_dirs.offscreen]
     for sub_dir in set(name_to_sub_dir.values()):
-        testdirs.append('%s/%s' % (CANVASOUTPUTDIR, sub_dir))
-        testdirs.append('%s/%s' % (OFFSCREENCANVASOUTPUTDIR, sub_dir))
-    for d in testdirs:
+        test_dirs.append(f'{output_dirs.element}/{sub_dir}')
+        test_dirs.append(f'{output_dirs.offscreen}/{sub_dir}')
+    for d in test_dirs:
         try:
             os.mkdir(d)
         except FileExistsError:
@@ -565,24 +621,19 @@ def genTestUtils_union(NAME2DIRFILE: str) -> None:
 
     used_tests = collections.defaultdict(set)
     for test in tests:
-        if 'variant_matrix' in test:
-            variants = _expand_variant_matrix(test['variant_matrix'], test)
-        elif 'variants' in test:
-            variant_matrix = [test['variants']]
-            variants = _expand_variant_matrix(variant_matrix, test)
-        else:
-            variants = [test]
-
-        for variant in variants:
-            _generate_test(variant,
-                           jinja_env,
-                           name_to_sub_dir,
-                           used_tests,
-                           html_canvas_cfg=TestConfig(
-                               out_dir=CANVASOUTPUTDIR,
-                               image_out_dir=CANVASIMAGEOUTPUTDIR),
-                           offscreen_canvas_cfg=TestConfig(
-                               out_dir=OFFSCREENCANVASOUTPUTDIR,
-                               image_out_dir=OFFSCREENCANVASIMAGEOUTPUTDIR))
+        print(test['name'])
+        for variant in _get_variants(test):
+            variant.finalize_params(jinja_env)
+            if test['name'] != variant.params['name']:
+                print(f'  {variant.params["name"]}')
+
+            sub_dir = _get_test_sub_dir(variant.params['file_name'],
+                                        name_to_sub_dir)
+            output_sub_dirs = output_dirs.sub_path(sub_dir)
+
+            _check_uniqueness(used_tests, variant.params['name'],
+                              variant.params['canvas_types'])
+            variant.generate_expected_image(output_sub_dirs)
+            variant.generate_test(jinja_env, output_sub_dirs)
 
     print()
diff --git a/testing/web-platform/tests/html/canvas/tools/templates/reftest.html b/testing/web-platform/tests/html/canvas/tools/templates/reftest.html
index 4c9affbbbb..f68d4c4621 100644
--- a/testing/web-platform/tests/html/canvas/tools/templates/reftest.html
+++ b/testing/web-platform/tests/html/canvas/tools/templates/reftest.html
@@ -5,7 +5,7 @@
 <p class="desc">{{ desc }}</p>
 {% if notes %}<p class="notes">{{ notes }}{% endif %}
 
-{{ code | trim }}
+{{ html_reference | trim }}
 {% for image in images %}
 <img src="/images/{{ image }}" id="{{ image }}" class="resource">
 {% endfor -%}
diff --git a/testing/web-platform/tests/html/canvas/tools/templates/reftest_element.html b/testing/web-platform/tests/html/canvas/tools/templates/reftest_element.html
index 6684e9c615..6f7a8c8507 100644
--- a/testing/web-platform/tests/html/canvas/tools/templates/reftest_element.html
+++ b/testing/web-platform/tests/html/canvas/tools/templates/reftest_element.html
@@ -20,7 +20,8 @@
   const canvas = document.getElementById("canvas");
   const ctx = canvas.getContext('2d'{% if attributes %}, {{ attributes }}{% endif %});
 
-  {{ code | trim | indent(2) }}
+  {{ reference | trim | indent(2) if is_test_reference else
+     code_element | trim | indent(2) }}
   {% if test_type == 'promise' %}
   document.documentElement.classList.remove("reftest-wait");
   {% endif %}
diff --git a/testing/web-platform/tests/html/canvas/tools/templates/reftest_offscreen.html b/testing/web-platform/tests/html/canvas/tools/templates/reftest_offscreen.html
index 1d0d93dfa1..abc840159f 100644
--- a/testing/web-platform/tests/html/canvas/tools/templates/reftest_offscreen.html
+++ b/testing/web-platform/tests/html/canvas/tools/templates/reftest_offscreen.html
@@ -18,7 +18,7 @@
   const canvas = new OffscreenCanvas({{ size[0] }}, {{ size[1] }});
   const ctx = canvas.getContext('2d'{% if attributes %}, {{ attributes }}{% endif %});
 
-  {{ code | trim | indent(2) }}
+  {{ code_offscreen | trim | indent(2) }}
 
   const outputCanvas = document.getElementById("canvas");
   outputCanvas.getContext('2d'{% if attributes %}, {{ attributes }}{% endif %}).drawImage(canvas, 0, 0);
diff --git a/testing/web-platform/tests/html/canvas/tools/templates/reftest_worker.html b/testing/web-platform/tests/html/canvas/tools/templates/reftest_worker.html
index e636d3634b..02281af5d1 100644
--- a/testing/web-platform/tests/html/canvas/tools/templates/reftest_worker.html
+++ b/testing/web-platform/tests/html/canvas/tools/templates/reftest_worker.html
@@ -18,7 +18,7 @@
     const canvas = new OffscreenCanvas({{ size[0] }}, {{ size[1] }});
     const ctx = canvas.getContext('2d'{% if attributes %}, {{ attributes }}{% endif %});
 
-    {{ code | trim | indent(4) }}
+    {{ code_worker | trim | indent(4) }}
 
     const bitmap = canvas.transferToImageBitmap();
     self.postMessage(bitmap, bitmap);
diff --git a/testing/web-platform/tests/html/canvas/tools/templates/testharness_element.html b/testing/web-platform/tests/html/canvas/tools/templates/testharness_element.html
index 56cde7936a..c8de772ea6 100644
--- a/testing/web-platform/tests/html/canvas/tools/templates/testharness_element.html
+++ b/testing/web-platform/tests/html/canvas/tools/templates/testharness_element.html
@@ -42,21 +42,29 @@
 {% if test_type == 'promise' %}
 promise_test(async t => {
 
-  var canvas = document.getElementById('c');
-  var ctx = canvas.getContext('2d'{% if attributes %}, {{ attributes }}{% endif %});
-{% else %}
+{% elif test_type == 'async' %}
+async_test(t => {
+{% elif test_type == 'sync' %}
+test(t => {
+{% endif %}
+{% if not test_type %}
 var t = async_test("{{ desc | double_quote_escape }}");
 _addTest(function(canvas, ctx) {
+
+{% else %}
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d'{% if attributes %}, {{ attributes }}{% endif %});
+
 {% endif %}
 
-  {# Test body: #}
-  {{ code | trim | indent(2) }}
+  {#- Test body: #}
+  {{ code_element | trim | indent(2) }}
 
 {# Promise vs. async test footer: #}
-{% if test_type == 'promise' %}
-}, "{{ desc }}");
-{% else %}
+{% if not test_type %}
 }{% if attributes %}, {{ attributes }}{% endif %});
+{% else %}
+}, "{{ desc | double_quote_escape }}");
 {% endif -%}
 
 </script>
diff --git a/testing/web-platform/tests/html/canvas/tools/templates/testharness_offscreen.html b/testing/web-platform/tests/html/canvas/tools/templates/testharness_offscreen.html
index 8ebbff77a6..68147680e1 100644
--- a/testing/web-platform/tests/html/canvas/tools/templates/testharness_offscreen.html
+++ b/testing/web-platform/tests/html/canvas/tools/templates/testharness_offscreen.html
@@ -15,6 +15,11 @@
 {#- Promise vs. async test header: +#}
 {% if test_type == 'promise' %}
 promise_test(async t => {
+
+{% elif test_type == 'async' %}
+async_test(t => {
+{% elif test_type == 'sync' %}
+test(t => {
 {% else %}
 var t = async_test("{{ desc | double_quote_escape }}");
 var t_pass = t.done.bind(t);
@@ -22,22 +27,23 @@ var t_fail = t.step_func(function(reason) {
     throw reason;
 });
 t.step(function() {
+
 {% endif %}
 
-{# Test body: #}
+{#- Test body: #}
   var canvas = new OffscreenCanvas({{ size[0] }}, {{ size[1] }});
   var ctx = canvas.getContext('2d'{% if attributes %}, {{ attributes }}{% endif %});
 
-  {{ code | trim | indent(2)}}
+  {{ code_offscreen | trim | indent(2)}}
 
 {#- Promise vs. async test footer: +#}
-{% if test_type == 'promise' %}
-
-}, "{{ desc }}");
-{% else %}
+{% if not test_type %}
   t.done();
 
 });
+{% else %}
+
+}, "{{ desc | double_quote_escape }}");
 {% endif %}
 </script>
 {% for svgimage in svgimages %}
diff --git a/testing/web-platform/tests/html/canvas/tools/templates/testharness_worker.js b/testing/web-platform/tests/html/canvas/tools/templates/testharness_worker.js
index f1f04e7bb6..570d479a0a 100644
--- a/testing/web-platform/tests/html/canvas/tools/templates/testharness_worker.js
+++ b/testing/web-platform/tests/html/canvas/tools/templates/testharness_worker.js
@@ -10,6 +10,10 @@ importScripts("/html/canvas/resources/canvas-tests.js");
 {# Promise vs. async test header: #}
 {% if test_type == 'promise' %}
 promise_test(async t => {
+{% elif test_type == 'async' %}
+async_test(t => {
+{% elif test_type == 'sync' %}
+test(t => {
 {% else %}
 var t = async_test("{{ desc | double_quote_escape }}");
 var t_pass = t.done.bind(t);
@@ -17,19 +21,20 @@ var t_fail = t.step_func(function(reason) {
     throw reason;
 });
 t.step(function() {
+
 {% endif %}
 
-{# Test body: #}
+{#- Test body: #}
   var canvas = new OffscreenCanvas({{ size[0] }}, {{ size[1] }});
   var ctx = canvas.getContext('2d'{% if attributes %}, {{ attributes }}{% endif %});
 
-  {{ code | trim | indent(2)}}
-  t.done();
+  {{ code_worker | trim | indent(2)}}
 
 {#- Promise vs. async test footer: +#}
-{% if test_type == 'promise' %}
-}, "{{ desc }}");
-{% else %}
+{% if not test_type %}
+  t.done();
 });
+{% else %}
+}, "{{ desc | double_quote_escape }}");
 {% endif %}
 done();
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/color_space.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/color_space.yaml
index 39556caf0a..56f6d01d30 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/color_space.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/color_space.yaml
@@ -36,8 +36,7 @@
 - name: 2d.color.space.p3.toBlob.p3.canvas
   desc: test if toblob returns p3 data from p3 color space canvas
   attributes: '{colorSpace: "display-p3"}'
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     ctx.fillStyle = "rgba(155, 27, 27, 1)";
     ctx.fillRect(0, 0, 1, 1);
@@ -68,8 +67,7 @@
 - name: 2d.color.space.p3.toDataURL.p3.canvas
   desc: test if toDataURL returns p3 data from canvas with p3 color space
   attributes: '{colorSpace: "display-p3"}'
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     ctx.fillStyle = "rgba(155, 27, 27, 1)";
     ctx.fillRect(0, 0, 1, 1);
@@ -96,8 +94,7 @@
 - name: 2d.color.space.p3.toDataURL.jpeg.p3.canvas
   desc: test if toDataURL('image/jpeg') returns p3 data from canvas with p3 color space
   attributes: '{colorSpace: "display-p3"}'
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     ctx.fillStyle = "rgba(155, 27, 27, 1)";
     ctx.fillRect(0, 0, 1, 1);
@@ -124,8 +121,7 @@
 - name: 2d.color.space.p3.toBlob.with.putImageData
   desc: Use putImageData to put some p3 data in canvas and test if toBlob returns the same data
   attributes: '{colorSpace: "display-p3"}'
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     canvas.width = 2;
     canvas.height = 2;
@@ -162,8 +158,7 @@
 - name: 2d.color.space.p3.toDataURL.with.putImageData
   desc: Use putImageData to put some p3 data in canvas and test if toDataURL returns the same data
   attributes: '{colorSpace: "display-p3"}'
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     canvas.width = 2;
     canvas.height = 2;
@@ -197,7 +192,7 @@
 - name: 2d.color.space.p3.fillText
   desc: Test if fillText can be used with a solid display-p3 color
   attributes: '{colorSpace: "display-p3"}'
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     deferTest();
 
@@ -236,8 +231,7 @@
 - name: 2d.color.space.p3.strokeText
   desc: Test if strokeText can be used with a solid display-p3 color
   attributes: '{colorSpace: "display-p3"}'
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     deferTest();
 
@@ -277,8 +271,7 @@
 - name: 2d.color.space.p3.fillText.shadow
   desc: Test if fillText can be used with a display-p3 shadow color
   attributes: '{colorSpace: "display-p3"}'
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     deferTest();
 
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/compositing.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/compositing.yaml
index bd7fae1d62..6bd0aaad8a 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/compositing.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/compositing.yaml
@@ -43,7 +43,7 @@
   expected: green
 
 - name: 2d.composite.globalAlpha.canvas
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var canvas2 = document.createElement('canvas');
     canvas2.width = 100;
@@ -61,7 +61,7 @@
   expected: green
 
 - name: 2d.composite.globalAlpha.canvaspattern
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var canvas2 = document.createElement('canvas');
     canvas2.width = 100;
@@ -80,7 +80,7 @@
   expected: green
 
 - name: 2d.composite.globalAlpha.canvascopy
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var canvas2 = document.createElement('canvas');
     canvas2.width = 100;
@@ -173,7 +173,7 @@
   expected: green
 
 - name: 2d.composite.globalAlpha.canvas
-  canvasType: ['OffscreenCanvas', 'Worker']
+  canvas_types: ['OffscreenCanvas', 'Worker']
   code: |
     var offscreenCanvas2 = new OffscreenCanvas(100, 50);
     var ctx2 = offscreenCanvas2.getContext('2d');
@@ -203,7 +203,7 @@
   expected: green
 
 - name: 2d.composite.globalAlpha.canvaspattern
-  canvasType: ['OffscreenCanvas', 'Worker']
+  canvas_types: ['OffscreenCanvas', 'Worker']
   code: |
     var offscreenCanvas2 = new OffscreenCanvas(100, 50);
     var ctx2 = offscreenCanvas2.getContext('2d');
@@ -218,7 +218,7 @@
     @assert pixel 50,25 ==~ 2,253,0,255;
 
 - name: 2d.composite.globalAlpha.canvascopy
-  canvasType: ['OffscreenCanvas', 'Worker']
+  canvas_types: ['OffscreenCanvas', 'Worker']
   code: |
     var offscreenCanvas2 = new OffscreenCanvas(100, 50);
     var ctx2 = offscreenCanvas2.getContext('2d');
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/conformance_requirements.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/conformance_requirements.yaml
index 3483d115f4..a070c0a6ef 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/conformance_requirements.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/conformance_requirements.yaml
@@ -1,7 +1,7 @@
 - name: 2d.conformance.requirements.delete
   desc: window.CanvasRenderingContext2D is Configurable
   notes: &bindings Defined in "Web IDL" (draft)
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     @assert window.CanvasRenderingContext2D !== undefined;
     @assert delete window.CanvasRenderingContext2D === true;
@@ -172,7 +172,6 @@
   desc: void methods return undefined
   images:
   - yellow.png
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     @assert ctx.drawImage(document.getElementById('yellow.png'), 0, 0, 1, 1, 0, 0, 0, 0) === undefined;
-
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/drawing-images-to-the-canvas.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/drawing-images-to-the-canvas.yaml
index 09e9e00186..7ebe9cca85 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/drawing-images-to-the-canvas.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/drawing-images-to-the-canvas.yaml
@@ -1,5 +1,5 @@
 - name: 2d.drawImage.canvas
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var canvas2 = document.createElement('canvas');
     canvas2.width = 100;
@@ -70,12 +70,12 @@
   desc: Incorrect image types in drawImage do not match any defined overloads, so
     WebIDL throws a TypeError
   notes: &bindings Defined in "Web IDL" (draft)
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     @assert throws TypeError ctx.drawImage(document.createElement('p'), 0, 0);
 
 - name: 2d.drawImage.incomplete.nosrc
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   mozilla: {throws: !!null ''}
   code: |
     ctx.fillStyle = '#0f0';
@@ -86,7 +86,7 @@
   expected: green
 
 - name: 2d.drawImage.incomplete.immediate
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - red.png
   code: |
@@ -103,7 +103,7 @@
   expected: green
 
 - name: 2d.drawImage.incomplete.reload
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - yellow.png
   - red.png
@@ -122,7 +122,7 @@
   expected: green
 
 - name: 2d.drawImage.incomplete.emptysrc
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - red.png
   mozilla: {throws: !!null ''}
@@ -136,7 +136,7 @@
   expected: green
 
 - name: 2d.drawImage.incomplete.removedsrc
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - red.png
   mozilla: {throws: !!null ''}
@@ -150,7 +150,7 @@
   expected: green
 
 - name: 2d.drawImage.nonexistent
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - not-found-at-all.png
   code: |
@@ -159,7 +159,7 @@
 
 - name: 2d.drawImage.zerocanvas
   desc: drawImage with zero-sized canvas as the source shoud throw exception
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var canvas2 = document.createElement('canvas');
     canvas2.width = 0;
@@ -176,7 +176,7 @@
 
 - name: 2d.drawImage.animated.gif
   desc: drawImage() of an animated GIF draws the first frame
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - anim-gr.gif
   code: |
@@ -330,7 +330,7 @@
     @assert pixel 99,49 ==~ 0,255,0,255;
 
 - name: 2d.drawImage.canvas
-  canvasType: ['OffscreenCanvas', 'Worker']
+  canvas_types: ['OffscreenCanvas', 'Worker']
   code: |
     var offscreenCanvas2 = new OffscreenCanvas(100, 50);
     var ctx2 = offscreenCanvas2.getContext('2d');
@@ -344,7 +344,7 @@
     @assert pixel 99,49 ==~ 0,255,0,255;
 
 - name: 2d.drawImage.zerocanvas
-  canvasType: ['OffscreenCanvas', 'Worker']
+  canvas_types: ['OffscreenCanvas', 'Worker']
   code: |
     var offscreenCanvas2 = new OffscreenCanvas(0, 10);
     @assert throws INVALID_STATE_ERR ctx.drawImage(offscreenCanvas2, 0, 0);
@@ -385,7 +385,7 @@
 - name: 2d.drawImage.zerosource.image
   desc: drawImage with zero-sized source rectangle from image draws nothing without exception
   test_type: promise
-  canvasType: ['HTMLCanvas', 'OffscreenCanvas']
+  canvas_types: ['HtmlCanvas', 'OffscreenCanvas']
   code: |
     ctx.fillStyle = '#0f0';
     ctx.fillRect(0, 0, 100, 50);
@@ -483,7 +483,7 @@
 
 - name: 2d.drawImage.outsidesource
   DISABLED: fix this to match the current spec (transparent black outside source)
-  canvasType: ['OffscreenCanvas', 'Worker']
+  canvas_types: ['OffscreenCanvas', 'Worker']
   code: |
     const response_red = await fetch('/images/red.png');
     const blob_red = await response_red.blob();
@@ -518,7 +518,7 @@
 - name: 2d.drawImage.svg
   desc: drawImage() of an SVG image
   test_type: promise
-  canvasType: ['HTMLCanvas', 'OffscreenCanvas']
+  canvas_types: ['HtmlCanvas', 'OffscreenCanvas']
   code: |
     const img = new Image();
     const imageLoadPromise = new Promise((resolve, reject) => {
@@ -641,7 +641,7 @@
 
 - name: 2d.drawImage.detachedcanvas
   desc: drawImage with detached OffscreenCanvas as the source should throw exception
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var canvas2 = new OffscreenCanvas(80, 80);
     (new MessageChannel()).port1.postMessage(canvas2, [canvas2]);
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/drawing-rectangles-to-the-canvas.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/drawing-rectangles-to-the-canvas.yaml
index 408e932abe..cb7ae0d858 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/drawing-rectangles-to-the-canvas.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/drawing-rectangles-to-the-canvas.yaml
@@ -375,8 +375,7 @@
 
 - name: 2d.fillStyle.colorObject
   desc: ctx.fillStyle works with color objects
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     ctx.fillStyle = {r: 1, g: 0, b: 0};
     ctx.fillRect(0, 0, 100, 50);
@@ -400,8 +399,7 @@
 
 - name: 2d.fillStyle.colorObject.transparency
   desc: ctx.fillStyle with color objects has transparency
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     ctx.fillStyle = {r: 0, g: 1, b: 0, a: 0};
     ctx.fillRect(0, 0, 100, 50);
@@ -422,8 +420,7 @@
 
 - name: 2d.strokeStyle.colorObject
   desc: ctx.strokeStyle works with color objects
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     ctx.lineWidth = 50;
     ctx.strokeStyle = {r: 1, g: 0, b: 0};
@@ -448,8 +445,7 @@
 
 - name: 2d.strokeStyle.colorObject.transparency
   desc: ctx.strokeStyle with color objects has transparency
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     ctx.lineWidth = 50;
     ctx.strokeStyle = {r: 0, g: 1, b: 0, a: 0};
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/fill-and-stroke-styles.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/fill-and-stroke-styles.yaml
index c992af6e7c..72d027a634 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/fill-and-stroke-styles.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/fill-and-stroke-styles.yaml
@@ -1,6 +1,6 @@
 - name: 2d.fillStyle.parse.current.basic
   desc: currentColor is computed from the canvas element
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     canvas.setAttribute('style', 'color: #0f0');
     ctx.fillStyle = '#f00';
@@ -11,7 +11,7 @@
 
 - name: 2d.fillStyle.parse.current.changed
   desc: currentColor is computed when the attribute is set, not when it is painted
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     canvas.setAttribute('style', 'color: #0f0');
     ctx.fillStyle = '#f00';
@@ -23,7 +23,7 @@
 
 - name: 2d.fillStyle.parse.current.removed
   desc: currentColor is solid black when the canvas element is not in a document
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     // Try not to let it undetectably incorrectly pick up opaque-black
     // from other parts of the document:
@@ -119,7 +119,7 @@
   desc: window.CanvasGradient exists and has the right properties
   notes: &bindings Defined in "Web IDL" (draft)
   code: |
-    {% set root = 'self' if canvas_type == 'worker' else 'window' %}
+    {% set root = 'self' if canvas_type == 'Worker' else 'window' %}
     @assert {{ root }}.CanvasGradient !== undefined;
     @assert {{ root }}.CanvasGradient.prototype.addColorStop !== undefined;
 
@@ -127,7 +127,7 @@
   desc: createLinearGradient() and createRadialGradient() returns objects implementing
     CanvasGradient
   code: |
-    {% set root = 'self' if canvas_type == 'worker' else 'window' %}
+    {% set root = 'self' if canvas_type == 'Worker' else 'window' %}
     {{ root }}.CanvasGradient.prototype.thisImplementsCanvasGradient = true;
 
     var g1 = ctx.createLinearGradient(0, 0, 100, 0);
@@ -483,16 +483,17 @@
     ctx.fillRect(0, 0, 100, 50);
     @assert pixel 50,25 ==~ 0,255,0,255;
   expected: green
+  append_variants_to_name: false
   variants:
-    _HtmlCanvas:
-      canvasType: ['HtmlCanvas']
+  - HtmlCanvas:
+      canvas_types: ['HtmlCanvas']
       create_canvas: document.createElement('canvas')
-    _OffscreenCanvas:
-      canvasType: ['OffscreenCanvas', 'Worker']
+    OffscreenCanvas:
+      canvas_types: ['OffscreenCanvas', 'Worker']
       create_canvas: new OffscreenCanvas(100, 50)
 
 - name: 2d.gradient.object.current
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     canvas.setAttribute('style', 'color: #f00');
 
@@ -1126,7 +1127,7 @@
   images:
   - green.png
   code: |
-    {% set root = 'self' if canvas_type == 'worker' else 'window' %}
+    {% set root = 'self' if canvas_type == 'Worker' else 'window' %}
     @assert {{ root }}.CanvasPattern !== undefined;
 
     {{ root }}.CanvasPattern.prototype.thisImplementsCanvasPattern = true;
@@ -1135,11 +1136,13 @@
     var pattern = ctx.createPattern(img, 'no-repeat');
     @assert pattern.thisImplementsCanvasPattern;
   variants: &load-image-variant-definition
-    _HtmlCanvas:
-      canvasType: ['HtmlCanvas']
+  - HtmlCanvas:
+      append_variants_to_name: false
+      canvas_types: ['HtmlCanvas']
       load_image: var img = document.getElementById('{{ (images or svgimages)[0] }}');
-    _OffscreenCanvas:
-      canvasType: ['OffscreenCanvas', 'Worker']
+    OffscreenCanvas:
+      append_variants_to_name: false
+      canvas_types: ['OffscreenCanvas', 'Worker']
       test_type: promise
       load_image: |-
         var response = await fetch('/images/{{ (images or svgimages)[0] }}')
@@ -1189,14 +1192,16 @@
     @assert pixel 98,48 == 0,255,0,255;
   expected: green
   variants: &create-canvas2-variant-definition
-    _HtmlCanvas:
-      canvasType: ['HtmlCanvas']
+  - HtmlCanvas:
+      append_variants_to_name: false
+      canvas_types: ['HtmlCanvas']
       create_canvas2: |-
         var canvas2 = document.createElement('canvas');
         canvas2.width = 100;
         canvas2.height = 50;
-    _OffscreenCanvas:
-      canvasType: ['OffscreenCanvas', 'Worker']
+    OffscreenCanvas:
+      append_variants_to_name: false
+      canvas_types: ['OffscreenCanvas', 'Worker']
       create_canvas2: |-
         var canvas2 = new OffscreenCanvas(100, 50);
 
@@ -1299,13 +1304,13 @@
     @assert throws TypeError ctx.createPattern('../images/red.png', 'repeat');
 
 - name: 2d.pattern.image.incomplete.nosrc
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var img = new Image();
     @assert ctx.createPattern(img, 'repeat') === null;
 
 - name: 2d.pattern.image.incomplete.immediate
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - red.png
   code: |
@@ -1318,7 +1323,7 @@
     @assert ctx.createPattern(img, 'repeat') === null; @moz-todo
 
 - name: 2d.pattern.image.incomplete.reload
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - yellow.png
   - red.png
@@ -1333,7 +1338,7 @@
     @assert ctx.createPattern(img, 'repeat') === null; @moz-todo
 
 - name: 2d.pattern.image.incomplete.emptysrc
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - red.png
   mozilla: {throws: !!null ''}
@@ -1343,7 +1348,7 @@
     @assert ctx.createPattern(img, 'repeat') === null;
 
 - name: 2d.pattern.image.incomplete.removedsrc
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - red.png
   mozilla: {throws: !!null ''}
@@ -1353,7 +1358,7 @@
     @assert ctx.createPattern(img, 'repeat') === null;
 
 - name: 2d.pattern.image.broken
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - broken.png
   code: |
@@ -1361,7 +1366,7 @@
     @assert throws INVALID_STATE_ERR ctx.createPattern(img, 'repeat');
 
 - name: 2d.pattern.image.nonexistent
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - no-such-image-really.png
   code: |
@@ -1369,7 +1374,7 @@
     @assert throws INVALID_STATE_ERR ctx.createPattern(img, 'repeat');
 
 - name: 2d.pattern.svgimage.nonexistent
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   svgimages:
   - no-such-image-really.png
   code: |
@@ -1377,7 +1382,7 @@
     @assert throws INVALID_STATE_ERR ctx.createPattern(img, 'repeat');
 
 - name: 2d.pattern.image.nonexistent-but-loading
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var img = document.createElement("img");
     img.src = "/images/no-such-image-really.png";
@@ -1387,7 +1392,7 @@
     @assert ctx.createPattern(img, 'repeat') === null;
 
 - name: 2d.pattern.image.nosrc
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var img = document.createElement("img");
     @assert ctx.createPattern(img, 'repeat') === null;
@@ -1395,7 +1400,7 @@
     @assert ctx.createPattern(img, 'repeat') === null;
 
 - name: 2d.pattern.image.zerowidth
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - red-zerowidth.svg
   code: |
@@ -1403,7 +1408,7 @@
     @assert ctx.createPattern(img, 'repeat') === null;
 
 - name: 2d.pattern.image.zeroheight
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - red-zeroheight.svg
   code: |
@@ -1411,7 +1416,7 @@
     @assert ctx.createPattern(img, 'repeat') === null;
 
 - name: 2d.pattern.svgimage.zerowidth
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   svgimages:
   - red-zerowidth.svg
   code: |
@@ -1419,7 +1424,7 @@
     @assert ctx.createPattern(img, 'repeat') === null;
 
 - name: 2d.pattern.svgimage.zeroheight
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   svgimages:
   - red-zeroheight.svg
   code: |
@@ -1469,7 +1474,7 @@
     @assert throws SYNTAX_ERR ctx.createPattern(canvas, "repeat\0");
 
 - name: 2d.pattern.modify.image1
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - green.png
   code: |
@@ -1490,7 +1495,7 @@
   expected: green
 
 - name: 2d.pattern.modify.image2
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - green.png
   code: |
@@ -1515,7 +1520,7 @@
   expected: green
 
 - name: 2d.pattern.modify.canvas1
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     {{ create_canvas2 }}
     var ctx2 = canvas2.getContext('2d');
@@ -1577,13 +1582,14 @@
 
     @assert pixel 50,25 == 0,255,0,255;
   expected: green
+  append_variants_to_name: false
   variants:
-    _HtmlCanvas:
-      canvasType: ['HtmlCanvas']
+  - HtmlCanvas:
+      canvas_types: ['HtmlCanvas']
       load_image: var img = document.getElementById('{{ images[0] }}');
       create_canvas: document.createElement('canvas')
-    _OffscreenCanvas:
-      canvasType: ['OffscreenCanvas', 'Worker']
+    OffscreenCanvas:
+      canvas_types: ['OffscreenCanvas', 'Worker']
       test_type: promise
       load_image: |-
         var response = await fetch('/images/{{ images[0] }}')
@@ -1987,7 +1993,7 @@
 
 - name: 2d.pattern.animated.gif
   desc: createPattern() of an animated GIF draws the first frame
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - anim-gr.gif
   code: |
@@ -2006,7 +2012,7 @@
 
 - name: 2d.fillStyle.CSSRGB
   desc: CSSRGB works as color input
-  canvasType: ['HtmlCanvas', 'OffscreenCanvas']
+  canvas_types: ['HtmlCanvas', 'OffscreenCanvas']
   code: |
     ctx.fillStyle = new CSSRGB(1, 0, 1);
     @assert ctx.fillStyle === '#ff00ff';
@@ -2046,7 +2052,7 @@
 
 - name: 2d.fillStyle.CSSHSL
   desc: CSSHSL works as color input
-  canvasType: ['HtmlCanvas', 'OffscreenCanvas']
+  canvas_types: ['HtmlCanvas', 'OffscreenCanvas']
   code: |
     ctx.fillStyle = new CSSHSL(CSS.deg(180), 0.5, 0.5);
     ctx.fillRect(0, 0, 100, 50);
@@ -2077,7 +2083,7 @@
 
 - name: 2d.fillStyle.colormix
   desc: color-mix works as color input
-  canvasType: ['HtmlCanvas', 'OffscreenCanvas', 'Worker']
+  canvas_types: ['HtmlCanvas', 'OffscreenCanvas', 'Worker']
   code: |
     ctx.fillStyle = "color-mix(in srgb, red, blue)";
     @assert ctx.fillStyle === 'color(srgb 0.5 0 0.5)';
@@ -2086,7 +2092,7 @@
 
 - name: 2d.fillStyle.colormix.currentcolor
   desc: color-mix works as color input with currentcolor
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     canvas.setAttribute('style', 'color: magenta');
     ctx.fillStyle = "color-mix(in srgb, black, currentcolor)";
@@ -2096,9 +2102,22 @@
 
 - name: 2d.strokeStyle.colormix
   desc: color-mix works as color input
-  canvasType: ['HtmlCanvas', 'OffscreenCanvas']
+  canvas_types: ['HtmlCanvas', 'OffscreenCanvas']
   code: |
     ctx.strokeStyle = "color-mix(in srgb, red, blue)";
     @assert ctx.strokeStyle === 'color(srgb 0.5 0 0.5)';
     ctx.strokeStyle = "color-mix(in srgb, red, color(srgb 1 0 0))";
     @assert ctx.strokeStyle === 'color(srgb 1 0 0)';
+
+- name: 2d.gradient.colormix
+  desc: color-mix works as CanvasGradient color input
+  canvas_types: ['HtmlCanvas']
+  code: |
+    var g = ctx.createLinearGradient(0, 0, 100, 0);
+    g.addColorStop(0, '#f00');
+    g.addColorStop(1, 'color-mix(in srgb, #0f0, #00f)');
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, 100, 50);
+    @assert pixel 25,25 ==~ 212,81,61,255 +/- 3;
+    @assert pixel 50,25 ==~ 167,106,88,255 +/- 3;
+    @assert pixel 75,25 ==~ 113,120,109,255 +/- 3;
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/filters.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/filters.yaml
index f327b9fe94..1ce9d8ed74 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/filters.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/filters.yaml
@@ -34,8 +34,7 @@
 
 - name: 2d.filter.canvasFilterObject.tentative
   desc: Test CanvasFilter() object
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     @assert ctx.filter == 'none';
     ctx.filter = 'blur(5px)';
@@ -63,7 +62,7 @@
 
 - name: 2d.filter.canvasFilterObject.tentative
   desc: Test CanvasFilter() object
-  canvasType: ['OffscreenCanvas', 'Worker']
+  canvas_types: ['OffscreenCanvas', 'Worker']
   code: |
     @assert ctx.filter == 'none';
     ctx.filter = 'blur(5px)';
@@ -106,7 +105,7 @@
       "{name: 'gaussianBlur', stdDeviation: {}}") }};
   append_variants_to_name: false
   variants:
-    layers:
+  - layers:
       filter_declaration: |-
         ctx.beginLayer({filter:
           param})
@@ -199,7 +198,7 @@
     @assert pixel 60,30 ==~ 0,255,0,255;
   append_variants_to_name: false
   variants:
-    layers:
+  - layers:
       filter_declaration: |-
         ctx.beginLayer({filter:
           param})
@@ -251,7 +250,7 @@
     {{ close_layer -}}
   append_variants_to_name: false
   variants:
-    layers:
+  - layers:
       filter_declaration: |-
         ctx.beginLayer({filter:
           param})
@@ -325,7 +324,7 @@
     {{ close_layer }}
   append_variants_to_name: false
   variants:
-    layers:
+  - layers:
       filter_declaration: |-
         ctx.beginLayer({filter: param})
       close_layer: ctx.endLayer();
@@ -376,7 +375,7 @@
     }
   append_variants_to_name: false
   variants:
-    layers:
+  - layers:
       filter_declaration: |-
         ctx.beginLayer({filter: param})
       close_layer: ctx.endLayer();
@@ -451,7 +450,7 @@
     }
   append_variants_to_name: false
   variants:
-    layers:
+  - layers:
       filter_declaration: |-
         ctx.beginLayer({filter: param})
       close_layer: ctx.endLayer();
@@ -530,7 +529,7 @@
     }
   append_variants_to_name: false
   variants:
-    layers:
+  - layers:
       filter_declaration: |-
         ctx.beginLayer({filter: param})
       close_layer: ctx.endLayer();
@@ -608,7 +607,7 @@
     }
   append_variants_to_name: false
   variants:
-    layers:
+  - layers:
       filter_declaration: |-
         ctx.beginLayer({filter: param})
       close_layer: ctx.endLayer();
@@ -641,30 +640,30 @@
             fill="teal" filter="url(#blur)" />
     </svg>
   append_variants_to_name: false
-  variant_matrix:
-    - layers:
-        filter_declaration: |-
-          ctx.beginLayer({filter: param});
-        close_layer: ctx.endLayer();
-      canvasFilterObject:
-        filter_declaration: |-
-          ctx.filter = new CanvasFilter(param);
-        tentative: .tentative
-    - x-only:
-        blur_x: 4
-        blur_y: 0
-      mostly-x:
-        blur_x: 4
-        blur_y: 1
-      isotropic:
-        blur_x: 4
-        blur_y: 4
-      mostly-y:
-        blur_x: 1
-        blur_y: 4
-      y-only:
-        blur_x: 0
-        blur_y: 4
+  variants:
+  - layers:
+      filter_declaration: |-
+        ctx.beginLayer({filter: param});
+      close_layer: ctx.endLayer();
+    canvasFilterObject:
+      filter_declaration: |-
+        ctx.filter = new CanvasFilter(param);
+      tentative: .tentative
+  - x-only:
+      blur_x: 4
+      blur_y: 0
+    mostly-x:
+      blur_x: 4
+      blur_y: 1
+    isotropic:
+      blur_x: 4
+      blur_y: 4
+    mostly-y:
+      blur_x: 1
+      blur_y: 4
+    y-only:
+      blur_x: 0
+      blur_y: 4
 
 - name: 2d.filter.{{ variant_names[0] }}.dropShadow{{ tentative }}
   desc: Test CanvasFilter() dropShadow object.
@@ -818,7 +817,7 @@
     </svg>
   append_variants_to_name: false
   variants:
-    layers:
+  - layers:
       filter_declaration: |-
         ctx.beginLayer({filter: param});
       close_layer: |
@@ -838,10 +837,6 @@
         <10 | -1 | 0.5 | null | true | false | [] | [20] | '30'>}") }};
     @unroll {{ filter_declaration | replace("param", "{\-
         name: 'dropShadow', \-
-        <dx | dy | floodOpacity>: \-
-        <10 | -1 | 0.5 | null | true | false | [] | [20] | '30'>}") }};
-    @unroll {{ filter_declaration | replace("param", "{\-
-        name: 'dropShadow', \-
         <stdDeviation>: \-
         <10 | -1 | 0.5 | null | true | false | [] | [20] | '30' | \-
          [10, -1] | [0.5, null] | [true, false] | [[], [20]] | \-
@@ -869,7 +864,7 @@
         <'test' | 'rgba(NaN, 3, 2, 1)' | 10 | undefined | null | NaN>}") }};
   append_variants_to_name: false
   variants:
-    layers:
+  - layers:
       filter_declaration: |-
         ctx.beginLayer({filter:
           param}); ctx.endLayer()
@@ -990,7 +985,7 @@
     }
   append_variants_to_name: false
   variants:
-    layers:
+  - layers:
       filter_declaration: |-
         ctx.beginLayer({filter: param})
       close_layer: "\n  ctx.endLayer();"
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml
index 437a70c3f7..d1e9a97043 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/layers.yaml
@@ -41,7 +41,8 @@
     ctx2.fillRect(70, 70, 75, 50);
 
     ctx.drawImage(canvas2, 0, 0);
-  variants: &global-state-variants
+  variants:
+  - &global-state-variants
     no-global-states:
       render_states: // No global states.
     alpha: &global-state-alpha
@@ -168,7 +169,7 @@
     };
     img.src = 'data:image/svg+xml;base64,' + btoa(svg);
   variants:
-    <<: *global-state-variants
+  - <<: *global-state-variants
     alpha:
       <<: *global-state-alpha
       fuzzy: maxDifference=0-2; totalPixels=0-6766
@@ -287,6 +288,7 @@
 
 - name: 2d.layer.layer-rendering-state-reset-in-layer
   desc: Tests that layers ignore the global context filter.
+  test_type: sync
   code: |
     ctx.globalAlpha = 0.5;
     ctx.globalCompositeOperation = 'xor';
@@ -556,7 +558,7 @@
 - name: 2d.layer.flush-on-frame-presentation
   desc: Check that layers state stack is flushed and rebuilt on frame renders.
   size: [200, 200]
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   test_type: "promise"
   code: |
     ctx.fillStyle = 'purple';
@@ -612,7 +614,7 @@
     assert_throws_dom("InvalidStateError",
                       () => {{ operation }});
   variants:
-    createPattern:
+  - createPattern:
       operation: ctx.createPattern(canvas, 'repeat')
     drawImage:
       setup: |-
@@ -630,10 +632,10 @@
       operation: |-
         ctx.putImageData(data, 0, 0)
     toDataURL:
-      canvasType: ['HTMLCanvas']
+      canvas_types: ['HtmlCanvas']
       operation: canvas.toDataURL()
     transferToImageBitmap:
-      canvasType: ['OffscreenCanvas', 'Worker']
+      canvas_types: ['OffscreenCanvas', 'Worker']
       operation: canvas.transferToImageBitmap()
 
 - name: 2d.layer.malformed-operations-with-promises
@@ -651,14 +653,14 @@
     ctx.beginLayer();
     await promise_rejects_dom(t, 'InvalidStateError', {{ operation }});
   variants:
-    convertToBlob:
-      canvasType: ['OffscreenCanvas', 'Worker']
+  - convertToBlob:
+      canvas_types: ['OffscreenCanvas', 'Worker']
       operation: |-
         canvas.convertToBlob()
     createImageBitmap:
       operation: createImageBitmap(canvas)
     toBlob:
-      canvasType: ['HTMLCanvas']
+      canvas_types: ['HtmlCanvas']
       operation: |-
         new Promise(resolve => canvas.toBlob(resolve))
 
@@ -824,7 +826,7 @@
 - name: 2d.layer.valid-calls
   desc: No exception raised on {{ variant_desc }}.
   variants:
-    save:
+  - save:
       variant_desc: lone save() calls
       code: ctx.save();
     beginLayer:
@@ -867,7 +869,7 @@
       {{ call_sequence | indent(2) }}
     });
   variants:
-    endLayer:
+  - endLayer:
       variant_desc: lone endLayer calls
       call_sequence: ctx.endLayer();
     save-endLayer:
@@ -995,7 +997,7 @@
     };
     img.src = 'data:image/svg+xml;base64,' + btoa(svg);
   variants:
-    no-clipping:
+  - no-clipping:
       clipping: // No clipping.
     with-clipping:
       clipping: |-
@@ -1029,7 +1031,7 @@
     ctx.fillStyle = 'green';
     ctx.fillRect(0, 0, 100, 100);
   variants:
-    short-distance:
+  - short-distance:
       distance: |-
         const delta = 1;
       clipping: // No clipping.
@@ -1056,7 +1058,7 @@
   desc: Checks that layer blending works inside opaque canvas
   size: [300, 300]
   code: |
-    {% if canvas_type == 'htmlcanvas' %}
+    {% if canvas_type == 'HtmlCanvas' %}
     const canvas2 = document.createElement('canvas');
     canvas2.width = 200;
     canvas2.height = 200;
@@ -1126,7 +1128,7 @@
       </g>
     </svg>
   variants:
-    blur:
+  - blur:
       ctx_filter: |-
         'blur(10px)'
       svg_filter: |-
@@ -1149,7 +1151,7 @@
   code: *filter-test-code
   html_reference: *filter-test-reference
   variants:
-    x-only:
+  - x-only:
       ctx_filter: |-
         { name: 'gaussianBlur', stdDeviation: [4, 0] }
       svg_filter: |-
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/pixel-manipulation.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/pixel-manipulation.yaml
index 0643b047b1..6721f5ffde 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/pixel-manipulation.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/pixel-manipulation.yaml
@@ -11,7 +11,7 @@
 - name: 2d.imageData.create2.type
   desc: createImageData(sw, sh) returns an ImageData object containing a Uint8ClampedArray
     object
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     @assert window.ImageData !== undefined;
     @assert window.Uint8ClampedArray !== undefined;
@@ -24,7 +24,7 @@
 - name: 2d.imageData.create1.type
   desc: createImageData(imgdata) returns an ImageData object containing a Uint8ClampedArray
     object
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     @assert window.ImageData !== undefined;
     @assert window.Uint8ClampedArray !== undefined;
@@ -36,7 +36,7 @@
 
 - name: 2d.imageData.create2.this
   desc: createImageData(sw, sh) should throw when called with the wrong |this|
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   notes: &bindings Defined in "Web IDL" (draft)
   code: |
     @assert throws TypeError CanvasRenderingContext2D.prototype.createImageData.call(null, 1, 1); @moz-todo
@@ -45,7 +45,7 @@
 
 - name: 2d.imageData.create1.this
   desc: createImageData(imgdata) should throw when called with the wrong |this|
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   notes: *bindings
   code: |
     var imgdata = ctx.createImageData(1, 1);
@@ -160,7 +160,7 @@
 
 - name: 2d.imageData.create.and.resize
   desc: Verify no crash when resizing an image bitmap to zero.
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   images:
   - red.png
   code: |
@@ -179,7 +179,7 @@
     @assert ctx.getImageData(0, 0, 100, 50) !== null;
 
 - name: 2d.imageData.get.type
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   desc: getImageData() returns an ImageData object containing a Uint8ClampedArray
     object
   code: |
@@ -502,7 +502,7 @@
     @assert imgdata.data[3] === 0;
 
 - name: 2d.imageData.object.ctor.size
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   desc: ImageData has a usable constructor
   code: |
     @assert window.ImageData !== undefined;
@@ -516,7 +516,7 @@
     }
 
 - name: 2d.imageData.object.ctor.basics
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   desc: Testing different type of ImageData constructor
   code: |
     function setRGBA(imageData, i, rgba)
@@ -608,7 +608,7 @@
 
 - name: 2d.imageData.object.ctor.array
   desc: ImageData has a usable constructor
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     @assert window.ImageData !== undefined;
 
@@ -620,7 +620,7 @@
 
 - name: 2d.imageData.object.ctor.array.bounds
   desc: ImageData has a usable constructor
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     @assert window.ImageData !== undefined;
 
@@ -803,7 +803,7 @@
 
 - name: 2d.imageData.put.cross
   desc: putImageData() accepts image data got from a different canvas
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var canvas2 = document.createElement('canvas');
     var ctx2 = canvas2.getContext('2d');
@@ -818,7 +818,7 @@
 
 - name: 2d.imageData.put.cross
   desc: putImageData() accepts image data got from a different canvas
-  canvasType: ['OffscreenCanvas', 'Worker']
+  canvas_types: ['OffscreenCanvas', 'Worker']
   code: |
     var offscreenCanvas2 = new OffscreenCanvas(100, 50);
     var ctx2 = offscreenCanvas2.getContext('2d');
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/reset.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/reset.yaml
index 086fb04e04..27764e4550 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/reset.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/reset.yaml
@@ -24,7 +24,7 @@
     @assert ctx.{{ state_name }} == default_value;
 
   variants:
-    letter_spacing:
+  - letter_spacing:
       state_name: letterSpacing
       new_value: "'12px'"
 
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/scroll.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/scroll.yaml
index dd088aa396..0579a8b3d7 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/scroll.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/scroll.yaml
@@ -1,7 +1,6 @@
 - name: 2d.scrollPathIntoView.basic
   desc: scrollPathIntoView() works
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var div = document.createElement('div');
     div.style.cssText = 'width: 200vw; height: 200vh';
@@ -18,8 +17,7 @@
 
 - name: 2d.scrollPathIntoView.verticalLR
   desc: scrollPathIntoView() works in vertical-lr writing mode
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     document.documentElement.style.cssText = 'writing-mode: vertical-lr';
     var div = document.createElement('div');
@@ -37,8 +35,7 @@
 
 - name: 2d.scrollPathIntoView.verticalRL
   desc: scrollPathIntoView() works in vertical-rl writing mode
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     document.documentElement.style.cssText = 'writing-mode: vertical-rl';
     var div = document.createElement('div');
@@ -58,8 +55,7 @@
 
 - name: 2d.scrollPathIntoView.path
   desc: scrollPathIntoView() with path argument works
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var div = document.createElement('div');
     div.style.cssText = 'width: 200vw; height: 200vh';
@@ -73,4 +69,3 @@
     var rect = canvas.getBoundingClientRect();
     @assert Math.round(rect.top) === -8;
     @assert Math.round(rect.left) === 200;
-
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/shadows.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/shadows.yaml
index 953ab2c555..e42237dadb 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/shadows.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/shadows.yaml
@@ -136,7 +136,7 @@
 
 - name: 2d.shadow.attributes.shadowColor.current.basic
   desc: currentColor is computed from the canvas element
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     canvas.style.color = '#0f0';
     ctx.shadowColor = 'currentColor';
@@ -144,7 +144,7 @@
 
 - name: 2d.shadow.attributes.shadowColor.current.changed
   desc: currentColor is computed when the attribute is set, not when it is painted
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     canvas.style.color = '#0f0';
     ctx.shadowColor = 'currentColor';
@@ -153,7 +153,7 @@
 
 - name: 2d.shadow.attributes.shadowColor.current.removed
   desc: currentColor is solid black when the canvas element is not in a document
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     // Try not to let it undetectably incorrectly pick up opaque-black
     // from other parts of the document:
@@ -518,11 +518,13 @@
     @assert pixel 50,25 == 0,255,0,255;
   expected: green
   variants: &load-image-variant-definition
-    _HtmlCanvas:
-      canvasType: ['HtmlCanvas']
+  - HtmlCanvas:
+      append_variants_to_name: false
+      canvas_types: ['HtmlCanvas']
       load_image: var img = document.getElementById('{{ images[0] }}');
-    _OffscreenCanvas:
-      canvasType: ['OffscreenCanvas', 'Worker']
+    OffscreenCanvas:
+      append_variants_to_name: false
+      canvas_types: ['OffscreenCanvas', 'Worker']
       test_type: promise
       load_image: |-
         var response = await fetch('/images/{{ images[0] }}')
@@ -640,14 +642,16 @@
     @assert pixel 50,25 == 0,255,0,255;
   expected: green
   variants: &create-canvas2-variant-definition
-    _HtmlCanvas:
-      canvasType: ['HtmlCanvas']
+  - HtmlCanvas:
+      append_variants_to_name: false
+      canvas_types: ['HtmlCanvas']
       create_canvas2: |-
         var canvas2 = document.createElement('canvas');
         canvas2.width = 100;
         canvas2.height = 50;
-    _OffscreenCanvas:
-      canvasType: ['OffscreenCanvas', 'Worker']
+    OffscreenCanvas:
+      append_variants_to_name: false
+      canvas_types: ['OffscreenCanvas', 'Worker']
       create_canvas2: |-
         var canvas2 = new OffscreenCanvas(100, 50);
 
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/text.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/text.yaml
index ca945c2953..7f2047bc9c 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/text.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/text.yaml
@@ -38,7 +38,7 @@
 
 - name: 2d.text.font.parse.size.percentage
   canvas: 'style="font-size: 144px"'
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     ctx.font = '50% serif';
     @assert ctx.font === '72px serif'; @moz-todo
@@ -46,7 +46,7 @@
     @assert ctx.font === '72px serif'; @moz-todo
 
 - name: 2d.text.font.parse.size.percentage.default
-  canvasType: ['HtmlCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var canvas2 = document.createElement('canvas');
     var ctx2 = canvas2.getContext('2d');
@@ -113,7 +113,7 @@
     @assert ctx.font === '10px sans-serif';
 
 - name: 2d.text.font.relative_size
-  canvasType: ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var canvas2 = document.createElement('canvas');
     var ctx2 = canvas2.getContext('2d');
@@ -121,7 +121,7 @@
     @assert ctx2.font === '10px sans-serif';
 
 - name: 2d.text.font.relative_size
-  canvasType: ['OffscreenCanvas', 'Worker']
+  canvas_types: ['OffscreenCanvas', 'Worker']
   code: |
     ctx.font = '1em sans-serif';
     @assert ctx.font === '10px sans-serif';
@@ -236,16 +236,18 @@
     @assert pixel 95,45 ==~ 0,255,0,255;
   expected: green
   variants: &load-font-variant-definition
-    _HtmlCanvas:
-      canvasType: ['HtmlCanvas']
+  - HtmlCanvas:
+      append_variants_to_name: false
+      canvas_types: ['HtmlCanvas']
       load_font: |-
         await document.fonts.ready;
-    _OffscreenCanvas:
-      canvasType: ['OffscreenCanvas', 'Worker']
+    OffscreenCanvas:
+      append_variants_to_name: false
+      canvas_types: ['OffscreenCanvas', 'Worker']
       load_font: |-
         var f = new FontFace("{{ fonts[0] }}", "url('/fonts/{{ fonts[0] }}.ttf')");
         f.load();
-        {% set root = 'self' if canvas_type == 'worker' else 'document' %}
+        {% set root = 'self' if canvas_type == 'Worker' else 'document' %}
         {{ root }}.fonts.add(f);
         await {{ root }}.fonts.ready;
 
@@ -813,7 +815,7 @@
   code: |
     {{ load_font }}
     ctx.font = '50px CanvasTest';
-    {% if canvas_type != 'htmlcanvas' %}
+    {% if canvas_type != 'HtmlCanvas' %}
     ctx.direction = 'ltr';
     {% endif %}
     ctx.fillStyle = '#f00';
@@ -839,7 +841,7 @@
   code: |
     {{ load_font }}
     ctx.font = '50px CanvasTest';
-    {% if canvas_type != 'htmlcanvas' %}
+    {% if canvas_type != 'HtmlCanvas' %}
     ctx.direction = 'rtl';
     {% endif %}
     ctx.fillStyle = '#f00';
@@ -865,7 +867,7 @@
   code: |
     {{ load_font }}
     ctx.font = '50px CanvasTest';
-    {% if canvas_type != 'htmlcanvas' %}
+    {% if canvas_type != 'HtmlCanvas' %}
     ctx.direction = 'ltr';
     {% endif %}
     ctx.fillStyle = '#f00';
@@ -891,7 +893,7 @@
   code: |
     {{ load_font }}
     ctx.font = '50px CanvasTest';
-    {% if canvas_type != 'htmlcanvas' %}
+    {% if canvas_type != 'HtmlCanvas' %}
     ctx.direction = 'rtl';
     {% endif %}
     ctx.fillStyle = '#f00';
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml-new/video.yaml b/testing/web-platform/tests/html/canvas/tools/yaml-new/video.yaml
index f9b48fb8da..ca8a1ab816 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml-new/video.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml-new/video.yaml
@@ -1,7 +1,6 @@
 - name: 2d.video.invalid
   desc: Verify test doesn't crash with invalid video.
-  canvasType:
-    ['HTMLCanvas']
+  canvas_types: ['HtmlCanvas']
   code: |
     var v = document.createElement('video');
     v.play();