Fix direction = "inherit" for offscreen canvas

Offscreen canvas was not inheriting the direction attribute in the way the spec described (which I am in the process of reworking). When the direction is inherit the offscreen should try to get it from a canvas element it is associated with, or the document if there is no associated element (i.e. it was not transferred). Also add tests for canvas text direction = "inherit" Bug: 390272618 Change-Id: I5f862a4e2337b94b2eaa721733725a860872a824 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6173291 Reviewed-by: Andres Ricardo Perez <[email protected]> Commit-Queue: Stephen Chenney <[email protected]> Cr-Commit-Position: refs/heads/main@{#1409617}
web-platform-tests · Jan 22, 2025 · 625fea2 · 625fea2
1 parent 8c99407
commit 625fea2
Show file tree

Hide file tree

Showing 11 changed files with 323 additions and 0 deletions.
diff --git a/html/canvas/element/manual/text/canvas.2d.direction-ref.html b/html/canvas/element/manual/text/canvas.2d.direction-ref.html
@@ -0,0 +1,24 @@
+<!doctype HTML>
+<html>
+  <meta charset="utf-8">
+  <head>
+    <title>HTML5 Canvas Test Reference:  The direction attribute.</title>
+    <link rel="author" href="mailto:[email protected]"/>
+    <script>
+      function runTest()
+      {
+        var canvas = document.getElementById("canvas1");
+        var ctx = canvas.getContext("2d");
+
+        ctx.font = "25px serif";
+        ctx.direction = "rtl";
+        ctx.fillText("ABC!", 60, 50);
+      }
+    </script>
+  </head>
+  <body onload="runTest()">
+    <canvas id="canvas1" width="300" height="150">
+      Browser does not support HTML5 Canvas.
+    </canvas>
+  </body>
+</html>
diff --git a/html/canvas/element/manual/text/canvas.2d.direction.inherit.canvas.html b/html/canvas/element/manual/text/canvas.2d.direction.inherit.canvas.html
@@ -0,0 +1,29 @@
+<!doctype HTML>
+<html dir="ltr">
+  <meta charset="utf-8">
+  <head>
+    <title>HTML5 Canvas Test: The direction attribute inherits from the canvas</title>
+    <link rel="match" href="canvas.2d.direction-ref.html"/>
+    <link rel="author" href="mailto:[email protected]"/>
+    <link rel="help"
+      href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
+    <meta name="assert" content="When the canvas element has a dir attribute, override the document."/>
+    <script type="text/javascript">
+      function runTest()
+      {
+        var canvas = document.getElementById("canvas1");
+        var ctx = canvas.getContext("2d");
+
+        // The default for direction is inherit
+        ctx.font = "25px serif";
+        ctx.fillText("ABC!", 60, 50);
+      }
+    </script>
+  </head>
+  <body onload="runTest()">
+    <canvas dir="rtl" id="canvas1" width="300" height="150">
+      Browser does not support HTML5 Canvas.
+    </canvas>
+  </body>
+</html>
+
diff --git a/html/canvas/element/manual/text/canvas.2d.direction.inherit.disconnected.canvas.html b/html/canvas/element/manual/text/canvas.2d.direction.inherit.disconnected.canvas.html
@@ -0,0 +1,38 @@
+<!doctype HTML>
+<html>
+  <meta charset="utf-8">
+  <head>
+    <title>HTML5 Canvas Test: The direction attribute inherits from a disconnected canvas element</title>
+    <link rel="match" href="canvas.2d.direction-ref.html"/>
+    <link rel="author" href="mailto:[email protected]"/>
+    <link rel="help"
+      href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
+    <meta name="assert" content="Verify that a disconnected canvas with no style uses the canvas direction."/>
+    <style>
+      canvas {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas1" width="300" height="150">
+      Browser does not support HTML5 Canvas.
+    </canvas>
+    <script type="text/javascript">
+      var canvas = document.createElement("canvas");
+      canvas.setAttribute("dir", "rtl");
+      canvas.setAttribute("width", "300");
+      canvas.setAttribute("height", "150");
+      var ctx = canvas.getContext("2d");
+
+      // The default for direction is inherit
+      ctx.font = "25px serif";
+      ctx.fillText("ABC!", 60, 50);
+
+      document.body.appendChild(canvas);
+    </script>
+  </body>
+</html>
+
diff --git a/html/canvas/element/manual/text/canvas.2d.direction.inherit.document.html b/html/canvas/element/manual/text/canvas.2d.direction.inherit.document.html
@@ -0,0 +1,34 @@
+<!doctype HTML>
+<html dir="rtl">
+  <meta charset="utf-8">
+  <head>
+    <title>HTML5 Canvas Test:  The direction attribute inherits correctly</title>
+    <link rel="match" href="canvas.2d.direction-ref.html" />
+    <link rel="author" href="mailto:[email protected]"/>
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
+    <meta name="assert" content="When the canvas element has no direction attribute, inherit it from the document." />
+    <script type="text/javascript">
+      function runTest()
+      {
+        var canvas = document.getElementById("canvas1");
+        var ctx = canvas.getContext("2d");
+
+        // The default for direction is inherit, so no need to set any text styles
+        ctx.font = "25px serif";
+        ctx.fillText("ABC!", 60, 50);
+      }
+    </script>
+    <style>
+      canvas {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+      }
+    </style>
+  </head>
+  <body onload="runTest()">
+    <canvas id="canvas1" width="300" height="150">
+      Browser does not support HTML5 Canvas.
+    </canvas>
+  </body>
+</html>
diff --git a/html/canvas/element/manual/text/canvas.2d.direction.inherit.style.html b/html/canvas/element/manual/text/canvas.2d.direction.inherit.style.html
@@ -0,0 +1,33 @@
+<!doctype HTML>
+<html>
+  <meta charset="utf-8">
+  <head>
+    <title>HTML5 Canvas Test:  The direction attribute inherits from the canvas style</title>
+    <link rel="match" href="canvas.2d.direction-ref.html" />
+    <link rel="author" href="mailto:[email protected]"/>
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
+    <meta name="assert" content="When the canvas element has a direction CSS property it should override the dir attribute." />
+    <script type="text/javascript">
+      function runTest()
+      {
+        var canvas = document.getElementById("canvas1");
+        var ctx = canvas.getContext("2d");
+
+        // The default for direction is inherit
+        ctx.font = "25px serif";
+        ctx.fillText("ABC!", 60, 50);
+      }
+    </script>
+    <style>
+      canvas {
+        direction: rtl;
+      }
+    </style>
+  </head>
+  <body onload="runTest()">
+    <canvas dir="ltr" id="canvas1" width="300" height="150">
+      Browser does not support HTML5 Canvas.
+    </canvas>
+  </body>
+</html>
+
diff --git a/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction-ref.html b/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction-ref.html
@@ -0,0 +1,22 @@
+<!doctype HTML>
+<html>
+  <meta charset="utf-8">
+  <head>
+    <title>HTML5 Canvas Test Reference:  The direction attribute in an offscreen canvas</title>
+    <link rel="author" href="mailto:[email protected]"/>
+    <script>
+      function runTest()
+      {
+        var canvas = document.getElementById("canvas1");
+        var ctx = canvas.getContext("2d");
+
+        ctx.font = "25px serif";
+        ctx.direction = "rtl";
+        ctx.fillText("ABC!", 60, 50);
+      }
+    </script>
+  </head>
+  <body onload="runTest()">
+    <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+  </body>
+</html>
diff --git a/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction.html b/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction.html
@@ -0,0 +1,37 @@
+<!doctype HTML>
+<html class="reftest-wait">
+  <meta charset="utf-8">
+  <head>
+    <title>HTML5 Canvas Test:  The direction attribute in offscreen canvas</title>
+    <link rel="match" href="canvas.2d.offscreen.direction-ref.html" />
+    <link rel="author" href="mailto:[email protected]"/>
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
+    <meta name="assert" content="An offscreen canvas respects the direction text attribute." />
+    <script src="/common/reftest-wait.js"></script>
+    <script type="text/javascript">
+      function runTest()
+      {
+        var canvas = document.getElementById("canvas1");
+        var bitmap_ctx = canvas.getContext("bitmaprenderer");
+
+        var offscreen = new OffscreenCanvas(300, 150);
+        var offscreen_ctx = offscreen.getContext('2d');
+
+        offscreen_ctx.font = "25px serif";
+        offscreen_ctx.direction = "rtl";
+        offscreen_ctx.fillText("ABC!", 60, 50);
+
+        const bitmap = offscreen.transferToImageBitmap();
+        bitmap_ctx.transferFromImageBitmap(bitmap);
+
+        requestAnimationFrame(() => takeScreenshot());
+      }
+    </script>
+  </head>
+  <body onload="runTest()">
+    <canvas id="canvas1" width="300" height="150">
+      Browser does not support HTML5 Canvas.
+    </canvas>
+  </body>
+</html>
+
diff --git a/...vas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.document.html b/...vas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.document.html
@@ -0,0 +1,38 @@
+<!doctype HTML>
+<html dir="rtl" class="reftest-wait">
+  <meta charset="utf-8">
+  <head>
+    <title>HTML5 Canvas Test:  The direction attribute inherits from the document</title>
+    <link rel="match" href="canvas.2d.offscreen.direction-ref.html" />
+    <link rel="author" href="mailto:[email protected]"/>
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
+    <meta name="assert" content="An offscreen transferred from a canvas inherits the document dir when the canvas element has none." />
+    <script src="/common/reftest-wait.js"></script>
+    <script type="text/javascript">
+      function runTest()
+      {
+        var canvas = document.getElementById("canvas1");
+        var ctx = canvas.transferControlToOffscreen().getContext("2d");
+
+        // The default for direction is inherit
+        ctx.font = "25px serif";
+        ctx.fillText("ABC!", 60, 50);
+
+        requestAnimationFrame(() => takeScreenshot());
+      }
+    </script>
+    <style>
+      canvas {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+      }
+    </style>
+  </head>
+  <body onload="runTest()">
+    <canvas id="canvas1" width="300" height="150">
+      Browser does not support HTML5 Canvas.
+    </canvas>
+  </body>
+</html>
+
diff --git a/html/canvas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.html b/html/canvas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.html
@@ -0,0 +1,30 @@
+<!doctype HTML>
+<html class="reftest-wait">
+  <meta charset="utf-8">
+  <head>
+    <title>HTML5 Canvas Test:  Direction inherit in a transferred offscreen</title>
+    <link rel="match" href="canvas.2d.offscreen.direction-ref.html" />
+    <link rel="author" href="mailto:[email protected]"/>
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
+    <meta name="assert" content="An offscreen transferred from that canvas inherits the canvas direction."/>
+    <script src="/common/reftest-wait.js"></script>
+    <script type="text/javascript">
+      function runTest()
+      {
+        var canvas = document.getElementById("canvas1");
+        var ctx = canvas.transferControlToOffscreen().getContext("2d");
+
+        ctx.font = "25px serif";
+        ctx.fillText("ABC!", 60, 50);
+
+        requestAnimationFrame(() => takeScreenshot());
+      }
+    </script>
+  </head>
+  <body onload="runTest()">
+    <canvas dir="rtl" id="canvas1" width="300" height="150">
+      Browser does not support HTML5 Canvas.
+    </canvas>
+  </body>
+</html>
+
diff --git a/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.html b/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.html
@@ -0,0 +1,30 @@
+<!doctype HTML>
+<html class="reftest-wait">
+  <meta charset="utf-8">
+  <head>
+    <title>HTML5 Canvas Test:  The direction attribute is respected in offscreen worker canvas</title>
+    <link rel="match" href="canvas.2d.offscreen.direction-ref.html" />
+    <link rel="author" href="mailto:[email protected]"/>
+    <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
+    <meta name="assert" content="An offscreen canvas in a worker respects the direction text attribute." />
+    <script src="/common/reftest-wait.js"></script>
+    <script type="text/javascript">
+      function runTest()
+      {
+        var canvas = document.getElementById("canvas1");
+        var offscreen = canvas.transferControlToOffscreen();
+
+        const worker = new Worker('text-direction-worker.js');
+        worker.postMessage({canvas: offscreen}, [offscreen]);
+
+        requestAnimationFrame(requestAnimationFrame(() => takeScreenshot()));
+      }
+    </script>
+  </head>
+  <body onload="runTest()">
+    <canvas id="canvas1" width="300" height="150">
+      Browser does not support HTML5 Canvas.
+    </canvas>
+  </body>
+</html>
+
diff --git a/html/canvas/offscreen/manual/text/text-direction-worker.js b/html/canvas/offscreen/manual/text/text-direction-worker.js
@@ -0,0 +1,8 @@
+self.onmessage = function(e) {
+  offscreen = e.data.canvas;
+  offscreen_ctx = offscreen.getContext("2d");
+
+  offscreen_ctx.font = "25px serif";
+  offscreen_ctx.direction = "rtl";
+  offscreen_ctx.fillText("ABC!", 60, 50);
+}