Bug 1738127 [wpt PR 31405] - [layout] Fix baseline synthesis., a=test…

…only Automatic update from web-platform-tests [layout] Fix baseline synthesis. Previously the APIs: - NGBoxFragment::BaselineOrSynthesize - NGBoxFragment::FirstBaselineOrSynthesize Always synthesized baselines from the block-end edge. Typically in a vertical writing-mode we should be synthesizing from the block-middle, except when we have "text-orientation: sideways". This changes the synthesis APIs to accept a FontBaseline parameter similar to BaselineMetrics to pick the right type of baseline. Change-Id: I2e153442af659c412b72ce70cc520731d46e83be Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3243263 Commit-Queue: Ian Kilpatrick <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Reviewed-by: David Grogan <[email protected]> Cr-Commit-Position: refs/heads/main@{#935691} -- wpt-commits: 9712e507531544038bf665d3ef27a7dac83c4cbe wpt-pr: 31405
jamienicol · Oct 29, 2021 · 6cd6d4f · 6cd6d4f
1 parent d763d3d
commit 6cd6d4f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-001.html b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-001.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: flex; writing-mode: vertical-rl; align-items: baseline; text-orientation: mixed;">
+  <div style="background: green; line-height: 100px; height: 50px; color: transparent;">text</div>
+  <div style="background: green; width: 100px; height: 50px;"></div> <!-- text-orientation: mixed should synthesize the baseline in the block middle. -->
+</div>
diff --git a/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-002.html b/testing/web-platform/tests/css/css-flexbox/baseline-synthesis-002.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="display: flex; writing-mode: vertical-rl; align-items: baseline; text-orientation: sideways; position: relative; background: red;">
+  <div style="background: green; line-height: 100px; font-size: 0; height: 50px;"><div style="display: inline-block;"></div></div>
+  <div style="background: green; width: 50px; height: 50px;"></div> <!-- text-orientation: sideways should synthesize the baseline at the block-end edge. -->
+  <div style="background: green; position: absolute; left: 0; bottom: 0; width: 50px; height: 50px;"></div>
+</div>