WebKit export: Make text-box-edge inherited per spec update

https://bugs.webkit.org/show_bug.cgi?id=281590
web-platform-tests · Oct 21, 2024 · 288ee9d · 288ee9d
1 parent f7e1ba3
commit 288ee9d
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 13 deletions.
diff --git a/css/css-inline/text-box-trim/parsing/inheritance.html b/css/css-inline/text-box-trim/parsing/inheritance.html
@@ -9,6 +9,6 @@
  <div id="target"></div>
 </div>
 <script>
-assert_not_inherited('text-box-edge', 'auto', 'cap');
+assert_inherited('text-box-edge', 'auto', 'cap');
 assert_not_inherited('text-box-trim', 'none', 'trim-start');
 </script>
diff --git a/css/css-inline/text-box-trim/text-box-trim-accumulation-001-ref.html b/css/css-inline/text-box-trim/text-box-trim-accumulation-001-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<style>
+@import "support/TestMetricsFont.css";
+
+body {
+ font: 100px/1 MetricsTestFont;
+}
+.spacer {
+ background: lightgray;
+ block-size: 100px;
+}
+.target-first {
+ margin-block: -60px 50px;
+}
+.target-second {
+ margin-block: 50px 0px;
+}
+</style>
+<div class="spacer"></div>
+<div class="target-first">ApÉx</div>
+<div class="spacer"></div>
+<div class="target-second">ApÉx</div>
+<div class="spacer"></div>
diff --git a/css/css-inline/text-box-trim/text-box-trim-accumulation-001.html b/css/css-inline/text-box-trim/text-box-trim-accumulation-001.html
@@ -1,33 +1,45 @@
 <!DOCTYPE html>
-<title>Test choosing the innermost for `text-box-trim` for requested trim metric</title>
+<title>Test choosing the correct text-box-edge value for requested trim metric</title>
 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
 <meta name="assert"
- content="If multiple ancestors specify trimming on the same line box,
- the text-box-edge value used is that of the innermost block container
- that requests trimming on that side of the line box."
-> <!-- https://github.com/w3c/csswg-drafts/issues/5426 -->
-<link rel="match" href="text-box-trim-start-001-ref.html?class=text">
+ content="text-box-edge is an inherited property and trim metric should be used accordingly."
+> <!-- https://github.com/w3c/csswg-drafts/issues/10904 -->
+<link rel="match" href="text-box-trim-accumulation-001-ref.html">
 <style>
-@import "support/MetricsTestFont.css";
+@import "support/TestMetricsFont.css";
 
 .spacer {
  block-size: 100px;
  background: lightgray;
 }
-.target {
+
+.inner {
  font: 100px/2 MetricsTestFont;
 }
-.target, .outer {
+.outer {
  text-box-trim: trim-start;
+ text-box-edge: auto;
+}
+
+.middle {
+ text-box-trim: trim-end;
+ text-box-edge: text alphabetic;
 }
-.outer, .inner {
- text-box-edge: ex; /* ignored */
+
+.inner:first-child {
+ text-box-edge: ex alphabetic;
+}
+
+.inner:last-child {
+ text-box-edge: text;
 }
 </style>
 <div class="spacer"></div>
 <div class="outer">
- <div class="target">
+ <div class="middle">
+ <div class="inner">ApÉx</div>
+ <div class="spacer"></div>
  <div class="inner">ApÉx</div>
  </div>
 </div>

diff --git a/css/css-inline/text-box-trim/text-box-trim-not-ignore-nested-text-box-edge-ref.html b/css/css-inline/text-box-trim/text-box-trim-not-ignore-nested-text-box-edge-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.spacer {
+ background: lightgray;
+ block-size: 100px;
+}
+.target {
+ font: 50px/1 Ahem;
+}
+</style>
+<div class="spacer"></div>
+<div class="target">ABC</div>
+<div class="spacer"></div>
diff --git a/css/css-inline/text-box-trim/text-box-trim-not-ignore-nested-text-box-edge.html b/css/css-inline/text-box-trim/text-box-trim-not-ignore-nested-text-box-edge.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>No need to consult the block container requesting the trim for text-box-edge</title>
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
+<link rel="match" href="text-box-trim-not-ignore-nested-text-box-edge-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<!-- https://github.com/w3c/csswg-drafts/issues/10904 -->
+<style>
+.spacer {
+ background: lightgray;
+ block-size: 100px;
+}
+.target {
+ font: 50px/2 Ahem;
+ text-box-trim: trim-both;
+ text-box-edge: ex alphabetic;
+}
+.inner {
+ text-box-edge: auto;
+ /* auto keyword uses the value of line-fit-edge on the root inline box of the the affected line box,
+ interpreting leading (the initial value) as text. */
+}
+</style>
+<div class="spacer"></div>
+<div class="target">
+ <div class="inner">ABC</div>
+</div>
+<div class="spacer"></div>