<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[210792] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/210792">210792</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2017-01-16 15:15:26 -0800 (Mon, 16 Jan 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Implementing baseline positioning for grid containers
https://bugs.webkit.org/show_bug.cgi?id=165063
Reviewed by Darin Adler and Sergio Villar Senin.
Source/WebCore:
Implementation of the 'first-line' baseline for Grid containers,
according to the CSS Grid Layout spec.
https://drafts.csswg.org/css-grid/#grid-baselines
The self-baseline and content-baseline alignment logic is still
not implemented, hence some cases will be implemented in
future patches.
Tests: fast/css-grid-layout/grid-baseline-margins.html
fast/css-grid-layout/grid-baseline-must-respect-grid-order.html
fast/css-grid-layout/grid-baseline.html
* rendering/RenderGrid.cpp:
(WebCore::synthesizedBaselineFromBorderBox):
(WebCore::RenderGrid::isInlineBaselineAlignedChild):
(WebCore::RenderGrid::baselinePosition):
(WebCore::RenderGrid::firstLineBaseline):
(WebCore::RenderGrid::inlineBlockBaseline):
* rendering/RenderGrid.h:
LayoutTests:
Tests to verify the baseline positioning of grid and inline-grid blocks.
Note that two of these new tests are expected to fail because of a Flexbox
bug, since we use Flexbox as reference test.
* TestExpectations:
* fast/css-grid-layout/grid-baseline-expected.html: Added.
* fast/css-grid-layout/grid-baseline-margins-expected.html: Added.
* fast/css-grid-layout/grid-baseline-margins.html: Added.
* fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt: Added.
* fast/css-grid-layout/grid-baseline-must-respect-grid-order.html: Added.
* fast/css-grid-layout/grid-baseline.html: Added.
* fast/css-grid-layout/resources/grid-alignment.css:
(.alignSelfBaseline):
(.selfBaseline):</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsTestExpectations">trunk/LayoutTests/TestExpectations</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutresourcesgridalignmentcss">trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridcpp">trunk/Source/WebCore/rendering/RenderGrid.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderGridh">trunk/Source/WebCore/rendering/RenderGrid.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridbaselineexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridbaselinemarginsexpectedhtml">trunk/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridbaselinemarginshtml">trunk/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridbaselinemustrespectgridorderexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridbaselinemustrespectgridorderhtml">trunk/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgridbaselinehtml">trunk/LayoutTests/fast/css-grid-layout/grid-baseline.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (210791 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-01-16 23:04:47 UTC (rev 210791)
+++ trunk/LayoutTests/ChangeLog 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -1,3 +1,25 @@
</span><ins>+2017-01-16 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid] Implementing baseline positioning for grid containers
+ https://bugs.webkit.org/show_bug.cgi?id=165063
+
+ Reviewed by Darin Adler and Sergio Villar Senin.
+
+ Tests to verify the baseline positioning of grid and inline-grid blocks.
+ Note that two of these new tests are expected to fail because of a Flexbox
+ bug, since we use Flexbox as reference test.
+
+ * TestExpectations:
+ * fast/css-grid-layout/grid-baseline-expected.html: Added.
+ * fast/css-grid-layout/grid-baseline-margins-expected.html: Added.
+ * fast/css-grid-layout/grid-baseline-margins.html: Added.
+ * fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt: Added.
+ * fast/css-grid-layout/grid-baseline-must-respect-grid-order.html: Added.
+ * fast/css-grid-layout/grid-baseline.html: Added.
+ * fast/css-grid-layout/resources/grid-alignment.css:
+ (.alignSelfBaseline):
+ (.selfBaseline):
+
</ins><span class="cx"> 2017-01-15 Sam Weinig <sam@webkit.org>
</span><span class="cx">
</span><span class="cx"> [WebIDL] Remove custom bindings for HTMLInputElement, HTMLFrameElement, HTMLMediaElement and HTMLOptionsCollection
</span></span></pre></div>
<a id="trunkLayoutTestsTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/TestExpectations (210791 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/TestExpectations 2017-01-16 23:04:47 UTC (rev 210791)
+++ trunk/LayoutTests/TestExpectations 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -262,6 +262,10 @@
</span><span class="cx"> webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap-reverse.html [ ImageOnlyFailure ]
</span><span class="cx"> webkit.org/b/136754 css3/flexbox/csswg/ttwf-reftest-flex-wrap.html [ ImageOnlyFailure ]
</span><span class="cx">
</span><ins>+# 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 ]
+
</ins><span class="cx"> # nth-child tests takes long time and Debug build sometimes timeouts because there are many test cases.
</span><span class="cx"> webkit.org/b/137149 fast/selectors/nth-child-of-basics.html [ Slow ]
</span><span class="cx">
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridbaselineexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html (0 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -0,0 +1,204 @@
</span><ins>+<!DOCTYPE html>
+<style>
+body {
+ margin: 0;
+}
+.inline-flexbox {
+ display: inline-flex;
+ background-color: lightgrey;
+ margin-top: 5px;
+}
+.flexbox {
+ display: flex;
+ background-color: grey;
+ margin-top: 10px;
+}
+.empty {
+ border-style: solid;
+ border-width: 5px 0px 10px;
+ padding: 2px 0px 4px;
+ margin: 10px 0px 20px;
+}
+.column {
+ flex-flow: column;
+}
+.column-reverse {
+ flex-flow: column-reverse;
+}
+</style>
+
+<body style="position: relative">
+
+<!-- If any of the flex items on the flex container's first line participate
+in baseline alignment, the flex container's main-axis baseline is the baseline
+of those flex items. -->
+<div>
+before text
+<div class="inline-flexbox" style="height: 50px;">
+ <div style="align-self: flex-end">below</div>
+ <div style="align-self: baseline; margin-top: 15px">baseline</div>
+ <div style="align-self: flex-start">above</div>
+</div>
+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. -->
+<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-start">above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-flexbox">
+ <h2>h2 baseline</h2>
+ <div>above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-flexbox">
+ <div>baseline</div>
+ <h2>h2 below</h2>
+</div>
+after text
+</div>
+
+<!-- If the first flex item has an orthogonal baseline, use the synthesized
+baseline (bottom of the content box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-flexbox" style="width: 40px; height: 40px">
+ <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
+</div>
+of the grey box
+</div>
+
+<!-- If there are no flexitems, align to the bottom of the box. -->
+<div>
+should align with the bottom
+<div class="empty inline-flexbox" style="width: 30px; height: 30px">
+</div>
+of the grey box
+</div>
+
+<!-- If the griditem has not a natural baseline, align to the bottom of the box. -->
+<div>
+should align with the bottom
+<div class="inline-flexbox" style="width: 40px; height: 40px;">
+ <div style="width: 20px; height: 20px; border: 5px solid; background: red; "></div>
+</div>
+of the red box
+</div>
+
+<!-- cross-axis (column) test cases. -->
+<div>
+before text
+<div class="inline-flexbox column">
+ <div>baseline</div>
+ <div>below</div>
+</div>
+after text
+</div>
+
+<!-- If the first flex item has an orthogonal baseline, use the synthesized
+baseline (bottom of the content box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-flexbox column" style="width: 40px; height: 40px;">
+ <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
+ <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
+</div>
+of the grey box
+</div>
+
+<!-- More tests on the right side of the page. -->
+<div style="position: absolute; top: 0; left: 400px; width: 360px">
+
+<!-- Ignore absolutely positioned flex items. -->
+<div>
+before text
+<div class="inline-flexbox">
+ <div style="position: absolute">absolute</div>
+ <div style="margin-top: 30px">baseline</div>
+</div>
+after text
+</div>
+
+<!-- We don't participate in baseline alignment if there's an auto margin. -->
+<div>
+before text
+<div class="inline-flexbox" style="height: 40px;">
+ <div>baseline</div>
+ <div style="align-self: baseline; margin-top: auto">below</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div style="display: inline-block">
+<div class="inline-flexbox" style="height: 40px;">
+ <div>above</div>
+ <div style="align-self: baseline; margin-top: 10px">baseline</div>
+ <div>above</div>
+</div>
+after
+</div>
+text
+</div>
+
+<!-- The spec is a little unclear what should happen here. For now, align to
+the last line box. -->
+<div>
+before text
+<div style="display: inline-block">
+<div class="flexbox" style="height: 30px;">
+ baseline
+</div>
+</div>
+after text
+</div>
+
+<table style="background-color: lightgrey; margin-top: 5px">
+<tr style="height: 50px">
+ <td style="vertical-align: bottom">bottom</td>
+ <td style="vertical-align: baseline">baseline</td>
+ <td style="vertical-align: top">top</td>
+ <td style="vertical-align: baseline"><div class="flexbox">
+ <h2>h2 baseline</h2>
+ <div>above</div>
+ </div></td>
+</table>
+
+<!-- If a box contributing a baseline has a scrollbar, the box must be treated
+as being in its initial scroll position when computing the baseline. -->
+<div>
+before text
+<div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; width: 150px">
+ <div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
+ The baseline is based on<br>
+ the non-scrolled position;<br>
+ this won't line up.
+ </div>
+</div>
+after text
+</div>
+
+</div>
+
+<script>
+document.getElementById("flexitem-with-scrollbar").scrollTop = 999;
+document.getElementById("flexbox-with-scrollbar").style.width = "auto";
+</script>
+
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridbaselinemarginsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html (0 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -0,0 +1,95 @@
</span><ins>+<!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; }
+.border-padding-margin {
+ border: 5px solid pink;
+ padding: 7px;
+ margin: 3px 0;
+}
+.flexbox > div {
+ min-width: 0;
+ min-height: 0;
+}
+</style>
+<div>
+before text
+<div class="border" style="display: inline-block; background-color: lightgrey">
+<div class="flexbox" style="height: 30px; margin-top: 7px; padding-top: 10px;">
+ baseline
+</div>
+</div>
+after text
+</div>
+
+<div>
+Should align
+<div class="inline-block border">
+ <div class="flexbox padding" style="width: 50px; height: 50px; background-color: pink">
+ <div class="flex-one" style="background-color: lightgrey"></div>
+ </div>
+</div>
+with the
+<div class="inline-block margin">
+ <div class="flexbox border" style="width: 50px; height: 50px; background-color: pink">
+ <div class="flex-one" style="background-color: lightgrey"></div>
+ </div>
+</div>
+bottom of
+<div class="inline-block padding" style="padding-left: 0; padding-right: 0">
+ <div class="flexbox margin border" style="width: 50px; height: 50px; background-color: pink">
+ <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.
+</div>
+
+<div>
+Should align
+with the
+<div class="inline-block">
+ <div class="flexbox" style="background-color: pink">
+ <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.
+</div>
+
+<div>
+Should align with the top
+<div class="inline-block border-padding-margin" style="background-color: pink;">
+ <div class="flexbox border-padding-margin" 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.
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridbaselinemarginshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html (0 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -0,0 +1,83 @@
</span><ins>+<!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; }
+.border-padding-margin {
+ border: 5px solid pink;
+ padding: 7px;
+ margin: 3px 0;
+}
+</style>
+<div>
+before text
+<div class="border" style="display: inline-block; background-color: lightgrey">
+<div class="grid" style="height: 30px; margin-top: 7px; padding-top: 10px;">
+ baseline
+</div>
+</div>
+after text
+</div>
+
+<div>
+Should align
+<div class="inline-block border">
+ <div class="grid padding" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
+ <div style="background-color: lightgrey"></div>
+ </div>
+</div>
+with the
+<div class="inline-block margin">
+ <div class="grid border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
+ <div style="background-color: lightgrey"></div>
+ </div>
+</div>
+bottom of
+<div class="inline-block padding" style="padding-left: 0; padding-right: 0">
+ <div class="grid margin border" style="grid-template-columns: 50px; grid-template-rows: 50px; background-color: pink">
+ <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.
+</div>
+
+<div>
+Should align
+with the
+<div class="inline-block">
+ <div class="grid" style="background-color: pink">
+ <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.
+</div>
+
+<div>
+Should align with the top
+<div class="inline-block border-padding-margin" style="background-color: pink">
+ <div class="grid border border-padding-margin" style="width: 100px; height: 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.
+</div>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridbaselinemustrespectgridorderexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt (0 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order-expected.txt 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -0,0 +1,45 @@
</span><ins>+The test shows 3 grids each of them with 3 items sorted differently in the DOM.
+Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly.
+
+This case shows 3 items located along the first row and in different columns, so grid baseline is computed using the one located at first column (blue item).
+
+
+
+ PASS
+PASS
+PASS
+This case shows 3 items located along the first row and in different columns, so such item is used to determine the grid's baseline instead of using the grid order.
+
+
+
+ PASS
+PASS
+PASS
+This case shows 3 items' areas intersecting the first row and first column, so the dom order must be used to determine each grid's baseline.
+
+
+
+ PASS
+PASS
+PASS
+This case shows 3 items' areas intersecting the first row and first column, but one of the items participates in baseline alignment, so such item is used to determine the grid's baseline instead of using the dom order.
+
+
+
+ PASS
+PASS
+PASS
+This case shows one of the grids with no items, hence its baseline must be synthesized.
+
+
+
+PASS
+PASS
+PASS
+This case shows one of the grids with no items in the first row, hence its baseline must be synthesized.
+
+
+
+ PASS
+PASS
+PASS
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridbaselinemustrespectgridorderhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html (0 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -0,0 +1,191 @@
</span><ins>+<!DOCTYPE html>
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<style>
+body { margin: 0; }
+.container {
+ position: relative;
+ font: 10px/1 Ahem;
+ border: 5px solid;
+ width: 470px;
+}
+.grid {
+ display: inline-grid;
+ grid-template-columns: 50px 50px;
+ width: 150px;
+ background-color: transparent;
+ position: relative;
+}
+.twoRows { grid-template-rows: 50px 50px; }
+.threeRows { grid-template-rows: 50px 50px 50px; }
+.empty {
+ border-color: black;
+ border-style: solid;
+ margin: 15px 0px 30px;
+ border-width: 5px 0px 10px;
+ padding: 10px 0px 20px;
+}
+.item {
+ height: 25px;
+ border-color: black;
+ border-style: solid;
+}
+.style1 {
+ border-width: 5px 0px 10px;
+ padding: 10px 0px 20px;
+}
+.style2 {
+ border-width: 10px 0px 5px;
+ padding: 20px 0px 10px;
+ margin-top: 10px;
+}
+.style3 {
+ border-width: 10px 0px 20px;
+ padding: 5px 0px 10px;
+ margin-top: 20px;
+}
+
+.bothRowFirstColumn, .secondRowSecondColumn {
+ margin-right: 10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ background-color: pink;
+}
+.firstRowBothColumn, .secondRowBothColumn {
+ margin-top: 15px;
+ margin-bottom: 15px;
+ background-color: green;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid, container')">
+<div id="log"></div>
+<p>
+ The test shows 3 grids each of them with 3 items sorted differently in the DOM.<br>
+ Each grid container must use its first (grid order) item to compute its baseline, and using document-oder in case of element with same grid-order. Hence they might be baseline aligned each other accordingly.
+</p>
+
+<p>
+ This case shows 3 items located along the first row and in different columns, so grid baseline is computed using the one located at first column (blue item).
+</p>
+<div class="container" data-expected-width="480" data-expected-height="120">
+ <div class="grid" data-offset-x="0" data-offset-y="20">
+ <div class="item style1 firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
+ <div class="item style3 firstRowThirdColumn" data-offset-x="100" data-offset-y="20"></div>
+ </div>
+ <div class="grid" data-offset-x="160" data-offset-y="10">
+ <div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
+ <div class="item style2 firstRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ <div class="item style3 firstRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>
+ </div>
+ <div class="grid" data-offset-x="320" data-offset-y="0">
+ <div class="item style1 firstRowSecondColumn" data-offset-x="50" data-offset-y="0"></div>
+ <div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
+ <div class="item style3 firstRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
+ </div>
+</div>
+
+<p>
+ This case shows 3 items located along the first row and in different columns, so such item is used to determine the grid's baseline instead of using the grid order.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="120">
+ <div class="grid" data-offset-x="0" data-offset-y="0">
+ <div class="item style1 firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="item style2 firstRowSecondColumn" data-offset-x="50" data-offset-y="10"></div>
+ <div class="item style3 firstRowThirdColumn alignSelfBaseline" data-offset-x="100" data-offset-y="20"></div>
+ </div>
+ <div class="grid" data-offset-x="160" data-offset-y="0">
+ <div class="item style1 firstRowThirdColumn" data-offset-x="100" data-offset-y="0"></div>
+ <div class="item style2 firstRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ <div class="item style3 firstRowSecondColumn alignSelfBaseline" data-offset-x="50" data-offset-y="20"></div>
+ </div>
+ <div class="grid" data-offset-x="320" data-offset-y="20">
+ <div class="item style1 firstRowSecondColumn alignSelfBaseline" data-offset-x="50" data-offset-y="0"></div>
+ <div class="item style2 firstRowThirdColumn" data-offset-x="100" data-offset-y="10"></div>
+ <div class="item style3 firstRowFirstColumn" data-offset-x="0" data-offset-y="20"></div>
+ </div>
+</div>
+
+<p>
+ This case shows 3 items' areas intersecting the first row and first column, so the dom order must be used to determine each grid's baseline.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="165">
+ <div class="grid twoRows" data-offset-x="0" data-offset-y="40">
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ </div>
+ <div class="grid twoRows" data-offset-x="160" data-offset-y="0">
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ </div>
+ <div class="grid twoRows" data-offset-x="320" data-offset-y="55">
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ </div>
+</div>
+
+<p>
+ This case shows 3 items' areas intersecting the first row and first column, but one of the items participates in baseline alignment, so such item is used to determine the grid's baseline instead of using the dom order.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="165">
+ <div class="grid twoRows" data-offset-x="0" data-offset-y="55">
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn alignSelfBaseline" style="width: 100px; height: 20px;" data-offset-x="0" data-offset-y="15"></div>
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ </div>
+ <div class="grid twoRows" data-offset-x="160" data-offset-y="40">
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ <div class="firstRowFirstColumn alignSelfBaseline" style="width: 50px; height: 50px;" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ </div>
+ <div class="grid twoRows" data-offset-x="320" data-offset-y="0">
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="bothRowFirstColumn alignSelfBaseline" style="width: 40px; height: 80px;" data-offset-x="0" data-offset-y="10"></div>
+ </div>
+</div>
+
+<p>
+ This case shows one of the grids with no items, hence its baseline must be synthesized.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="250">
+ <div class="grid twoRows" data-offset-x="0" data-offset-y="140">
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ </div>
+ <div class="grid twoRows" data-offset-x="160" data-offset-y="100">
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ </div>
+ <div class="grid empty twoRows" data-offset-x="320" data-offset-y="15">
+ </div>
+</div>
+
+<p>
+ This case shows one of the grids with no items in the first row, hence its baseline must be synthesized.
+</p>
+<div class="container" data-expected-width="480" data-expected-height="300">
+ <div class="grid twoRows" data-offset-x="0" data-offset-y="190">
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ </div>
+ <div class="grid twoRows" data-offset-x="160" data-offset-y="150">
+ <div class="bothRowFirstColumn" data-offset-x="0" data-offset-y="10"></div>
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>
+ <div class="firstRowBothColumn" data-offset-x="0" data-offset-y="15"></div>
+ </div>
+ <div class="grid empty threeRows" data-offset-x="320" data-offset-y="15">
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="60"></div>
+ <div class="thirdRowSecondColumn" data-offset-x="50" data-offset-y="110"></div>
+ <div class="secondRowBothColumn" data-offset-x="0" data-offset-y="75"></div>
+ </div>
+</div>
+
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgridbaselinehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-baseline.html (0 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-baseline.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-baseline.html 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -0,0 +1,210 @@
</span><ins>+<!DOCTYPE html>
+<style>
+body {
+ margin: 0;
+}
+.inline-grid {
+ display: inline-grid;
+ background-color: lightgrey;
+ margin-top: 5px;
+ grid-auto-flow: column;
+}
+.grid {
+ display: grid;
+ background-color: grey;
+ margin-top: 10px;
+ grid-auto-flow: column;
+}
+.empty {
+ border-style: solid;
+ border-width: 5px 0px 10px;
+ padding: 2px 0px 4px;
+ margin: 10px 0px 20px;
+}
+.column {
+ grid-auto-flow: row;
+}
+.firstRowFirstColumn {
+ grid-column: 1;
+ grid-row: 1;
+}
+.secondRowFirstColumn {
+ grid-column: 1;
+ grid-row: 2;
+}
+</style>
+
+<body style="position: relative">
+
+<!-- If any of the grid items whose areas intersect the grid container's first
+row/column participate in baseline alignment, the grid container's baseline is
+the baseline of those grid items. -->
+<div>
+before text
+<div class="inline-grid" style="grid-auto-rows: 50px;">
+ <div style="align-self: end">below</div>
+ <div style="align-self: baseline; margin-top: 15px">baseline</div>
+ <div style="align-self: start">above</div>
+</div>
+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. -->
+<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: start">above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-grid">
+ <h2>h2 baseline</h2>
+ <div>above</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div class="inline-grid">
+ <div>baseline</div>
+ <h2>h2 below</h2>
+</div>
+after text
+</div>
+
+<!-- If the first grid item has an orthogonal baseline, use the synthesized
+baseline (bottom of the content box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-grid" style="width: 40px; height: 40px">
+ <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bottom: 1px solid black"></div>
+</div>
+of the grey box
+</div>
+
+<!-- If there are no griditems, align to the bottom of the box. -->
+<div>
+should align with the bottom
+<div class="empty inline-grid" style="width: 30px; height: 30px">
+</div>
+of the grey box
+</div>
+
+<div>
+should align with the bottom
+<div class="inline-grid" style="width: 40px; height: 40px;">
+ <div style="width: 20px; height: 20px; border: 5px solid black; background: red;"></div>
+</div>
+of the red box
+</div>
+
+<!-- column-axis test cases. -->
+<div>
+before text
+<div class="inline-grid column">
+ <div>baseline</div>
+ <div>below</div>
+</div>
+after text
+</div>
+
+<!-- If the first grid item has an orthogonal baseline, use the synthesized
+baseline (bottom of the border box of the first item). -->
+<div>
+should align with the middle
+<div class="inline-grid column" style="width: 40px; height: 40px;">
+ <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bottom: 1px solid black"></div>
+ <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
+</div>
+of the grey box
+</div>
+
+<!-- More tests on the right side of the page. -->
+<div style="position: absolute; top: 0; left: 400px; width: 360px">
+
+<!-- Ignore absolutely positioned grid items. -->
+<div>
+before text
+<div class="inline-grid">
+ <div style="position: absolute">absolute</div>
+ <div style="margin-top: 30px">baseline</div>
+</div>
+after text
+</div>
+
+<!-- We don't participate in baseline alignment if there's an auto margin. -->
+<div>
+before text
+<div class="inline-grid" style="grid-auto-rows: 40px;">
+ <div>baseline</div>
+ <div style="align-self: baseline; margin-top: auto">below</div>
+</div>
+after text
+</div>
+
+<div>
+before text
+<div style="display: inline-block">
+<div class="inline-grid" style="height: 40px;">
+ <div>above</div>
+ <div style="align-self: baseline; margin-top: 10px">baseline</div>
+ <div>above</div>
+</div>
+after
+</div>
+text
+</div>
+
+<!-- The spec is a little unclear what should happen here. For now,
+align to the last line box. -->
+<div>
+ before text
+ <div style="display: inline-block">
+ <div class="grid" style="height: 30px;">
+ baseline
+ </div>
+ </div>
+ after text
+</div>
+
+<table style="background-color: lightgrey; margin-top: 5px">
+<tr style="height: 50px">
+ <td style="vertical-align: bottom">bottom</td>
+ <td style="vertical-align: baseline">baseline</td>
+ <td style="vertical-align: top">top</td>
+ <td style="vertical-align: baseline"><div class="grid">
+ <h2>h2 baseline</h2>
+ <div>above</div>
+ </div></td>
+</table>
+
+<!-- If a box contributing a baseline has a scrollbar, the box must be treated
+as being in its initial scroll position when computing the baseline. -->
+<div>
+before text
+<div id="grid-with-scrollbar" class="inline-grid" style="height: 65px; width: 150px">
+ <div id="griditem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
+ The baseline is based on<br>
+ the non-scrolled position;<br>
+ this won't line up.
+ </div>
+</div>
+after text
+</div>
+
+</div>
+
+<script>
+document.getElementById("griditem-with-scrollbar").scrollTop = 999;
+document.getElementById("grid-with-scrollbar").style.width = "auto";
+</script>
+
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutresourcesgridalignmentcss"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css (210791 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css 2017-01-16 23:04:47 UTC (rev 210791)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-alignment.css 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -18,6 +18,8 @@
</span><span class="cx"> .alignSelfEndSafe { align-self: end safe; }
</span><span class="cx"> .alignSelfEndUnsafe { align-self: end unsafe; }
</span><span class="cx">
</span><ins>+.alignSelfBaseline { align-self: baseline; }
+
</ins><span class="cx"> /* align-items */
</span><span class="cx"> .alignItemsAuto { align-items: auto; }
</span><span class="cx"> .alignItemsStretch { align-items: stretch; }
</span><span class="lines">@@ -126,6 +128,11 @@
</span><span class="cx"> justify-items: self-end;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.selfBaseline {
+ align-self: baseline;
+ justify-self: baseline;
+}
+
</ins><span class="cx"> /* Both align-self and justify-self */
</span><span class="cx"> .selfStretch {
</span><span class="cx"> align-self: stretch;
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (210791 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2017-01-16 23:04:47 UTC (rev 210791)
+++ trunk/Source/WebCore/ChangeLog 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -1,3 +1,30 @@
</span><ins>+2017-01-16 Javier Fernandez <jfernandez@igalia.com>
+
+ [css-grid] Implementing baseline positioning for grid containers
+ https://bugs.webkit.org/show_bug.cgi?id=165063
+
+ Reviewed by Darin Adler and Sergio Villar Senin.
+
+ Implementation of the 'first-line' baseline for Grid containers,
+ according to the CSS Grid Layout spec.
+ https://drafts.csswg.org/css-grid/#grid-baselines
+
+ The self-baseline and content-baseline alignment logic is still
+ not implemented, hence some cases will be implemented in
+ future patches.
+
+ Tests: fast/css-grid-layout/grid-baseline-margins.html
+ fast/css-grid-layout/grid-baseline-must-respect-grid-order.html
+ fast/css-grid-layout/grid-baseline.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::synthesizedBaselineFromBorderBox):
+ (WebCore::RenderGrid::isInlineBaselineAlignedChild):
+ (WebCore::RenderGrid::baselinePosition):
+ (WebCore::RenderGrid::firstLineBaseline):
+ (WebCore::RenderGrid::inlineBlockBaseline):
+ * rendering/RenderGrid.h:
+
</ins><span class="cx"> 2017-01-16 Andy Estes <aestes@apple.com>
</span><span class="cx">
</span><span class="cx"> [QuickLook] Do some cleanup in QuickLookHandle
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (210791 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2017-01-16 23:04:47 UTC (rev 210791)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -2499,6 +2499,75 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+// FIXME: This logic could be refactored somehow and defined in RenderBox.
+static int synthesizedBaselineFromBorderBox(const RenderBox& box, LineDirectionMode direction)
+{
+ return (direction == HorizontalLine ? box.size().height() : box.size().width()).toInt();
+}
+
+bool RenderGrid::isInlineBaselineAlignedChild(const RenderBox& child) const
+{
+ return alignSelfForChild(child).position() == ItemPositionBaseline && !isOrthogonalChild(child) && !hasAutoMarginsInColumnAxis(child);
+}
+
+// FIXME: This logic is shared by RenderFlexibleBox, so it might be refactored somehow.
+int RenderGrid::baselinePosition(FontBaseline, bool, LineDirectionMode direction, LinePositionMode mode) const
+{
+#if ENABLE(ASSERT)
+ ASSERT(mode == PositionOnContainingLine);
+#else
+ UNUSED_PARAM(mode);
+#endif
+ int baseline = firstLineBaseline().value_or(synthesizedBaselineFromBorderBox(*this, direction));
+
+ int marginSize = direction == HorizontalLine ? verticalMarginExtent() : horizontalMarginExtent();
+ return baseline + marginSize;
+}
+
+std::optional<int> RenderGrid::firstLineBaseline() const
+{
+ if (isWritingModeRoot() || !m_grid.hasGridItems())
+ return std::nullopt;
+
+ const RenderBox* baselineChild = nullptr;
+ // Finding the first grid item in grid order.
+ unsigned numColumns = m_grid.numTracks(ForColumns);
+ for (size_t column = 0; column < numColumns; column++) {
+ for (const auto* child : m_grid.cell(0, column)) {
+ // If an item participates in baseline alignment, we select such item.
+ if (isInlineBaselineAlignedChild(*child)) {
+ // FIXME: self-baseline and content-baseline alignment not implemented yet.
+ baselineChild = child;
+ break;
+ }
+ if (!baselineChild)
+ baselineChild = child;
+ }
+ }
+
+ if (!baselineChild)
+ return std::nullopt;
+
+ auto baseline = isOrthogonalChild(*baselineChild) ? std::nullopt : baselineChild->firstLineBaseline();
+ // We take border-box's bottom if no valid baseline.
+ if (!baseline) {
+ // FIXME: We should pass |direction| into firstLineBaseline and stop bailing out if we're a writing
+ // mode root. This would also fix some cases where the grid is orthogonal to its container.
+ LineDirectionMode direction = isHorizontalWritingMode() ? HorizontalLine : VerticalLine;
+ return synthesizedBaselineFromBorderBox(*baselineChild, direction) + baselineChild->logicalTop().toInt();
+ }
+ return baseline.value() + baselineChild->logicalTop().toInt();
+}
+
+std::optional<int> RenderGrid::inlineBlockBaseline(LineDirectionMode direction) const
+{
+ if (std::optional<int> baseline = firstLineBaseline())
+ return baseline;
+
+ int marginAscent = direction == HorizontalLine ? marginTop() : marginRight();
+ return synthesizedBaselineFromBorderBox(*this, direction) + marginAscent;
+}
+
</ins><span class="cx"> GridAxisPosition RenderGrid::columnAxisPositionForChild(const RenderBox& child) const
</span><span class="cx"> {
</span><span class="cx"> bool hasSameWritingMode = child.style().writingMode() == style().writingMode();
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderGridh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderGrid.h (210791 => 210792)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderGrid.h 2017-01-16 23:04:47 UTC (rev 210791)
+++ trunk/Source/WebCore/rendering/RenderGrid.h 2017-01-16 23:15:26 UTC (rev 210792)
</span><span class="lines">@@ -182,6 +182,11 @@
</span><span class="cx"> void updateAutoMarginsInColumnAxisIfNeeded(RenderBox&);
</span><span class="cx"> void updateAutoMarginsInRowAxisIfNeeded(RenderBox&);
</span><span class="cx">
</span><ins>+ int baselinePosition(FontBaseline, bool firstLine, LineDirectionMode, LinePositionMode = PositionOnContainingLine) const final;
+ std::optional<int> firstLineBaseline() const final;
+ std::optional<int> inlineBlockBaseline(LineDirectionMode) const final;
+ bool isInlineBaselineAlignedChild(const RenderBox&) const;
+
</ins><span class="cx"> #ifndef NDEBUG
</span><span class="cx"> bool tracksAreWiderThanMinTrackBreadth(GridTrackSizingDirection, GridSizingData&);
</span><span class="cx"> #endif
</span></span></pre>
</div>
</div>
</body>
</html>