From e37c15a8da6f484f9ce32f8e76fd3c04dca6cbf6 Mon Sep 17 00:00:00 2001
From: Stephen Chenney <schenney@chromium.org>
Date: Thu, 27 Feb 2025 09:53:28 +0000
Subject: [PATCH] Bug 1950674 [wpt PR 50969] - Cleanup Canvas text direction
 tests, a=testonly

Automatic update from web-platform-tests
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
https://github.com/whatwg/html/issues/10884 and the spec PR at
https://github.com/whatwg/html/pull/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 <andresrperez@chromium.org>
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1425228}

--

wpt-commits: e0a8cfa0bbb879d889e2ddf8b2b4161feb6a2204
wpt-pr: 50969
---
 .../manual/text/canvas.2d.direction-ref.html  | 40 ++++++------
 .../text/canvas.2d.direction.dynamic-ref.html | 44 ++++++-------
 .../canvas.2d.direction.inherit.canvas.html   | 33 +++++-----
 ...direction.inherit.disconnected.canvas.html | 63 +++++++++----------
 .../canvas.2d.direction.inherit.document.html | 45 +++++++------
 ...s.2d.direction.inherit.dynamic.canvas.html | 35 +++++------
 .../canvas.2d.direction.inherit.style.html    | 55 ++++++++--------
 .../2d.text.direction.default.tentative.html  | 27 ++++++++
 .../text/2d.text.direction.invalid.html       | 45 +++++++++++++
 .../2d.text.direction.valid.tentative.html    | 34 ++++++++++
 .../canvas.2d.offscreen.direction-ref.html    | 36 +++++------
 .../text/canvas.2d.offscreen.direction.html   | 43 ++++++-------
 ...ransferred.direction.inherit.document.html | 50 +++++++--------
 ...fscreen.transferred.direction.inherit.html | 33 +++++-----
 ...vas.2d.offscreen.worker.direction-ref.html | 43 ++++++-------
 .../canvas.2d.offscreen.worker.direction.html | 59 +++++++++--------
 ...2d.offscreen.worker.direction.inherit.html | 61 +++++++++---------
 .../2d.text.direction.default.tentative.html  | 28 +++++++++
 ...text.direction.default.tentative.worker.js | 22 +++++++
 .../text/2d.text.direction.invalid.html       | 46 ++++++++++++++
 .../text/2d.text.direction.invalid.worker.js  | 40 ++++++++++++
 .../2d.text.direction.valid.tentative.html    | 35 +++++++++++
 ...d.text.direction.valid.tentative.worker.js | 29 +++++++++
 .../tests/html/canvas/tools/yaml/text.yaml    | 37 +++++++++++
 24 files changed, 637 insertions(+), 346 deletions(-)
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.direction.default.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.direction.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.direction.valid.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.default.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.default.tentative.worker.js
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.invalid.worker.js
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.valid.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.valid.tentative.worker.js

diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction-ref.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction-ref.html
index e7f685244d9a5b..c7c43120709b5c 100644
--- a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction-ref.html
+++ b/testing/web-platform/tests/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:schenney@chromium.org"/>
-    <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:schenney@chromium.org"/>
+<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/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.dynamic-ref.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.dynamic-ref.html
index 2df2f127d09381..65a5b27f7263be 100644
--- a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.dynamic-ref.html
+++ b/testing/web-platform/tests/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:schenney@chromium.org"/>
-    <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:schenney@chromium.org"/>
+<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/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.canvas.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.canvas.html
index c6eee5d9a8c13b..14da877fa23f8a 100644
--- a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.canvas.html
+++ b/testing/web-platform/tests/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:schenney@chromium.org"/>
-    <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:schenney@chromium.org"/>
+  <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/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.disconnected.canvas.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.disconnected.canvas.html
index 0499563763a8ee..7848e6e030f871 100644
--- a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.disconnected.canvas.html
+++ b/testing/web-platform/tests/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:schenney@chromium.org"/>
-    <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:schenney@chromium.org"/>
+<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/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.document.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.document.html
index c9a3e3bdfd0a56..42f7718b0acefa 100644
--- a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.document.html
+++ b/testing/web-platform/tests/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:schenney@chromium.org"/>
-    <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:schenney@chromium.org"/>
+  <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/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.dynamic.canvas.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.dynamic.canvas.html
index 7762680f9ac45e..881855039543b5 100644
--- a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.dynamic.canvas.html
+++ b/testing/web-platform/tests/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:schenney@chromium.org"/>
-    <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:schenney@chromium.org"/>
+  <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/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.style.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.style.html
index 8405f56443ea0b..10ec25bb5f00c5 100644
--- a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.style.html
+++ b/testing/web-platform/tests/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:schenney@chromium.org"/>
-    <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:schenney@chromium.org"/>
+<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/testing/web-platform/tests/html/canvas/element/text/2d.text.direction.default.tentative.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.direction.default.tentative.html
new file mode 100644
index 00000000000000..7c7a47148be1a4
--- /dev/null
+++ b/testing/web-platform/tests/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>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.direction.invalid.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.direction.invalid.html
new file mode 100644
index 00000000000000..d8d903517f02f0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.direction.invalid.html
@@ -0,0 +1,45 @@
+<!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.invalid</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.invalid</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) {
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'rtl ';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'rtl';
+  ctx.direction = 'LTR';
+  _assertSame(ctx.direction, 'rtl', "ctx.direction", "'rtl'");
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'rtl\0';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'bogus';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'inheri';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.direction.valid.tentative.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.direction.valid.tentative.html
new file mode 100644
index 00000000000000..26593374e47d22
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.direction.valid.tentative.html
@@ -0,0 +1,34 @@
+<!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.valid.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.valid.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) {
+
+  ctx.direction = 'ltr';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'rtl';
+  _assertSame(ctx.direction, 'rtl', "ctx.direction", "'rtl'");
+
+  ctx.direction = 'inherit';
+  _assertSame(ctx.direction, 'inherit', "ctx.direction", "'inherit'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction-ref.html b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction-ref.html
index 8949caa8486848..49cb8125c996e1 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction-ref.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction-ref.html
@@ -1,22 +1,18 @@
 <!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:schenney@chromium.org"/>
-    <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 in an offscreen canvas</title>
+<link rel="author" href="mailto:schenney@chromium.org"/>
+<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/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction.html b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction.html
index e3787cc7191c5f..e41a7666f75bee 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.direction.html
@@ -1,33 +1,30 @@
 <!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:schenney@chromium.org"/>
-    <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");
+  <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:schenney@chromium.org"/>
+  <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');
+      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);
+      offscreen_ctx.font = "25px serif";
+      offscreen_ctx.direction = "rtl";
+      offscreen_ctx.fillText("ABC!", 60, 50);
 
-        const bitmap = offscreen.transferToImageBitmap();
-        bitmap_ctx.transferFromImageBitmap(bitmap);
+      const bitmap = offscreen.transferToImageBitmap();
+      bitmap_ctx.transferFromImageBitmap(bitmap);
 
-        requestAnimationFrame(() => requestAnimationFrame(() => takeScreenshot()));
-      }
-    </script>
-  </head>
+      requestAnimationFrame(() => requestAnimationFrame(() => takeScreenshot()));
+    }
+  </script>
   <body onload="runTest()">
     <canvas id="canvas1" width="300" height="150">
       Browser does not support HTML5 Canvas.
diff --git a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.document.html b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.document.html
index 1655ddc83e3a72..7099412d0b4fad 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.document.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.document.html
@@ -1,34 +1,32 @@
 <!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:schenney@chromium.org"/>
-    <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");
+  <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:schenney@chromium.org"/>
+  <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);
+      // The default for direction is inherit
+      ctx.font = "25px serif";
+      ctx.fillText("ABC!", 60, 50);
 
-        requestAnimationFrame(() => requestAnimationFrame(() => takeScreenshot()));
-      }
-    </script>
-    <style>
-      canvas {
-        position: absolute;
-        top: 8px;
-        left: 8px;
-      }
-    </style>
-  </head>
+      requestAnimationFrame(() => requestAnimationFrame(() => takeScreenshot()));
+    }
+  </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/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.html b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.html
index fc2511a6b8835d..71b06c556d43d5 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.transferred.direction.inherit.html
@@ -1,26 +1,23 @@
 <!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:schenney@chromium.org"/>
-    <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");
+  <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:schenney@chromium.org"/>
+  <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);
+      ctx.font = "25px serif";
+      ctx.fillText("ABC!", 60, 50);
 
-        requestAnimationFrame(() => requestAnimationFrame(() => takeScreenshot()));
-      }
-    </script>
-  </head>
+      requestAnimationFrame(() => requestAnimationFrame(() => takeScreenshot()));
+    }
+  </script>
   <body onload="runTest()">
     <canvas dir="rtl" id="canvas1" width="300" height="150">
       Browser does not support HTML5 Canvas.
diff --git a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction-ref.html b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction-ref.html
index 23e70313cdbfd6..837f07fa1771ed 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction-ref.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction-ref.html
@@ -1,27 +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:schenney@chromium.org"/>
-    <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 in an offscreen canvas</title>
+<link rel="author" href="mailto:schenney@chromium.org"/>
+<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.fillStyle = '#0f0';
-        ctx.fillRect(0, 0, 1, 1);
-      }
-    </script>
-  </head>
-  <body onload="runTest()">
-    <canvas id="canvas1" width="300" height="150">
-      Browser does not support HTML5 Canvas.
-    </canvas>
-  </body>
-</html>
+    ctx.fillStyle = '#0f0';
+    ctx.fillRect(0, 0, 1, 1);
+  }
+</script>
+<body onload="runTest()">
+  <canvas id="canvas1" width="300" height="150">
+    Browser does not support HTML5 Canvas.
+  </canvas>
+</body>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.html b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.html
index 56c7dc00f2174f..c8835ee421cfff 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.html
@@ -1,42 +1,39 @@
 <!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.worker.direction-ref.html" />
-    <link rel="author" href="mailto:schenney@chromium.org"/>
-    <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()
-      {
-        const placeholder_canvas = document.createElement('canvas');
-        placeholder_canvas.setAttribute('width', '300');
-        placeholder_canvas.setAttribute('height', '150');
-        const offscreen = placeholder_canvas.transferControlToOffscreen();
+  <title>HTML5 Canvas Test:  The direction attribute is respected in offscreen worker canvas</title>
+  <link rel="match" href="canvas.2d.offscreen.worker.direction-ref.html" />
+  <link rel="author" href="mailto:schenney@chromium.org"/>
+  <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() {
+      const placeholder_canvas = document.createElement('canvas');
+      placeholder_canvas.setAttribute('width', '300');
+      placeholder_canvas.setAttribute('height', '150');
+      const offscreen = placeholder_canvas.transferControlToOffscreen();
 
-        const worker = new Worker('text-direction-worker.js');
-        worker.postMessage({canvas: offscreen}, [offscreen]);
+      const worker = new Worker('text-direction-worker.js');
+      worker.postMessage({canvas: offscreen}, [offscreen]);
 
-        const canvas = document.getElementById('canvas1');
-        const ctx = canvas.getContext('2d', {willReadFrequently: true});
-        function checkResult() {
-          // Wait until frame propagates.
-          ctx.drawImage(placeholder_canvas, 0, 0);
-          const pixel = ctx.getImageData(0, 0, 1, 1).data;
+      const canvas = document.getElementById('canvas1');
+      const ctx = canvas.getContext('2d', {willReadFrequently: true});
+      function checkResult() {
+        // Wait until frame propagates.
+        ctx.drawImage(placeholder_canvas, 0, 0);
+        const pixel = ctx.getImageData(0, 0, 1, 1).data;
 
-          if (pixel[3] == 0) {
-            // Result not available, wait longer.
-            requestAnimationFrame(checkResult);
-          } else {
-            takeScreenshot();
-          }
+        if (pixel[3] == 0) {
+          // Result not available, wait longer.
+          requestAnimationFrame(checkResult);
+        } else {
+          takeScreenshot();
         }
-        requestAnimationFrame(checkResult);
       }
-    </script>
-  </head>
+      requestAnimationFrame(checkResult);
+    }
+  </script>
   <body onload="runTest()">
     <canvas id="canvas1" width="300" height="150">
       Browser does not support HTML5 Canvas.
diff --git a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.inherit.html b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.inherit.html
index a7b7ec66e17ec8..527d38fe1202ee 100644
--- a/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.inherit.html
+++ b/testing/web-platform/tests/html/canvas/offscreen/manual/text/canvas.2d.offscreen.worker.direction.inherit.html
@@ -1,43 +1,40 @@
 <!doctype HTML>
 <html class="reftest-wait">
   <meta charset="utf-8">
-  <head>
-    <title>HTML5 Canvas Test:  The direction attribute is inherited in offscreen worker canvas</title>
-    <link rel="match" href="canvas.2d.offscreen.worker.direction-ref.html" />
-    <link rel="author" href="mailto:schenney@chromium.org"/>
-    <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
-    <meta name="assert" content="An offscreen canvas in a worker inherits the direction text attribute." />
-    <script src="/common/reftest-wait.js"></script>
-    <script type="text/javascript">
-      function runTest()
-      {
-        const placeholder_canvas = document.createElement('canvas');
-        placeholder_canvas.setAttribute('width', '300');
-        placeholder_canvas.setAttribute('height', '150');
-        placeholder_canvas.setAttribute('dir', 'rtl');
-        const offscreen = placeholder_canvas.transferControlToOffscreen();
+  <title>HTML5 Canvas Test:  The direction attribute is inherited in offscreen worker canvas</title>
+  <link rel="match" href="canvas.2d.offscreen.worker.direction-ref.html" />
+  <link rel="author" href="mailto:schenney@chromium.org"/>
+  <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
+  <meta name="assert" content="An offscreen canvas in a worker inherits the direction text attribute." />
+  <script src="/common/reftest-wait.js"></script>
+  <script type="text/javascript">
+    function runTest() {
+      const placeholder_canvas = document.createElement('canvas');
+      placeholder_canvas.setAttribute('width', '300');
+      placeholder_canvas.setAttribute('height', '150');
+      placeholder_canvas.setAttribute('dir', 'rtl');
+      const offscreen = placeholder_canvas.transferControlToOffscreen();
 
-        const worker = new Worker('text-direction-worker-inherit.js');
-        worker.postMessage({canvas: offscreen}, [offscreen]);
+      const worker = new Worker('text-direction-worker-inherit.js');
+      worker.postMessage({canvas: offscreen}, [offscreen]);
 
-        const canvas = document.getElementById('canvas1');
-        const ctx = canvas.getContext('2d', {willReadFrequently: true});
-        function checkResult() {
-          // Wait until frame propagates.
-          ctx.drawImage(placeholder_canvas, 0, 0);
-          const pixel = ctx.getImageData(0, 0, 1, 1).data;
+      const canvas = document.getElementById('canvas1');
+      const ctx = canvas.getContext('2d', {willReadFrequently: true});
+      function checkResult() {
+        // Wait until frame propagates.
+        ctx.drawImage(placeholder_canvas, 0, 0);
+        const pixel = ctx.getImageData(0, 0, 1, 1).data;
 
-          if (pixel[3] == 0) {
-            // Result not available, wait longer.
-            requestAnimationFrame(checkResult);
-          } else {
-            takeScreenshot();
-          }
+        if (pixel[3] == 0) {
+          // Result not available, wait longer.
+          requestAnimationFrame(checkResult);
+        } else {
+          takeScreenshot();
         }
-        requestAnimationFrame(checkResult);
       }
-    </script>
-  </head>
+      requestAnimationFrame(checkResult);
+    }
+  </script>
   <body onload="runTest()">
     <canvas id="canvas1" width="300" height="150">
       Browser does not support HTML5 Canvas.
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.default.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.default.tentative.html
new file mode 100644
index 00000000000000..900ed14aaac80a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.default.tentative.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>OffscreenCanvas 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>
+
+<h1>2d.text.direction.default.tentative</h1>
+<p class="desc"></p>
+
+
+<script>
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  _assertSame(ctx.direction, 'inherit', "ctx.direction", "'inherit'");
+  t.done();
+
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.default.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.default.tentative.worker.js
new file mode 100644
index 00000000000000..98e96d948d7bed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.default.tentative.worker.js
@@ -0,0 +1,22 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.text.direction.default.tentative
+// Description:
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  _assertSame(ctx.direction, 'inherit', "ctx.direction", "'inherit'");
+  t.done();
+});
+done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.invalid.html b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.invalid.html
new file mode 100644
index 00000000000000..9d1507b06df5fb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.invalid.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>OffscreenCanvas test: 2d.text.direction.invalid</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.text.direction.invalid</h1>
+<p class="desc"></p>
+
+
+<script>
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'rtl ';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'rtl';
+  ctx.direction = 'LTR';
+  _assertSame(ctx.direction, 'rtl', "ctx.direction", "'rtl'");
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'rtl\0';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'bogus';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'inheri';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+  t.done();
+
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.invalid.worker.js b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.invalid.worker.js
new file mode 100644
index 00000000000000..a5d4701df99554
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.invalid.worker.js
@@ -0,0 +1,40 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.text.direction.invalid
+// Description:
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'rtl ';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'rtl';
+  ctx.direction = 'LTR';
+  _assertSame(ctx.direction, 'rtl', "ctx.direction", "'rtl'");
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'rtl\0';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'bogus';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'ltr';
+  ctx.direction = 'inheri';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+  t.done();
+});
+done();
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.valid.tentative.html b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.valid.tentative.html
new file mode 100644
index 00000000000000..3a85e775aaffb0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.valid.tentative.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<meta charset="UTF-8">
+<title>OffscreenCanvas test: 2d.text.direction.valid.tentative</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+
+<h1>2d.text.direction.valid.tentative</h1>
+<p class="desc"></p>
+
+
+<script>
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.direction = 'ltr';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'rtl';
+  _assertSame(ctx.direction, 'rtl', "ctx.direction", "'rtl'");
+
+  ctx.direction = 'inherit';
+  _assertSame(ctx.direction, 'inherit', "ctx.direction", "'inherit'");
+  t.done();
+
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.valid.tentative.worker.js b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.valid.tentative.worker.js
new file mode 100644
index 00000000000000..840f2527007d21
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/offscreen/text/2d.text.direction.valid.tentative.worker.js
@@ -0,0 +1,29 @@
+// DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py.
+// OffscreenCanvas test in a worker:2d.text.direction.valid.tentative
+// Description:
+// Note:
+
+importScripts("/resources/testharness.js");
+importScripts("/html/canvas/resources/canvas-tests.js");
+
+var t = async_test("");
+var t_pass = t.done.bind(t);
+var t_fail = t.step_func(function(reason) {
+    throw reason;
+});
+t.step(function() {
+
+  var canvas = new OffscreenCanvas(100, 50);
+  var ctx = canvas.getContext('2d');
+
+  ctx.direction = 'ltr';
+  _assertSame(ctx.direction, 'ltr', "ctx.direction", "'ltr'");
+
+  ctx.direction = 'rtl';
+  _assertSame(ctx.direction, 'rtl', "ctx.direction", "'rtl'");
+
+  ctx.direction = 'inherit';
+  _assertSame(ctx.direction, 'inherit', "ctx.direction", "'inherit'");
+  t.done();
+});
+done();
diff --git a/testing/web-platform/tests/html/canvas/tools/yaml/text.yaml b/testing/web-platform/tests/html/canvas/tools/yaml/text.yaml
index d0c608739a0043..8be18ee3cdf8fc 100644
--- a/testing/web-platform/tests/html/canvas/tools/yaml/text.yaml
+++ b/testing/web-platform/tests/html/canvas/tools/yaml/text.yaml
@@ -233,6 +233,43 @@
   code: |
     @assert ctx.textBaseline === 'alphabetic';
 
+- name: 2d.text.direction.default.tentative
+  code: |
+    @assert ctx.direction === 'inherit';
+
+- name: 2d.text.direction.valid.tentative
+  code: |
+    ctx.direction = 'ltr';
+    @assert ctx.direction === 'ltr';
+
+    ctx.direction = 'rtl';
+    @assert ctx.direction === 'rtl';
+
+    ctx.direction = 'inherit';
+    @assert ctx.direction === 'inherit';
+
+- name: 2d.text.direction.invalid
+  code: |
+    ctx.direction = 'ltr';
+    ctx.direction = 'rtl ';
+    @assert ctx.direction === 'ltr';
+
+    ctx.direction = 'rtl';
+    ctx.direction = 'LTR';
+    @assert ctx.direction === 'rtl';
+
+    ctx.direction = 'ltr';
+    ctx.direction = 'rtl\0';
+    @assert ctx.direction === 'ltr';
+
+    ctx.direction = 'ltr';
+    ctx.direction = 'bogus';
+    @assert ctx.direction === 'ltr';
+
+    ctx.direction = 'ltr';
+    ctx.direction = 'inheri';
+    @assert ctx.direction === 'ltr';
+
 - name: 2d.text.draw.baseline.top
   desc: textBaseline top is the top of the em square (not the bounding box)
   test_type: promise