mirror of
https://github.com/servo/servo.git
synced 2025-06-27 02:23:41 +01:00
85 lines
3.9 KiB
HTML
85 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: getComputedStyle().gridTemplateColumns</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
|
|
<meta name="assert" content="grid-template-columns computed value is the keyword none or a computed track list.">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/computed-testcommon.js"></script>
|
|
<script src="/css/css-grid/support/grid-child-utils.js"></script>
|
|
<style>
|
|
|
|
#target {
|
|
display: grid;
|
|
width: 54px;
|
|
height: 32px;
|
|
};
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="target">
|
|
<div></div>
|
|
<div></div>
|
|
<div style="grid-column: 4"></div>
|
|
<div id="child"></div>
|
|
<div style="grid-column: 10"></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
// Style with 3 repeat tracks.
|
|
let style3 =
|
|
"[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h] 5px [i j]) [k] 7px [k] 8px [l m]";
|
|
let col3Tester = new GridChildHelper(gridChildHelperCol, style3);
|
|
let rowTester = new GridChildHelper(gridChildHelperRow, style3);
|
|
|
|
// Style with 2 repeat tracks.
|
|
let style2 =
|
|
"[a] 1px [b] 2px [c d] repeat(auto-fit, [e f] 3px [g] 4px [h]) [i j] 7px [k] 8px [l m]";
|
|
let col2Tester = new GridChildHelper(gridChildHelperCol, style2);
|
|
|
|
rowTester.runTest(3,
|
|
"[a] 1px [b] 2px [c d e f] 3px [g] 0px [h] 0px [i j k] 7px [k] 8px [l m]");
|
|
rowTester.runTest(5,
|
|
"[a] 1px [b] 2px [c d e f] 0px [g] 0px [h] 5px [i j k] 7px [k] 8px [l m]");
|
|
rowTester.runTest("3 / 8",
|
|
"[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
|
|
rowTester.runTest("4 / span 2",
|
|
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
|
|
rowTester.runTest("4 / 5",
|
|
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j k] 7px [k] 8px [l m]");
|
|
|
|
col3Tester.runTest(3,
|
|
"[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
|
|
col3Tester.runTest(6,
|
|
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
|
|
col3Tester.runTest("3 / 8",
|
|
"[a] 1px [b] 2px [c d e f] 3px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
|
|
col3Tester.runTest("5 / span 2",
|
|
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 0px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
|
|
col3Tester.runTest("7 / span 2",
|
|
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
|
|
col3Tester.runTest("5 / 8",
|
|
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 5px [i j e f] 3px [g] 4px [h] 0px [i j e f] 0px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
|
|
col3Tester.runTest("8 / 10",
|
|
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h] 0px [i j e f] 0px [g] 0px [h] 5px [i j e f] 3px [g] 4px [h] 5px [i j k] 7px [k] 8px [l m]");
|
|
|
|
col2Tester.runTest(3,
|
|
"[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
|
|
col2Tester.runTest(6,
|
|
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 0px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
|
|
col2Tester.runTest("3 / 8",
|
|
"[a] 1px [b] 2px [c d e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
|
|
col2Tester.runTest("6 / span 2",
|
|
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h e f] 0px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
|
|
col2Tester.runTest("5 / 10",
|
|
"[a] 1px [b] 2px [c d e f] 0px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 4px [h e f] 3px [g] 0px [h i j] 7px [k] 8px [l m]");
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|