[layout] Fix synthesis of inline baselines.

Previously for <button>, <input type=button> (and friends), and <input type=range> we'd explicitly produce a baseline at appropriate "end" edge. This wasn't strictly correct instead we should be synthesizing them within LogicalBoxFragment::BaselineMetrics. There are three different ways to synthesize these baseline, off the margin-box (the default), content-box (buttons), and border-box (range and checkbox/radio with effective appearance). Instead of checking all these conditions, this patch introduces an additional field to the computed style to tell BaselineMetrics which edge the synthesize off. This patch changes two WPT tests which I believe were incorrect, see: #45889 The TL;DR is that: <button></button> <button style="contain:layout"></button> Currently have different baselines when they shouldn't. The image rebaselines are ensuring that we synthesize the baseline for range controls consistently. Previously we'd synthesize them off the border-box if they were in the same writing-mode, and off the margin-box if in a different writing-mode. Bug: 40937312 Change-Id: I28eedfbce58ead9d5e3119ae3b164c559fb9267c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5479489 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1293898}
web-platform-tests · Apr 30, 2024 · b312464 · b312464
1 parent 0ad7b70
commit b312464
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 4 deletions.
diff --git a/css/css-contain/contain-layout-baseline-005.html b/css/css-contain/contain-layout-baseline-005.html
@@ -43,7 +43,6 @@
 <div class="wrapper">
   <canvas></canvas>
   <div class="inline-block">foo</div>
-  <button>foo</button>
   <select><option>foo</option></select>
   <select multiple style="height: 40px;"><option>foo</option></select>
   <textarea style="height: 40px;"></textarea>

diff --git a/...ss-contain/contain-layout-button-001.html → .../contain-layout-button-001.tentative.html b/...ss-contain/contain-layout-button-001.html → .../contain-layout-button-001.tentative.html
@@ -5,7 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
 <link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align">
 <link rel="match" href="reference/contain-layout-button-001-ref.html">
-<meta name=assert content="Layout containment does apply to buttons, thus their baseline is their margin-bottom edge.">
+<meta name=assert content="Layout containment does apply to buttons, but in an inline context their baseline is synthesized from their content-box.">
 <style>
 button {
   border: 5px solid green;

diff --git a/css/css-contain/contain-layout-button-002.tentative.html b/css/css-contain/contain-layout-button-002.tentative.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="help" href="https://github.com/web-platform-tests/wpt/issues/45889">
+<link rel="match" href="reference/contain-layout-button-002-ref.html">
+<meta name=assert content="An empty button and a button with layout containment should align the same.">
+<style>
+button {
+  border: 5px solid green;
+  padding: 10px;
+  margin-bottom: 2px;
+  color: transparent;
+  width: 20px;
+  height: 20px;
+}
+</style>
+
+<p>This test passes if it has the same output as the reference.</p>
+<button></button> <button style="contain:layout"></button>
diff --git a/css/css-contain/reference/contain-layout-baseline-005-ref.html b/css/css-contain/reference/contain-layout-baseline-005-ref.html
@@ -39,7 +39,6 @@
 <div class="wrapper">
   <canvas></canvas>
   <div class="inline-block">foo</div>
-  <button>foo</button>
   <select><option>foo</option></select>
   <select multiple style="height: 40px;"><option>foo</option></select>
   <textarea style="height: 40px;"></textarea>

diff --git a/css/css-contain/reference/contain-layout-button-001-ref.html b/css/css-contain/reference/contain-layout-button-001-ref.html
@@ -7,7 +7,7 @@
   display: inline-block;
   border: 5px solid green;
   padding: 0;
-  margin-bottom: 2px;
+  margin-bottom: -5px;
   color: transparent;
   width: 0;
   height: 0px;

diff --git a/css/css-contain/reference/contain-layout-button-002-ref.html b/css/css-contain/reference/contain-layout-button-002-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<style>
+button {
+  border: 5px solid green;
+  padding: 10px;
+  margin-bottom: 2px;
+  color: transparent;
+  width: 20px;
+  height: 20px;
+}
+</style>
+<p>This test passes if it has the same output as the reference.</p>
+<button></button> <button></button>