From bbbbe87962ecab0c71b86a8c37a4718d34eca1c8 Mon Sep 17 00:00:00 2001
From: Manuel Rego Casasnovas <rego@igalia.com>
Date: Tue, 30 Nov 2021 04:28:15 +0000
Subject: [PATCH] Bug 1743382 [wpt PR 31775] - Reland "Initial support for
 text-decoration-line: spelling|grammar-error", a=testonly

Automatic update from web-platform-tests
Reland "Initial support for text-decoration-line: spelling|grammar-error"

This is a reland of 643df2d079fac73cb420e6cd074c79d5a739f63d

It missed rebaselines for Mac 10.12.

Original change's description:
> Initial support for text-decoration-line: spelling|grammar-error
>
> This adds the initial support for spelling-error and grammar-error
> values of text-decoration-line property.
>
> Main changes are in TextDecorationInfo, where we need to support
> the new values and paint the decoration correctly.
> In Mac platform we use a dotted decoration to match
> the platform conventions.
> In other platforms we use a wavy decoration, but we modify it
> so it looks similar to the spelling and grammar markers
> in Microsoft Word.
>
> It's important to note that this is just an intermediate step,
> as this is different than how we currently paint
> the spelling and grammar errors in DocumentMarkerPainter.
> The idea would be make DocumentMarkerPainter use CSS text decorations
> and then use this new code added here.
>
> There are some known issues:
> * The underline offset is not the same than in Microsoft Word,
>   but that's because of a problem with regular underlines
>   not using the font metrics to compute that offset (crbug.com/1273042).
> * We should allow to tweak the color with text-decoration-color,
>   added a TODO about that.
>
> BUG=1163436
>
> Change-Id: I117ad38fe3fc805619eb47b1df2f48c9d7c9a351
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3297885
> Commit-Queue: Delan Azabani <dazabani@igalia.com>
> Reviewed-by: Delan Azabani <dazabani@igalia.com>
> Reviewed-by: Stephen Chenney <schenney@chromium.org>
> Cr-Commit-Position: refs/heads/main@{#945876}

Bug: 1163436
Change-Id: I8c719644a611fef901ad60e25aa19f5b53ce199e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3306472
Reviewed-by: Delan Azabani <dazabani@igalia.com>
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Manuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/main@{#945958}

--

wpt-commits: 26d2cfcf89582cff18696e8ce37d05469d68323c
wpt-pr: 31775
---
 ...tion-line-grammar-error-color-001-ref.html | 12 +++++++++
 ...line-grammar-error-color-001.optional.html | 16 ++++++++++++
 ...tion-line-grammar-error-color-002-ref.html | 13 ++++++++++
 ...line-grammar-error-color-002.optional.html | 21 +++++++++++++++
 ...e-grammar-error-color-dynamic-001-ref.html | 13 ++++++++++
 ...mmar-error-color-dynamic-001.optional.html | 26 +++++++++++++++++++
 ...ion-line-spelling-error-color-001-ref.html | 12 +++++++++
 ...ine-spelling-error-color-001.optional.html | 16 ++++++++++++
 ...ion-line-spelling-error-color-002-ref.html | 13 ++++++++++
 ...ine-spelling-error-color-002.optional.html | 21 +++++++++++++++
 ...-spelling-error-color-dynamic-001-ref.html | 13 ++++++++++
 ...ling-error-color-dynamic-001.optional.html | 26 +++++++++++++++++++
 12 files changed, 202 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-001.optional.html
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-002.optional.html
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-dynamic-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-dynamic-001.optional.html
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-001.optional.html
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-002.optional.html
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-dynamic-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-dynamic-001.optional.html

diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-001-ref.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-001-ref.html
new file mode 100644
index 000000000000..2592110a1199
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  span {
+    text-decoration-line: grammar-error;
+  }
+</style>
+
+<p>The test passes if "quikc" has a grammar error marker that is not the default color (usually green).</p>
+<div>The <span>quikc</span> brown fox.</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-001.optional.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-001.optional.html
new file mode 100644
index 000000000000..6309d73a0e70
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-001.optional.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: text-decoration-line: grammar-error color</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-line-grammar-error">
+<meta name="assert" content="This test checks that it is possible to tweak the color of 'text-decoration-line: grammar-error' with 'text-decoration-color' property.">
+<link rel="mismatch" href="text-decoration-line-grammar-error-color-001-ref.html">
+<style>
+  span {
+    text-decoration-line: grammar-error;
+    text-decoration-color: rgba(200, 225, 50, 0.75);
+  }
+</style>
+
+<p>The test passes if "quikc" has a grammar error marker that is not the default color (usually green).</p>
+<div>The <span>quikc</span> brown fox.</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-002-ref.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-002-ref.html
new file mode 100644
index 000000000000..2416ba8dd6b7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-002-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  div {
+    padding: 10px;
+    background: cyan;
+  }
+</style>
+
+<p>The test passes if you cannot see a grammar error marker in the next sentence.</p>
+<div>The <span>quikc</span> brown fox.</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-002.optional.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-002.optional.html
new file mode 100644
index 000000000000..1758933a50ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-002.optional.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: text-decoration-line: grammar-error color</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-line-grammar-error">
+<meta name="assert" content="This test checks that it is possible to tweak the color of 'text-decoration-line: grammar-error' with 'text-decoration-color' property.">
+<link rel="match" href="text-decoration-line-grammar-error-color-002-ref.html">
+<style>
+  div {
+    padding: 10px;
+    background: cyan;
+  }
+
+  span {
+    text-decoration-line: grammar-error;
+    text-decoration-color: transparent;
+  }
+</style>
+
+<p>The test passes if you cannot see a grammar error marker in the next sentence.</p>
+<div>The <span>quikc</span> brown fox.</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-dynamic-001-ref.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-dynamic-001-ref.html
new file mode 100644
index 000000000000..e54b6814ec15
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-dynamic-001-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  span {
+    text-decoration-line: grammar-error;
+    text-decoration-color: magenta;
+  }
+</style>
+
+<p>The test passes if "quikc" has a magenta grammar error marker.</p>
+<div>The <span>quikc</span> brown fox.</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-dynamic-001.optional.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-dynamic-001.optional.html
new file mode 100644
index 000000000000..58ff6aeb5cdf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-grammar-error-color-dynamic-001.optional.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: text-decoration-line: grammar-error color dynamic</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-line-grammar-error">
+<meta name="assert" content="This test checks that it is possible to dinamically tweak the color of 'text-decoration-line: grammar-error' with 'text-decoration-color' property.">
+<link rel="match" href="text-decoration-line-grammar-error-color-dynamic-001-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+  span {
+    text-decoration-line: grammar-error;
+    text-decoration-color: cyan;
+  }
+</style>
+
+<p>The test passes if "quikc" has a magenta grammar error marker.</p>
+<div>The <span id="target">quikc</span> brown fox.</div>
+
+<script>
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    target.style.textDecorationColor = "magenta";
+    takeScreenshot();
+  }));
+</script>
+</html>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-001-ref.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-001-ref.html
new file mode 100644
index 000000000000..9cd5199eb85d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-001-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  span {
+    text-decoration-line: spelling-error;
+  }
+</style>
+
+<p>The test passes if "quikc" has a spelling error marker that is not the default color (usually red).</p>
+<div>The <span>quikc</span> brown fox.</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-001.optional.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-001.optional.html
new file mode 100644
index 000000000000..5e5475fe2dd5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-001.optional.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: text-decoration-line: spelling-error color</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-line-spelling-error">
+<meta name="assert" content="This test checks that it is possible to tweak the color of 'text-decoration-line: spelling-error' with 'text-decoration-color' property.">
+<link rel="mismatch" href="text-decoration-line-spelling-error-color-001-ref.html">
+<style>
+  span {
+    text-decoration-line: spelling-error;
+    text-decoration-color: rgba(200, 225, 50, 0.75);
+  }
+</style>
+
+<p>The test passes if "quikc" has a spelling error marker that is not the default color (usually red).</p>
+<div>The <span>quikc</span> brown fox.</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-002-ref.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-002-ref.html
new file mode 100644
index 000000000000..b8bd68118436
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-002-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  div {
+    padding: 10px;
+    background: cyan;
+  }
+</style>
+
+<p>The test passes if you cannot see a spelling error marker in the next sentence.</p>
+<div>The <span>quikc</span> brown fox.</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-002.optional.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-002.optional.html
new file mode 100644
index 000000000000..3a87976f2923
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-002.optional.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: text-decoration-line: spelling-error color</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-line-spelling-error">
+<meta name="assert" content="This test checks that it is possible to tweak the color of 'text-decoration-line: spelling-error' with 'text-decoration-color' property.">
+<link rel="match" href="text-decoration-line-spelling-error-color-002-ref.html">
+<style>
+  div {
+    padding: 10px;
+    background: cyan;
+  }
+
+  span {
+    text-decoration-line: spelling-error;
+    text-decoration-color: transparent;
+  }
+</style>
+
+<p>The test passes if you cannot see a spelling error marker in the next sentence.</p>
+<div>The <span>quikc</span> brown fox.</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-dynamic-001-ref.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-dynamic-001-ref.html
new file mode 100644
index 000000000000..e96898a81ef3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-dynamic-001-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: Reference</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+  span {
+    text-decoration-line: spelling-error;
+    text-decoration-color: magenta;
+  }
+</style>
+
+<p>The test passes if "quikc" has a magenta spelling error marker.</p>
+<div>The <span>quikc</span> brown fox.</div>
diff --git a/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-dynamic-001.optional.html b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-dynamic-001.optional.html
new file mode 100644
index 000000000000..d712e354bb94
--- /dev/null
+++ b/testing/web-platform/tests/css/css-text-decor/text-decoration-line-spelling-error-color-dynamic-001.optional.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8" />
+<title>CSS Text Decoration Test: text-decoration-line: spelling-error color dynamic</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#valdef-text-decoration-line-spelling-error">
+<meta name="assert" content="This test checks that it is possible to dinamically tweak the color of 'text-decoration-line: spelling-error' with 'text-decoration-color' property.">
+<link rel="match" href="text-decoration-line-spelling-error-color-dynamic-001-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<style>
+  span {
+    text-decoration-line: spelling-error;
+    text-decoration-color: cyan;
+  }
+</style>
+
+<p>The test passes if "quikc" has a magenta spelling error marker.</p>
+<div>The <span id="target">quikc</span> brown fox.</div>
+
+<script>
+  requestAnimationFrame(() => requestAnimationFrame(() => {
+    target.style.textDecorationColor = "magenta";
+    takeScreenshot();
+  }));
+</script>
+</html>