Skip to content

Commit e37c15a

Browse files
schenney-chromiummoz-wptsync-bot
schenney-chromium
authored and
moz-wptsync-bot
committed
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 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} -- wpt-commits: e0a8cfa0bbb879d889e2ddf8b2b4161feb6a2204 wpt-pr: 50969
1 parent 51d4b75 commit e37c15a

24 files changed

+637
-346
lines changed

‎testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction-ref.html

+18-22
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,20 @@
11
<!doctype HTML>
2-
<html>
3-
<meta charset="utf-8">
4-
<head>
5-
<title>HTML5 Canvas Test Reference: The direction attribute.</title>
6-
<link rel="author" href="mailto:[email protected]"/>
7-
<script>
8-
function runTest()
9-
{
10-
var canvas = document.getElementById("canvas1");
11-
var ctx = canvas.getContext("2d");
2+
<meta charset="utf-8">
3+
<title>HTML5 Canvas Test Reference: The direction attribute.</title>
4+
<link rel="author" href="mailto:[email protected]"/>
5+
<script>
6+
function runTest()
7+
{
8+
var canvas = document.getElementById("canvas1");
9+
var ctx = canvas.getContext("2d");
1210

13-
ctx.font = "25px serif";
14-
ctx.direction = "rtl";
15-
ctx.fillText("ABC!", 60, 50);
16-
}
17-
</script>
18-
</head>
19-
<body onload="runTest()">
20-
<canvas id="canvas1" width="300" height="150">
21-
Browser does not support HTML5 Canvas.
22-
</canvas>
23-
</body>
24-
</html>
11+
ctx.font = "25px serif";
12+
ctx.direction = "rtl";
13+
ctx.fillText("ABC!", 60, 50);
14+
}
15+
</script>
16+
<body onload="runTest()">
17+
<canvas id="canvas1" width="300" height="150">
18+
Browser does not support HTML5 Canvas.
19+
</canvas>
20+
</body>

‎testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.dynamic-ref.html

+20-24
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,23 @@
11
<!doctype HTML>
2-
<html>
3-
<meta charset="utf-8">
4-
<head>
5-
<title>HTML5 Canvas Test Reference: The direction attribute.</title>
6-
<link rel="author" href="mailto:[email protected]"/>
7-
<script>
8-
function runTest()
9-
{
10-
var canvas = document.getElementById("canvas1");
11-
var ctx = canvas.getContext("2d");
2+
<meta charset="utf-8">
3+
<title>HTML5 Canvas Test Reference: The direction attribute.</title>
4+
<link rel="author" href="mailto:[email protected]"/>
5+
<script>
6+
function runTest()
7+
{
8+
var canvas = document.getElementById("canvas1");
9+
var ctx = canvas.getContext("2d");
1210

13-
ctx.font = "25px serif";
14-
ctx.direction = "rtl";
15-
ctx.fillText("ABC!", 60, 50);
11+
ctx.font = "25px serif";
12+
ctx.direction = "rtl";
13+
ctx.fillText("ABC!", 60, 50);
1614

17-
ctx.direction = "ltr";
18-
ctx.fillText("ABC!", 60, 100);
19-
}
20-
</script>
21-
</head>
22-
<body onload="runTest()">
23-
<canvas id="canvas1" width="300" height="150">
24-
Browser does not support HTML5 Canvas.
25-
</canvas>
26-
</body>
27-
</html>
15+
ctx.direction = "ltr";
16+
ctx.fillText("ABC!", 60, 100);
17+
}
18+
</script>
19+
<body onload="runTest()">
20+
<canvas id="canvas1" width="300" height="150">
21+
Browser does not support HTML5 Canvas.
22+
</canvas>
23+
</body>

‎testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.canvas.html

+15-18
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
11
<!doctype HTML>
22
<html dir="ltr">
33
<meta charset="utf-8">
4-
<head>
5-
<title>HTML5 Canvas Test: The direction attribute inherits from the canvas</title>
6-
<link rel="match" href="canvas.2d.direction-ref.html"/>
7-
<link rel="author" href="mailto:[email protected]"/>
8-
<link rel="help"
9-
href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
10-
<meta name="assert" content="When the canvas element has a dir attribute, override the document."/>
11-
<script type="text/javascript">
12-
function runTest()
13-
{
14-
var canvas = document.getElementById("canvas1");
15-
var ctx = canvas.getContext("2d");
4+
<title>HTML5 Canvas Test: The direction attribute inherits from the canvas</title>
5+
<link rel="match" href="canvas.2d.direction-ref.html"/>
6+
<link rel="author" href="mailto:[email protected]"/>
7+
<link rel="help"
8+
href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
9+
<meta name="assert" content="When the canvas element has a dir attribute, override the document."/>
10+
<script type="text/javascript">
11+
function runTest() {
12+
var canvas = document.getElementById("canvas1");
13+
var ctx = canvas.getContext("2d");
1614

17-
// The default for direction is inherit
18-
ctx.font = "25px serif";
19-
ctx.fillText("ABC!", 60, 50);
20-
}
21-
</script>
22-
</head>
15+
// The default for direction is inherit
16+
ctx.font = "25px serif";
17+
ctx.fillText("ABC!", 60, 50);
18+
}
19+
</script>
2320
<body onload="runTest()">
2421
<canvas dir="rtl" id="canvas1" width="300" height="150">
2522
Browser does not support HTML5 Canvas.

‎testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.disconnected.canvas.html

+28-35
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,31 @@
11
<!doctype HTML>
2-
<html>
3-
<meta charset="utf-8">
4-
<head>
5-
<title>HTML5 Canvas Test: The direction attribute inherits from a disconnected canvas element</title>
6-
<link rel="match" href="canvas.2d.direction-ref.html"/>
7-
<link rel="author" href="mailto:[email protected]"/>
8-
<link rel="help"
9-
href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
10-
<meta name="assert" content="Verify that a disconnected canvas with no style uses the canvas direction."/>
11-
<style>
12-
canvas {
13-
position: absolute;
14-
top: 8px;
15-
left: 8px;
16-
}
17-
</style>
18-
</head>
19-
<body>
20-
<canvas id="canvas1" width="300" height="150">
21-
Browser does not support HTML5 Canvas.
22-
</canvas>
23-
<script type="text/javascript">
24-
var canvas = document.createElement("canvas");
25-
canvas.setAttribute("dir", "rtl");
26-
canvas.setAttribute("width", "300");
27-
canvas.setAttribute("height", "150");
28-
var ctx = canvas.getContext("2d");
2+
<meta charset="utf-8">
3+
<title>HTML5 Canvas Test: The direction attribute inherits from a disconnected canvas element</title>
4+
<link rel="match" href="canvas.2d.direction-ref.html"/>
5+
<link rel="author" href="mailto:[email protected]"/>
6+
<link rel="help"
7+
href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
8+
<meta name="assert" content="Verify that a disconnected canvas with no style uses the canvas direction."/>
9+
<style>
10+
canvas {
11+
position: absolute;
12+
top: 8px;
13+
left: 8px;
14+
}
15+
</style>
16+
<canvas id="canvas1" width="300" height="150">
17+
Browser does not support HTML5 Canvas.
18+
</canvas>
19+
<script type="text/javascript">
20+
var canvas = document.createElement("canvas");
21+
canvas.setAttribute("dir", "rtl");
22+
canvas.setAttribute("width", "300");
23+
canvas.setAttribute("height", "150");
24+
var ctx = canvas.getContext("2d");
2925

30-
// The default for direction is inherit
31-
ctx.font = "25px serif";
32-
ctx.fillText("ABC!", 60, 50);
33-
34-
document.body.appendChild(canvas);
35-
</script>
36-
</body>
37-
</html>
26+
// The default for direction is inherit.
27+
ctx.font = "25px serif";
28+
ctx.fillText("ABC!", 60, 50);
3829

30+
document.body.appendChild(canvas);
31+
</script>

‎testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.document.html

+21-24
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,28 @@
11
<!doctype HTML>
22
<html dir="rtl">
33
<meta charset="utf-8">
4-
<head>
5-
<title>HTML5 Canvas Test: The direction attribute inherits correctly</title>
6-
<link rel="match" href="canvas.2d.direction-ref.html" />
7-
<link rel="author" href="mailto:[email protected]"/>
8-
<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
9-
<meta name="assert" content="When the canvas element has no direction attribute, inherit it from the document." />
10-
<script type="text/javascript">
11-
function runTest()
12-
{
13-
var canvas = document.getElementById("canvas1");
14-
var ctx = canvas.getContext("2d");
4+
<title>HTML5 Canvas Test: The direction attribute inherits correctly</title>
5+
<link rel="match" href="canvas.2d.direction-ref.html" />
6+
<link rel="author" href="mailto:[email protected]"/>
7+
<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
8+
<meta name="assert" content="When the canvas element has no direction attribute, inherit it from the document." />
9+
<script type="text/javascript">
10+
function runTest() {
11+
var canvas = document.getElementById("canvas1");
12+
var ctx = canvas.getContext("2d");
1513

16-
// The default for direction is inherit, so no need to set any text styles
17-
ctx.font = "25px serif";
18-
ctx.fillText("ABC!", 60, 50);
19-
}
20-
</script>
21-
<style>
22-
canvas {
23-
position: absolute;
24-
top: 8px;
25-
left: 8px;
26-
}
27-
</style>
28-
</head>
14+
// The default for direction is inherit, so no need to set any text styles,
15+
ctx.font = "25px serif";
16+
ctx.fillText("ABC!", 60, 50);
17+
}
18+
</script>
19+
<style>
20+
canvas {
21+
position: absolute;
22+
top: 8px;
23+
left: 8px;
24+
}
25+
</style>
2926
<body onload="runTest()">
3027
<canvas id="canvas1" width="300" height="150">
3128
Browser does not support HTML5 Canvas.

‎testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.dynamic.canvas.html

+16-19
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
<!doctype HTML>
22
<html dir="ltr">
33
<meta charset="utf-8">
4-
<head>
5-
<title>HTML5 Canvas Test: The direction attribute dynamically updates</title>
6-
<link rel="match" href="canvas.2d.direction.dynamic-ref.html"/>
7-
<link rel="author" href="mailto:[email protected]"/>
8-
<link rel="help"
9-
href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
10-
<meta name="assert" content="Verify that a text direction change is applied."/>
11-
<script type="text/javascript">
12-
function runTest()
13-
{
14-
var canvas = document.getElementById("canvas1");
15-
var ctx = canvas.getContext("2d");
4+
<title>HTML5 Canvas Test: The direction attribute dynamically updates</title>
5+
<link rel="match" href="canvas.2d.direction.dynamic-ref.html"/>
6+
<link rel="author" href="mailto:[email protected]"/>
7+
<link rel="help"
8+
href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
9+
<meta name="assert" content="Verify that a text direction change is applied."/>
10+
<script type="text/javascript">
11+
function runTest() {
12+
var canvas = document.getElementById("canvas1");
13+
var ctx = canvas.getContext("2d");
1614

17-
ctx.font = "25px serif";
18-
ctx.fillText("ABC!", 60, 50);
15+
ctx.font = "25px serif";
16+
ctx.fillText("ABC!", 60, 50);
1917

20-
canvas.setAttribute("dir", "ltr");
21-
ctx.fillText("ABC!", 60, 100);
22-
}
23-
</script>
24-
</head>
18+
canvas.setAttribute("dir", "ltr");
19+
ctx.fillText("ABC!", 60, 100);
20+
}
21+
</script>
2522
<body onload="runTest()">
2623
<canvas dir="rtl" id="canvas1" width="300" height="150">
2724
Browser does not support HTML5 Canvas.

‎testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.direction.inherit.style.html

+25-30
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,28 @@
11
<!doctype HTML>
2-
<html>
3-
<meta charset="utf-8">
4-
<head>
5-
<title>HTML5 Canvas Test: The direction attribute inherits from the canvas style</title>
6-
<link rel="match" href="canvas.2d.direction-ref.html" />
7-
<link rel="author" href="mailto:[email protected]"/>
8-
<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
9-
<meta name="assert" content="When the canvas element has a direction CSS property it should override the dir attribute." />
10-
<script type="text/javascript">
11-
function runTest()
12-
{
13-
var canvas = document.getElementById("canvas1");
14-
var ctx = canvas.getContext("2d");
2+
<meta charset="utf-8">
3+
<title>HTML5 Canvas Test: The direction attribute inherits from the canvas style</title>
4+
<link rel="match" href="canvas.2d.direction-ref.html" />
5+
<link rel="author" href="mailto:[email protected]"/>
6+
<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles"/>
7+
<meta name="assert" content="When the canvas element has a direction CSS property it should override the dir attribute." />
8+
<script type="text/javascript">
9+
function runTest() {
10+
var canvas = document.getElementById("canvas1");
11+
var ctx = canvas.getContext("2d");
1512

16-
// The default for direction is inherit
17-
ctx.font = "25px serif";
18-
ctx.fillText("ABC!", 60, 50);
19-
}
20-
</script>
21-
<style>
22-
canvas {
23-
direction: rtl;
24-
}
25-
</style>
26-
</head>
27-
<body onload="runTest()">
28-
<canvas dir="ltr" id="canvas1" width="300" height="150">
29-
Browser does not support HTML5 Canvas.
30-
</canvas>
31-
</body>
32-
</html>
13+
// The default for direction is inherit
14+
ctx.font = "25px serif";
15+
ctx.fillText("ABC!", 60, 50);
16+
}
17+
</script>
18+
<style>
19+
canvas {
20+
direction: rtl;
21+
}
22+
</style>
23+
<body onload="runTest()">
24+
<canvas dir="ltr" id="canvas1" width="300" height="150">
25+
Browser does not support HTML5 Canvas.
26+
</canvas>
27+
</body>
3328

‎testing/web-platform/tests/html/canvas/element/text/2d.text.direction.default.tentative.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
3+
<meta charset="UTF-8">
4+
<title>Canvas test: 2d.text.direction.default.tentative</title>
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="/html/canvas/resources/canvas-tests.js"></script>
8+
<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
9+
<body class="show_output">
10+
11+
<h1>2d.text.direction.default.tentative</h1>
12+
<p class="desc"></p>
13+
14+
15+
<p class="output">Actual output:</p>
16+
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
17+
18+
<ul id="d"></ul>
19+
<script>
20+
var t = async_test("");
21+
_addTest(function(canvas, ctx) {
22+
23+
_assertSame(ctx.direction, 'inherit', "ctx.direction", "'inherit'");
24+
25+
});
26+
</script>
27+

0 commit comments

Comments
 (0)