[css-flex][css-grid] Fix synthesized baseline
authorrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 12 Apr 2019 12:04:20 +0000 (12:04 +0000)
committerrego@igalia.com <rego@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 12 Apr 2019 12:04:20 +0000 (12:04 +0000)
https://bugs.webkit.org/show_bug.cgi?id=196312

Reviewed by Javier Fernandez.

LayoutTests/imported/w3c:

Imported some tests from WPT css-align test suite that are fixed with this patch.

* resources/import-expectations.json:
* web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001-expected.txt: Added.
* web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html: Added.
* web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001-expected.txt: Added.
* web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html: Added.
* web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001-expected.txt: Added.
* web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html: Added.
* web-platform-tests/css/css-align/baseline-rules/w3c-import.log: Added.

Source/WebCore:

When a flex or grid container has no baseline,
its baseline should be synthesized from the border edges.
The same happens for flex and grid items.

Right now we were using the content box in some cases
and even using the margin box in a particular scenario.
The patch fixes this.

At the same time this is also fixing the baseline for
inline flex/grid containers to make it interoperable with Firefox.
Inline blocks have a special behavior per legacy reasons,
which applies to inline flex/grid containers when they have no items;
otherwise the items should be used to compute its baseline.
See more at: https://github.com/w3c/csswg-drafts/issues/3416

Note that we need to keep current behavior for buttons,
as the flexbox spec doesn't apply to them.

Tests: css3/flexbox/flexbox-baseline-margins.html
       fast/css-grid-layout/grid-baseline-margins-1.html
       fast/css-grid-layout/grid-baseline-margins-2.html
       imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html
       imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html
       imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html

* rendering/RenderButton.cpp:
(WebCore::synthesizedBaselineFromContentBox):
(WebCore::RenderButton::baselinePosition const):
* rendering/RenderButton.h:
* rendering/RenderFlexibleBox.cpp:
(WebCore::synthesizedBaselineFromBorderBox):
(WebCore::RenderFlexibleBox::baselinePosition const):
(WebCore::RenderFlexibleBox::firstLineBaseline const):
(WebCore::RenderFlexibleBox::inlineBlockBaseline const):
* rendering/RenderGrid.cpp:
(WebCore::RenderGrid::baselinePosition const):
(WebCore::RenderGrid::inlineBlockBaseline const):

LayoutTests:

Some of the tests were not checking the right behavior changed them to test the expected one.
We need new rebaselines for some tests.

* TestExpectations:
* css3/flexbox/flexbox-baseline-margins.html:
* fast/css-grid-layout/grid-baseline-expected.html:
* fast/css-grid-layout/grid-baseline-margins-1-expected.html: Renamed from LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html.
* fast/css-grid-layout/grid-baseline-margins-1.html: Renamed from LayoutTests/fast/css-grid-layout/grid-baseline-margins.html.
* fast/css-grid-layout/grid-baseline-margins-2-expected.html: Added.
* fast/css-grid-layout/grid-baseline-margins-2.html: Added.
* fast/css-grid-layout/grid-baseline.html: This test is modified and split in two parts as it doesn't fit in the viewport.
* platform/gtk/css3/flexbox/flexbox-baseline-margins-expected.png:
* platform/gtk/css3/flexbox/flexbox-baseline-margins-expected.txt:
* platform/ios/css3/flexbox/flexbox-baseline-margins-expected.png: Added.
* platform/ios/css3/flexbox/flexbox-baseline-margins-expected.txt:
* platform/mac/css3/flexbox/flexbox-baseline-margins-expected.png: Added.
* platform/mac/css3/flexbox/flexbox-baseline-margins-expected.txt:
* platform/win/css3/flexbox/flexbox-baseline-margins-expected.png: Added.
* platform/win/css3/flexbox/flexbox-baseline-margins-expected.txt:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@244213 268f45cc-cd09-0410-ab3c-d52691b4dbfc

31 files changed:
LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/css3/flexbox/flexbox-baseline-margins.html
LayoutTests/fast/css-grid-layout/grid-baseline-expected.html
LayoutTests/fast/css-grid-layout/grid-baseline-margins-1-expected.html [moved from LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html with 66% similarity]
LayoutTests/fast/css-grid-layout/grid-baseline-margins-1.html [moved from LayoutTests/fast/css-grid-layout/grid-baseline-margins.html with 64% similarity]
LayoutTests/fast/css-grid-layout/grid-baseline-margins-2-expected.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-baseline-margins-2.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/grid-baseline.html
LayoutTests/imported/w3c/ChangeLog
LayoutTests/imported/w3c/resources/import-expectations.json
LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001-expected.txt [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/w3c-import.log [new file with mode: 0644]
LayoutTests/platform/gtk/css3/flexbox/flexbox-baseline-margins-expected.png
LayoutTests/platform/gtk/css3/flexbox/flexbox-baseline-margins-expected.txt
LayoutTests/platform/ios/css3/flexbox/flexbox-baseline-margins-expected.png [new file with mode: 0644]
LayoutTests/platform/ios/css3/flexbox/flexbox-baseline-margins-expected.txt
LayoutTests/platform/mac/css3/flexbox/flexbox-baseline-margins-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/flexbox/flexbox-baseline-margins-expected.txt
LayoutTests/platform/win/css3/flexbox/flexbox-baseline-margins-expected.png [new file with mode: 0644]
LayoutTests/platform/win/css3/flexbox/flexbox-baseline-margins-expected.txt
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderButton.cpp
Source/WebCore/rendering/RenderButton.h
Source/WebCore/rendering/RenderFlexibleBox.cpp
Source/WebCore/rendering/RenderGrid.cpp

index 9033bfe..00f8cb1 100644 (file)
@@ -1,3 +1,30 @@
+2019-04-12  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-flex][css-grid] Fix synthesized baseline
+        https://bugs.webkit.org/show_bug.cgi?id=196312
+
+        Reviewed by Javier Fernandez.
+
+        Some of the tests were not checking the right behavior changed them to test the expected one.
+        We need new rebaselines for some tests.
+
+        * TestExpectations:
+        * css3/flexbox/flexbox-baseline-margins.html:
+        * fast/css-grid-layout/grid-baseline-expected.html:
+        * fast/css-grid-layout/grid-baseline-margins-1-expected.html: Renamed from LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html.
+        * fast/css-grid-layout/grid-baseline-margins-1.html: Renamed from LayoutTests/fast/css-grid-layout/grid-baseline-margins.html.
+        * fast/css-grid-layout/grid-baseline-margins-2-expected.html: Added.
+        * fast/css-grid-layout/grid-baseline-margins-2.html: Added.
+        * fast/css-grid-layout/grid-baseline.html: This test is modified and split in two parts as it doesn't fit in the viewport.
+        * platform/gtk/css3/flexbox/flexbox-baseline-margins-expected.png:
+        * platform/gtk/css3/flexbox/flexbox-baseline-margins-expected.txt:
+        * platform/ios/css3/flexbox/flexbox-baseline-margins-expected.png: Added.
+        * platform/ios/css3/flexbox/flexbox-baseline-margins-expected.txt:
+        * platform/mac/css3/flexbox/flexbox-baseline-margins-expected.png: Added.
+        * platform/mac/css3/flexbox/flexbox-baseline-margins-expected.txt:
+        * platform/win/css3/flexbox/flexbox-baseline-margins-expected.png: Added.
+        * platform/win/css3/flexbox/flexbox-baseline-margins-expected.txt:
+
 2019-04-11  Carlos Garcia Campos  <cgarcia@igalia.com>
 
         [GTK] REGRESSION(r243860): Many tests failing
index 7ec0844..bdc45ae 100644 (file)
@@ -614,8 +614,6 @@ webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap-reverse.html [ Ima
 webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap.html [ ImageOnlyFailure ]
 
 # grid layout tests
-webkit.org/b/165062 fast/css-grid-layout/grid-baseline.html [ ImageOnlyFailure ]
-webkit.org/b/165062 fast/css-grid-layout/grid-baseline-margins.html [ ImageOnlyFailure ]
 webkit.org/b/169271 imported/w3c/web-platform-tests/css/css-grid/grid-items/grid-items-sizing-alignment-001.html [ ImageOnlyFailure ]
 webkit.org/b/191465 imported/w3c/web-platform-tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001.html [ ImageOnlyFailure ]
 webkit.org/b/191465 imported/w3c/web-platform-tests/css/css-grid/abspos/grid-item-absolute-positioning-dynamic-001.html [ ImageOnlyFailure ]
index ffbd357..cc580ce 100644 (file)
@@ -60,26 +60,29 @@ bottom of
       <div class="flex-one" style="background-color: lightgrey;"></div>
   </div>
 </div>
-the grey
-<div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div>
-box.
+the grey box.
 </div>
 
 <div>
-Should align
-with the
+Should align with the
 <div class="inline-block">
-  <div class="flexbox" style="background-color: pink">
+  <div class="flexbox" style="background-color: white">
       <div class="flex-one border padding margin" style="background-color: lightgrey;"></div>
   </div>
 </div>
-middle of
+bottom of the pink box.
+</div>
+
+<div>
+Should align 8px
+<div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div>
+below the bottom
 <div class="inline-flexbox margin border padding"></div>
-the grey box.
+of the pink box.
 </div>
 
 <div>
-Should align with the top
+Should align with the bottom
 <div class="inline-block border margin padding" style="background-color: pink">
   <div class="flexbox border margin padding" style="width: 50px; height: 50px; background-color: pink">
       <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin-top: 4px; border-top: 9px solid pink;"></div>
@@ -89,13 +92,13 @@ of the horizontal scrollbar.
 </div>
 
 <div>
-Should align 10px above the
+Should align 10px below the
 <div class="inline-block" style="background-color: pink">
   <div class="flexbox" style="width: 50px; height: 50px; background-color: pink">
-      <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px"></div>
+      <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px; border-bottom: 10px solid pink;"></div>
   </div>
 </div>
-horizontal scrollbar, if one is visible.
+of the horizontal scrollbar, if one is visible.
 </div>
 
 </body>
index e81733a..6a02ae4 100644 (file)
@@ -43,14 +43,13 @@ before text
 after text
 </div>
 
-<!-- This flexbox has a baseline flexitem, but it's orthogonal so it doesn't
-participate in baseline alignment. Instead, the baseline is the first flex
-item's baseline. -->
+<!-- This grid has a baseline item, it's orthogonal but it still participates
+in baseline alignment. -->
 <div>
 before text
 <div class="inline-flexbox" style="height: 40px">
-    <div style="align-self: flex-end">baseline</div>
-    <div style="align-self: baseline; writing-mode: vertical-rl"></div>
+    <div style="align-self: flex-end">below</div>
+    <div style="align-self: baseline; margin-top: 20px"></div>
     <div style="align-self: flex-start">above</div>
 </div>
 after text
@@ -84,12 +83,12 @@ should align with the middle
 of the grey box
 </div>
 
-<!-- If there are no flexitems, align to the bottom of the box. -->
+<!-- If there are no flexitems, align to the bottom of the margin box. -->
 <div>
-should align with the bottom
+should align below the bottom
 <div class="empty inline-flexbox" style="width: 30px; height: 30px">
 </div>
-of the grey box
+of the black line
 </div>
 
 <!-- If the griditem has not a natural baseline, align to the bottom of the box. -->
@@ -52,40 +52,23 @@ bottom of
       <div class="flex-one" style="background-color: lightgrey;"></div>
   </div>
 </div>
-the grey
-<div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div>
-box.
+the grey box.
 </div>
 
 <div>
-Should align
-with the
+Should align with the
 <div class="inline-block">
-  <div class="flexbox" style="background-color: pink">
+  <div class="flexbox" style="background-color: white">
       <div class="flex-one border padding margin" style="background-color: lightgrey;"></div>
   </div>
 </div>
-middle of
-<div class="inline-flexbox margin border padding"></div>
-the grey box.
+bottom of the pink box.
 </div>
 
 <div>
-Should align with the top
-<div class="inline-block border margin padding" style="background-color: pink">
-  <div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink">
-      <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
-  </div>
-</div>
-of the horizontal scrollbar.
-</div>
-
-<div>
-Should align 10px above the
-<div class="inline-block" style="background-color: pink">
-  <div class="flexbox" style="width: 100px; height: 100px; background-color: pink">
-      <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
-  </div>
-</div>
-horizontal scrollbar, if one is visible.
+Should align 8px
+<div class="inline-flexbox margin border" style="width: 30px; height: 30px;"></div>
+below the bottom
+<div class="inline-flexbox margin border padding"></div>
+of the pink box.
 </div>
@@ -40,40 +40,23 @@ bottom of
       <div style="background-color: lightgrey;"></div>
   </div>
 </div>
-the grey
-<div class="inline-grid margin border" style="grid-template-columns: 30px; grid-template-rows: 30px;"></div>
-box.
+the grey box.
 </div>
 
 <div>
-Should align
-with the
+Should align with the
 <div class="inline-block">
-  <div class="grid" style="background-color: pink">
+  <div class="grid" style="background-color: white">
       <div class="border padding margin" style="background-color: lightgrey;"></div>
   </div>
 </div>
-middle of
-<div class="inline-grid margin border padding"></div>
-the grey box.
+bottom of the pink box.
 </div>
 
 <div>
-Should align with the top
-<div class="inline-block border margin padding" style="background-color: pink">
-  <div class="grid border margin padding" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
-      <div style="overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
-  </div>
-</div>
-of the horizontal scrollbar.
-</div>
-
-<div>
-Should align 10px above the
-<div class="inline-block" style="background-color: pink">
-  <div class="grid" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
-      <div style="overflow: scroll; padding-bottom: 10px; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
-  </div>
-</div>
-horizontal scrollbar, if one is visible.
+Should align 8px
+<div class="inline-grid margin border" style="grid-template-columns: 30px; grid-template-rows: 30px;"></div>
+below the bottom
+<div class="inline-grid margin border padding"></div>
+of the pink box.
 </div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-baseline-margins-2-expected.html b/LayoutTests/fast/css-grid-layout/grid-baseline-margins-2-expected.html
new file mode 100644 (file)
index 0000000..7eca2ce
--- /dev/null
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<style>
+.flexbox {
+    display: -webkit-flex;
+    display: flex;
+}
+.inline-flexbox {
+    display: -webkit-inline-flex;
+    display: inline-flex;
+}
+.flex-one {
+    -webkit-flex: 1;
+    flex: 1;
+}
+.inline-block { display: inline-block; }
+.flexbox, .inline-flexbox { background-color: lightgrey; }
+.border { border: 11px solid pink; }
+.padding { padding: 13px; }
+.margin { margin: 8px 0; }
+.flexbox > div {
+    min-width: 0;
+    min-height: 0;
+}
+</style>
+<p>This test ensures that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders.</p>
+
+<div>
+Should align with the bottom
+<div class="inline-block border margin padding" style="background-color: pink">
+  <div class="flexbox border margin padding" style="width: 100px; height: 100px; background-color: pink">
+      <div style="width: 200px; overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div>
+  </div>
+</div>
+of the horizontal scrollbar.
+</div>
+
+<div>
+Should align 10px below the
+<div class="inline-block" style="background-color: pink">
+  <div class="flexbox" style="width: 100px; height: 100px; background-color: pink">
+      <div style="width: 200px; overflow: scroll; background-color: lightgrey; padding-bottom: 10px; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
+  </div>
+</div>
+horizontal scrollbar, if one is visible.
+</div>
diff --git a/LayoutTests/fast/css-grid-layout/grid-baseline-margins-2.html b/LayoutTests/fast/css-grid-layout/grid-baseline-margins-2.html
new file mode 100644 (file)
index 0000000..dcfb998
--- /dev/null
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.inline-block { display: inline-block; }
+.grid, .inline-grid {
+   background-color: lightgrey;
+   grid-auto-flow: column;
+}
+.border { border: 11px solid pink; }
+.padding { padding: 13px; }
+.margin { margin: 8px 0; }
+</style>
+<p>This test ensures that Baseline Alignment works for 1-dimensional Grid like in Flexible Box, even using margins, paddings and borders.</p>
+
+<div>
+Should align with the bottom
+<div class="inline-block border margin padding" style="background-color: pink">
+  <div class="grid border margin padding" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
+      <div style="overflow: scroll; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink;"></div>
+  </div>
+</div>
+of the horizontal scrollbar.
+</div>
+
+<div>
+Should align 10px below the
+<div class="inline-block" style="background-color: pink">
+  <div class="grid" style="grid-template-columns: 100px; grid-template-rows: 100px; background-color: pink">
+      <div style="overflow: scroll; padding-bottom: 10px; background-color: lightgrey; margin: 10px 0px; border-top: 10px solid pink; border-bottom: 10px solid pink;"></div>
+  </div>
+</div>
+horizontal scrollbar, if one is visible.
+</div>
index 451a1b3..009098e 100644 (file)
@@ -50,14 +50,13 @@ before text
 after text
 </div>
 
-<!-- This grid has a baseline item, but it's orthogonal so it doesn't
-participate in baseline alignment. Instead, the baseline is the first grid
-item's baseline. -->
+<!-- This grid has a baseline item, it's orthogonal but it still participates
+in baseline alignment. -->
 <div>
 before text
 <div class="inline-grid" style="grid-auto-rows: 40px">
-    <div style="align-self: end">baseline</div>
-    <div style="align-self: baseline; writing-mode: vertical-rl"></div>
+    <div style="align-self: end">below</div>
+    <div style="align-self: baseline; margin-top: 20px; writing-mode: vertical-rl"></div>
     <div style="align-self: start">above</div>
 </div>
 after text
@@ -91,12 +90,12 @@ should align with the middle
 of the grey box
 </div>
 
-<!-- If there are no griditems, align to the bottom of the box. -->
+<!-- If there are no griditems, align to the bottom of the margin box. -->
 <div>
-should align with the bottom
-<div class="inline-grid" style="width: 30px; height: 30px">
+should align below the bottom
+<div class="empty inline-grid" style="width: 30px; height: 30px">
 </div>
-of the grey box
+of the black line
 </div>
 
 <div>
index 6e02707..784a7b1 100644 (file)
@@ -1,3 +1,21 @@
+2019-04-12  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-flex][css-grid] Fix synthesized baseline
+        https://bugs.webkit.org/show_bug.cgi?id=196312
+
+        Reviewed by Javier Fernandez.
+
+        Imported some tests from WPT css-align test suite that are fixed with this patch.
+
+        * resources/import-expectations.json:
+        * web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001-expected.txt: Added.
+        * web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html: Added.
+        * web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001-expected.txt: Added.
+        * web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html: Added.
+        * web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001-expected.txt: Added.
+        * web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html: Added.
+        * web-platform-tests/css/css-align/baseline-rules/w3c-import.log: Added.
+
 2019-04-11  Youenn Fablet  <youenn@apple.com>
 
         Support RTCDataChannel blob binaryType
index 9bc675a..2b3c2bc 100644 (file)
     "web-platform-tests/worklets": "skip", 
     "web-platform-tests/x-frame-options": "skip", 
     "web-platform-tests/xhr": "import"
-}
\ No newline at end of file
+}
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001-expected.txt
new file mode 100644 (file)
index 0000000..bf1d009
--- /dev/null
@@ -0,0 +1,14 @@
+
+PASS .wrapper 1 
+PASS .wrapper 2 
+PASS .wrapper 3 
+PASS .wrapper 4 
+PASS .wrapper 5 
+PASS .wrapper 6 
+PASS .wrapper 7 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html
new file mode 100644 (file)
index 0000000..af2dac4
--- /dev/null
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: Synthesized baseline flexbox</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
+<meta name="flags" content="ahem">
+<meta name="assert" content="This test check the synthesized of a flexbox container if it has no items (it should use the flex container margin box) or if the items have no baseline (in that case it should use the flex item's border box).">
+<style>
+.wrapper {
+  border: solid thick;
+  position: relative;
+  width: 200px;
+  height: 150px;
+  margin: 10px;
+}
+canvas {
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+.magenta-dotted-border {
+  border: 5px dotted magenta;
+}
+.border-padding-margin {
+  border: 10px solid cyan;
+  padding: 15px;
+  margin: 20px 0px;
+  background: yellow;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.wrapper')">
+
+<div id="log"></div>
+
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-flex;" class="border-padding-margin"
+      data-offset-y="30"></div>
+</div>
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-block;" class="magenta-dotted-border"
+      data-offset-y="5">
+    <div style="display: inline-flex;" class="border-padding-margin"
+        data-offset-y="30"></div>
+  </div>
+</div>
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-block;" class="magenta-dotted-border"
+      data-offset-y="0">
+    <div style="display: flex;" class="border-padding-margin"
+        data-offset-y="25"></div>
+  </div>
+</div>
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-flex;" class="magenta-dotted-border"
+      data-offset-y="25">
+    <div class="border-padding-margin" data-offset-y="50"></div>
+  </div>
+</div>
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-block;" class="magenta-dotted-border"
+      data-offset-y="25">
+    <div style="display: flex;"
+        data-offset-y="30">
+      <div class="border-padding-margin" data-offset-y="50"></div>
+    </div>
+  </div>
+</div>
+<div class="wrapper" style="display: flex; align-items: baseline;">
+  <canvas></canvas>
+  <div style="display: inline-flex;" class="magenta-dotted-border"
+      data-offset-y="25">
+    <div class="border-padding-margin" data-offset-y="50"></div>
+  </div>
+</div>
+<div class="wrapper" style="display: flex; align-items: baseline;">
+  <canvas></canvas>
+  <div style="display: flex;" class="magenta-dotted-border"
+      data-offset-y="25">
+    <div class="border-padding-margin" data-offset-y="50"></div>
+  </div>
+</div>
+
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001-expected.txt
new file mode 100644 (file)
index 0000000..bf1d009
--- /dev/null
@@ -0,0 +1,14 @@
+
+PASS .wrapper 1 
+PASS .wrapper 2 
+PASS .wrapper 3 
+PASS .wrapper 4 
+PASS .wrapper 5 
+PASS .wrapper 6 
+PASS .wrapper 7 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html
new file mode 100644 (file)
index 0000000..50ffdd1
--- /dev/null
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: Synthesized baseline grid container</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-baselines">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-align-items-baseline">
+<meta name="flags" content="ahem">
+<meta name="assert" content="This test check the synthesized of a grid container if it has no items (it should use the grid container margin box) or if the items have no baseline (in that case it should use the grid item's border box).">
+<style>
+.wrapper {
+  border: solid thick;
+  position: relative;
+  width: 300px;
+  height: 150px;
+  margin: 10px;
+}
+canvas {
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+.magenta-dotted-border {
+  border: 5px dotted magenta;
+}
+.border-padding-margin {
+  border: 10px solid cyan;
+  padding: 15px;
+  margin: 20px 0px;
+  background: yellow;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.wrapper')">
+
+<div id="log"></div>
+
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-grid;" class="border-padding-margin"
+      data-offset-y="30"></div>
+</div>
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-block;" class="magenta-dotted-border"
+      data-offset-y="5">
+    <div style="display: inline-grid;" class="border-padding-margin"
+        data-offset-y="30"></div>
+  </div>
+</div>
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-block;" class="magenta-dotted-border"
+      data-offset-y="0">
+    <div style="display: grid;" class="border-padding-margin"
+        data-offset-y="25"></div>
+  </div>
+</div>
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-grid;" class="magenta-dotted-border"
+      data-offset-y="25">
+    <div class="border-padding-margin" data-offset-y="50"></div>
+  </div>
+</div>
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-block;" class="magenta-dotted-border"
+      data-offset-y="25">
+    <div style="display: grid;"
+        data-offset-y="30">
+      <div class="border-padding-margin" data-offset-y="50"></div>
+    </div>
+  </div>
+</div>
+<div class="wrapper" style="display: flex; align-items: baseline;">
+  <canvas></canvas>
+  <div style="display: inline-grid;" class="magenta-dotted-border"
+      data-offset-y="25">
+    <div class="border-padding-margin" data-offset-y="50"></div>
+  </div>
+</div>
+<div class="wrapper" style="display: flex; align-items: baseline;">
+  <canvas></canvas>
+  <div style="display: grid;" class="magenta-dotted-border"
+      data-offset-y="25">
+    <div class="border-padding-margin" data-offset-y="50"></div>
+  </div>
+</div>
+
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001-expected.txt
new file mode 100644 (file)
index 0000000..a349bd1
--- /dev/null
@@ -0,0 +1,8 @@
+
+PASS .wrapper 1 
+PASS .wrapper 2 
+PASS .wrapper 3 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html
new file mode 100644 (file)
index 0000000..fde0c2c
--- /dev/null
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: Synthesized baseline inline blocks</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules">
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#alignment-baseline-property">
+<meta name="flags" content="ahem">
+<meta name="assert" content="Inline blocks synthesized baseline use the margin box.">
+<style>
+.wrapper {
+  border: solid thick;
+  position: relative;
+  width: 200px;
+  height: 150px;
+  margin: 10px;
+}
+canvas {
+  width: 100px;
+  height: 100px;
+  background: blue;
+}
+.magenta-dotted-border {
+  border: 5px dotted magenta;
+}
+.border-padding-margin {
+  border: 10px solid cyan;
+  padding: 15px;
+  margin: 20px 0px;
+  background: yellow;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.wrapper')">
+
+<div id="log"></div>
+
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-block;" class="border-padding-margin"
+      data-offset-y="30"></div>
+</div>
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-block;" class="magenta-dotted-border"
+      data-offset-y="5">
+    <div style="display: inline-block;" class="border-padding-margin"
+        data-offset-y="30"></div>
+  </div>
+</div>
+<div class="wrapper">
+  <canvas></canvas>
+  <div style="display: inline-block;" class="magenta-dotted-border"
+      data-offset-y="0">
+    <div class="border-padding-margin" data-offset-y="25"></div>
+  </div>
+</div>
+
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/w3c-import.log b/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/w3c-import.log
new file mode 100644 (file)
index 0000000..dda6b3a
--- /dev/null
@@ -0,0 +1,19 @@
+The tests in this directory were imported from the W3C repository.
+Do NOT modify these tests directly in WebKit.
+Instead, create a pull request on the WPT github:
+       https://github.com/web-platform-tests/wpt
+
+Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
+
+Do NOT modify or remove this file.
+
+------------------------------------------------------------------------
+Properties requiring vendor prefixes:
+None
+Property values requiring vendor prefixes:
+None
+------------------------------------------------------------------------
+List of files:
+/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html
index 1bdc4bf..081e906 100644 (file)
Binary files a/LayoutTests/platform/gtk/css3/flexbox/flexbox-baseline-margins-expected.png and b/LayoutTests/platform/gtk/css3/flexbox/flexbox-baseline-margins-expected.png differ
index 166ccba..569ebe5 100644 (file)
@@ -1,8 +1,8 @@
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x491
-  RenderBlock {HTML} at (0,0) size 800x491
-    RenderBody {BODY} at (8,8) size 784x475
+layer at (0,0) size 800x567
+  RenderBlock {HTML} at (0,0) size 800x567
+    RenderBody {BODY} at (8,8) size 784x551
       RenderBlock {DIV} at (0,0) size 784x69
         RenderText {#text} at (0,28) size 71x17
           text run at (0,28) width 71: "before text "
@@ -29,37 +29,40 @@ layer at (0,0) size 800x491
         RenderBlock {DIV} at (382,0) size 72x114
           RenderFlexibleBox {DIV} at (0,21) size 72x72 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
             RenderBlock {DIV} at (11,11) size 50x50 [bgcolor=#D3D3D3]
-        RenderText {#text} at (454,68) size 59x17
-          text run at (454,68) width 59: " the grey "
-        RenderFlexibleBox {DIV} at (513,41) size 52x52 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (565,68) size 32x17
-          text run at (565,68) width 32: " box."
+        RenderText {#text} at (454,68) size 87x17
+          text run at (454,68) width 87: " the grey box."
       RenderBlock {DIV} at (0,183) size 784x64
-        RenderText {#text} at (0,18) size 139x17
-          text run at (0,18) width 139: "Should align with the "
+        RenderText {#text} at (0,42) size 139x17
+          text run at (0,42) width 139: "Should align with the "
         RenderBlock {DIV} at (139,0) size 48x64
-          RenderFlexibleBox {DIV} at (0,0) size 48x64 [bgcolor=#FFC0CB]
+          RenderFlexibleBox {DIV} at (0,0) size 48x64 [bgcolor=#FFFFFF]
             RenderBlock {DIV} at (0,8) size 48x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (187,18) size 68x17
-          text run at (187,18) width 68: " middle of "
-        RenderFlexibleBox {DIV} at (255,8) size 48x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (303,18) size 87x17
-          text run at (303,18) width 87: " the grey box."
-      RenderBlock {DIV} at (0,247) size 784x178
-        RenderText {#text} at (0,85) size 163x17
-          text run at (0,85) width 163: "Should align with the top "
-        RenderBlock {DIV} at (163,8) size 146x162 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (187,42) size 152x17
+          text run at (187,42) width 152: " bottom of the pink box."
+      RenderBlock {DIV} at (0,247) size 784x72
+        RenderText {#text} at (0,54) size 112x17
+          text run at (0,54) width 112: "Should align 8px "
+        RenderFlexibleBox {DIV} at (112,8) size 52x52 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (164,54) size 118x17
+          text run at (164,54) width 118: " below the bottom "
+        RenderFlexibleBox {DIV} at (282,12) size 48x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (330,54) size 104x17
+          text run at (330,54) width 104: " of the pink box."
+      RenderBlock {DIV} at (0,319) size 784x178
+        RenderText {#text} at (0,100) size 187x17
+          text run at (0,100) width 187: "Should align with the bottom "
+        RenderBlock {DIV} at (187,8) size 146x162 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
           RenderFlexibleBox {DIV} at (24,32) size 98x98 [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (309,85) size 169x17
-          text run at (309,85) width 169: " of the horizontal scrollbar."
-      RenderBlock {DIV} at (0,425) size 784x50
-        RenderText {#text} at (0,11) size 185x17
-          text run at (0,11) width 185: "Should align 10px above the "
-        RenderBlock {DIV} at (185,0) size 50x50 [bgcolor=#FFC0CB]
+        RenderText {#text} at (333,100) size 169x17
+          text run at (333,100) width 169: " of the horizontal scrollbar."
+      RenderBlock {DIV} at (0,497) size 784x54
+        RenderText {#text} at (0,36) size 186x17
+          text run at (0,36) width 186: "Should align 10px below the "
+        RenderBlock {DIV} at (186,0) size 50x50 [bgcolor=#FFC0CB]
           RenderFlexibleBox {DIV} at (0,0) size 50x50
-        RenderText {#text} at (235,11) size 232x17
-          text run at (235,11) width 232: " horizontal scrollbar, if one is visible."
-layer at (219,323) size 50x46 clip at (219,332) size 35x22
+        RenderText {#text} at (236,36) size 272x17
+          text run at (236,36) width 272: " of the horizontal scrollbar, if one is visible."
+layer at (243,395) size 50x46 clip at (243,404) size 35x22
   RenderBlock {DIV} at (24,28) size 50x46 [bgcolor=#D3D3D3] [border: (9px solid #FFC0CB) none]
-layer at (193,433) size 50x50 clip at (193,433) size 35x35
-  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#D3D3D3]
+layer at (194,505) size 50x50 clip at (194,505) size 35x25
+  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#D3D3D3] [border: none (10px solid #FFC0CB) none]
diff --git a/LayoutTests/platform/ios/css3/flexbox/flexbox-baseline-margins-expected.png b/LayoutTests/platform/ios/css3/flexbox/flexbox-baseline-margins-expected.png
new file mode 100644 (file)
index 0000000..fd38cc7
Binary files /dev/null and b/LayoutTests/platform/ios/css3/flexbox/flexbox-baseline-margins-expected.png differ
index 536b0e5..0d8916d 100644 (file)
@@ -1,8 +1,8 @@
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x491
-  RenderBlock {HTML} at (0,0) size 800x491
-    RenderBody {BODY} at (8,8) size 784x475
+layer at (0,0) size 800x569
+  RenderBlock {HTML} at (0,0) size 800x569
+    RenderBody {BODY} at (8,8) size 784x553
       RenderBlock {DIV} at (0,0) size 784x69
         RenderText {#text} at (0,28) size 73x19
           text run at (0,28) width 73: "before text "
@@ -29,37 +29,40 @@ layer at (0,0) size 800x491
         RenderBlock {DIV} at (385,0) size 73x114
           RenderFlexibleBox {DIV} at (0,21) size 72x72 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
             RenderBlock {DIV} at (11,11) size 50x50 [bgcolor=#D3D3D3]
-        RenderText {#text} at (457,67) size 61x19
-          text run at (457,67) width 61: " the grey "
-        RenderFlexibleBox {DIV} at (517,41) size 53x52 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (569,67) size 33x19
-          text run at (569,67) width 33: " box."
+        RenderText {#text} at (457,67) size 89x19
+          text run at (457,67) width 89: " the grey box."
       RenderBlock {DIV} at (0,183) size 784x64
-        RenderText {#text} at (0,17) size 142x19
-          text run at (0,17) width 142: "Should align with the "
+        RenderText {#text} at (0,41) size 142x19
+          text run at (0,41) width 142: "Should align with the "
         RenderBlock {DIV} at (141,0) size 49x64
-          RenderFlexibleBox {DIV} at (0,0) size 48x64 [bgcolor=#FFC0CB]
+          RenderFlexibleBox {DIV} at (0,0) size 48x64 [bgcolor=#FFFFFF]
             RenderBlock {DIV} at (0,8) size 48x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (189,17) size 71x19
-          text run at (189,17) width 71: " middle of "
-        RenderFlexibleBox {DIV} at (259,8) size 49x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (307,17) size 89x19
-          text run at (307,17) width 89: " the grey box."
-      RenderBlock {DIV} at (0,247) size 784x178
-        RenderText {#text} at (0,84) size 166x19
-          text run at (0,84) width 166: "Should align with the top "
-        RenderBlock {DIV} at (165,8) size 147x162 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (189,41) size 155x19
+          text run at (189,41) width 155: " bottom of the pink box."
+      RenderBlock {DIV} at (0,247) size 784x73
+        RenderText {#text} at (0,53) size 114x19
+          text run at (0,53) width 114: "Should align 8px "
+        RenderFlexibleBox {DIV} at (113,8) size 53x52 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (165,53) size 121x19
+          text run at (165,53) width 121: " below the bottom "
+        RenderFlexibleBox {DIV} at (285,12) size 49x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (333,53) size 106x19
+          text run at (333,53) width 106: " of the pink box."
+      RenderBlock {DIV} at (0,320) size 784x178
+        RenderText {#text} at (0,99) size 191x19
+          text run at (0,99) width 191: "Should align with the bottom "
+        RenderBlock {DIV} at (190,8) size 147x162 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
           RenderFlexibleBox {DIV} at (24,32) size 98x98 [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (311,84) size 174x19
-          text run at (311,84) width 174: " of the horizontal scrollbar."
-      RenderBlock {DIV} at (0,425) size 784x50
-        RenderText {#text} at (0,10) size 188x19
-          text run at (0,10) width 188: "Should align 10px above the "
+        RenderText {#text} at (336,99) size 174x19
+          text run at (336,99) width 174: " of the horizontal scrollbar."
+      RenderBlock {DIV} at (0,498) size 784x55
+        RenderText {#text} at (0,35) size 188x19
+          text run at (0,35) width 188: "Should align 10px below the "
         RenderBlock {DIV} at (187,0) size 51x50 [bgcolor=#FFC0CB]
           RenderFlexibleBox {DIV} at (0,0) size 50x50
-        RenderText {#text} at (237,10) size 239x19
-          text run at (237,10) width 239: " horizontal scrollbar, if one is visible."
-layer at (222,323) size 50x46 clip at (222,332) size 35x22
+        RenderText {#text} at (237,35) size 281x19
+          text run at (237,35) width 281: " of the horizontal scrollbar, if one is visible."
+layer at (247,396) size 50x46 clip at (247,405) size 35x22
   RenderBlock {DIV} at (24,28) size 50x46 [bgcolor=#D3D3D3] [border: (9px solid #FFC0CB) none]
-layer at (195,433) size 50x50 clip at (195,433) size 35x35
-  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#D3D3D3]
+layer at (196,506) size 50x50 clip at (196,506) size 35x25
+  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#D3D3D3] [border: none (10px solid #FFC0CB) none]
diff --git a/LayoutTests/platform/mac/css3/flexbox/flexbox-baseline-margins-expected.png b/LayoutTests/platform/mac/css3/flexbox/flexbox-baseline-margins-expected.png
new file mode 100644 (file)
index 0000000..dadb96b
Binary files /dev/null and b/LayoutTests/platform/mac/css3/flexbox/flexbox-baseline-margins-expected.png differ
index 495e634..a88d8ca 100644 (file)
@@ -1,8 +1,8 @@
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x491
-  RenderBlock {HTML} at (0,0) size 800x491
-    RenderBody {BODY} at (8,8) size 784x475
+layer at (0,0) size 800x567
+  RenderBlock {HTML} at (0,0) size 800x567
+    RenderBody {BODY} at (8,8) size 784x551
       RenderBlock {DIV} at (0,0) size 784x69
         RenderText {#text} at (0,28) size 73x18
           text run at (0,28) width 73: "before text "
@@ -29,37 +29,40 @@ layer at (0,0) size 800x491
         RenderBlock {DIV} at (385,0) size 73x114
           RenderFlexibleBox {DIV} at (0,21) size 72x72 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
             RenderBlock {DIV} at (11,11) size 50x50 [bgcolor=#D3D3D3]
-        RenderText {#text} at (457,68) size 61x18
-          text run at (457,68) width 61: " the grey "
-        RenderFlexibleBox {DIV} at (517,41) size 53x52 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (569,68) size 33x18
-          text run at (569,68) width 33: " box."
+        RenderText {#text} at (457,68) size 89x18
+          text run at (457,68) width 89: " the grey box."
       RenderBlock {DIV} at (0,183) size 784x64
-        RenderText {#text} at (0,18) size 142x18
-          text run at (0,18) width 142: "Should align with the "
+        RenderText {#text} at (0,42) size 142x18
+          text run at (0,42) width 142: "Should align with the "
         RenderBlock {DIV} at (141,0) size 49x64
-          RenderFlexibleBox {DIV} at (0,0) size 48x64 [bgcolor=#FFC0CB]
+          RenderFlexibleBox {DIV} at (0,0) size 48x64 [bgcolor=#FFFFFF]
             RenderBlock {DIV} at (0,8) size 48x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (189,18) size 71x18
-          text run at (189,18) width 71: " middle of "
-        RenderFlexibleBox {DIV} at (259,8) size 49x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (307,18) size 89x18
-          text run at (307,18) width 89: " the grey box."
-      RenderBlock {DIV} at (0,247) size 784x178
-        RenderText {#text} at (0,85) size 166x18
-          text run at (0,85) width 166: "Should align with the top "
-        RenderBlock {DIV} at (165,8) size 147x162 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (189,42) size 155x18
+          text run at (189,42) width 155: " bottom of the pink box."
+      RenderBlock {DIV} at (0,247) size 784x72
+        RenderText {#text} at (0,54) size 114x18
+          text run at (0,54) width 114: "Should align 8px "
+        RenderFlexibleBox {DIV} at (113,8) size 53x52 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (165,54) size 121x18
+          text run at (165,54) width 121: " below the bottom "
+        RenderFlexibleBox {DIV} at (285,12) size 49x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (333,54) size 106x18
+          text run at (333,54) width 106: " of the pink box."
+      RenderBlock {DIV} at (0,319) size 784x178
+        RenderText {#text} at (0,100) size 191x18
+          text run at (0,100) width 191: "Should align with the bottom "
+        RenderBlock {DIV} at (190,8) size 147x162 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
           RenderFlexibleBox {DIV} at (24,32) size 98x98 [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (311,85) size 174x18
-          text run at (311,85) width 174: " of the horizontal scrollbar."
-      RenderBlock {DIV} at (0,425) size 784x50
-        RenderText {#text} at (0,11) size 188x18
-          text run at (0,11) width 188: "Should align 10px above the "
+        RenderText {#text} at (336,100) size 174x18
+          text run at (336,100) width 174: " of the horizontal scrollbar."
+      RenderBlock {DIV} at (0,497) size 784x54
+        RenderText {#text} at (0,36) size 188x18
+          text run at (0,36) width 188: "Should align 10px below the "
         RenderBlock {DIV} at (187,0) size 51x50 [bgcolor=#FFC0CB]
           RenderFlexibleBox {DIV} at (0,0) size 50x50
-        RenderText {#text} at (237,11) size 239x18
-          text run at (237,11) width 239: " horizontal scrollbar, if one is visible."
-layer at (222,323) size 50x46 clip at (222,332) size 35x22
+        RenderText {#text} at (237,36) size 281x18
+          text run at (237,36) width 281: " of the horizontal scrollbar, if one is visible."
+layer at (247,395) size 50x46 clip at (247,404) size 35x22
   RenderBlock {DIV} at (24,28) size 50x46 [bgcolor=#D3D3D3] [border: (9px solid #FFC0CB) none]
-layer at (195,433) size 50x50 clip at (195,433) size 35x35
-  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#D3D3D3]
+layer at (196,505) size 50x50 clip at (196,505) size 35x25
+  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#D3D3D3] [border: none (10px solid #FFC0CB) none]
diff --git a/LayoutTests/platform/win/css3/flexbox/flexbox-baseline-margins-expected.png b/LayoutTests/platform/win/css3/flexbox/flexbox-baseline-margins-expected.png
new file mode 100644 (file)
index 0000000..7861a89
Binary files /dev/null and b/LayoutTests/platform/win/css3/flexbox/flexbox-baseline-margins-expected.png differ
index 972fac6..bc2c9e4 100644 (file)
@@ -1,8 +1,8 @@
 layer at (0,0) size 800x600
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x491
-  RenderBlock {HTML} at (0,0) size 800x491
-    RenderBody {BODY} at (8,8) size 784x475
+layer at (0,0) size 800x567
+  RenderBlock {HTML} at (0,0) size 800x567
+    RenderBody {BODY} at (8,8) size 784x551
       RenderBlock {DIV} at (0,0) size 784x69
         RenderText {#text} at (0,28) size 71x18
           text run at (0,28) width 71: "before text "
@@ -29,37 +29,40 @@ layer at (0,0) size 800x491
         RenderBlock {DIV} at (382,0) size 72x114
           RenderFlexibleBox {DIV} at (0,21) size 72x72 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
             RenderBlock {DIV} at (11,11) size 50x50 [bgcolor=#D3D3D3]
-        RenderText {#text} at (454,68) size 59x18
-          text run at (454,68) width 59: " the grey "
-        RenderFlexibleBox {DIV} at (513,41) size 52x52 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (565,68) size 32x18
-          text run at (565,68) width 32: " box."
+        RenderText {#text} at (454,68) size 87x18
+          text run at (454,68) width 87: " the grey box."
       RenderBlock {DIV} at (0,183) size 784x64
-        RenderText {#text} at (0,18) size 139x18
-          text run at (0,18) width 139: "Should align with the "
+        RenderText {#text} at (0,42) size 139x18
+          text run at (0,42) width 139: "Should align with the "
         RenderBlock {DIV} at (139,0) size 48x64
-          RenderFlexibleBox {DIV} at (0,0) size 48x64 [bgcolor=#FFC0CB]
+          RenderFlexibleBox {DIV} at (0,0) size 48x64 [bgcolor=#FFFFFF]
             RenderBlock {DIV} at (0,8) size 48x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (187,18) size 68x18
-          text run at (187,18) width 68: " middle of "
-        RenderFlexibleBox {DIV} at (255,8) size 48x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (303,18) size 87x18
-          text run at (303,18) width 87: " the grey box."
-      RenderBlock {DIV} at (0,247) size 784x178
-        RenderText {#text} at (0,85) size 163x18
-          text run at (0,85) width 163: "Should align with the top "
-        RenderBlock {DIV} at (163,8) size 146x162 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (187,42) size 152x18
+          text run at (187,42) width 152: " bottom of the pink box."
+      RenderBlock {DIV} at (0,247) size 784x72
+        RenderText {#text} at (0,54) size 112x18
+          text run at (0,54) width 112: "Should align 8px "
+        RenderFlexibleBox {DIV} at (112,8) size 52x52 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (164,54) size 118x18
+          text run at (164,54) width 118: " below the bottom "
+        RenderFlexibleBox {DIV} at (282,12) size 48x48 [bgcolor=#D3D3D3] [border: (11px solid #FFC0CB)]
+        RenderText {#text} at (330,54) size 104x18
+          text run at (330,54) width 104: " of the pink box."
+      RenderBlock {DIV} at (0,319) size 784x178
+        RenderText {#text} at (0,100) size 187x18
+          text run at (0,100) width 187: "Should align with the bottom "
+        RenderBlock {DIV} at (187,8) size 146x162 [bgcolor=#FFC0CB] [border: (11px solid #FFC0CB)]
           RenderFlexibleBox {DIV} at (24,32) size 98x98 [border: (11px solid #FFC0CB)]
-        RenderText {#text} at (309,85) size 169x18
-          text run at (309,85) width 169: " of the horizontal scrollbar."
-      RenderBlock {DIV} at (0,425) size 784x50
-        RenderText {#text} at (0,11) size 185x18
-          text run at (0,11) width 185: "Should align 10px above the "
-        RenderBlock {DIV} at (185,0) size 50x50 [bgcolor=#FFC0CB]
+        RenderText {#text} at (333,100) size 169x18
+          text run at (333,100) width 169: " of the horizontal scrollbar."
+      RenderBlock {DIV} at (0,497) size 784x54
+        RenderText {#text} at (0,36) size 186x18
+          text run at (0,36) width 186: "Should align 10px below the "
+        RenderBlock {DIV} at (186,0) size 50x50 [bgcolor=#FFC0CB]
           RenderFlexibleBox {DIV} at (0,0) size 50x50
-        RenderText {#text} at (235,11) size 232x18
-          text run at (235,11) width 232: " horizontal scrollbar, if one is visible."
-layer at (219,323) size 50x46 clip at (219,332) size 35x22
+        RenderText {#text} at (236,36) size 272x18
+          text run at (236,36) width 272: " of the horizontal scrollbar, if one is visible."
+layer at (243,395) size 50x46 clip at (243,404) size 35x22
   RenderBlock {DIV} at (24,28) size 50x46 [bgcolor=#D3D3D3] [border: (9px solid #FFC0CB) none]
-layer at (193,433) size 50x50 clip at (193,433) size 35x35
-  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#D3D3D3]
+layer at (194,505) size 50x50 clip at (194,505) size 35x25
+  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#D3D3D3] [border: none (10px solid #FFC0CB) none]
index e2da3dd..962e666 100644 (file)
@@ -1,3 +1,48 @@
+2019-04-12  Manuel Rego Casasnovas  <rego@igalia.com>
+
+        [css-flex][css-grid] Fix synthesized baseline
+        https://bugs.webkit.org/show_bug.cgi?id=196312
+
+        Reviewed by Javier Fernandez.
+
+        When a flex or grid container has no baseline,
+        its baseline should be synthesized from the border edges.
+        The same happens for flex and grid items.
+        
+        Right now we were using the content box in some cases
+        and even using the margin box in a particular scenario.
+        The patch fixes this.
+        
+        At the same time this is also fixing the baseline for
+        inline flex/grid containers to make it interoperable with Firefox.
+        Inline blocks have a special behavior per legacy reasons,
+        which applies to inline flex/grid containers when they have no items;
+        otherwise the items should be used to compute its baseline.
+        See more at: https://github.com/w3c/csswg-drafts/issues/3416
+
+        Note that we need to keep current behavior for buttons,
+        as the flexbox spec doesn't apply to them.
+
+        Tests: css3/flexbox/flexbox-baseline-margins.html
+               fast/css-grid-layout/grid-baseline-margins-1.html
+               fast/css-grid-layout/grid-baseline-margins-2.html
+               imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-flexbox-001.html
+               imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-grid-001.html
+               imported/w3c/web-platform-tests/css/css-align/baseline-rules/synthesized-baseline-inline-block-001.html
+
+        * rendering/RenderButton.cpp:
+        (WebCore::synthesizedBaselineFromContentBox):
+        (WebCore::RenderButton::baselinePosition const):
+        * rendering/RenderButton.h:
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::synthesizedBaselineFromBorderBox):
+        (WebCore::RenderFlexibleBox::baselinePosition const):
+        (WebCore::RenderFlexibleBox::firstLineBaseline const):
+        (WebCore::RenderFlexibleBox::inlineBlockBaseline const):
+        * rendering/RenderGrid.cpp:
+        (WebCore::RenderGrid::baselinePosition const):
+        (WebCore::RenderGrid::inlineBlockBaseline const):
+
 2019-04-11  Simon Fraser  <simon.fraser@apple.com>
 
         Avoid doing positioned scrolling tree node work for layers not inside overflow:scroll
index cc7fd6b..57f2dd9 100644 (file)
@@ -143,6 +143,20 @@ LayoutRect RenderButton::controlClipRect(const LayoutPoint& additionalOffset) co
     return LayoutRect(additionalOffset.x() + borderLeft(), additionalOffset.y() + borderTop(), width() - borderLeft() - borderRight(), height() - borderTop() - borderBottom());
 }
 
+static int synthesizedBaselineFromContentBox(const RenderBox& box, LineDirectionMode direction)
+{
+    return direction == HorizontalLine ? box.borderTop() + box.paddingTop() + box.contentHeight() : box.borderRight() + box.paddingRight() + box.contentWidth();
+}
+
+int RenderButton::baselinePosition(FontBaseline, bool, LineDirectionMode direction, LinePositionMode) const
+{
+    // We cannot rely on RenderFlexibleBox::baselinePosition() because of flexboxes have some special behavior
+    // regarding baselines that shouldn't apply to buttons.
+    int baseline = firstLineBaseline().valueOr(synthesizedBaselineFromContentBox(*this, direction));
+    int marginAscent = direction == HorizontalLine ? marginTop() : marginRight();
+    return baseline + marginAscent;
+}
+
 #if PLATFORM(IOS_FAMILY)
 void RenderButton::layout()
 {
index 8934a99..e9c4c0e 100644 (file)
@@ -61,6 +61,8 @@ public:
     RenderBlock* innerRenderer() const { return m_inner.get(); }
     void setInnerRenderer(RenderBlock&);
 
+    int baselinePosition(FontBaseline, bool firstLine, LineDirectionMode, LinePositionMode = PositionOnContainingLine) const override;
+
 private:
     void element() const = delete;
 
index 8b0f025..c3c0496 100644 (file)
@@ -166,17 +166,18 @@ void RenderFlexibleBox::computePreferredLogicalWidths()
     setPreferredLogicalWidthsDirty(false);
 }
 
-static int synthesizedBaselineFromContentBox(const RenderBox& box, LineDirectionMode direction)
+static int synthesizedBaselineFromBorderBox(const RenderBox& box, LineDirectionMode direction)
 {
-    return direction == HorizontalLine ? box.borderTop() + box.paddingTop() + box.contentHeight() : box.borderRight() + box.paddingRight() + box.contentWidth();
+    return (direction == HorizontalLine ? box.size().height() : box.size().width()).toInt();
 }
 
 int RenderFlexibleBox::baselinePosition(FontBaseline, bool, LineDirectionMode direction, LinePositionMode) const
 {
-    int baseline = firstLineBaseline().valueOr(synthesizedBaselineFromContentBox(*this, direction));
+    auto baseline = firstLineBaseline();
+    if (!baseline)
+        return synthesizedBaselineFromBorderBox(*this, direction) + marginLogicalHeight();
 
-    int marginAscent = direction == HorizontalLine ? marginTop() : marginRight();
-    return baseline + marginAscent;
+    return baseline.value() + (direction == HorizontalLine ? marginTop() : marginRight()).toInt();
 }
 
 Optional<int> RenderFlexibleBox::firstLineBaseline() const
@@ -213,19 +214,15 @@ Optional<int> RenderFlexibleBox::firstLineBaseline() const
         // FIXME: We should pass |direction| into firstLineBoxBaseline and stop bailing out if we're a writing mode root.
         // This would also fix some cases where the flexbox is orthogonal to its container.
         LineDirectionMode direction = isHorizontalWritingMode() ? HorizontalLine : VerticalLine;
-        return Optional<int>(synthesizedBaselineFromContentBox(*baselineChild, direction) + baselineChild->logicalTop());
+        return Optional<int>(synthesizedBaselineFromBorderBox(*baselineChild, direction) + baselineChild->logicalTop());
     }
 
     return Optional<int>(baseline.value() + baselineChild->logicalTop());
 }
 
-Optional<int> RenderFlexibleBox::inlineBlockBaseline(LineDirectionMode direction) const
+Optional<int> RenderFlexibleBox::inlineBlockBaseline(LineDirectionMode) const
 {
-    if (Optional<int> baseline = firstLineBaseline())
-        return baseline;
-
-    int marginAscent = direction == HorizontalLine ? marginTop() : marginRight();
-    return synthesizedBaselineFromContentBox(*this, direction) + marginAscent;
+    return firstLineBaseline();
 }
 
 static const StyleContentAlignmentData& contentAlignmentNormalBehavior()
index 395a5cf..760a032 100644 (file)
@@ -1202,11 +1202,6 @@ static int synthesizedBaselineFromBorderBox(const RenderBox& box, LineDirectionM
     return (direction == HorizontalLine ? box.size().height() : box.size().width()).toInt();
 }
 
-static int synthesizedBaselineFromMarginBox(const RenderBox& box, LineDirectionMode direction)
-{
-    return (direction == HorizontalLine ? box.size().height() + box.verticalMarginExtent() : box.size().width() + box.horizontalMarginExtent()).toInt();
-}
-
 bool RenderGrid::isBaselineAlignmentForChild(const RenderBox& child) const
 {
     return isBaselineAlignmentForChild(child, GridRowAxis) || isBaselineAlignmentForChild(child, GridColumnAxis);
@@ -1229,7 +1224,11 @@ int RenderGrid::baselinePosition(FontBaseline, bool, LineDirectionMode direction
 #else
     UNUSED_PARAM(mode);
 #endif
-    return firstLineBaseline().valueOr(synthesizedBaselineFromMarginBox(*this, direction));
+    auto baseline = firstLineBaseline();
+    if (!baseline)
+        return synthesizedBaselineFromBorderBox(*this, direction) + marginLogicalHeight();
+
+    return baseline.value() + (direction == HorizontalLine ? marginTop() : marginRight()).toInt();
 }
 
 Optional<int> RenderGrid::firstLineBaseline() const
@@ -1268,13 +1267,9 @@ Optional<int> RenderGrid::firstLineBaseline() const
     return baseline.value() + baselineChild->logicalTop().toInt();
 }
 
-Optional<int> RenderGrid::inlineBlockBaseline(LineDirectionMode direction) const
+Optional<int> RenderGrid::inlineBlockBaseline(LineDirectionMode) const
 {
-    if (Optional<int> baseline = firstLineBaseline())
-        return baseline;
-
-    int marginAscent = direction == HorizontalLine ? marginBottom() : marginRight();
-    return synthesizedBaselineFromBorderBox(*this, direction) + marginAscent;
+    return firstLineBaseline();
 }
 
 LayoutUnit RenderGrid::columnAxisBaselineOffsetForChild(const RenderBox& child) const