[CSS Grid Layout] Support 'auto' sized grid items
authorjchaffraix@webkit.org <jchaffraix@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 30 Jan 2013 22:41:59 +0000 (22:41 +0000)
committerjchaffraix@webkit.org <jchaffraix@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 30 Jan 2013 22:41:59 +0000 (22:41 +0000)
https://bugs.webkit.org/show_bug.cgi?id=103332

Reviewed by Tony Chang.

Source/WebCore:

Tests: fast/css-grid-layout/auto-content-resolution-columns.html
       fast/css-grid-layout/auto-content-resolution-rows.html

The specification interprets 'auto' as minmax(min-content, max-content).
Because we stored the grid definitions as an 'auto' length, we wouldn't
handle it properly during layout.

This change makes us do the translation when we query the information for
layout.

* rendering/style/GridTrackSize.h:
(WebCore::GridTrackSize::minTrackBreadth):
(WebCore::GridTrackSize::maxTrackBreadth):
Translate 'auto' to minmax(min-content, max-content). This works as getComputedStyle
still sees the GridTrackSize as a single length and thus query length() instead of the
individual component of minmax().

LayoutTests:

* fast/css-grid-layout/auto-content-resolution-columns-expected.txt: Added.
* fast/css-grid-layout/auto-content-resolution-columns.html: Added.
* fast/css-grid-layout/auto-content-resolution-rows-expected.txt: Added.
* fast/css-grid-layout/auto-content-resolution-rows.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/auto-content-resolution-columns-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/auto-content-resolution-columns.html [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/auto-content-resolution-rows-expected.txt [new file with mode: 0644]
LayoutTests/fast/css-grid-layout/auto-content-resolution-rows.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/style/GridTrackSize.h

index 23218ed..8a10d72 100644 (file)
@@ -1,3 +1,15 @@
+2013-01-30  Julien Chaffraix  <jchaffraix@webkit.org>
+
+        [CSS Grid Layout] Support 'auto' sized grid items
+        https://bugs.webkit.org/show_bug.cgi?id=103332
+
+        Reviewed by Tony Chang.
+
+        * fast/css-grid-layout/auto-content-resolution-columns-expected.txt: Added.
+        * fast/css-grid-layout/auto-content-resolution-columns.html: Added.
+        * fast/css-grid-layout/auto-content-resolution-rows-expected.txt: Added.
+        * fast/css-grid-layout/auto-content-resolution-rows.html: Added.
+
 2013-01-30  Alec Flett  <alecflett@chromium.org>
 
         IndexedDB: Avoid crashing when deleting indexes
diff --git a/LayoutTests/fast/css-grid-layout/auto-content-resolution-columns-expected.txt b/LayoutTests/fast/css-grid-layout/auto-content-resolution-columns-expected.txt
new file mode 100644 (file)
index 0000000..0d42ebe
--- /dev/null
@@ -0,0 +1,8 @@
+Test that resolving auto tracks on grid items works properly.
+
+XXX XXX XXX
+PASS
+XX XX XX XX XX XX
+PASS
+XXXXX
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/auto-content-resolution-columns.html b/LayoutTests/fast/css-grid-layout/auto-content-resolution-columns.html
new file mode 100644 (file)
index 0000000..7e32f2c
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.gridAutoContent {
+    -webkit-grid-columns: auto;
+    -webkit-grid-rows: 50px;
+}
+
+/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
+.constrainedContainer {
+    width: 10px;
+    height: 10px;
+}
+
+.firstRowFirstColumn {
+    font: 10px/1 Ahem;
+    /* Make us fit our grid area. */
+    width: 100%;
+    height: 100%;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.gridAutoContent');">
+
+<p>Test that resolving auto tracks on grid items works properly.</p>
+
+<div class="constrainedContainer">
+    <div class="grid gridAutoContent">
+        <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXX XXX XXX</div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 40px; height: 10px">
+    <div class="grid gridAutoContent">
+        <div class="firstRowFirstColumn" data-expected-width="40" data-expected-height="50">XX XX XX XX XX XX</div>
+    </div>
+</div>
+
+<div style="width: 100px; height: 10px;">
+    <div class="grid gridAutoContent">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/css-grid-layout/auto-content-resolution-rows-expected.txt b/LayoutTests/fast/css-grid-layout/auto-content-resolution-rows-expected.txt
new file mode 100644 (file)
index 0000000..9326a04
--- /dev/null
@@ -0,0 +1,8 @@
+Test that resolving auto tracks on grid items works properly.
+
+XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX
+PASS
diff --git a/LayoutTests/fast/css-grid-layout/auto-content-resolution-rows.html b/LayoutTests/fast/css-grid-layout/auto-content-resolution-rows.html
new file mode 100644 (file)
index 0000000..a8523c0
--- /dev/null
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<script>
+if (window.testRunner)
+    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
+</script>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.gridAutoContent {
+    -webkit-grid-columns: 50px;
+    -webkit-grid-rows: auto;
+}
+
+/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
+.constrainedContainer {
+    width: 10px;
+    height: 10px;
+}
+
+.firstRowFirstColumn {
+    font: 10px/1 Ahem;
+    /* Make us fit our grid area. */
+    width: 100%;
+    height: 100%;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.gridAutoContent');">
+
+<p>Test that resolving auto tracks on grid items works properly.</p>
+
+<div class="constrainedContainer">
+    <div class="grid gridAutoContent">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
+    </div>
+</div>
+
+<!-- Allow the extra logical space distribution to occur. -->
+<div style="width: 40px; height: 10px">
+    <div class="grid gridAutoContent">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXX XXXXX</div>
+    </div>
+</div>
+
+<div style="width: 40px; height: 10px;">
+    <div class="grid gridAutoContent">
+        <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
+    </div>
+</div>
+
+</body>
+</html>
index 15930aa..c98158a 100644 (file)
@@ -1,3 +1,27 @@
+2013-01-30  Julien Chaffraix  <jchaffraix@webkit.org>
+
+        [CSS Grid Layout] Support 'auto' sized grid items
+        https://bugs.webkit.org/show_bug.cgi?id=103332
+
+        Reviewed by Tony Chang.
+
+        Tests: fast/css-grid-layout/auto-content-resolution-columns.html
+               fast/css-grid-layout/auto-content-resolution-rows.html
+
+        The specification interprets 'auto' as minmax(min-content, max-content).
+        Because we stored the grid definitions as an 'auto' length, we wouldn't
+        handle it properly during layout.
+
+        This change makes us do the translation when we query the information for
+        layout.
+
+        * rendering/style/GridTrackSize.h:
+        (WebCore::GridTrackSize::minTrackBreadth):
+        (WebCore::GridTrackSize::maxTrackBreadth):
+        Translate 'auto' to minmax(min-content, max-content). This works as getComputedStyle
+        still sees the GridTrackSize as a single length and thus query length() instead of the
+        individual component of minmax().
+
 2013-01-30  Alec Flett  <alecflett@chromium.org>
 
         IndexedDB: Avoid crashing when deleting indexes
index 142b2ad..ef09522 100644 (file)
@@ -67,12 +67,20 @@ public:
     const Length& minTrackBreadth() const
     {
         ASSERT(!m_minTrackBreadth.isUndefined());
+        if (m_minTrackBreadth.isAuto()) {
+            DEFINE_STATIC_LOCAL(Length, minContent, (MinContent));
+            return minContent;
+        }
         return m_minTrackBreadth;
     }
 
     const Length& maxTrackBreadth() const
     {
         ASSERT(!m_maxTrackBreadth.isUndefined());
+        if (m_maxTrackBreadth.isAuto()) {
+            DEFINE_STATIC_LOCAL(Length, maxContent, (MaxContent));
+            return maxContent;
+        }
         return m_maxTrackBreadth;
     }