Bug 1434380: Rewrite parts of reftest reference case grid-auto-min-sizing-definite-001-ref.html to be easier to understand & adjust.
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
--- a/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html
+++ b/layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html
@@ -57,50 +57,41 @@ span.h {
b40 {
display: block;
width: 40px;
height: 40px;
border: 1px solid pink;
z-index: 1; position:relative;
}
-w {
- position:absolute;
- background: lime;
- border-width: 1px 0 0 3px;
- border-style: solid;
- height:48px;
- width:75px;
+.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 > w {
- border-width: 3px 0 0 1px;
- left:-1px; top:-3px;
- height:53px;
- width:61px;
-}
-.h.r { margin-left:19px; padding: 1px 15px 37px 30px; }
-.v .h > w {
- height:48px;
- width:45px;
-}
-.v.r > w {
- height:53px;
- width:61px;
-}
-.v .v > w {
- height:41px;
- width:45px;
+.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; }
+.t8 { width:118px; height: 102.5px; }
-xx {
+xx {
display: block;
background: lime;
padding:32px 32px 16px 32px;
margin: 0 0 32px 16px;
}
</style>
</head>
<body>
@@ -109,15 +100,15 @@ xx {
<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"><w></w><b40></b40></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>