layout/reftests/css-grid/grid-item-sizing-percent-004.html
author Chris H-C <chutten@mozilla.com>
Fri, 22 Mar 2019 17:31:02 +0000
changeset 465740 c3d4eb5b3b2223aa6734bb8c2d39457ee768fc3c
parent 329515 14f88bc4d6b3058c063baa77c6eb71509aa5ed23
permissions -rw-r--r--
Bug 1536805 - Document Origin Telemetry r=janerik Differential Revision: https://phabricator.services.mozilla.com/D24263

<!DOCTYPE html>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
  <title>CSS Test: Testing grid item percent sizes</title>
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1330380">
  <link rel="help" href="http://dev.w3.org/csswg/css-grid/">
  <link rel="match" href="grid-item-sizing-percent-004-ref.html">
  <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: 60%;
  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"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><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"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><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"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><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"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><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"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><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"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
</div>

</body>
</html>