Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html

Issue 2417853002: [css-grid] Implementing the grid's first line baseline. (Closed)
Patch Set: Patch for landing. Created 4 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html
diff --git a/third_party/WebKit/LayoutTests/css3/flexbox/flexbox-baseline.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html
similarity index 50%
copy from third_party/WebKit/LayoutTests/css3/flexbox/flexbox-baseline.html
copy to third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html
index 32994260b7918fedf87e367d2d24125c1c7c0786..d7ff21e82d89e9006ad2c7a3c4e4d9407b0bc652 100644
--- a/third_party/WebKit/LayoutTests/css3/flexbox/flexbox-baseline.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html
@@ -4,55 +4,63 @@
body {
margin: 0;
}
-.inline-flexbox {
- display: inline-flex;
+.inline-grid {
+ display: inline-grid;
background-color: lightgrey;
margin-top: 5px;
}
-.flexbox {
- display: flex;
+.grid {
+ display: grid;
background-color: grey;
margin-top: 10px;
}
.column {
- flex-flow: column;
+ grid-auto-flow: column;
}
-.column-reverse {
- flex-flow: column-reverse;
+.row {
+ grid-auto-flow: row;
+}
+.firstRowFirstColumn {
Manuel Rego 2016/10/25 19:42:08 Nit: You could reuse these classes from grid.css.
jfernandez 2016/10/26 14:22:31 I wasn't interested on the background-color. Since
+ grid-column: 1;
+ grid-row: 1;
+}
+.secondRowFirstColumn {
+ grid-column: 1;
+ grid-row: 2;
}
</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. -->
+<!-- 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-flexbox" style="height: 50px;">
- <div style="align-self: flex-end">below</div>
+<div class="inline-grid column" 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: flex-start">above</div>
+ <div style="align-self: 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
+<!-- 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-flexbox" style="height: 40px">
- <div style="align-self: flex-end">baseline</div>
+<div class="inline-grid column" 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: flex-start">above</div>
+ <div style="align-self: start">above</div>
</div>
after text
</div>
<div>
before text
-<div class="inline-flexbox">
+<div class="inline-grid column">
<h2>h2 baseline</h2>
<div>above</div>
</div>
@@ -61,68 +69,71 @@ after text
<div>
before text
-<div class="inline-flexbox">
+<div class="inline-grid column">
<div>baseline</div>
<h2>h2 below</h2>
</div>
after text
</div>
-<!-- If the first flex item has an orthogonal baseline, use the synthesized
+<!-- 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-flexbox" style="width: 40px; height: 40px">
+<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 flexbox
+of the grey box
</div>
-<!-- If there are no flexitems, align to the bottom of the box. -->
+<!-- If there are no griditems, align to the bottom of the box. -->
<div>
should align with the bottom
-<div class="inline-flexbox" style="width: 30px; height: 30px">
+<div class="inline-grid" style="width: 30px; height: 30px">
</div>
-of the grey flexbox
+of the grey box
</div>
-
-<!-- cross-axis (column) test cases. -->
+<!-- column-axis test cases. -->
<div>
before text
-<div class="inline-flexbox column">
- <div>baseline</div>
- <div>below</div>
+<div class="inline-grid">
+ <div class="firstRowFirstColumn">baseline</div>
+ <div class="secondRowFirstColumn">below</div>
</div>
after text
</div>
+<!-- TODO: Grid spec does not allow block-axis baseline alignment, which is what apparently flexbox does.
Manuel Rego 2016/10/25 19:42:08 I think this test is unrelated to block-axis basel
jfernandez 2016/10/26 14:22:31 Done.
+See https://github.com/w3c/csswg-drafts/issues/197 for details. -->
+<!--
<div>
before text
-<div class="inline-flexbox column-reverse">
- <div>baseline</div>
- <div>above</div>
+<div class="inline-grid">
+ <div class="secondRowFirstColumn">baseline</div>
+ <div class="firstRowFirstColumn">above</div>
</div>
after text
</div>
+-->
-<!-- If the first flex item has an orthogonal baseline, use the synthesized
+<!-- 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-flexbox column" style="width: 40px; height: 40px;">
+<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: 20px"></div>
+ <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
</div>
-of the grey flexbox
+of the grey box
</div>
-<!-- If there are no flexitems, align to the bottom of the box. -->
+<!-- If there are no griditems, align to the bottom of the box. -->
<div>
should align with the bottom
-<div class="inline-flexbox column" style="width: 30px; height: 30px">
+<div class="inline-grid" style="width: 30px; height: 30px">
</div>
-of the grey flexbox
+of the grey box
</div>
<!-- More tests on the right side of the page. -->
@@ -131,7 +142,7 @@ of the grey flexbox
<!-- Ignore absolutely positioned flex items. -->
<div>
before text
-<div class="inline-flexbox">
+<div class="inline-grid column">
<div style="position: absolute">absolute</div>
<div style="margin-top: 30px">baseline</div>
</div>
@@ -141,7 +152,7 @@ after text
<!-- We don't participate in baseline alignment if there's an auto margin. -->
<div>
before text
-<div class="inline-flexbox" style="height: 40px;">
+<div class="inline-grid column" style="grid-auto-rows: 40px;">
<div>baseline</div>
<div style="align-self: baseline; margin-top: auto">below</div>
</div>
@@ -151,7 +162,7 @@ after text
<div>
before text
<div style="display: inline-block">
-<div class="inline-flexbox" style="height: 40px;">
+<div class="inline-grid column" style="height: 40px;">
<div>above</div>
<div style="align-self: baseline; margin-top: 10px">baseline</div>
<div>above</div>
@@ -161,40 +172,44 @@ after
text
</div>
-<!-- The spec is a little unclear what should happen here. For now, align to
-the last line box. -->
+<!-- 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
+ before text
+ <div style="display: inline-block">
+ <div class="grid column" style="height: 30px;">
+ baseline
+ </div>
+ </div>
+ after text
</div>
+<!-- TODO: Grid spec does not allow block-axis baseline alignment, which is what apparently flexbox does.
Manuel Rego 2016/10/25 19:42:08 Ditto.
jfernandez 2016/10/26 14:22:31 Done.
+See https://github.com/w3c/csswg-drafts/issues/197 for details. -->
+<!--
<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 column">
- <div>baseline</div>
- <div>below</div>
+ <td style="vertical-align: baseline"><div class="grid">
+ <div class="firstRowFirstColumn">baseline</div>
+ <div class="secondRowFirstColumn">below</div>
</div></td>
- <td style="vertical-align: baseline"><div class="flexbox column-reverse">
- <div>baseline</div>
- <div>above</div>
+ <td style="vertical-align: baseline"><div class="grid">
+ <div class="secondRowFirstColumn">baseline</div>
+ <div class="firstRowFirstColumn">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">
+ <td style="vertical-align: baseline"><div class="grid column">
<h2>h2 baseline</h2>
<div>above</div>
</div></td>
@@ -204,8 +219,8 @@ after text
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;">
+<div id="grid-with-scrollbar" class="inline-grid column" 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.
@@ -217,8 +232,8 @@ after text
</div>
<script>
-document.getElementById("flexitem-with-scrollbar").scrollTop = 999;
-document.getElementById("flexbox-with-scrollbar").style.width = "auto";
+document.getElementById("griditem-with-scrollbar").scrollTop = 999;
+document.getElementById("grid-with-scrollbar").style.width = "auto";
</script>
</body>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698