layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html
author Daniel Holbert <dholbert@cs.stanford.edu>
Tue, 30 Jan 2018 22:17:13 -0500
branchSEAMONKEY_2_49_ESR_RELBRANCH
changeset 357573 dc52d89bf6d8ff2cc8fa9a1c38b4088eafbda6a3
parent 345935 32f744b48562b3d14e68d64ad74018658eb95281
child 357574 831b454b9038a9fc8b1cdb235cdde640e398f774
permissions -rw-r--r--
Bug 1434380: Rewrite parts of reftest reference case grid-auto-min-sizing-definite-001-ref.html to be easier to understand & adjust. r=mats a=IanN DONTBUILD CLOSED TREE SeaMonkey ESR52 release branch only. In particular: - I'm specifying exact content-box sizes on some containers in the reference case, to match the actual (automatic / grid-area-determined) content-box sizes in the testcase. - I'm removing the element "w" and its selectors, since it was only used in one spot and it wasn't clear what it was being used for (and it doesn't exist in the testcase). - I'm specifying explicit margin and padding values for the ".v.r" and ".h.r" rules, based on observed values from the testcase, and I'm including comments to explain mathematically why they are correct. MozReview-Commit-ID: JKfxeTp1ZU9

<!DOCTYPE HTML>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
  <meta charset="utf-8">
  <title>Reference: Testing 'auto' min-sizing with definite min-width/height</title>
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775">
  <style type="text/css">
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
br { clear:both; }
	
.grid {
  display: grid;
  border: 1px dashed silver;
  grid-template-columns: minmax(0,min-content);
  grid-template-rows: minmax(0,min-content) minmax(0,min-content);
  float: left;
  margin-bottom:20px;
  align-items: start;
  justify-items: start;
}
.v { 
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
}
.h { 
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
}
.bb {
  box-sizing: border-box;
}

span { 
  display: block;
  background: lime;
  margin: 7px 13px 50% 20%;
  padding:1px 3px 10% 30%;
}

span.v {
  height: 30px;
  width: 10px;
  border-left: 1px solid;
  border-top: 3px solid;
}

span.h {
  width: 30px;
  height: 10px;
  border-left: 3px solid;
  border-top: 1px solid;
}

b40 {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid pink;
  z-index: 1; position:relative;
}

.h.r {
  height: 42px;
  width: 42px;
  /* This margin-left is 20% of 98px-wide grid area */
  margin-left: 19.6px;
  /* This padding-bottom is 10% of 47.5px tall grid area */
  /* This padding-left   is 30% of 98px wide grid area */
  padding: 1px 3px 4.75px 29.4px;
}
.v.r {
  height: 42px;
  width: 42px;
  /* This margin-left is 20% of 54px-wide grid area */
  margin-left: 10.8px;
  /* This padding-bottom is 10% of 102.5px tall grid area */
  /* This padding-left   is 30% of 54px wide grid area */
  padding: 1px 3px 10.25px 16.2px;
}

.r { position:relative; }

.t6 { width:46px; }
.t8 { width:118px; height: 102.5px; }

xx {
  display: block;
  background: lime;
  padding:32px 32px 16px 32px;
  margin: 0 0 32px 16px;
}
  </style>
</head>
<body>


<div class="grid"><span class="h"><x></x></span></div>
<div class="grid"><span class="h bb"><x></x></span></div>
<div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div>
<div class="grid" style="grid:48px / 122px"><span class="h r"><b40></b40></span></div>
<br>
<div class="grid"><span class="v"><x></x></span></div>
<div class="grid t6"><span class="v bb"><x></x></span></div>
<div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div>
<div class="grid t8"><span class="v r"><b40></b40></span></div>

<div class="grid"><xx class="v"></xx></div>
<div class="grid v"><xx class="h"></xx></div>

</body>
</html>