<!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
grid-template-columns: [vertical] 50px [middle vertical] 100px [vertical];
grid-auto-columns: 10px;
grid-template-rows: [horizontal] 30px [middle horizontal] 60px [horizontal];
grid-auto-rows: 5px;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<p>This test checks that we resolve unknown named grid lines considering that all the implicit lines have the unknown names.</p>
<div style="position: relative">
<div class="grid">
<div style="grid-column: foo; grid-row: bar;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: a; grid-row: b;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: line; grid-row: line;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: foo; grid-row: bar;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 1 / foo; grid-row: 1 / bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="95">
</div>
<div style="grid-column: foo / 1; grid-row: bar / 1;"
data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="95">
</div>
<div style="grid-column: foo / foo; grid-row: bar / bar;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: foo / bar; grid-row: bar / foo;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: 1 foo; grid-row: 1 bar;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 2 foo; grid-row: 2 bar;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 3 foo; grid-row: 3 bar;"
data-offset-x="180" data-offset-y="105" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 4 foo; grid-row: 4 bar;"
data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 5 foo; grid-row: 5 bar;"
data-offset-x="200" data-offset-y="115" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 2 foo / 4 foo; grid-row: 2 bar / 4 bar;"
data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: 2 foo / 4 bar; grid-row: 2 bar / 4 foo;"
data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: 5 foo / 3 foo; grid-row: 5 bar / 3 bar;"
data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: 5 foo / 3 bar; grid-row: 5 bar / 3 foo;"
data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: -1 foo; grid-row: -1 bar;"
data-offset-x="40" data-offset-y="20" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -2 foo; grid-row: -2 bar;"
data-offset-x="30" data-offset-y="15" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -3 foo; grid-row: -3 bar;"
data-offset-x="20" data-offset-y="10" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -4 foo; grid-row: -4 bar;"
data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -5 foo; grid-row: -5 bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -4 foo / -2 foo; grid-row: -4 bar / -2 bar;"
data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: -4 foo / -2 bar; grid-row: -4 bar / -2 foo;"
data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: -3 foo / -5 foo; grid-row: -3 bar / -5 bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: -3 foo / -5 bar; grid-row: -3 bar / -5 foo;"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: 1 / span foo; grid-row: 1 / span bar;"
data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
</div>
<div style="grid-column: span foo / 1; grid-row: span bar / 1;"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: foo / span foo; grid-row: bar / span bar;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: foo / span bar; grid-row: bar / span foo;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: span foo / foo; grid-row: span bar / bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="170" data-expected-height="100">
</div>
<div style="grid-column: span foo / bar; grid-row: span bar / foo;"
data-offset-x="0" data-offset-y="0" data-expected-width="170" data-expected-height="100">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: -1 / span foo; grid-row: -1 / span bar;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: span foo / -1; grid-row: span bar / -1;"
data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
</div>
<div style="grid-column: -1 foo / span foo; grid-row: -1 bar / span bar;"
data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
</div>
<div style="grid-column: -1 foo / span bar; grid-row: -1 bar / span foo;"
data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
</div>
<div style="grid-column: span foo / -1 foo; grid-row: span bar / -1 bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: span foo / -1 bar; grid-row: span bar / -1 foo;"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: 1 / span 2 foo; grid-row: 1 / span 2 bar;"
data-offset-x="20" data-offset-y="10" data-expected-width="170" data-expected-height="100">
</div>
<div style="grid-column: span 2 foo / 1; grid-row: span 2 bar / 1;"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: foo / span 2 foo; grid-row: bar / span 2 bar;"
data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: foo / span 2 bar; grid-row: bar / span 2 foo;"
data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: span 2 foo / foo; grid-row: span 2 bar / bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="105">
</div>
<div style="grid-column: span 2 foo / bar; grid-row: span 2 bar / foo;"
data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="105">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: -1 / span 2 foo; grid-row: -1 / span 2 bar;"
data-offset-x="180" data-offset-y="105" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: span 2 foo / -1; grid-row: span 2 bar / -1;"
data-offset-x="10" data-offset-y="5" data-expected-width="170" data-expected-height="100">
</div>
<div style="grid-column: -1 foo / span 2 foo; grid-row: -1 bar / span 2 bar;"
data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
</div>
<div style="grid-column: -1 foo / span 2 bar; grid-row: -1 bar / span 2 foo;"
data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
</div>
<div style="grid-column: span 2 foo / -1 foo; grid-row: span 2 bar / -1 bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: span 2 foo / -1 bar; grid-row: span 2 bar / -1 foo;"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: 2 foo / span foo; grid-row: 2 bar / span bar;"
data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 2 foo / span bar; grid-row: 2 bar / span foo;"
data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 2 foo / span 2 foo; grid-row: 2 bar / span 2 bar;"
data-offset-x="190" data-offset-y="110" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: 2 foo / span 2 bar; grid-row: 2 bar / span 2 foo;"
data-offset-x="190" data-offset-y="110" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: span foo / 2 foo; grid-row: span bar / 2 bar;"
data-offset-x="10" data-offset-y="5" data-expected-width="180" data-expected-height="105">
</div>
<div style="grid-column: span foo / 2 bar; grid-row: span bar / 2 foo;"
data-offset-x="10" data-offset-y="5" data-expected-width="180" data-expected-height="105">
</div>
<div style="grid-column: span 2 foo / 2 foo; grid-row: span 2 bar / 2 bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
</div>
<div style="grid-column: span 2 foo / 2 bar; grid-row: span 2 bar / 2 foo;"
data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: -2 foo / span foo; grid-row: -2 bar / span bar;"
data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
</div>
<div style="grid-column: -2 foo / span bar; grid-row: -2 bar / span foo;"
data-offset-x="20" data-offset-y="10" data-expected-width="180" data-expected-height="105">
</div>
<div style="grid-column: -2 foo / span 2 foo; grid-row: -2 bar / span 2 bar;"
data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
</div>
<div style="grid-column: -2 foo / span 2 bar; grid-row: -2 bar / span 2 foo;"
data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
</div>
<div style="grid-column: span foo / -2 foo; grid-row: span bar / -2 bar;"
data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: span foo / -2 bar; grid-row: span bar / -2 foo;"
data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: span 2 foo / -2 foo; grid-row: span 2 bar / -2 bar;"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: span 2 foo / -2 bar; grid-row: span 2 bar / -2 foo;"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: 1 middle; grid-row: 1 middle;"
data-offset-x="50" data-offset-y="30" data-expected-width="100" data-expected-height="60">
</div>
<div style="grid-column: 2 middle; grid-row: 2 middle;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 3 middle; grid-row: 3 middle;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 4 middle; grid-row: 4 middle;"
data-offset-x="180" data-offset-y="105" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 5 middle; grid-row: 5 middle;"
data-offset-x="190" data-offset-y="110" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 2 middle / 4 middle; grid-row: 2 middle / 4 middle;"
data-offset-x="160" data-offset-y="95" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: 5 middle / 3 middle; grid-row: 5 middle / 3 middle;"
data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: -1 middle; grid-row: -1 middle;"
data-offset-x="90" data-offset-y="50" data-expected-width="100" data-expected-height="60">
</div>
<div style="grid-column: -2 middle; grid-row: -2 middle;"
data-offset-x="30" data-offset-y="15" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -3 middle; grid-row: -3 middle;"
data-offset-x="20" data-offset-y="10" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -4 middle; grid-row: -4 middle;"
data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -5 middle; grid-row: -5 middle;"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -2 middle / -4 middle; grid-row: -2 middle / -4 middle;"
data-offset-x="10" data-offset-y="5" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: -5 middle / -3 middle; grid-row: -5 middle / -3 middle;"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: 1 vertical; grid-row: 1 horizontal;"
data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">
</div>
<div style="grid-column: 2 vertical; grid-row: 2 horizontal;"
data-offset-x="50" data-offset-y="30" data-expected-width="100" data-expected-height="60">
</div>
<div style="grid-column: 3 vertical; grid-row: 3 horizontal;"
data-offset-x="150" data-offset-y="90" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 4 vertical; grid-row: 4 horizontal;"
data-offset-x="160" data-offset-y="95" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 5 vertical; grid-row: 5 horizontal;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 2 vertical / 4 vertical; grid-row: 2 horizontal / 4 horizontal;"
data-offset-x="50" data-offset-y="30" data-expected-width="110" data-expected-height="65">
</div>
<div style="grid-column: 5 vertical / 3 vertical; grid-row: 5 horizontal / 3 horizontal;"
data-offset-x="150" data-offset-y="90" data-expected-width="20" data-expected-height="10">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: -1 vertical; grid-row: -1 horizontal;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -2 vertical; grid-row: -2 horizontal;"
data-offset-x="70" data-offset-y="40" data-expected-width="100" data-expected-height="60">
</div>
<div style="grid-column: -3 vertical; grid-row: -3 horizontal;"
data-offset-x="20" data-offset-y="10" data-expected-width="50" data-expected-height="30">
</div>
<div style="grid-column: -4 vertical; grid-row: -4 horizontal;"
data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -5 vertical; grid-row: -5 horizontal;"
data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: -2 vertical / -4 vertical; grid-row: -2 horizontal / -4 horizontal;"
data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
</div>
<div style="grid-column: -5 vertical / -3 vertical; grid-row: -5 horizontal / -3 horizontal;"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: 1 / span middle; grid-row: 1 / span middle;"
data-offset-x="20" data-offset-y="10" data-expected-width="50" data-expected-height="30">
</div>
<div style="grid-column: span middle / 1; grid-row: span middle / 1;"
data-offset-x="10" data-offset-y="5" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: 1 / span 2 middle; grid-row: 1 / span 2 middle;"
data-offset-x="20" data-offset-y="10" data-expected-width="160" data-expected-height="95">
</div>
<div style="grid-column: span 2 middle / 1; grid-row: span 2 middle / 1;"
data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: middle / span middle; grid-row: middle / span middle;"
data-offset-x="70" data-offset-y="40" data-expected-width="110" data-expected-height="65">
</div>
<div style="grid-column: span middle / middle; grid-row: span middle / middle;"
data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
</div>
<div style="grid-column: middle / span 2 middle; grid-row: middle / span 2 middle;"
data-offset-x="70" data-offset-y="40" data-expected-width="120" data-expected-height="70">
</div>
<div style="grid-column: span 2 middle / middle; grid-row: span 2 middle / middle;"
data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="40">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: -1 / span middle; grid-row: -1 / span middle;"
data-offset-x="170" data-offset-y="100" data-expected-width="10" data-expected-height="5">
</div>
<div style="grid-column: span middle / -1; grid-row: span middle / -1;"
data-offset-x="70" data-offset-y="40" data-expected-width="100" data-expected-height="60">
</div>
<div style="grid-column: -1 / span 2 middle; grid-row: -1 / span 2 middle;"
data-offset-x="170" data-offset-y="100" data-expected-width="20" data-expected-height="10">
</div>
<div style="grid-column: span 2 middle / -1; grid-row: span 2 middle / -1;"
data-offset-x="10" data-offset-y="5" data-expected-width="160" data-expected-height="95">
</div>
<div style="grid-column: -1 middle / span middle; grid-row: -1 middle / span middle;"
data-offset-x="70" data-offset-y="40" data-expected-width="110" data-expected-height="65">
</div>
<div style="grid-column: span middle / -1 middle; grid-row: span middle / -1 middle;"
data-offset-x="10" data-offset-y="5" data-expected-width="60" data-expected-height="35">
</div>
<div style="grid-column: -1 middle / span 2 middle; grid-row: -1 middle / span 2 middle;"
data-offset-x="70" data-offset-y="40" data-expected-width="120" data-expected-height="70">
</div>
<div style="grid-column: span 2 middle / -1 middle; grid-row: span 2 middle / -1 middle;"
data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="40">
</div>
</div>
</div>
<div style="position: relative">
<div class="grid">
<div style="grid-column: span middle / 6; grid-row: span middle / 6;"
data-offset-x="80" data-offset-y="45" data-expected-width="130" data-expected-height="75">
</div>
<div style="grid-column: span 2 middle / 6; grid-row: span 2 middle / 6;"
data-offset-x="20" data-offset-y="10" data-expected-width="190" data-expected-height="110">
</div>
<div style="grid-column: -6 / span middle; grid-row: -6 / span middle;"
data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="45">
</div>
<div style="grid-column: -6 / span 2 middle; grid-row: -6 / span 2 middle;"
data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="110">
</div>
</div>
</div>
</body>
Codebase Browser
chromium