commit bf31f953e3a22fd452526ab0e6b1c379dad62d3d parent 0dd3ceed2259b83e601b8bea5ac77748c5912e1a Author: Manuel Rego Casasnovas <rego@igalia.com> Date: Tue, 21 Oct 2025 10:35:29 +0000 Bug 1995007 [wpt PR 55508] - Move caret-shape block tests to WPT, a=testonly Automatic update from web-platform-tests Move caret-shape block tests to WPT This moves the caret-shape block tests to WPT. The tests use contenteditable in the test itself, and custom highlights in the reference file. caret-shape-block-001-sideways-lr.html needs fuzzy matching because it fails in Mac due to a very small difference. A specific test for textareas is added too. Bug: 353713061 Change-Id: Ib4d578bbde889626feb23316a5bdf2219b483996 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7053243 Commit-Queue: Stephen Chenney <schenney@chromium.org> Commit-Queue: Manuel Rego <rego@igalia.com> Reviewed-by: Ziran Sun <zsun@igalia.com> Reviewed-by: Stephen Chenney <schenney@chromium.org> Auto-Submit: Manuel Rego <rego@igalia.com> Cr-Commit-Position: refs/heads/main@{#1531416} -- wpt-commits: 484f79c0e4152c30178617685cb82ef8b1ec983f wpt-pr: 55508 Diffstat:
21 files changed, 593 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-ref.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<script src="/common/reftest-wait.js"></script> +<style> + #target { + font-size: 3em; + } + #target::highlight(caret) { + background: lime; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="target">test</div> +<script> + let range = new Range(); + range.setStart(target.firstChild, 0); + range.setEnd(target.firstChild, 1); + CSS.highlights.set("caret", new Highlight(range)); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-ref.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<script src="/common/reftest-wait.js"></script> +<style> + #target { + direction: rtl; + font-size: 3em; + } + #target::highlight(caret) { + background: lime; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="target">امتحان</div> +<script> + let range = new Range(); + range.setStart(target.firstChild, 0); + range.setEnd(target.firstChild, 1); + CSS.highlights.set("caret", new Highlight(range)); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-sideways-lr-ref.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-sideways-lr-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: sideways-lr; + width: stretch; + } + #target { + direction: rtl; + font-size: 3em; + } + #target::highlight(caret) { + background: lime; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target">امتحان</div> +</div> +<script> + let range = new Range(); + range.setStart(target.firstChild, 0); + range.setEnd(target.firstChild, 1); + CSS.highlights.set("caret", new Highlight(range)); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-sideways-lr.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-sideways-lr.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>caret-shape block RTL sideways-lr</title> +<link rel=help href="https://drafts.csswg.org/css-ui/#caret-shape"> +<link rel=match href="caret-shape-block-001-rtl-sideways-lr-ref.html"> +<meta name="assert" content="Test checks that caret-shape block works as expected in RTL in sideways-lr writing mode"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: sideways-lr; + width: stretch; + } + #target { + direction: rtl; + font-size: 3em; + caret-color: lime; + caret-shape: block; + caret-animation: manual; + } + #target:focus { + outline: none; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target" contenteditable spellcheck="false">امتحان</div> +</div> +<script> + document.getElementById("target").focus(); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-sideways-rl-ref.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-sideways-rl-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: sideways-rl; + width: stretch; + } + #target { + direction: rtl; + font-size: 3em; + } + #target::highlight(caret) { + background: lime; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target">امتحان</div> +</div> +<script> + let range = new Range(); + range.setStart(target.firstChild, 0); + range.setEnd(target.firstChild, 1); + CSS.highlights.set("caret", new Highlight(range)); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-sideways-rl.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-sideways-rl.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>caret-shape block RTL sideways-rl</title> +<link rel=help href="https://drafts.csswg.org/css-ui/#caret-shape"> +<link rel=match href="caret-shape-block-001-rtl-sideways-rl-ref.html"> +<meta name="assert" content="Test checks that caret-shape block works as expected in RTL in sideways-rl writing mode"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: sideways-rl; + width: stretch; + } + #target { + direction: rtl; + font-size: 3em; + caret-color: lime; + caret-shape: block; + caret-animation: manual; + } + #target:focus { + outline: none; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target" contenteditable spellcheck="false">امتحان</div> +</div> +<script> + document.getElementById("target").focus(); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-vlr-ref.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-vlr-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: vertical-lr; + width: stretch; + } + #target { + direction: rtl; + font-size: 3em; + } + #target::highlight(caret) { + background: lime; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target">امتحان</div> +</div> +<script> + let range = new Range(); + range.setStart(target.firstChild, 0); + range.setEnd(target.firstChild, 1); + CSS.highlights.set("caret", new Highlight(range)); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-vlr.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-vlr.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>caret-shape block RTL vertical-lr</title> +<link rel=help href="https://drafts.csswg.org/css-ui/#caret-shape"> +<link rel=match href="caret-shape-block-001-rtl-vlr-ref.html"> +<meta name="assert" content="Test checks that caret-shape block works as expected in RTL in vertical-lr writing mode"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: vertical-lr; + width: stretch; + } + #target { + direction: rtl; + font-size: 3em; + caret-color: lime; + caret-shape: block; + caret-animation: manual; + } + #target:focus { + outline: none; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target" contenteditable spellcheck="false">امتحان</div> +</div> +<script> + document.getElementById("target").focus(); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-vrl-ref.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-vrl-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: vertical-rl; + width: stretch; + } + #target { + direction: rtl; + font-size: 3em; + } + #target::highlight(caret) { + background: lime; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target">امتحان</div> +</div> +<script> + let range = new Range(); + range.setStart(target.firstChild, 0); + range.setEnd(target.firstChild, 1); + CSS.highlights.set("caret", new Highlight(range)); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-vrl.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl-vrl.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>caret-shape block RTL vertical-rl</title> +<link rel=help href="https://drafts.csswg.org/css-ui/#caret-shape"> +<link rel=match href="caret-shape-block-001-rtl-vrl-ref.html"> +<meta name="assert" content="Test checks that caret-shape block works as expected in RTL in vertical-rl writing mode"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: vertical-rl; + width: stretch; + } + #target { + direction: rtl; + font-size: 3em; + caret-color: lime; + caret-shape: block; + caret-animation: manual; + } + #target:focus { + outline: none; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target" contenteditable spellcheck="false">امتحان</div> +</div> +<script> + document.getElementById("target").focus(); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-rtl.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>caret-shape block RTL</title> +<link rel=help href="https://drafts.csswg.org/css-ui/#caret-shape"> +<link rel=match href="caret-shape-block-001-rtl-ref.html"> +<meta name="assert" content="Test checks that caret-shape block works as expected in RTL"> +<script src="/common/reftest-wait.js"></script> +<style> + #target { + direction: rtl; + font-size: 3em; + caret-color: lime; + caret-shape: block; + caret-animation: manual; + } + #target:focus { + outline: none; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="target" contenteditable spellcheck="false">امتحان</div> +<script> + document.getElementById("target").focus(); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-sideways-lr-ref.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-sideways-lr-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: sideways-lr; + width: stretch; + } + #target { + font-size: 3em; + } + #target::highlight(caret) { + background: lime; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target">test</div> +</div> +<script> + let range = new Range(); + range.setStart(target.firstChild, 0); + range.setEnd(target.firstChild, 1); + CSS.highlights.set("caret", new Highlight(range)); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-sideways-lr.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-sideways-lr.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>caret-shape block sideways-lr</title> +<link rel=help href="https://drafts.csswg.org/css-ui/#caret-shape"> +<link rel=match href="caret-shape-block-001-sideways-lr-ref.html"> +<meta name="fuzzy" content="maxDifference=0-255;totalPixels=50-100"> +<meta name="assert" content="Test checks that caret-shape block works as expected in sideways-lr writing mode"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: sideways-lr; + width: stretch; + } + #target { + font-size: 3em; + caret-color: lime; + caret-shape: block; + caret-animation: manual; + } + #target:focus { + outline: none; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target" contenteditable spellcheck="false">test</div> +</div> +<script> + document.getElementById("target").focus(); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-sideways-rl-ref.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-sideways-rl-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: sideways-rl; + width: stretch; + } + #target { + font-size: 3em; + } + #target::highlight(caret) { + background: lime; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target">test</div> +</div> +<script> + let range = new Range(); + range.setStart(target.firstChild, 0); + range.setEnd(target.firstChild, 1); + CSS.highlights.set("caret", new Highlight(range)); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-sideways-rl.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-sideways-rl.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>caret-shape block sideways-rl</title> +<link rel=help href="https://drafts.csswg.org/css-ui/#caret-shape"> +<link rel=match href="caret-shape-block-001-sideways-rl-ref.html"> +<meta name="assert" content="Test checks that caret-shape block works as expected in sideways-rl writing mode"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: sideways-rl; + width: stretch; + } + #target { + font-size: 3em; + caret-color: lime; + caret-shape: block; + caret-animation: manual; + } + #target:focus { + outline: none; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target" contenteditable spellcheck="false">test</div> +</div> +<script> + document.getElementById("target").focus(); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-vlr-ref.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-vlr-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: vertical-lr; + width: stretch; + } + #target { + font-size: 3em; + } + #target::highlight(caret) { + background: lime; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target">test</div> +</div> +<script> + let range = new Range(); + range.setStart(target.firstChild, 0); + range.setEnd(target.firstChild, 1); + CSS.highlights.set("caret", new Highlight(range)); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-vlr.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-vlr.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>caret-shape block vertical-lr</title> +<link rel=help href="https://drafts.csswg.org/css-ui/#caret-shape"> +<link rel=match href="caret-shape-block-001-vlr-ref.html"> +<meta name="assert" content="Test checks that caret-shape block works as expected in vertical-lr writing mode"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: vertical-lr; + width: stretch; + } + #target { + font-size: 3em; + caret-color: lime; + caret-shape: block; + caret-animation: manual; + } + #target:focus { + outline: none; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target" contenteditable spellcheck="false">test</div> +</div> +<script> + document.getElementById("target").focus(); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-vrl-ref.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-vrl-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: vertical-rl; + width: stretch; + } + #target { + font-size: 3em; + } + #target::highlight(caret) { + background: lime; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target">test</div> +</div> +<script> + let range = new Range(); + range.setStart(target.firstChild, 0); + range.setEnd(target.firstChild, 1); + CSS.highlights.set("caret", new Highlight(range)); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001-vrl.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001-vrl.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>caret-shape block vertical-rl</title> +<link rel=help href="https://drafts.csswg.org/css-ui/#caret-shape"> +<link rel=match href="caret-shape-block-001-vrl-ref.html"> +<meta name="assert" content="Test checks that caret-shape block works as expected in vertical-rl writing mode"> +<script src="/common/reftest-wait.js"></script> +<style> + #wrapper { + writing-mode: vertical-rl; + width: stretch; + } + #target { + font-size: 3em; + caret-color: lime; + caret-shape: block; + caret-animation: manual; + } + #target:focus { + outline: none; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="wrapper"> + <div id="target" contenteditable spellcheck="false">test</div> +</div> +<script> + document.getElementById("target").focus(); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-001.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>caret-shape block</title> +<link rel=help href="https://drafts.csswg.org/css-ui/#caret-shape"> +<link rel=match href="caret-shape-block-001-ref.html"> +<meta name="assert" content="Test checks that caret-shape block works as expected"> +<script src="/common/reftest-wait.js"></script> +<style> + #target { + font-size: 3em; + caret-color: lime; + caret-shape: block; + caret-animation: manual; + } + #target:focus { + outline: none; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<div id="target" contenteditable spellcheck="false">test</div> +<script> + document.getElementById("target").focus(); + takeScreenshot(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-shape-block-002.html b/testing/web-platform/tests/css/css-ui/caret-shape-block-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>caret-shape block in textarea</title> +<link rel=help href="https://drafts.csswg.org/css-ui/#caret-shape"> +<link rel=match href="caret-shape-block-001-ref.html"> +<meta name="assert" content="Test checks that caret-shape block works as expected in a textarea"> +<script src="/common/reftest-wait.js"></script> +<style> + #target { + all: unset; + font-size: 3em; + caret-color: lime; + caret-shape: block; + caret-animation: manual; + } + #target:focus { + outline: none; + } +</style> +<p>Test passes if, when the text below is focused for editing, the text insertion caret is a lime block.</p> +<textarea id="target" spellcheck="false">test</textarea> +<script> + document.getElementById("target").focus(); + takeScreenshot(); +</script>