Browse Source

Issue #1230 - Part 3: Update Reftests

Ref:
1434478 part 7 - Update tests and enable some previously temporarily disabled Grid reftests from bug 1427608.
pull/24/head
Gaming4JC 3 years ago committed by Roy Tam
parent
commit
4bc299bb79
  1. 2
      layout/reftests/bugs/403519-2-ref.html
  2. 51
      layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html
  3. 2
      layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html
  4. 2
      layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html
  5. 10
      layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html
  6. 2
      layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html
  7. 2
      layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html
  8. 78
      layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html
  9. 78
      layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html
  10. 16
      layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html
  11. 6
      layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html
  12. 16
      layout/reftests/writing-mode/1174450-intrinsic-sizing-ref.html

2
layout/reftests/bugs/403519-2-ref.html

@ -17,7 +17,7 @@ table {
<body>
<table>
<tbody><tr>
<td colspan="2" style="width: 100%;"><div>&nbsp;</div></td>
<td colspan="2"><div>&nbsp;</div></td>
<td>b</td>
</tr>
<tr>

51
layout/reftests/css-grid/grid-auto-min-sizing-definite-001-ref.html

@ -65,32 +65,49 @@ b40 {
.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 98px wide grid area */
/* This padding-left is 30% of 98px wide grid area */
padding: 1px 3px 9.8px 29.4px;
/* 49px is the percentage basis, i.e. the column size */
margin-left: calc(0.2 * 49px);
padding: 1px 3px calc(0.1 * 49px) calc(0.3 * 49px);
}
.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 54px wide grid area */
/* This padding-left is 30% of 54px wide grid area */
padding: 1px 3px 5.4px 16.2px;
/* 27px is the percentage basis, i.e. the column size */
margin-left: calc(0.2 * 27px);
padding: 1px 3px calc(0.1 * 27px) calc(0.3 * 27px);
}
.r { position:relative; }
.t4 { width: 49px;
height: calc(10px /* item min-height */ +
7px /* item margin-top */ +
1px /* item padding-top */ +
1px /* item border-top */ +
calc(0.5 * 49px) /* item margin-bottom */ +
calc(0.1 * 49px) /* item padding-bottom */);
}
.t6 { width:46px; }
.t8 { width:118px; height: 102.5px; }
.t8 { width: 27px;
height: calc(30px /* item min-height */ +
7px /* item margin-top */ +
3px /* item padding-top */ +
1px /* item border-top */ +
calc(0.5 * 27px) /* item margin-bottom */ +
calc(0.1 * 27px) /* item padding-bottom */);
}
xx {
display: block;
background: lime;
padding:32px 32px 16px 32px;
margin: 0 0 32px 16px;
padding: 32px 32px calc(0.2 * 32px) calc(0.4 * 32px);
margin: 0 0 calc(0.4 * 32px) calc(0.2 * 32px);
}
.t9, .t10 {
position: relative;
z-index: 1;
grid: calc(32px + calc(0.4 * 32px) + calc(0.2 * 32px)) 0 / 32px;
}
</style>
</head>
@ -100,15 +117,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>
<div class="grid t4"><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 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>
<div class="grid t9"><xx class="v"></xx></div>
<div class="grid v t10"><xx class="h"></xx></div>
</body>
</html>

2
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-002-ref.html

@ -36,7 +36,7 @@ var coltest = [
"min-height:40%", "min-height:40%; max-width:30px"
];
var results = [
"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "24px", "24px",
"24px", "24px", "24px", "24px", "24px", "24px", "80px", "24px", "24px", "24px",
"24px", "24px", "24px"
];
var item_width = [

2
layout/reftests/css-grid/grid-auto-min-sizing-min-content-min-size-004-ref.html

@ -36,7 +36,7 @@ var rowtest = [
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
];
var results = [
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "312px/52px"
];
var item_height = [
"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"

10
layout/reftests/css-grid/grid-auto-min-sizing-percent-001-ref.html

@ -54,9 +54,9 @@ br { clear:both; }
.c10 { grid-template-columns: minmax(10px,0) 1fr; }
#px-border .c10 { grid-template-columns: minmax(30px,0) 1fr; }
#percent-border .c100 { grid-template-columns: 111px 0; }
#percent-border .c100calc100 { grid-template-columns: 100px 11px; }
#percent-border .c10 { grid-template-columns: minmax(11px,0) 0; }
#percent-border .c100 { grid-template-columns: 100px 0; }
#percent-border .c100calc100 { grid-template-columns: 100px 10px; }
#percent-border .c10 { grid-template-columns: minmax(10px,0) 0; }
#percent-border .c100100 { grid-template-columns: minmax(100px,0) 150px; }
#percent-border .c200 { grid-template-columns: 250px; }
</style>
@ -99,7 +99,7 @@ var grids = [
"grid c100",
"grid c100",
"grid",
"grid c200",
"grid c100",
"grid c10",
"grid c100",
"grid c100",
@ -110,7 +110,7 @@ var grids = [
"grid c100",
"grid c100",
"grid",
"grid c200",
"grid c100",
"grid c10",
"grid c100",
"grid c100",

2
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-002-ref.html

@ -36,7 +36,7 @@ var coltest = [
"min-height:40%", "min-height:40%; max-width:30px"
];
var results = [
"360px", "360px", "360px", "24px", "24px", "360px", "80px", "24px", "20px", "24px",
"360px", "0px", "0px", "0px", "24px", "360px", "80px", "24px", "20px", "24px",
"6px", "24px", "24px"
];
var item_width = [

2
layout/reftests/css-grid/grid-auto-min-sizing-transferred-size-004-ref.html

@ -36,7 +36,7 @@ var rowtest = [
"min-width:80%; max-height:20px", "min-width:50%", "margin-left: 50px; width:50%"
];
var results = [
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "24px/52px"
"0/2px", "0/2px", "0/4px", "0/2px", "0/2px", "0/2px", "12px/2px", "20px/2px", "20px/2px", "24px/2px", "312px/52px"
];
var item_height = [
"0", "0", "0", "0", "0", "0", "12px", "20px", "20px", "24px", "312px"

78
layout/reftests/css-grid/grid-item-sizing-percent-003-ref.html

@ -69,67 +69,67 @@ a {
<div style="float:left">
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(21px/0.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
</div>
<div style="float:left" class="maxw">
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
</div>
<div style="float:left" class="minw">
<div class="grid" style="grid-template-rows:calc(12px)"><div class="item"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(15px/.9)"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(18px)"><div class="item pbox b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(21px/.9)"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(21px/.9)"><div class="item c2 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:26px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><div class="item c1 pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 36px"><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-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows: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-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 54px"><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-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows: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-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 54px"><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-rows:calc(15px/.9)"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(15px/.9)"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows: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-rows:calc(22.5px)"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:calc(30px)"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 calc(30px)"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:20px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 30px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:28px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:34px"><div class="item pbox p b m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-rows:0 54px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
</div>

78
layout/reftests/css-grid/grid-item-sizing-percent-004-ref.html

@ -62,71 +62,71 @@ a {
<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:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 15px"><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 class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 41px"><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 21px"><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:35px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><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 class="grid" style="grid-template-columns:41px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 41px"><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 41px"><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:15px"><div class="item pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox p"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 15px"><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 class="grid" style="grid-template-columns:21px"><div class="item pbox p b"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 41px"><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 21px"><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 class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:26px"><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 26px"><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 class="grid" style="grid-template-columns:35px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:40px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:46px"><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 46px"><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 class="grid" style="grid-template-columns:15px"><div class="item pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 35px"><div class="item c1 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:0 15px"><div class="item c2 pbox m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:20px"><div class="item pbox p m"><x></x><x></x><x></x></div><a></a></div>
<div class="grid" style="grid-template-columns:26px"><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 26px"><div class="item c2 pbox p b m"><x></x><x></x><x></x></div><a></a></div>
</div>

16
layout/reftests/css-grid/grid-percent-grid-gap-001-ref.html

@ -65,7 +65,7 @@ br { clear: both; }
</div>
<div class="float">
<div class="grid" style="align-self:start; justify-self:start; grid-gap:15px">
<div class="grid" style="width:60px; height:60px; grid-column-gap:12px">
<span><x></x></span>
<span><x></x></span>
<span><x></x></span>
@ -74,7 +74,7 @@ br { clear: both; }
</div>
<div class="inline-grid">
<div class="grid" style="align-self:start; justify-self:start; grid-gap:15px">
<div class="grid" style="width:60px; height:60px; grid-column-gap:12px; align-self:start; justify-self:start;">
<span><x></x></span>
<span><x></x></span>
<span><x></x></span>
@ -141,12 +141,12 @@ br { clear: both; }
</div>
</div>
<div class="float" style="margin-top:-50px">
<div class="grid" style="min-width:300%; grid-gap:15px 15px">
<span><x></x></span>
<span style="margin-left:31px; width:30px"><x></x></span>
<span><x></x></span>
<span style="margin-left:31px; width:30px"><x></x></span>
<div class="float" style="margin-top:-50px; width:62px">
<div class="grid" style="padding-left:186px; height:60px; grid-column-gap:calc(186px * 0.2);">
<span style="margin-left:-186px; width:30px"><x></x></span>
<span style="margin-left:-186px; width:30px"><x></x></span>
<span style="margin-left:-186px; width:30px"><x></x></span>
<span style="margin-left:-186px; width:30px"><x></x></span>
</div>
</div>

6
layout/reftests/css-grid/grid-repeat-auto-fill-fit-002-ref.html

@ -83,12 +83,16 @@ fill,fit {
.zero-progress {
grid-row-gap: calc(10px - 1%);
grid-template-rows: [a] 10px repeat(4, [b] minmax(0,auto) [c]) [d];
grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d];
}
.w50.zero-progress {
grid-row-gap: calc(10px - 1%);
grid-template-rows: [a] 10px repeat(3, [b] 0 [c]) [d];
}
.mw50.zero-progress {
grid-row-gap: calc(10px - 1%);
grid-template-rows: [a] 10px repeat(4, [b] 0 [c]) [d];
}
</style>
</head>
<body>

16
layout/reftests/writing-mode/1174450-intrinsic-sizing-ref.html

@ -13,20 +13,20 @@ div.v, div.h {
display: block;
position: relative;
border: 1px dashed silver;
width:92px;
height:60px;
width:74px;
height:24px;
}
div.h {
width:124px;
height:98px;
width:62px;
height:61.2px;
}
.h span {
margin: 7px 13px 62px 25px;
padding: 1px 3px 12px 37px;
margin: 7px 13px 32px 12px;
padding: 1px 3px 6px 19px;
}
.v span {
margin: 7px 13px 30px 12px;
padding: 1px 3px 6px 18px;
margin: 7px 13px 30px 5px;
padding: 1px 3px 2px 7px;
}
span {

Loading…
Cancel
Save