Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
-->
<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>