<!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;
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);
<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>
</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>