зеркало из https://github.com/mozilla/gecko-dev.git
135 строки
7.3 KiB
HTML
135 строки
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<html><head>
|
|
<title>Reference: Testing grid item percent sizes</title>
|
|
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
|
|
<meta charset="utf-8">
|
|
<style type="text/css">
|
|
body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
|
|
* { vertical-align:top; line-height:4px; }
|
|
|
|
.grid {
|
|
display: inline-grid;
|
|
position: relative;
|
|
background-color: grey;
|
|
grid-template-rows: 50px 100px;
|
|
justify-items: start;
|
|
align-items: start;
|
|
clear: both;
|
|
}
|
|
|
|
.item {
|
|
background: pink;
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
background-clip: content-box;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
z-index: 1;
|
|
writing-mode: vertical-rl;
|
|
}
|
|
.c1 {
|
|
width: 40%;
|
|
height: 90px;
|
|
grid-area: 1 / 1 / 3 / 3;
|
|
}
|
|
.c2 {
|
|
grid-area: 1 / 1 / 3 / 3;
|
|
}
|
|
.pbox {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.maxw .item { max-height: 50%; }
|
|
.minw .item { min-height: 50%; }
|
|
|
|
.p { padding:3px 5px 10% 20%; }
|
|
.m { margin:3px 5px 10% 10%; }
|
|
.b { border:solid black; }
|
|
|
|
x { display:inline-block; width:10px; height:4px; background: silver; }
|
|
|
|
a {
|
|
grid-area: 1 / 1 / 2 / 2;
|
|
width:100%; height:100%;
|
|
background: blue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div style="float:left">
|
|
<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
|
</div>
|
|
|
|
<br clear="all">
|
|
|
|
<div style="float:left" class="maxw">
|
|
<div class="grid" style="grid-template-columns:calc(30px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(43.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(36px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(51.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
|
</div>
|
|
|
|
<br clear="all">
|
|
|
|
<div style="float:left" class="minw">
|
|
<div class="grid" style="grid-template-columns:calc(10px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(18.75px)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(43.75px)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(18.75px)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(16px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(26.25px)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(51.25px)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(26.25px)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
|
|
</div>
|
|
|
|
<div style="float:left">
|
|
<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
|
</div>
|
|
|
|
<br clear="all">
|
|
|
|
<div style="float:left" class="maxw">
|
|
<div class="grid" style="grid-template-columns:calc(35px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(57.15px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(46px/.7)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(46px/.7)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
|
</div>
|
|
|
|
<div style="float:left" class="minw">
|
|
<div class="grid" style="grid-template-columns:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(35px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(15px/.9)"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(20px/.7)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:calc(37.15px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
|
<div class="grid" style="grid-template-columns:0 calc(37.15px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|