<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset="utf-8">
<title>CSS Test: Testing definite placement with non-existent line names</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#grid-placement-slot">
<link rel="match" href="grid-placement-definite-implicit-002-ref.html">
<style type="text/css">
html,body {
font-size: 16px;
font-family: monospace;
padding:0; margin:0;
}
span {
background: lime;
border: 1px solid;
grid-row: 1;
}
.grid {
display: grid;
grid-template-columns: [A] 20px [A] 20px;
grid-template-rows: 20px 20px;
grid-auto-columns: 20px;
}
/* Legend:
X = line name with no match
x = ditto with span
A = existing line name
a = ditto with span
N = line number
n = ditto with span
e = on the end side
s = on the start side
*/
.XeN { grid-column: X 3 / 2; }
.XsN { grid-column: X -3 / 2; }
.NeX { grid-column: 2 / X 3; }
.NsX { grid-column: 2 / X -3; }
.XeA { grid-column: X 3 / A; }
.XsA { grid-column: X -3 / A; }
.XsA2 { grid-column: X -3 / A 2; }
.XsA3 { grid-column: X -3 / A 3; }
.AsX { grid-column: A / X -3; }
.xsN { grid-column: span X / 1; }
.x2sN { grid-column: span X 2 / 1; }
.xsN2 { grid-column: span X / 2; }
.xXs { grid-column: span X / X -2; }
.aXs { grid-column: span A / X -2; }
.aXe { grid-column: span A / X 2; }
.xXe { grid-column: span X / X 2; }
.AXe { grid-column: A / X 2; }
.A2Xe { grid-column: A 2 / X 2; }
.XXe { grid-column: X / X 2; }
.XX3e { grid-column: X / X 3; }
.XbXe { grid-column: X -2 / X; }
.XX0b { grid-column: X -3 / X -3; }
.XX1b { grid-column: X -3 / X -2; }
.XX2b { grid-column: X -3 / X -1; }
.XbN1 { grid-column: X -3 / 1; }
.XbN2 { grid-column: X -3 / 2; }
.Xbb { grid-column: X -3 / X -4; }
.Xee { grid-column: X 3 / X; }
.nX2s { grid-column: span 2 / X -2; }
.nXs { grid-column: span 2 / X -1; }
.nXe { grid-column: span 2 / X; }
.nX2e { grid-column: span 2 / X 2; }
.nX3e { grid-column: span 2 / X 3; }
.n3Xe { grid-column: span 3 / X; }
.n4Xe { grid-column: span 4 / X; }
.Xen3 { grid-column: X / span 3; }
.Xea { grid-column: X / span A; }
.Xea2 { grid-column: X / span A 2; }
.Xea3 { grid-column: X / span A 3; }
.Xsa { grid-column: X -1 / span A; }
.Xsa2 { grid-column: X -1 / span A 2; }
.Xsa4 { grid-column: X -1 / span A 4; }
.Xs2a { grid-column: X -2 / span A; }
.Xs2a2 { grid-column: X -2 / span A 2; }
.Xs2a4 { grid-column: X -2 / span A 4; }
.Xs3a { grid-column: X -3 / span A; }
.Xs3a2 { grid-column: X -3 / span A 2; }
.Xs3a4 { grid-column: X -3 / span A 4; }
.nxe { grid-column: 1 / span X; }
.nx3e { grid-column: 1 / span X 3; }
.n2x3e { grid-column: 2 / span X 3; }
.Axe { grid-column: A / span X; }
.A2xe { grid-column: A 2 / span X; }
.Ax3e { grid-column: A / span X 3; }
.A2x3e { grid-column: A 2 / span X 3; }
.Aa { grid-column: A / span A; }
.A2a { grid-column: A 2 / span A; }
.Aa3 { grid-column: A / span A 3; }
.AXs { grid-column: A / X -2; }
.A2Xs { grid-column: A 2 / X -2; }
._Xs { grid-column: auto / X -2; }
._Xe { grid-column: auto / X 2; }
._xe { grid-column: auto / span X; }
._x3e { grid-column: auto / span X 3; }
._xa { grid-column: auto / span A; }
._xa3 { grid-column: auto / span A 3; }
._xn3 { grid-column: auto / span 3; }
._xn5 { grid-column: auto / span 5; }
.Xs_ { grid-column: X -1 / auto; }
.X2s_ { grid-column: X -2 / auto; }
.X2e_ { grid-column: X 2 / auto; }
.A_ { grid-column: A / auto; }
.A2_ { grid-column: A 2 / auto; }
.x3_ { grid-column: span X 3 / auto; }
.a2_ { grid-column: span A 2 / auto; }
.a-2_ { grid-column: span A -2 / auto; } /*intentionally invalid span*/
._n { grid-column: auto / 1; }
._n2 { grid-column: auto / 2; }
.A3Xe { grid-column: A 3 / X 2; }
.asA { grid-column: span A / A; }
.asA2 { grid-column: span A / A 2; }
.a2sA2 { grid-column: span A 2 / A 2; }
.as1 { grid-column: span A / 1; }
.as2 { grid-column: span A / 2; }
.as3 { grid-column: span A / 3; }
.c1 { grid-column:1; grid-row:auto; background:grey; }
</style>
</head>
<body>
<div style="float:left; width:140px">
<div class="grid"><span class="XeN" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsN" ></span><span class="c1"></span></div>
<div class="grid"><span class="NeX" ></span><span class="c1"></span></div>
<div class="grid"><span class="NsX" ></span><span class="c1"></span></div>
<div class="grid"><span class="XeA" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsA" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsA2"></span><span class="c1"></span></div>
<div class="grid"><span class="XsA3"></span><span class="c1"></span></div>
<div class="grid"><span class="AsX" ></span><span class="c1"></span></div>
<div class="grid"><span class="xsN" ></span><span class="c1"></span></div>
<div class="grid"><span class="x2sN"></span><span class="c1"></span></div>
<div class="grid"><span class="xsN2"></span><span class="c1"></span></div>
<div class="grid"><span class="xXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="aXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="aXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="xXe" ></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="AXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2Xe"></span><span class="c1"></span></div>
<div class="grid"><span class="XXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="XX3e"></span><span class="c1"></span></div>
<div class="grid"><span class="XbXe"></span><span class="c1"></span></div>
<div class="grid"><span class="XX0b"></span><span class="c1"></span></div>
<div class="grid"><span class="XX1b"></span><span class="c1"></span></div>
<div class="grid"><span class="XX2b"></span><span class="c1"></span></div>
<div class="grid"><span class="XbN1"></span><span class="c1"></span></div>
<div class="grid"><span class="XbN2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xbb" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xee" ></span><span class="c1"></span></div>
<div class="grid"><span class="nX2s"></span><span class="c1"></span></div>
<div class="grid"><span class="nXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="nXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="nX2e"></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="nX3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="n3Xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="n4Xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xen3" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea2" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea3" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa2" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa4" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a4"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a4"></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="nxe" ></span><span class="c1"></span></div>
<div class="grid"><span class="nx3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="n2x3e"></span><span class="c1"></span></div>
<div class="grid"><span class="Axe" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="Ax3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2x3e"></span><span class="c1"></span></div>
<div class="grid"><span class="Aa" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2a" ></span><span class="c1"></span></div>
<div class="grid"><span class="Aa3" ></span><span class="c1"></span></div>
<div class="grid"><span class="AXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2Xs" ></span><span class="c1"></span></div>
<div class="grid"><span class="_Xs" ></span><span class="c1"></span></div>
<div class="grid"><span class="_Xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="_xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="_x3e" ></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="_xa" ></span><span class="c1"></span></div>
<div class="grid"><span class="_xa3"></span><span class="c1"></span></div>
<div class="grid"><span class="_xn3"></span><span class="c1"></span></div>
<div class="grid"><span class="_xn5"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs_" ></span><span class="c1"></span></div>
<div class="grid"><span class="X2s_"></span><span class="c1"></span></div>
<div class="grid"><span class="X2e_"></span><span class="c1"></span></div>
<div class="grid"><span class="A_" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2_" ></span><span class="c1"></span></div>
<div class="grid"><span class="x3_" ></span><span class="c1"></span></div>
<div class="grid"><span class="a2_" ></span><span class="c1"></span></div>
<div class="grid"><span class="a-2_"></span><span class="c1"></span></div>
<div class="grid"><span class="_n" ></span><span class="c1"></span></div>
<div class="grid"><span class="_n2" ></span><span class="c1"></span></div>
<div class="grid"><span class="A3Xe"></span><span class="c1"></span></div>
<div class="grid"><span class="asA"></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px; clear:both">
<div class="grid"><span class="asA2"></span><span class="c1"></span></div>
<div class="grid"><span class="a2sA2"></span><span class="c1"></span></div>
<div class="grid"><span class="as1"></span><span class="c1"></span></div>
<div class="grid"><span class="as2"></span><span class="c1"></span></div>
<div class="grid"><span class="as3"></span><span class="c1"></span></div>
</div>
</body>
</html>