nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity
fune/testing/web-platform/tests/css/css-grid/reference/grid-support-grid-auto-columns-rows-003-ref.html
Boris Chiou 41488d1a22 Bug 1593796 - Apply the correct specified implicit size. r=mats 
Per the spec, if multiple track sizes are given, the pattern is repeated as
necessary to find the size of the implicit tracks:
1. The first implicit grid track after the explicit grid receives the first
   specified size, and so on forwards.
2. The last implicit grid track before the explicit grid receives the last
   specified size, and so on backwards.

We use a positive index of the auto track sizes for (1) and a negative index
for (2), so we can apply the correct specified implicit size.

Differential Revision: https://phabricator.services.mozilla.com/D52265

--HG--
extra : moz-landing-system : lando
2019-11-12 22:28:09 +00:00

453 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test Reference: Support for 'grid-auto-columns' and
'grid-auto-rows' properties with implicit tracks after and before the
explicit grid</title>
<style>
#wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
div { position: relative; }
.item-left3 {
width: 3px;
height: 3px;
background: #ff0;
}
.item-left2 {
width: 2px;
height: 2px;
background: #ff0;
}
.item-left1 {
width: 3px;
height: 3px;
background: #ff0;
}
.item-explicit {
width: 5px;
height: 5px;
background: #f0f;
}
.item-right1 {
width: 2px;
height: 2px;
background: #0ff;
}
.item-right2 {
width: 3px;
height: 3px;
background: #0ff;
}
.item-right3 {
width: 2px;
height: 2px;
background: #0ff;
}
#zero .item-explicit {
width: 2px;
height: 2px;
}
#two .item-explicit {
width: 10px;
height: 10px;
}
#three .item-explicit {
width: 15px;
height: 15px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="zero">
<div>
<div class="item-right1"></div>
</div>
<div>
<div class="item-right1"></div>
<div class="item-right2" style="left:2px;"></div>
</div>
<div>
<div class="item-right1"></div>
<div class="item-right2" style="left:2px;"></div>
<div class="item-right3" style="left:5px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-right1" style="left:3px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-right1" style="left:3px;"></div>
<div class="item-right2" style="left:5px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-right1" style="left:3px;"></div>
<div class="item-right2" style="left:5px;"></div>
<div class="item-right3" style="left:8px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-right1" style="left:5px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-right1" style="left:5px;"></div>
<div class="item-right2" style="left:7px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-right1" style="left:5px;"></div>
<div class="item-right2" style="left:7px;"></div>
<div class="item-right3" style="left:10px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-right1" style="left:8px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-right1" style="left:8px;"></div>
<div class="item-right2" style="left:10px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-right1" style="left:8px;"></div>
<div class="item-right2" style="left:10px;"></div>
<div class="item-right3" style="left:13px;"></div>
</div>
</div>
<div id="one">
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:5px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:5px;"></div>
<div class="item-right2" style="left:7px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:5px;"></div>
<div class="item-right2" style="left:7px;"></div>
<div class="item-right3" style="left:10px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:8px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:8px;"></div>
<div class="item-right2" style="left:10px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:8px;"></div>
<div class="item-right2" style="left:10px;"></div>
<div class="item-right3" style="left:13px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:10px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:10px;"></div>
<div class="item-right2" style="left:12px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:10px;"></div>
<div class="item-right2" style="left:12px;"></div>
<div class="item-right3" style="left:15px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:13px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:13px;"></div>
<div class="item-right2" style="left:15px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:13px;"></div>
<div class="item-right2" style="left:15px;"></div>
<div class="item-right3" style="left:18px;"></div>
</div>
</div>
<div id="two">
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:10px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:10px;"></div>
<div class="item-right2" style="left:12px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:10px;"></div>
<div class="item-right2" style="left:12px;"></div>
<div class="item-right3" style="left:15px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:13px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:13px;"></div>
<div class="item-right2" style="left:15px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:13px;"></div>
<div class="item-right2" style="left:15px;"></div>
<div class="item-right3" style="left:18px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:15px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:15px;"></div>
<div class="item-right2" style="left:17px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:15px;"></div>
<div class="item-right2" style="left:17px;"></div>
<div class="item-right3" style="left:20px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:18px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:18px;"></div>
<div class="item-right2" style="left:20px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:18px;"></div>
<div class="item-right2" style="left:20px;"></div>
<div class="item-right3" style="left:23px;"></div>
</div>
</div>
<div id="three">
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:15px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:15px;"></div>
<div class="item-right2" style="left:17px;"></div>
</div>
<div>
<div class="item-explicit"></div>
<div class="item-right1" style="left:15px;"></div>
<div class="item-right2" style="left:17px;"></div>
<div class="item-right3" style="left:20px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:18px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:18px;"></div>
<div class="item-right2" style="left:20px;"></div>
</div>
<div>
<div class="item-left1"></div>
<div class="item-explicit" style="left:3px;"></div>
<div class="item-right1" style="left:18px;"></div>
<div class="item-right2" style="left:20px;"></div>
<div class="item-right3" style="left:23px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:20px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:20px;"></div>
<div class="item-right2" style="left:22px;"></div>
</div>
<div>
<div class="item-left2"></div>
<div class="item-left1" style="left:2px;"></div>
<div class="item-explicit" style="left:5px;"></div>
<div class="item-right1" style="left:20px;"></div>
<div class="item-right2" style="left:22px;"></div>
<div class="item-right3" style="left:25px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:23px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:23px;"></div>
<div class="item-right2" style="left:25px;"></div>
</div>
<div>
<div class="item-left3"></div>
<div class="item-left2" style="left:3px;"></div>
<div class="item-left1" style="left:5px;"></div>
<div class="item-explicit" style="left:8px;"></div>
<div class="item-right1" style="left:23px;"></div>
<div class="item-right2" style="left:25px;"></div>
<div class="item-right3" style="left:28px;"></div>
</div>
</div>
</div>
</body>
</html>
View git blame Copy permalink