[text-box-trim] Add tests for atomic inlines

This patch adds tests to ensure that the `text-box-trim` property trims the line containing atomic inlines, but it doesn't propagate into the atomic inline, and therefore the lines inside of the atomic inline isn't trimmed. This patch has no behavior changes. Bug: 40254880 Change-Id: I7ffd34238a30f0178b4070dc23452e5e59c47fd4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5588337 Auto-Submit: Koji Ishii <[email protected]> Reviewed-by: Kent Tamura <[email protected]> Commit-Queue: Kent Tamura <[email protected]> Cr-Commit-Position: refs/heads/main@{#1309110}
web-platform-tests · Jun 2, 2024 · b71de6e · b71de6e
1 parent 9ef1d0c
commit b71de6e
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001-ref.html b/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.spacer {
+  background: lightgray;
+  block-size: 100px;
+}
+.target {
+  font-family: Ahem;
+  font-size: 100px;
+  line-height: 2;
+  position: relative;
+  top: -50px;
+  height: 100px;
+}
+.atomic {
+  display: inline-block;
+  background: lime;
+}
+</style>
+<div class="spacer"></div>
+<div class="target">
+  <span class="atomic">X</span>
+</div>
+<div class="spacer"></div>
diff --git a/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001.html b/css/css-inline/text-box-trim/text-box-trim-atomic-inline-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Test the `text-box-trim` isn't propagated into atomic inlines</title>
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-edge">
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#propdef-text-box-trim">
+<link rel="match" href="text-box-trim-atomic-inline-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.spacer {
+  background: lightgray;
+  block-size: 100px;
+}
+.target {
+  font-family: Ahem;
+  font-size: 100px;
+  line-height: 2;
+  text-box-trim: both;
+  text-box-edge: text;
+}
+.atomic {
+  display: inline-block;
+  background: lime;
+}
+</style>
+<div class="spacer"></div>
+<div class="target">
+  <span class="atomic">X</span>
+</div>
+<div class="spacer"></div>