Repository: web-platform-tests/wpt
Pull request #52296: Added tests for Ignore Letter Spacing for Cursive Scripts
Author: login: seanand-dev
Labels: name: wg-css
name: css-text
Created: 2025-05-02T03:56:31Z | Merged: 2025-05-05T07:00:58Z

WPTs to Ensure Letter-spacing is Ignored in Cursive Scripts

Introducing new Web Platform Tests (WPTs) for the following CL:
https://chromium-review.googlesource.com/c/chromium/src/+/6399436


Diff:
diff --git a/css/css-text/letter-spacing/letter-spacing-cursive-001.html b/css/css-text/letter-spacing/letter-spacing-cursive-001.html
new file mode 100644
index 00000000000000..5700c600981ab8
--- /dev/null
+++ b/css/css-text/letter-spacing/letter-spacing-cursive-001.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<title>
+CSS Text Test - Letter-spacing should not be applied for Cursive Scripts.
+</title>
+<link rel="author" title="Sejal Anand" href="mailto:sejalanand@microsoft.com">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#cursive-tracking">
+<link rel="match" href="reference/letter-spacing-cursive-001-ref.html">
+<meta name="assert" content="Letter-spacing must not be applied to Arabic text,
+ preserving cursive connections.">
+<style>
+div {
+  margin: 1em;
+  font: 24px serif;
+  white-space: nowrap;
+  display: inline-block;
+  outline: 1px solid gray;
+}
+.letterspacing {
+  letter-spacing: 10px; /* Should NOT affect Arabic text */
+}
+</style>
+</head>
+<body>
+<p>
+The following test will pass if no spacing appears between letters within
+Arabic words. Both Arabic texts should display identically.
+</p>
+<div class="letterspacing">
+<span>مرحباً</span>
+</div>
+<br>
+<div>
+<span>مرحباً</span>
+</div>
+<br>
+</body>
+</html>
diff --git a/css/css-text/letter-spacing/reference/letter-spacing-cursive-001-ref.html b/css/css-text/letter-spacing/reference/letter-spacing-cursive-001-ref.html
new file mode 100644
index 00000000000000..720c9491b4d8cf
--- /dev/null
+++ b/css/css-text/letter-spacing/reference/letter-spacing-cursive-001-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<title>
+CSS Text Test - Letter-spacing should not be applied for Cursive Scripts.
+</title>
+<link rel="author" title="Sejal Anand" href="mailto:sejalanand@microsoft.com">
+<style>
+div {
+  margin: 1em;
+  font: 24px serif;
+  white-space: nowrap;
+  display: inline-block;
+  outline: 1px solid gray;
+}
+</style>
+</head>
+<body>
+<p>
+The following test will pass if no spacing appears between letters within
+Arabic words. Both Arabic texts should display identically.
+</p>
+<div>
+<span>مرحباً</span>
+</div>
+<br>
+<div>
+<span>مرحباً</span>
+</div>
+<br>
+</body>
+</html>


Reviews:
user: login: frivoal
body: In addition to the comments made inline, here are two more requests:

The spec says:
> it must not apply spacing between any pair of that script’s [typographic letter units](https://drafts.csswg.org/css-text-4/#typographic-letter-unit) at all

The sample string does not only use Arabic typographic letter units, but also a space and a period, which are not typographic letter units, and thus should be spaced out. A simplified version of this test could be done based on a simpler string of Arabic text made exclusively of letters. (For instance, to keep close to what the example already uses, just "مرحباً"). Alternatively, you can keep the non-letter characters, but then in the second string, and both strings in the ref, you should add the spacing manually.

I'd say fixing this is a requirement for landing this test.

----
The spec says:
> If it is able, […]. Otherwise […]

This test only checks for the behavior defined in the "otherwise" case. In order to avoid having implementations fail the test if they do the main correct behavior, there should be [an additional alternative reference](https://web-platform-tests.org/writing-tests/reftests.html#multiple-references) for the other behavior.  See [Example 41 in the spec](https://drafts.csswg.org/css-text-4/#example-9902d8b5). If necessary, that can be achieved by manually inserting "ـ" (U+0640 ـ ARABIC TATWEEL).

I'd say fixing this is a nice to have for landing this test. If we don't, it's always possible for the first implementation that does the "if it is able" behavior to later come back to this and add the variant at that point.
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-02T07:42:56Z
user: login: seanand-dev
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-02T08:17:53Z
user: login: seanand-dev
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-02T08:18:00Z
user: login: frivoal
body: > a simplified version of this test could be done based on a simpler string of Arabic text made exclusively of letters.

https://github.com/web-platform-tests/wpt/pull/52296/commits/ff13896adf2ce1f0ae248f92f8e34990d0d10085 did this.

Still think we could/should do more (https://github.com/web-platform-tests/wpt/pull/52296#pullrequestreview-2811352070), but the test now looks correct.
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-02T08:24:23Z

Review comments:
diff_hunk: @@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<title>
+CSS Text Test - Letter-spacing should not be applied for Cursive Scripts.
+</title>
+<link rel="author" title="Sejal Anand" href="mailto:sejalanand@microsoft.com">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#cursive-tracking">
+<link rel="match" href="reference/letter-spacing-cursive-001-ref.html">
+<meta name="assert" content="Letter-spacing must not be applied to Arabic text,
+ preserving cursive connections.">
+<style>
+div {
+  margin: 1em;
+  font: 24px serif;
+  white-space: nowrap;
+  display: inline-block;
+  outline: 1px solid gray;
+}
+.letterspacing {
+  letter-spacing: 10px; /* Should NOT affect Arabic text */
+}
+</style>
+</head>
+<body>
+<p>
+The following test will pass if no spacing appears between letters within
+Arabic words. Both Arabic texts should display identically.
+</p>
+<div class="letterspacing">
+<span>١. مرحباً</span>
+</div>
+<br>
+<div>
+<span>٢. مرحباً</span>
path: css/css-text/letter-spacing/letter-spacing-cursive-001.html
user: login: frivoal
body: If we want both pieces of text to render identically (regardless of letter spacing), they should actually be the same text.

```suggestion
<span>١. مرحباً</span>
```
created_at: 2025-05-02T07:29:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<title>
+CSS Text Test - Letter-spacing should not be applied for Cursive Scripts.
+</title>
+<link rel="author" title="Sejal Anand" href="mailto:sejalanand@microsoft.com">
+<style>
+div {
+  margin: 1em;
+  font: 24px serif;
+  white-space: nowrap;
+  display: inline-block;
+  outline: 1px solid gray;
+}
+</style>
+</head>
+<body>
+<p>
+The following test will pass if no spacing appears between letters within
+Arabic words. Both Arabic texts should display identically.
+</p>
+<div>
+<span>١. مرحباً</span>
+</div>
+<br>
+<div>
+<span>٢. مرحباً</span>
path: css/css-text/letter-spacing/reference/letter-spacing-cursive-001-ref.html
user: login: frivoal
body: If we want both pieces of text to render identically (regardless of letter spacing), they should actually be the same text.

```suggestion
<span>١. مرحباً</span>
```
created_at: 2025-05-02T07:29:36Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<title>
+CSS Text Test - Letter-spacing should not be applied for Cursive Scripts.
+</title>
+<link rel="author" title="Sejal Anand" href="mailto:sejalanand@microsoft.com">
+<link rel="help" href="https://www.w3.org/TR/css-text-3/#cursive-tracking">
+<link rel="match" href="reference/letter-spacing-cursive-001-ref.html">
+<meta name="assert" content="Letter-spacing must not be applied to Arabic text,
+ preserving cursive connections.">
+<style>
+div {
+  margin: 1em;
+  font: 24px serif;
+  white-space: nowrap;
+  display: inline-block;
+  outline: 1px solid gray;
+}
+.letterspacing {
+  letter-spacing: 10px; /* Should NOT affect Arabic text */
+}
+</style>
+</head>
+<body>
+<p>
+The following test will pass if no spacing appears between letters within
+Arabic words. Both Arabic texts should display identically.
+</p>
+<div class="letterspacing">
+<span>١. مرحباً</span>
+</div>
+<br>
+<div>
+<span>٢. مرحباً</span>
path: css/css-text/letter-spacing/letter-spacing-cursive-001.html
user: login: seanand-dev
body: done
created_at: 2025-05-02T08:17:53Z
author_association: NONE
diff_hunk: @@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<head>
+<meta charset="utf-8">
+<title>
+CSS Text Test - Letter-spacing should not be applied for Cursive Scripts.
+</title>
+<link rel="author" title="Sejal Anand" href="mailto:sejalanand@microsoft.com">
+<style>
+div {
+  margin: 1em;
+  font: 24px serif;
+  white-space: nowrap;
+  display: inline-block;
+  outline: 1px solid gray;
+}
+</style>
+</head>
+<body>
+<p>
+The following test will pass if no spacing appears between letters within
+Arabic words. Both Arabic texts should display identically.
+</p>
+<div>
+<span>١. مرحباً</span>
+</div>
+<br>
+<div>
+<span>٢. مرحباً</span>
path: css/css-text/letter-spacing/reference/letter-spacing-cursive-001-ref.html
user: login: seanand-dev
body: done
created_at: 2025-05-02T08:18:00Z
author_association: NONE

PR comments:
user: login: seanand-dev
created_at: 2025-05-02T08:25:17Z
body: > In addition to the comments made inline, here are two more requests:
> 
> The spec says:
> 
> > it must not apply spacing between any pair of that script’s [typographic letter units](https://drafts.csswg.org/css-text-4/#typographic-letter-unit) at all
> 
> The sample string does not only use Arabic typographic letter units, but also a space and a period, which are not typographic letter units, and thus should be spaced out. A simplified version of this test could be done based on a simpler string of Arabic text made exclusively of letters. (For instance, to keep close to what the example already uses, just "مرحباً"). Alternatively, you can keep the non-letter characters, but then in the second string, and both strings in the ref, you should add the spacing manually.
> 
> I'd say fixing this is a requirement for landing this test.
> 
> The spec says:
> 
> > If it is able, […]. Otherwise […]
> 
> This test only checks for the behavior defined in the "otherwise" case. In order to avoid having implementations fail the test if they do the main correct behavior, there should be [an additional alternative reference](https://web-platform-tests.org/writing-tests/reftests.html#multiple-references) for the other behavior. See [Example 41 in the spec](https://drafts.csswg.org/css-text-4/#example-9902d8b5). If necessary, that can be achieved by manually inserting "ـ" (U+0640 ـ ARABIC TATWEEL).
> 
> I'd say fixing this is a nice to have for landing this test. If we don't, it's always possible for the first implementation that does the "if it is able" behavior to later come back to this and add the variant at that point.

Added مرحباً as a sample text to keep this test aligned with spec
author_association: NONE
user: login: seanand-dev
created_at: 2025-05-02T17:39:17Z
body: @nox are we good to merge this PR ?
author_association: NONE