<!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 Grid Test: Grid item blockifying</title>
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1185140">
  <style type="text/css">
html,body {
    color:black; background-color:white; font-size:16px; padding:0; margin:0;
}

.grid {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-rows: 2px;
  justify-content: start;
  border: 1px solid blue;
}

x {
  grid-column: span 2;
  border:1px solid;
}

.itable  { display:inline-table; }
.table   { display:table; }
.caption { display: block; }
.cell    { display: block; }
.row     { display: block; }
.rowg    { display: block; }
.head    { display: block; }
.foot    { display: block; }
.col     { display: block; }
.colg    { display: block; }

.flex  { display:flex; }
.iflex { display:flex; }

.bgrid  { display:grid; }
.igrid  { display:grid; }

.list  { display:list-item; }

.r   { display: block; }
.rb  { display: block; }
.rt  { display: block; }
.rbc { display: block; }
.rtc { display: block; }

</style>
</head>
<body>

<!-- These should produce two display:block grid items -->

<div class="grid">
<x class="cell"></x>
<x class="cell"></x>
</div>

<div class="grid">
<div style="display:contents">
<x class="cell"></x>
<x class="cell"></x>
</div>
</div>

<div class="grid">
<x class="cell"></x>
<x class="row"></x>
</div>

<div class="grid">
<div style="display:contents">
<x class="row"></x>
<x class="row"></x>
</div>
</div>

<div class="grid">
<x class="row"></x>
<x class="row"></x>
</div>

<div class="grid">
<x class="rowg"></x>
<x class="rowg"></x>
</div>

<div class="grid">
<x class="head"></x>
<x class="rowg"></x>
</div>

<div class="grid">
<x class="col"></x>
<x class="col"></x>
</div>

<div class="grid">
<x class="col"></x>
<x class="colg"></x>
</div>

<div class="grid">
<x class="colg"></x>
<x class="colg"></x>
</div>

<div class="grid">
<x class="cell"></x>
<x class="col"></x>
</div>

<div class="grid">
<div style="display:contents">
<x class="caption"></x>
<x class="caption"></x>
</div>
</div>

<div class="grid">
<x class="caption"></x>
<x class="caption"></x>
</div>

<div class="grid">
<x class="caption"></x>
<x class="cell"></x>
</div>

<div class="grid">
<x></x>
<x></x>
</div>

<!-- These should produce two display:table grid items -->

<div class="grid">
<x class="table"></x>
<x class="table"></x>
</div>

<div class="grid">
<x class="itable"></x>
<x class="itable"></x>
</div>

<div class="grid">
<div style="display:contents">
<x class="table"></x>
<x class="itable"></x>
</div>
</div>

<!-- These should produce one display:table grid item and one display:block grid item -->

<div class="grid">
<x class="table"></x>
<x class="cell"></x>
</div>

<div class="grid">
<x class="cell"></x>
<x class="table"></x>
</div>

<div class="grid">
<x class="itable"></x>
<x class="cell"></x>
</div>

<div class="grid">
<x class="table"></x>
<x class="rowg"></x>
</div>

<div class="grid">
<x class="itable"></x>
<x class="rowg"></x>
</div>

<div class="grid">
<x class="rowg"></x>
<x class="itable"></x>
</div>

<!-- These should produce two display:flex grid items -->

<div class="grid">
<x class="flex"></x>
<x class="iflex"></x>
</div>

<div class="grid">
<x class="iflex"></x>
<x class="iflex"></x>
</div>

<div class="grid">
<div style="display:contents">
<x class="flex"></x>
<x class="flex"></x>
</div>
</div>

<!-- This should produce one display:flex grid item and one display:block -->

<div class="grid">
<x class="iflex"></x>
<x class="cell"></x>
</div>

<!-- These should produce two display:grid grid items -->

<div class="grid">
<x class="bgrid"></x>
<x class="igrid"></x>
</div>

<div class="grid">
<x class="igrid"></x>
<x class="igrid"></x>
</div>

<div class="grid">
<div style="display:contents">
<x class="bgrid"></x>
<x class="bgrid"></x>
</div>
</div>

<!-- This should produce one display:grid grid item and one display:block -->

<div class="grid">
<x class="igrid"></x>
<x class="cell"></x>
</div>

<!-- This should produce one display:list-item grid item and one display:block -->
<div class="grid">
<x class="list"></x>
<x></x>
</div>

<!-- Various Ruby tests -->

<div class="grid">
<x class="r"></x>
<x class="r"></x>
</div>

<div class="grid">
<x class="rb"></x>
<x class="rb"></x>
</div>

<div class="grid">
<x class="rt"></x>
<x class="rt"></x>
</div>

<div class="grid">
<x class="rbc"></x>
<x class="rbc"></x>
</div>

<div class="grid">
<x class="rtc"></x>
<x class="rtc"></x>
</div>

<div class="grid">
<div style="display:contents">
<x class="r"></x>
<x class="r"></x>
</div>
</div>

<div class="grid">
<div style="display:contents">
<x class="rb"></x>
<x class="rb"></x>
</div>
</div>

<div class="grid">
<div style="display:contents">
<x class="rt"></x>
<x class="rt"></x>
</div>
</div>

<div class="grid">
<div style="display:contents">
<x class="rbc"></x>
<x class="rbc"></x>
</div>
</div>

<div class="grid">
<div style="display:contents">
<x class="rtc"></x>
<x class="rtc"></x>
</div>
</div>

</body>
</html>