Upstream version 10.39.225.0
[platform/framework/web/crosswalk.git] / src / third_party / WebKit / LayoutTests / fast / css-grid-layout / grid-auto-columns-rows-update.html
index 68c0baf..ca5f93b 100644 (file)
@@ -1,15 +1,11 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-<script>
-if (window.testRunner)
-    testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
-</script>
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .grid {
-    grid-definition-rows: 20px;
-    grid-definition-columns: 10px;
+    grid-template-rows: 20px;
+    grid-template-columns: 10px;
     grid-auto-rows: 30px;
     grid-auto-columns: 50px;
     font: 10px/1 Ahem;
@@ -28,31 +24,40 @@ function updateAndCheck(gridElementID, defaultSizing, gridItemSize)
     gridItem.setAttribute("data-expected-width", gridItemSize.width);
     gridItem.setAttribute("data-expected-height", gridItemSize.height);
 
-    checkLayout("#" + gridElementID);
+    checkLayout("#" + gridElementID, document.getElementById("test-output"));
 }
 
 function updateGridAutoRowsColumns()
 {
-    checkLayout('.grid');
+    checkLayout('.grid', document.getElementById("test-output"));
 
     // The constrained example is always sized to the min width so we don't test max width.
-    updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
-    updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '200px' });
-    updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '20px' });
-    updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120px', 'height': '10px' });
-    updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120px', 'height': '400px' });
-    updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '400px' });
-    updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60px', 'height': '400px' });
-    updateAndCheck("constrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '60px', 'height': '20px' });
+    updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50', 'height': '200' });
+    updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '200' });
+    updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '20' });
+    updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120', 'height': '10' });
+    updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120', 'height': '400' });
+    updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '400' });
+    updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60', 'height': '400' });
+    updateAndCheck("constrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '60', 'height': '20' });
 
-    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
-    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '200px' });
-    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '20px' });
-    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, max-content)' }, { 'width': '120px', 'height': '15px' });
-    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, max-content)' }, { 'width': '120px', 'height': '15px' });
-    updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(10em, max-content)' }, { 'width': '120px', 'height': '10px' });
-    updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20em, max-content)' }, { 'width': '200px', 'height': '10px' });
-    updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120px', 'height': '10px' });
+    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50', 'height': '200' });
+    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100', 'height': '200' });
+    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100', 'height': '15' });
+    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, max-content)' }, { 'width': '120', 'height': '15' });
+    updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, max-content)' }, { 'width': '120', 'height': '15' });
+    updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(10em, max-content)' }, { 'width': '120', 'height': '10' });
+    updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20em, max-content)' }, { 'width': '200', 'height': '10' });
+    updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120', 'height': '10' });
+
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50', 'height': '200' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '200' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '15' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(min-content, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120', 'height': '15' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120', 'height': '400' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1', 'height': '400' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60', 'height': '400' });
+    updateAndCheck("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '60', 'height': '20' });
 }
 
 window.addEventListener("load", updateGridAutoRowsColumns, false);
@@ -62,7 +67,7 @@ window.addEventListener("load", updateGridAutoRowsColumns, false);
 <div>This test checks that grid-auto-{row|column} updates properly recomputes the grid items' sizes.</div>
 
 <div class="constrainedContainer" style="position: relative">
-    <div class="grid" id="constrainedGrid">
+    <div class="grid" id="constrainedGrid" style="height: 100%; width: 100%;">
         <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
     </div>
 </div>
@@ -73,5 +78,13 @@ window.addEventListener("load", updateGridAutoRowsColumns, false);
     </div>
 </div>
 
+<div class="constrainedContainer" style="position: relative;">
+    <div class="grid" id="constrainedGridUndefinedHeight" style="width: 100%;">
+        <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" data-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
+    </div>
+</div>
+
+<div id="test-output"></div>
+
 </body>
 </html>