Make the canvas size parameterizable in generated WPT tests.

html/canvas/element/text-styles/2d.text.font.parse.size.percentage.html

@@ -12,7 +12,7 @@ <h1>2d.text.font.parse.size.percentage</h1>
 
 
 <p class="output">Actual output:</p>
-<canvas id="c" class="output" style="font-size: 144px" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<canvas id="c" class="output" width="100" height="50" style="font-size: 144px"><p class="fallback">FAIL (fallback content)</p></canvas>
 
 <ul id="d"></ul>
 <script>

html/canvas/tools/gentestutils.py

@@ -175,6 +175,21 @@ def _expand_test_code(code: str) -> str:
     return code
 
 
+_CANVAS_SIZE_REGEX = re.compile(r'(?P<width>.*), (?P<height>.*)',
+                                re.MULTILINE | re.DOTALL)
+
+
+def _get_canvas_size(test: Mapping[str, str]):
+    size = test.get('size', '100, 50')
+    match = _CANVAS_SIZE_REGEX.match(size)
+    if not match:
+        raise InvalidTestDefinitionError(
+            'Invalid canvas size "%s" in test %s. Expected a string matching '
+            'this pattern: "%%s, %%s" %% (width, height)' %
+            (size, test['name']))
+    return match.group('width'), match.group('height')
+
+
 def _generate_test(test: Mapping[str, str], templates: Mapping[str, str],
                    sub_dir: str, test_output_dir: str, image_output_dir: str,
                    is_offscreen_canvas: bool):
@@ -214,7 +229,8 @@ def _generate_test(test: Mapping[str, str], templates: Mapping[str, str],
                 '<img src="%s" class="output expected" id="expected" '
                 'alt="">' % expected_img)
 
-    canvas = test.get('canvas', 'width="100" height="50"')
+    canvas = ' ' + test['canvas'] if 'canvas' in test else ''
+    width, height = _get_canvas_size(test)
 
     notes = '<p class="notes">%s' % test['notes'] if 'notes' in test else ''
 
@@ -274,6 +290,8 @@ def _generate_test(test: Mapping[str, str], templates: Mapping[str, str],
         'fonthack': fonthack,
         'timeout': timeout,
         'canvas': canvas,
+        'width': width,
+        'height': height,
         'expected': expectation_html,
         'code': code,
         'scripts': scripts,

html/canvas/tools/gentestutilsunion.py

@@ -194,6 +194,21 @@ class TestConfig:
     enabled: bool
 
 
+_CANVAS_SIZE_REGEX = re.compile(r'(?P<width>.*), (?P<height>.*)',
+                                re.MULTILINE | re.DOTALL)
+
+
+def _get_canvas_size(test: Mapping[str, str]):
+    size = test.get('size', '100, 50')
+    match = _CANVAS_SIZE_REGEX.match(size)
+    if not match:
+        raise InvalidTestDefinitionError(
+            'Invalid canvas size "%s" in test %s. Expected a string matching '
+            'this pattern: "%%s, %%s" %% (width, height)' %
+            (size, test['name']))
+    return match.group('width'), match.group('height')
+
+
 def _generate_test(test: Mapping[str, str], templates: Mapping[str, str],
                    sub_dir: str, html_canvas_cfg: TestConfig,
                    offscreen_canvas_cfg: TestConfig) -> None:
@@ -241,7 +256,8 @@ def _generate_test(test: Mapping[str, str], templates: Mapping[str, str],
                 '<img src="%s" class="output expected" id="expected" '
                 'alt="">' % expected_img)
 
-    canvas = test.get('canvas', 'width="100" height="50"')
+    canvas = ' ' + test['canvas'] if 'canvas' in test else ''
+    width, height = _get_canvas_size(test)
 
     notes = '<p class="notes">%s' % test['notes'] if 'notes' in test else ''
 
@@ -301,6 +317,8 @@ def _generate_test(test: Mapping[str, str], templates: Mapping[str, str],
         'fonthack': fonthack,
         'timeout': timeout,
         'canvas': canvas,
+        'width': width,
+        'height': height,
         'expected': expectation_html,
         'code': code_canvas,
         'scripts': scripts,

html/canvas/tools/templates-new.yaml

@@ -18,7 +18,7 @@ w3coffscreencanvas: |
     });
     t.step(function() {
 
-    var canvas = new OffscreenCanvas(100, 50);
+    var canvas = new OffscreenCanvas(%(width)s, %(height)s);
     var ctx = canvas.getContext(%(context_args)s);
 
     %(code)s
@@ -44,7 +44,7 @@ w3cworker: |
     });
     t.step(function() {
 
-    var canvas = new OffscreenCanvas(100, 50);
+    var canvas = new OffscreenCanvas(%(width)s, %(height)s);
     var ctx = canvas.getContext(%(context_args)s);
 
     %(code)s
@@ -69,7 +69,7 @@ w3ccanvas: |
 
     %(notes)s
     %(fonthack)s<p class="output">Actual output:</p>
-    <canvas id="c" class="output" %(canvas)s>%(fallback)s</canvas>
+    <canvas id="c" class="output" width="%(width)s" height="%(height)s"%(canvas)s>%(fallback)s</canvas>
     %(expected)s
     <ul id="d"></ul>
     <script>

html/canvas/tools/templates.yaml

@@ -18,7 +18,7 @@ w3coffscreencanvas: |
     });
     t.step(function() {
 
-    var canvas = new OffscreenCanvas(100, 50);
+    var canvas = new OffscreenCanvas(%(width)s, %(height)s);
     var ctx = canvas.getContext(%(context_args)s);
 
     %(code)s
@@ -42,7 +42,7 @@ w3cworker: |
     });
     t.step(function() {
 
-    var canvas = new OffscreenCanvas(100, 50);
+    var canvas = new OffscreenCanvas(%(width)s, %(height)s);
     var ctx = canvas.getContext(%(context_args)s);
 
     %(code)s
@@ -65,7 +65,7 @@ w3ccanvas: |
 
     %(notes)s
     %(fonthack)s<p class="output">Actual output:</p>
-    <canvas id="c" class="output" %(canvas)s>%(fallback)s</canvas>
+    <canvas id="c" class="output" width="%(width)s" height="%(height)s"%(canvas)s>%(fallback)s</canvas>
     %(expected)s
     <ul id="d"></ul>
     <script>

html/canvas/tools/yaml/element/drawing-text-to-the-canvas.yaml

@@ -332,7 +332,7 @@
   desc: textAlign start with ltr is the left edge
   fonts:
   - CanvasTest
-  canvas: width="100" height="50" dir="ltr"
+  canvas: dir="ltr"
   code: |
     ctx.font = '50px CanvasTest';
     deferTest();
@@ -355,7 +355,7 @@
   desc: textAlign start with rtl is the right edge
   fonts:
   - CanvasTest
-  canvas: width="100" height="50" dir="rtl"
+  canvas: dir="rtl"
   code: |
     ctx.font = '50px CanvasTest';
     deferTest();
@@ -378,7 +378,7 @@
   desc: textAlign end with ltr is the right edge
   fonts:
   - CanvasTest
-  canvas: width="100" height="50" dir="ltr"
+  canvas: dir="ltr"
   code: |
     ctx.font = '50px CanvasTest';
     deferTest();
@@ -401,7 +401,7 @@
   desc: textAlign end with rtl is the left edge
   fonts:
   - CanvasTest
-  canvas: width="100" height="50" dir="rtl"
+  canvas: dir="rtl"
   code: |
     ctx.font = '50px CanvasTest';
     deferTest();

html/canvas/tools/yaml/element/meta.yaml

@@ -44,7 +44,7 @@
         tests.append( {
             "name": "size.attributes.parse.%s" % name,
             "desc": "Parsing of non-negative integers",
-            "canvas": 'width="%s" height="%s"' % (htmlString, htmlString),
+            "size": '%s, %s' % (htmlString, htmlString),
             "code": code,
             "expected": expected
         } )
@@ -55,7 +55,7 @@
         tests.append( {
             "name": "size.attributes.setAttribute.%s" % name,
             "desc": "Parsing of non-negative integers in setAttribute",
-            "canvas": 'width="50" height="50"',
+            "size": '50, 50',
             "code": code,
             "expected": expected
         } )

html/canvas/tools/yaml/element/text-styles.yaml

@@ -32,7 +32,7 @@
   #     in cm mm pt pc
 
 - name: 2d.text.font.parse.size.percentage
-  canvas: 'style="font-size: 144px" width="100" height="50"'
+  canvas: 'style="font-size: 144px"'
   code: |
     ctx.font = '50% serif';
     @assert ctx.font === '72px serif'; @moz-todo

html/canvas/tools/yaml/element/the-canvas-element.yaml

@@ -104,7 +104,8 @@
 
 - name: 2d.scaled
   desc: CSS-scaled canvases get drawn correctly
-  canvas: 'width="50" height="25" style="width: 100px; height: 50px"'
+  size: 50, 25
+  canvas: 'style="width: 100px; height: 50px"'
   manual:
   code: |
     ctx.fillStyle = '#00f';