Cleanup Canvas text direction tests

Fix various style issues. And add tests for default, valid and invalid values. The tests for valid and default values fail because we never report `inherit`, but report the computed value instead. A spec issue was filed for the round-tripping of `direction` and it was resolved to return "inherit" rather than the computed value. See whatwg/html#10884 and the spec PR at whatwg/html#10873. The code will not be changed to pass these tests until the results of UseCounters have been reviewed to identify how often this change might affect sites. A search of HTTP Archive did not find failure cases, mostly because Firefox already returns "inherit" so sites check for that. Change-Id: I39645acd997786c22d4983f84a9d17c7b976797b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6277644 Reviewed-by: Andres Ricardo Perez <[email protected]> Commit-Queue: Stephen Chenney <[email protected]> Cr-Commit-Position: refs/heads/main@{#1425228}
web-platform-tests · Feb 26, 2025 · e0a8cfa · e0a8cfa
1 parent e515834
commit e0a8cfa
Show file tree

Hide file tree

Showing 24 changed files with 637 additions and 346 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
@@ -1,24 +1,20 @@
 <!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");
+<meta charset="utf-8">
+<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>
+    ctx.font = "25px serif";
+    ctx.direction = "rtl";
+    ctx.fillText("ABC!", 60, 50);
+  }
+</script>
+<body onload="runTest()">
+  <canvas id="canvas1" width="300" height="150">
+    Browser does not support HTML5 Canvas.
+  </canvas>
+</body>
diff --git a/html/canvas/element/manual/text/canvas.2d.direction.dynamic-ref.html b/html/canvas/element/manual/text/canvas.2d.direction.dynamic-ref.html
@@ -1,27 +1,23 @@
 <!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");
+<meta charset="utf-8">
+<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);
+    ctx.font = "25px serif";
+    ctx.direction = "rtl";
+    ctx.fillText("ABC!", 60, 50);
 
-        ctx.direction = "ltr";
-        ctx.fillText("ABC!", 60, 100);
-      }
-    </script>
-  </head>
-  <body onload="runTest()">
-    <canvas id="canvas1" width="300" height="150">
-      Browser does not support HTML5 Canvas.
-    </canvas>
-  </body>
-</html>
+    ctx.direction = "ltr";
+    ctx.fillText("ABC!", 60, 100);
+  }
+</script>
+<body onload="runTest()">
+  <canvas id="canvas1" width="300" height="150">
+    Browser does not support HTML5 Canvas.
+  </canvas>
+</body>
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
@@ -1,25 +1,22 @@
 <!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");
+  <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>
+      // The default for direction is inherit
+      ctx.font = "25px serif";
+      ctx.fillText("ABC!", 60, 50);
+    }
+  </script>
   <body onload="runTest()">
     <canvas dir="rtl" id="canvas1" width="300" height="150">
       Browser does not support HTML5 Canvas.

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
@@ -1,38 +1,31 @@
 <!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");
+<meta charset="utf-8">
+<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>
+<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>
+  // The default for direction is inherit.
+  ctx.font = "25px serif";
+  ctx.fillText("ABC!", 60, 50);
 
+  document.body.appendChild(canvas);
+</script>
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
@@ -1,31 +1,28 @@
 <!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");
+  <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>
+      // 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>
   <body onload="runTest()">
     <canvas id="canvas1" width="300" height="150">
       Browser does not support HTML5 Canvas.

diff --git a/html/canvas/element/manual/text/canvas.2d.direction.inherit.dynamic.canvas.html b/html/canvas/element/manual/text/canvas.2d.direction.inherit.dynamic.canvas.html
@@ -1,27 +1,24 @@
 <!doctype HTML>
 <html dir="ltr">
   <meta charset="utf-8">
-  <head>
-    <title>HTML5 Canvas Test: The direction attribute dynamically updates</title>
-    <link rel="match" href="canvas.2d.direction.dynamic-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 text direction change is applied."/>
-    <script type="text/javascript">
-      function runTest()
-      {
-        var canvas = document.getElementById("canvas1");
-        var ctx = canvas.getContext("2d");
+  <title>HTML5 Canvas Test: The direction attribute dynamically updates</title>
+  <link rel="match" href="canvas.2d.direction.dynamic-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 text direction change is applied."/>
+  <script type="text/javascript">
+    function runTest() {
+      var canvas = document.getElementById("canvas1");
+      var ctx = canvas.getContext("2d");
 
-        ctx.font = "25px serif";
-        ctx.fillText("ABC!", 60, 50);
+      ctx.font = "25px serif";
+      ctx.fillText("ABC!", 60, 50);
 
-        canvas.setAttribute("dir", "ltr");
-        ctx.fillText("ABC!", 60, 100);
-      }
-    </script>
-  </head>
+      canvas.setAttribute("dir", "ltr");
+      ctx.fillText("ABC!", 60, 100);
+    }
+  </script>
   <body onload="runTest()">
     <canvas dir="rtl" id="canvas1" width="300" height="150">
       Browser does not support HTML5 Canvas.

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
@@ -1,33 +1,28 @@
 <!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");
+<meta charset="utf-8">
+<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>
+    // The default for direction is inherit
+    ctx.font = "25px serif";
+    ctx.fillText("ABC!", 60, 50);
+  }
+</script>
+<style>
+  canvas {
+    direction: rtl;
+  }
+</style>
+<body onload="runTest()">
+  <canvas dir="ltr" id="canvas1" width="300" height="150">
+    Browser does not support HTML5 Canvas.
+  </canvas>
+</body>
 
diff --git a/html/canvas/element/text/2d.text.direction.default.tentative.html b/html/canvas/element/text/2d.text.direction.default.tentative.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>Canvas test: 2d.text.direction.default.tentative</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.text.direction.default.tentative</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.direction, 'inherit', "ctx.direction", "'inherit'");
+
+});
+</script>
+