Make the canvas size parameterizable in generated WPT tests.

Right now, the "canvas" template parameter was used for both specifying
custom attributes for the canvas tag, but also for specifying the size.
Having dedicated parameters for the canvas size makes it possible to
customize the size for both element and and offscreen tests.

Bug: 1409873
Change-Id: I63a550d90871f25a9dcc00a2b4f6ceff5c916d34

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';