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

Issues Search
    My Issues | Starred     Open | Closed | All

Issue 22353013: [CSS Grid Layout] Unknown grid area should compute to 'auto' (Closed)

Created:
7 years, 4 months ago by Julien - ping for review
Modified:
7 years, 4 months ago
CC:
blink-reviews, apavlov+blink_chromium.org, dglazkov+blink, eae+blinkwatch, esprehn
Visibility:
Public.

Description

[CSS Grid Layout] Unknown grid area should compute to 'auto' Per the specification, if the grid area specified for any <grid-line> doesn't exist, it should compute to 'auto'. The original parsing implementation allowed any <grid-line>, which is non-compliant. This means that "grid-row: foobar / none;" is now (again) rejected unless the grid element defines the required grid areas. The testing framework was amended to reuse the existing grid element so that we get the 'grid-template' definition as we assumed in the testing. Also added a new test that checks that unknown grid areas triggers the auto-placement algorithm when appropriate. BUG=258092 Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=155850

Patch Set 1 #

Messages

Total messages: 5 (0 generated)
Julien - ping for review
7 years, 4 months ago (2013-08-07 00:25:19 UTC) #1
darktears
On 2013/08/07 00:25:19, Julien Chaffraix wrote: LGTM.
7 years, 4 months ago (2013-08-09 16:42:52 UTC) #2
Julien - ping for review
Committed patchset #1 manually as r155850 (presubmit successful).
7 years, 4 months ago (2013-08-09 18:04:46 UTC) #3
commit-bot: I haz the power
CQ is trying da patch. Follow status at https://chromium-status.appspot.com/cq/jchaffraix@chromium.org/22353013/1
7 years, 4 months ago (2013-08-09 18:05:05 UTC) #4
commit-bot: I haz the power
7 years, 4 months ago (2013-08-09 18:05:18 UTC) #5
Message was sent while issue was closed. 
Failed to apply patch for
LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html:
File exist but was about to be overwriten
Patch:   NR 
LayoutTests/fast/css-grid-layout/grid-item-bad-resolution-double-span.html->LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html
Index:
LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html
diff --git
a/LayoutTests/fast/css-grid-layout/grid-item-bad-resolution-double-span.html
b/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html
similarity index 52%
copy from
LayoutTests/fast/css-grid-layout/grid-item-bad-resolution-double-span.html
copy to
LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html
index
fccc8ab4097d422929bc0ca33e3604699d9f8d38..0a7e4ab30cd9a22b4f5c7cfeeaf876f715eba43f
100644
--- a/LayoutTests/fast/css-grid-layout/grid-item-bad-resolution-double-span.html
+++
b/LayoutTests/fast/css-grid-layout/grid-item-bad-named-area-auto-placement.html
@@ -3,61 +3,61 @@
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
-    grid-definition-rows: "firstRow" 10px 20px;
-    grid-definition-columns: "firstColumn" 30px 40px;
+    grid-definition-rows: 10px 20px;
+    grid-definition-columns: 30px 40px;
     grid-auto-flow: row;
 }
 
-.bothSpanRow {
+.bothNamedGridLineRow {
+    grid-row: nonExistentArea / nonExistentArea;
     grid-column: 1;
-    grid-row: span 5 "firstRow" / span 1;
 }
 
-.bothSpanColumn {
-    grid-column: span / span 3;
+.bothNamedGridLineColumn {
     grid-row: 1;
+    grid-column: nonExistentArea / span 3;
 }
 
-.spanAutoRow {
+.namedGridLineSpanRow {
+    grid-row: nonExistentArea / span 5 "firstRow";
     grid-column: 1;
-    grid-row: span 5 "firstRow" / auto;
 }
 
-.spanAutoColumn {
-    grid-column: span / auto;
+.namedGridLineSpanColumn {
     grid-row: 1;
+    grid-column: nonExistentArea / span;
 }
 </style>
 <script src="../../resources/check-layout.js"></script>
 <body onload="checkLayout('.grid')">
 
-<p>This test checks that we resolve 2 opposite 'span' / 'auto' positions by
applying the auto-placement algorithm.</p>
+<p>This test checks that unknown named area are treated as 'auto' by applying
the auto-placement algorithm when mandated.</p>
 
 <div style="position: relative">
     <div class="grid">
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0"
data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
-        <div class="sizedToGridArea bothSpanRow" data-offset-x="0"
data-offset-y="10" data-expected-width="30" data-expected-height="20"></div>
+        <div class="sizedToGridArea bothNamedGridLineRow" data-offset-x="0"
data-offset-y="10" data-expected-width="30" data-expected-height="20"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid">
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0"
data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
-        <div class="sizedToGridArea bothSpanColumn" data-offset-x="30"
data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>
+        <div class="sizedToGridArea bothNamedGridLineColumn" data-offset-x="30"
data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid">
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0"
data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
-        <div class="sizedToGridArea spanAutoRow" data-offset-x="0"
data-offset-y="10" data-expected-width="30" data-expected-height="20"></div>
+        <div class="sizedToGridArea namedGridLineSpanRow" data-offset-x="0"
data-offset-y="10" data-expected-width="30" data-expected-height="20"></div>
     </div>
 </div>
 
 <div style="position: relative">
     <div class="grid">
         <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0"
data-offset-y="0" data-expected-width="30" data-expected-height="10"></div>
-        <div class="sizedToGridArea spanAutoColumn" data-offset-x="30"
data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>
+        <div class="sizedToGridArea namedGridLineSpanColumn" data-offset-x="30"
data-offset-y="0" data-expected-width="40" data-expected-height="10"></div>
     </div>
 </div>

Powered by Google App Engine
This is Rietveld 408576698