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
This commit is contained in:
Manuel Rego Casasnovas 2021-11-30 04:28:15 +00:00 коммит произвёл moz-wptsync-bot
Родитель 1f3c137361
Коммит bbbbe87962
12 изменённых файлов: 202 добавлений и 0 удалений

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>

Просмотреть файл

@ -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>