Bug 1509438 [wpt PR 14196] - [css-contain] Fix baseline for elements with contain: layout, a=testonly
☠☠ backed out by fb94ec981a7d ☠ ☠
authorManuel Rego Casasnovas <rego@igalia.com>
Fri, 30 Nov 2018 18:02:59 +0000
changeset 449807 35ab42d3626edfff31aca708a491c4eab362d9e6
parent 449806 41e2805d6b57858452a1fb367d9ab3d17bd2f55f
child 449808 39dc1e17f38859e860ff1ffca2fd356627458ae8
push id110426
push userwptsync@mozilla.com
push dateTue, 11 Dec 2018 03:07:11 +0000
treeherdermozilla-inbound@fcd0236d7afa [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1509438, 14196, 907709, 1348892, 610833
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1509438 [wpt PR 14196] - [css-contain] Fix baseline for elements with contain: layout, a=testonly Automatic update from web-platform-tests [css-contain] Fix baseline for elements with contain: layout Layout containment elements are treated as having no baseline, when that's applied to table cells, flex or grid items that are baseline aligned that means that they should use their synthesized baseline. The patch adds simple check in LayoutBlockFlow::FirstLineBoxBaseline() similar to what we have in other methods. If the element has layout containment it has no baseline (it returns -1). The same thing is done in LayoutNGMixin<Base>::FragmentBaseline() for LayoutNG. Two tests from the WPT suite has been modified in order to avoid baseline alignment as they are not checking that feature of layout containment but something else. BUG=907709 TEST=external/wpt/css/css-contain/contain-layout-baseline-002.html TEST=external/wpt/css/css-contain/contain-layout-baseline-003.html TEST=external/wpt/css/css-contain/contain-layout-baseline-004.html Change-Id: Id393787dd24bf3e34aaf73476e446fb9d0a4e593 Reviewed-on: https://chromium-review.googlesource.com/c/1348892 Commit-Queue: Manuel Rego <rego@igalia.com> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/master@{#610833} -- wpt-commits: 3b78c96b77028a81550e43f3561c2c32d23358ab wpt-pr: 14196
testing/web-platform/tests/css/css-contain/contain-layout-baseline-002.html
testing/web-platform/tests/css/css-contain/contain-layout-baseline-003.html
testing/web-platform/tests/css/css-contain/contain-layout-baseline-004.html
testing/web-platform/tests/css/css-contain/contain-layout-cell-001.html
testing/web-platform/tests/css/css-contain/contain-layout-cell-002.html
testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-004-ref.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-baseline-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Layout containment supress baseline in flex items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<meta name=assert content="Flex items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the flex item's border box when they're baseline aligned.">
+<style>
+#flex {
+  display: inline-flex;
+  align-items: baseline;
+  background: red;
+}
+
+canvas {
+  background: green;
+  width: 50px;
+  height: 100px;
+}
+
+#item {
+  contain: layout;
+  color: transparent;
+  background: green;
+  width: 50px;
+  height: 100px;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="flex">
+  <canvas></canvas>
+  <div id="item">item</div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-baseline-003.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Layout containment supress baseline in grid items</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<meta name=assert content="Grid items with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the grid item's border box when they're baseline aligned.">
+<style>
+#grid {
+  display: inline-grid;
+  align-items: baseline;
+  background: red;
+  grid-auto-flow: column;
+}
+
+canvas {
+  background: green;
+  width: 50px;
+  height: 100px;
+}
+
+#item {
+  contain: layout;
+  color: transparent;
+  background: green;
+  width: 50px;
+  height: 100px;
+}
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id="grid">
+  <canvas></canvas>
+  <div id="item">item</div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-baseline-004.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Layout containment supress baseline in table cells</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
+<link rel="match" href="reference/contain-layout-baseline-004-ref.html">
+<meta name=assert content="Table cells with layout containment are treated as having no baseline, for that reason their baseline is synthesized from the cell's border box when they're baseline aligned.">
+<style>
+#table {
+  display: table;
+  font: 100px/1 Ahem;
+}
+
+#table > * {
+  display: table-cell;
+}
+
+#first {
+  color: blue;
+}
+
+#second {
+  color: green;
+  contain: layout;
+}
+</style>
+<p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p>
+<div id="table">
+  <div id="first">X</div>
+  <div id="second">X</div>
+</div>
--- a/testing/web-platform/tests/css/css-contain/contain-layout-cell-001.html
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-cell-001.html
@@ -26,16 +26,17 @@
     {
       display: table-row;
     }
 
   div.cell
     {
       background-color: white;
       display: table-cell;
+      vertical-align: top;
     }
 
   div#contain
     {
       contain: layout;
     }
 
   span
--- a/testing/web-platform/tests/css/css-contain/contain-layout-cell-002.html
+++ b/testing/web-platform/tests/css/css-contain/contain-layout-cell-002.html
@@ -20,17 +20,17 @@
       table-layout: fixed;
       width: 206px;
     }
 
   td
     {
       background-color: white;
       padding: 0px;
-      vertical-align: baseline;
+      vertical-align: top;
     }
 
   td#contain
     {
       contain: layout;
     }
 
   span
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-004-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Containment Test: Reference file</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<style>
+div {
+  display: inline-block;
+  font: 100px/1 Ahem;
+  width: 100px;
+  height: 100px;
+}
+#first {
+  color: blue;
+  position: relative;
+  top: 20px;
+}
+#second {
+  color: green;
+}
+</style>
+<p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p>
+<div id="first">X</div><div id="second">X</div>