grid-placement-definite-implicit-002.html

<!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>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: