From 986ee11d31bf85f8bf3531dd66165fc1cb22cfe1 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Gravel <jpgravel@chromium.org>
Date: Tue, 31 Jan 2023 07:46:54 -0800
Subject: [PATCH] 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
---
 .../2d.text.font.parse.size.percentage.html   |  2 +-
 html/canvas/tools/gentestutils.py             | 20 ++++++++++++++++++-
 html/canvas/tools/gentestutilsunion.py        | 20 ++++++++++++++++++-
 html/canvas/tools/templates-new.yaml          |  6 +++---
 html/canvas/tools/templates.yaml              |  6 +++---
 .../element/drawing-text-to-the-canvas.yaml   |  8 ++++----
 html/canvas/tools/yaml/element/meta.yaml      |  4 ++--
 .../tools/yaml/element/text-styles.yaml       |  2 +-
 .../yaml/element/the-canvas-element.yaml      |  3 ++-
 9 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/html/canvas/element/text-styles/2d.text.font.parse.size.percentage.html b/html/canvas/element/text-styles/2d.text.font.parse.size.percentage.html
index 92bac8d8cae99e..18476b3b7adb79 100644
--- a/html/canvas/element/text-styles/2d.text.font.parse.size.percentage.html
+++ b/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>
diff --git a/html/canvas/tools/gentestutils.py b/html/canvas/tools/gentestutils.py
index 59fa9e73e51bc1..a1514e51bc1e71 100644
--- a/html/canvas/tools/gentestutils.py
+++ b/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,
diff --git a/html/canvas/tools/gentestutilsunion.py b/html/canvas/tools/gentestutilsunion.py
index 3afb54de477e6f..afc18f000cee2f 100644
--- a/html/canvas/tools/gentestutilsunion.py
+++ b/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,
diff --git a/html/canvas/tools/templates-new.yaml b/html/canvas/tools/templates-new.yaml
index 7742db88978dab..2113b97f8c8114 100644
--- a/html/canvas/tools/templates-new.yaml
+++ b/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>
diff --git a/html/canvas/tools/templates.yaml b/html/canvas/tools/templates.yaml
index f2bc2569f717aa..9531763fc52118 100644
--- a/html/canvas/tools/templates.yaml
+++ b/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>
diff --git a/html/canvas/tools/yaml/element/drawing-text-to-the-canvas.yaml b/html/canvas/tools/yaml/element/drawing-text-to-the-canvas.yaml
index 880e3fb1a1f396..e0de95560cb122 100644
--- a/html/canvas/tools/yaml/element/drawing-text-to-the-canvas.yaml
+++ b/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();
diff --git a/html/canvas/tools/yaml/element/meta.yaml b/html/canvas/tools/yaml/element/meta.yaml
index b8ffbd5075860d..ea78fe302cb420 100644
--- a/html/canvas/tools/yaml/element/meta.yaml
+++ b/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
         } )
diff --git a/html/canvas/tools/yaml/element/text-styles.yaml b/html/canvas/tools/yaml/element/text-styles.yaml
index 344a5a0752ed99..407e34621091a6 100644
--- a/html/canvas/tools/yaml/element/text-styles.yaml
+++ b/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
diff --git a/html/canvas/tools/yaml/element/the-canvas-element.yaml b/html/canvas/tools/yaml/element/the-canvas-element.yaml
index 5c07375dd2ac4a..d6d8cd801b4109 100644
--- a/html/canvas/tools/yaml/element/the-canvas-element.yaml
+++ b/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';