blob: 8ab000736c97bb6c41634fbd7d640ff42322361e [file] [edit]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script>
if (window.testRunner)
testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<style>
.gridWithNone {
-webkit-grid-definition-columns: none;
-webkit-grid-definition-rows: none;
}
.gridWithFixed {
-webkit-grid-definition-columns: 10px;
-webkit-grid-definition-rows: 15px;
}
.gridWithPercent {
-webkit-grid-definition-columns: 53%;
-webkit-grid-definition-rows: 27%;
}
.gridWithAuto {
-webkit-grid-definition-columns: auto;
-webkit-grid-definition-rows: auto;
}
.gridWithEM {
-webkit-grid-definition-columns: 10em;
-webkit-grid-definition-rows: 15em;
font: 10px Ahem;
}
.gridWithViewPortPercentage {
-webkit-grid-definition-columns: 8vw;
-webkit-grid-definition-rows: 10vh;
}
.gridWithFitContent {
-webkit-grid-definition-columns: -webkit-fit-content;
-webkit-grid-definition-rows: -webkit-fit-content;
}
.gridWithFitAvailable {
-webkit-grid-definition-columns: -webkit-fit-available;
-webkit-grid-definition-rows: -webkit-fit-available;
}
.gridWithMinMax {
-webkit-grid-definition-columns: minmax(10%, 15px);
-webkit-grid-definition-rows: minmax(20px, 50%);
}
.gridWithMinContent {
-webkit-grid-definition-columns: -webkit-min-content;
-webkit-grid-definition-rows: -webkit-min-content;
}
.gridWithMaxContent {
-webkit-grid-definition-columns: -webkit-max-content;
-webkit-grid-definition-rows: -webkit-max-content;
}
</style>
<script src="../js/resources/js-test-pre.js"></script>
</head>
<body>
<div class="grid gridWithNone" id="gridWithNoneElement"></div>
<div class="grid gridWithFixed" id="gridWithFixedElement"></div>
<div class="grid gridWithPercent" id="gridWithPercentElement"></div>
<div class="grid gridWithAuto" id="gridWithAutoElement"></div>
<div class="grid gridWithEM" id="gridWithEMElement"></div>
<div class="grid gridWithViewPortPercentage" id="gridWithViewPortPercentageElement"></div>
<div class="grid gridWithFitContent" id="gridWithFitContentElement"></div>
<div class="grid gridWithFitAvailable" id="gridWithFitAvailableElement"></div>
<div class="grid gridWithMinMax" id="gridWithMinMax"></div>
<div class="grid gridWithMinContent" id="gridWithMinContent"></div>
<div class="grid gridWithMaxContent" id="gridWithMaxContent"></div>
<script src="resources/grid-columns-rows-get-set.js"></script>
<script src="../js/resources/js-test-post.js"></script>
</body>
</html>