mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-27 12:15:33 +00:00
6708be703f
There are also some corrections here for existing reftests because the old temporary 'stretch' scaffolding was wrong in many ways.
181 lines
3.5 KiB
HTML
181 lines
3.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<html><head>
|
|
<title>CSS Test: Testing basic placement and layout of abs.pos. grid items</title>
|
|
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
|
|
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
|
|
<link rel="match" href="grid-abspos-items-002-ref.html">
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
|
|
|
|
.grid {
|
|
display: grid;
|
|
transform: translate(1px,2px);
|
|
border: 1px solid;
|
|
grid-auto-flow: row;
|
|
grid-auto-columns: 23px;
|
|
grid-auto-rows: 7px;
|
|
padding: 17px 7px 11px 13px;
|
|
width: 100px;
|
|
height: 60px;
|
|
}
|
|
.zero-size { width:0; height:0; }
|
|
.auto-size { width:auto; height:auto; }
|
|
|
|
.a {
|
|
grid-column: 1 / 3;
|
|
grid-row: 3 / 5;
|
|
background: blue;
|
|
}
|
|
|
|
.abs {
|
|
position: fixed;
|
|
top:3px; left:1px; right:5px; bottom:1px;
|
|
opacity: 0.7;
|
|
}
|
|
.b {
|
|
grid-column: auto / 2;
|
|
grid-row: auto / auto;
|
|
}
|
|
.c {
|
|
grid-column: 9 / auto; /* 9 is outside the grid */
|
|
grid-row: 9 / auto; /* 9 is outside the grid */
|
|
}
|
|
.d {
|
|
grid-column: auto / 1;
|
|
grid-row: 2 / 1;
|
|
}
|
|
.e {
|
|
grid-column: 4 / auto;
|
|
grid-row: 3 / auto;
|
|
}
|
|
.f {
|
|
grid-column: 4 / auto;
|
|
grid-row: auto / 1;
|
|
}
|
|
.g {
|
|
grid-column: 1 / 3;
|
|
grid-row: 2 / 3;
|
|
}
|
|
.h {
|
|
grid-column: auto / auto;
|
|
grid-row: auto / auto;
|
|
}
|
|
.i {
|
|
grid-column: span 1 / span 2;
|
|
grid-row: span 2 / span A;
|
|
background: lime;
|
|
}
|
|
.j {
|
|
grid-column: span A / span 2;
|
|
grid-row: span 2 / span 1;
|
|
background: lime;
|
|
}
|
|
span {
|
|
background: lime;
|
|
border: 1px solid;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div style="float:left">
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<span class="b abs">b</span>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<span class="c abs">c</span>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<span class="d abs">d</span>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<span class="e abs">e</span>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<span class="f abs">f</span>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<span class="g abs">g</span>
|
|
</div>
|
|
|
|
</div><div style="float:left">
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<div><span class="b abs">b</span></div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<x><span class="c abs">c</span></x>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<span class="d abs">d</span>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<div><span class="e abs">e</span></div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<span class="f abs">f</span>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<span class="a"></span>
|
|
<x><span class="g abs">g</span></x>
|
|
</div>
|
|
|
|
</div><div style="float:left">
|
|
|
|
<div class="grid zero-size">
|
|
<span class="b abs">b</span>
|
|
</div>
|
|
|
|
<div class="grid auto-size">
|
|
<span class="h abs">h</span>
|
|
</div>
|
|
|
|
<div class="grid" style="height:auto">
|
|
<div style="grid-column: 1 / span 3"></div>
|
|
<div class="i abs">i</div>
|
|
</div>
|
|
|
|
<div class="grid" style="height:auto">
|
|
<div style="grid-column: 1 / span 3"></div>
|
|
<div class="j abs">j</div>
|
|
</div>
|
|
|
|
<div class="grid" style="width:43px; height:53px">
|
|
<span class="abs" style="grid-column-end:1; grid-row-end:1;">a</span>
|
|
<span class="abs" style="grid-column-start:1; grid-row-end:1;">b</span>
|
|
<span class="abs" style="grid-column-end:1; grid-row-start:1;">c</span>
|
|
<span class="abs" style="grid-column-start:1; grid-row-start:1;">d</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|