mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-24 10:45:42 +00:00
313 lines
5.1 KiB
HTML
313 lines
5.1 KiB
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 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>
|