mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-28 12:45:27 +00:00
6708be703f
There are also some corrections here for existing reftests because the old temporary 'stretch' scaffolding was wrong in many ways.
129 lines
4.1 KiB
HTML
129 lines
4.1 KiB
HTML
<!DOCTYPE HTML>
|
|
<!--
|
|
Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/
|
|
-->
|
|
<html><head>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Test: align-self with overflow</title>
|
|
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
|
|
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
|
<link rel="match" href="grid-item-align-003-ref.html">
|
|
<style type="text/css">
|
|
html,body {
|
|
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
|
}
|
|
body { margin:40px; }
|
|
separator { clear:both; display:block; height:6px; }
|
|
|
|
.grid {
|
|
display: grid;
|
|
float: left;
|
|
position: relative;
|
|
border: 1px solid;
|
|
/* border-block-start: 2px solid blue; */
|
|
border-block-start: 2px solid black;
|
|
grid-template: 1px 32px 3px / 3px 20px 2px;
|
|
margin-right: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
span {
|
|
grid-area: 2 / 2; /* the center grid area */
|
|
display: block;
|
|
width: 40px;
|
|
height: 30px;
|
|
background: grey;
|
|
border-block-start: 2px solid blue;
|
|
border-inline-start: 2px solid lime;
|
|
margin: 1px 1px 2px 2px;
|
|
justify-self: start;
|
|
}
|
|
|
|
abs1,abs2,abs3,abs4 {
|
|
position: absolute;
|
|
top:0;left:0;bottom:0;right:0;
|
|
background: lightgrey;
|
|
}
|
|
abs1 { grid-area: 1 / 1 / 2 / 4; }
|
|
abs2 { grid-area: 1 / 1 / 4 / 2; }
|
|
abs3 { grid-area: 1 / 3 / 4 / 4; }
|
|
abs4 { grid-area: 3 / 1 / 4 / 4; }
|
|
|
|
.hl { writing-mode: horizontal-tb; direction:ltr; }
|
|
.hr { writing-mode: horizontal-tb; direction:rtl; }
|
|
.vl { writing-mode: vertical-lr; }
|
|
.vr { writing-mode: vertical-rl; }
|
|
.vlr { writing-mode: vertical-lr; direction:rtl; }
|
|
.vrl { writing-mode: vertical-rl; direction:ltr; }
|
|
|
|
.astart { align-self:true start; }
|
|
.aend { align-self:true end; }
|
|
.aflexstart { align-self:true flex-start; }
|
|
.aflexend { align-self:true flex-end; }
|
|
.aselfstart { align-self:true self-start; }
|
|
.aselfend { align-self:true self-end; }
|
|
.acenter { align-self:true center; }
|
|
.aleft { align-self:true left; }
|
|
.aright { align-self:true right; }
|
|
.astretch1 { align-self:true stretch; }
|
|
.astretch2 { align-self:true stretch; width:40px; height:auto; }
|
|
.astretch3 { align-self:true stretch; height:auto; }
|
|
.astretch4 { align-self:true stretch; width:auto; }
|
|
.astretch5 { align-self:true stretch; width:auto; max-width:38px; }
|
|
.astretch6 { align-self:true stretch; height:auto; max-height:30px; }
|
|
.astretch7 { align-self:true stretch; width:auto; height:auto; max-width:38px; max-height:30px; }
|
|
.aauto { align-self:auto; }
|
|
|
|
.safe.astart { align-self:safe start; }
|
|
.safe.aend { align-self:safe end; }
|
|
.safe.aflexstart { align-self:safe flex-start; }
|
|
.safe.aflexend { align-self:safe flex-end; }
|
|
.safe.aselfstart { align-self:safe self-start; }
|
|
.safe.aselfend { align-self:safe self-end; }
|
|
.safe.acenter { align-self:safe center; }
|
|
.safe.aleft { align-self:safe left; }
|
|
.safe.aright { align-self:safe right; }
|
|
.safe.astretch1 { align-self:safe stretch; }
|
|
.safe.astretch2 { align-self:safe stretch; }
|
|
.safe.astretch3 { align-self:safe stretch; }
|
|
.safe.astretch4 { align-self:safe stretch; }
|
|
.safe.astretch5 { align-self:safe stretch; }
|
|
.safe.astretch6 { align-self:safe stretch; }
|
|
.safe.astretch7 { align-self:safe stretch; }
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script>
|
|
var gridwm = [ "hl" ];
|
|
var wm = [ "hl", "vrl", "hl safe", "vrl safe" ];
|
|
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
|
|
"stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
|
|
"stretch6", "stretch7", "auto" ];
|
|
for (var i = 0; i < gridwm.length; ++i) {
|
|
for (var j = 0; j < wm.length; ++j) {
|
|
for (var k = 0; k < test.length; ++k) {
|
|
var div = document.createElement("div");
|
|
div.className = "grid " + gridwm[i];
|
|
var span = document.createElement("span");
|
|
span.className = wm[j] + " a" + test[k];
|
|
div.appendChild(span);
|
|
div.appendChild(document.createElement("abs1"));
|
|
div.appendChild(document.createElement("abs2"));
|
|
div.appendChild(document.createElement("abs3"));
|
|
div.appendChild(document.createElement("abs4"));
|
|
|
|
document.body.appendChild(div)
|
|
}
|
|
document.body.appendChild(document.createElement("separator"));
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|