[baselines] Fix synthesising vertical baselines for flex.

bfgeek · chromium-wpt-export-bot · commit 19c8f7524e18 · 2021-05-24T14:15:58.000-07:00
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 <dgrogan@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#886062}
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>
