[baselines] Fix synthesising vertical baselines for flex.

Previously we always synthesized baselines (outsize an inline formatting context) using the block-end edge. This changes the behaviour to use the middle if in a vertical writing mode. This isn't "complete" as it is still missing the text-orientation logic, but significantly better. Bug: 1076080 Change-Id: I14f5aea5adb4f3afcd9194b6f4f9b54addeb54ea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2905738 Reviewed-by: David Grogan <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Reviewed-by: Kurt Catti-Schmidt <[email protected]> Commit-Queue: Ian Kilpatrick <[email protected]> Cr-Commit-Position: refs/heads/master@{#886062}
web-platform-tests · May 24, 2021 · 19c8f75 · 19c8f75
1 parent c21b0b8
commit 19c8f75
Showing 1 changed file with 26 additions and 0 deletions.
diff --git a/css/css-flexbox/synthesize-vrl-baseline.html b/css/css-flexbox/synthesize-vrl-baseline.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#generate-baselines">
+<link rel="help" href="https://www.w3.org/TR/css-inline-3/#valdef-dominant-baseline-auto">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<style>
+#inline-block {
+  display: inline-block;
+  width: 100px;
+  height: 50px;
+  background: green;
+}
+
+#inline-flex {
+  display: inline-flex;
+}
+
+#inline-flex > div {
+  width: 100px;
+  height: 50px;
+  background: green;
+}
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div style="width: 100px; height: 100px; line-height: 0; writing-mode: vertical-rl; background: red;">
+  <span id="inline-block"></span><span id="inline-flex"><div></div></span>
+</div>