[css-grid] Implementing the grid's first line baseline.

third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html

Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html
diff --git a/third_party/WebKit/LayoutTests/css3/flexbox/flexbox-baseline.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html
similarity index 83%
copy from third_party/WebKit/LayoutTests/css3/flexbox/flexbox-baseline.html
copy to third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html
index 32994260b7918fedf87e367d2d24125c1c7c0786..e81733a3ac7dca909dda4970486ecdb6c8230b2f 100644
--- a/third_party/WebKit/LayoutTests/css3/flexbox/flexbox-baseline.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html
@@ -14,6 +14,12 @@ body {
     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;
 }
@@ -75,33 +81,32 @@ 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 flexbox
+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="inline-flexbox" style="width: 30px; height: 30px">
+<div class="empty inline-flexbox" style="width: 30px; height: 30px">
 </div>
-of the grey flexbox
+of the grey box
 </div>
 
-
-<!-- cross-axis (column) test cases. -->
+<!-- If the griditem has not a natural baseline, align to the bottom of the box. -->
 <div>
-before text
-<div class="inline-flexbox column">
-    <div>baseline</div>
-    <div>below</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>
-after text
+of the red box
 </div>
 
+<!-- cross-axis (column) test cases. -->
 <div>
 before text
-<div class="inline-flexbox column-reverse">
+<div class="inline-flexbox column">
     <div>baseline</div>
-    <div>above</div>
+    <div>below</div>
 </div>
 after text
 </div>
@@ -112,17 +117,9 @@ baseline (bottom of the content box of the first item). -->
 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: 20px"></div>
-</div>
-of the grey flexbox
+    <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
 </div>
-
-<!-- If there are no flexitems, align to the bottom of the box. -->
-<div>
-should align with the bottom
-<div class="inline-flexbox column" style="width: 30px; height: 30px">
-</div>
-of the grey flexbox
+of the grey box
 </div>
 
 <!-- More tests on the right side of the page. -->
@@ -178,22 +175,6 @@ after text
   <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 column">
-      <div>baseline</div>
-      <div>below</div>
-  </div></td>
-  <td style="vertical-align: baseline"><div class="flexbox column-reverse">
-      <div>baseline</div>
-      <div>above</div>
-  </div></td>
-</tr>
-</table>
-
-<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>