mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-02-27 12:50:09 +00:00
Bug 1151213 part 2 - [css-grid][css-align] Reftests for the 'align-self' and 'justify-self' properties on grid items.
There are also some corrections here for existing reftests because the old temporary 'stretch' scaffolding was wrong in many ways.
This commit is contained in:
Mats Palmgren
parent
8abe331366
commit
6708be703f
@ -30,6 +30,7 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
|
||||
position: absolute;
|
||||
left: 13px; top: 31px;
|
||||
height: 12px; width: 44px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.abs {
|
||||
@ -82,64 +83,64 @@ span {
|
||||
<div style="float:left">
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="b abs">b</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="c abs">c</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="d abs">d</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="e abs">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="f abs">f</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="g abs">g</span>
|
||||
</div>
|
||||
|
||||
</div><div style="float:left">
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="b abs">b</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="c abs">c</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="d abs">d</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="e abs">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="f abs">f</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="g abs">g</span>
|
||||
</div>
|
||||
|
||||
|
||||
@ -29,6 +29,7 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 3 / 5;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.abs {
|
||||
@ -85,64 +86,64 @@ span {
|
||||
<div style="float:left">
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="b abs">b</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="c abs">c</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="d abs">d</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="e abs">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="f abs">f</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="g abs">g</span>
|
||||
</div>
|
||||
|
||||
</div><div style="float:left">
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<div><span class="b abs">b</span></div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<x><span class="c abs">c</span></x>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="d abs">d</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<div><span class="e abs">e</span></div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="f abs">f</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<x><span class="g abs">g</span></x>
|
||||
</div>
|
||||
|
||||
|
||||
@ -31,6 +31,7 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
|
||||
position: absolute;
|
||||
left: 13px; top: 31px;
|
||||
height: 12px; width: 44px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.abs {
|
||||
@ -83,64 +84,64 @@ span {
|
||||
<div style="float:left">
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="b abs">b</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="c abs">c</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="d abs">d</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="e abs">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="f abs">f</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="g abs">g</span>
|
||||
</div>
|
||||
|
||||
</div><div style="float:left">
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="b abs">b</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="c abs">c</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="d abs">d</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="e abs">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="f abs">f</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="g abs">g</span>
|
||||
</div>
|
||||
|
||||
|
||||
@ -29,6 +29,7 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
|
||||
.a {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 3 / 5;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.abs {
|
||||
@ -85,64 +86,64 @@ span {
|
||||
<div style="float:left">
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="b abs">b</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="c abs">c</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="d abs">d</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="e abs">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="f abs">f</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="g abs">g</span>
|
||||
</div>
|
||||
|
||||
</div><div style="float:left">
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<div><span class="b abs">b</span></div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<x><span class="c abs">c</span></x>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="d abs">d</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<div><span class="e abs">e</span></div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<span class="f abs">f</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="a"></span>
|
||||
<x><span class="g abs">g</span></x>
|
||||
</div>
|
||||
|
||||
|
||||
190
layout/reftests/css-grid/grid-item-align-001-ref.html
Normal file
190
layout/reftests/css-grid/grid-item-align-001-ref.html
Normal file
@ -0,0 +1,190 @@
|
||||
<!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: align-self (part 1 of 2)</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
|
||||
<style type="text/css">
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
||||
}
|
||||
separator { clear:both; display:block; height:6px; }
|
||||
|
||||
.grid {
|
||||
display: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
border-block-start: 2px solid blue;
|
||||
inline-size: 36px;
|
||||
block-size: 25px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 13px;
|
||||
height: 9px;
|
||||
background: grey;
|
||||
border-block-start: 2px solid blue;
|
||||
border-inline-start: 2px solid lime;
|
||||
margin: 1px 1px 2px 2px;
|
||||
offset-inline-start: 1px;
|
||||
}
|
||||
|
||||
abs1,abs2,abs3,abs4 {
|
||||
position: absolute;
|
||||
top:0;left:0;bottom:0;right:0;
|
||||
background: white;
|
||||
}
|
||||
abs1 {
|
||||
border-block-start-width: 3px;
|
||||
border-block-end-width: 2px;
|
||||
border-inline-start-width: 1px;
|
||||
border-inline-end-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: lightgrey;
|
||||
}
|
||||
abs2 { display:none; }
|
||||
abs3 { display:none; }
|
||||
abs4 { display:none; }
|
||||
|
||||
.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,.aflexstart,.aleft,.aright,.astretch1,.astretch2,.astretch2,.astretch3,
|
||||
.astretch4,.astretch5,.astretch6,.astretch7,.aauto {
|
||||
offset-block-start: 3px;
|
||||
}
|
||||
|
||||
.aend,.aflexend { offset-block-start: 9px; }
|
||||
.acenter { offset-block-start: 5px; }
|
||||
|
||||
.hl .astretch2, .hr .astretch2 { height: 15px; }
|
||||
.hl .astretch3, .hr .astretch3 { height: 15px; }
|
||||
.hl .astretch4, .hr .astretch4 { width: 27px; }
|
||||
|
||||
.astretch2 { width:13px; height:auto; }
|
||||
.astretch3 { height:auto; }
|
||||
.astretch4 { width:auto; }
|
||||
.astretch5 { width:auto; max-width:13px; }
|
||||
.astretch6 { height:9px; }
|
||||
.astretch7 { width:auto; height:auto; max-width:13px; height:9px; }
|
||||
|
||||
.hl .hr {margin-left:4px;}
|
||||
.hl .vl {offset-block-start: 1px; offset-inline-start:3px;}
|
||||
.hl .vl.aend, .hl .vl.aflexend { margin-top: 7px; }
|
||||
.hl .vl.acenter { margin-top:3px; }
|
||||
.hl .vl.astretch4, .hl .vr.astretch4, .hl .vlr.astretch4, .hl .vrl.astretch4 { width:0; }
|
||||
|
||||
.hl .vr {margin-left:6px; margin-top:3px; }
|
||||
.hl .vr.aend, .hl .vr.aflexend {margin-left:12px; margin-top:9px; }
|
||||
.hl .vr.acenter {margin-left:8px; margin-top:5px; }
|
||||
|
||||
.hl .vlr { margin-left:0px; margin-top:5px; }
|
||||
.hl .vlr.aend, .hl .vlr.aflexend {margin-left:-6px; margin-top:11px; }
|
||||
.hl .vlr.acenter {margin-left:-2px; margin-top:7px; }
|
||||
|
||||
.hl .vrl { margin-left:6px; margin-top:3px; }
|
||||
.hl .vrl.aend, .hl .vrl.aflexend {margin-left:12px; margin-top:9px; }
|
||||
.hl .vrl.acenter {margin-left:8px; margin-top:5px; }
|
||||
|
||||
.hr .hl {margin-right:3px}
|
||||
|
||||
.hr .vl {margin-right:5px; margin-top:5px; }
|
||||
.hr .vl.aend, .hr .vl.aflexend {margin-right:11px; margin-top:11px; }
|
||||
.hr .vl.acenter {margin-right:7px; margin-top:7px; }
|
||||
.hr .vl.astretch4, .hr .vr.astretch4, .hr .vlr.astretch4, .hr .vrl.astretch4 { width:0; }
|
||||
|
||||
.hr .vr {margin-top:5px; margin-right:-1px; }
|
||||
.hr .vr.aend, .hr .vr.aflexend {margin-top:11px; margin-right:-7px; }
|
||||
.hr .vr.acenter {margin-top:7px; margin-right:-3px; }
|
||||
.hr .vr.astretch6, .hr .vr.astretch7 { margin-right:-1px; }
|
||||
|
||||
.hr .vlr {margin-top:5px; margin-right:5px; }
|
||||
.hr .vlr.aend, .hr .vlr.aflexend {margin-top:11px; margin-right:11px; }
|
||||
.hr .vlr.acenter {margin-top:7px; margin-right:7px; }
|
||||
|
||||
.hr .vrl {margin-top:3px; margin-right:-1px; }
|
||||
.hr .vrl.aend, .hr .vrl.aflexend {margin-top:9px; margin-right:-7px; }
|
||||
.hr .vrl.acenter {margin-top:5px; margin-right:-3px; }
|
||||
|
||||
.vl span { offset-block-start: 1px; offset-inline-start: 3px; }
|
||||
.vl .astretch4, .vl .astretch5 { width:15px; }
|
||||
|
||||
.vl .hl.aend, .vl .hl.aflexend { margin-left:4px; }
|
||||
.vl .hl.acenter { margin-left:1px; }
|
||||
.vl .hl.astretch6, .vl .hl.astretch7 { height:0px; }
|
||||
.vl .hr.astretch6, .vl .hr.astretch7 { height:0px; }
|
||||
.vl .hl.astretch7 { width:14px; }
|
||||
.vl .hr.astretch7 { width:14px; }
|
||||
|
||||
.vl .hr { margin-left:8px; }
|
||||
.vl .hr.aend, .vl .hr.aflexend { margin-left:10px; }
|
||||
.vl .hr.acenter { margin-left:7px; }
|
||||
|
||||
.vl .vl { margin-top:-1px; margin-left:4px; }
|
||||
.vl .vl.aend, .vl .vl.aflexend { margin-left:6px; }
|
||||
.vl .vl.acenter { margin-left:3px; }
|
||||
.vl .vl.astretch7, .vl .vr.astretch7, .vl .vlr.astretch7, .vl .vrl.astretch7 { width:14px; }
|
||||
|
||||
.vl .vl.astretch2, .vl .vl.astretch3 { height:27px; }
|
||||
.vl .vr.astretch2, .vl .vr.astretch3 { height:27px; }
|
||||
.vl .vlr.astretch2, .vl .vlr.astretch3 { height:27px; }
|
||||
.vl .vrl.astretch2, .vl .vrl.astretch3 { height:27px; }
|
||||
|
||||
.vl .vr { margin-top:-1px; margin-left:6px; }
|
||||
.vl .vr.aend, .vl .vr.aflexend { margin-left:8px; }
|
||||
.vl .vr.acenter { margin-left:5px; }
|
||||
|
||||
.vl .vlr { margin-top:5px; margin-left:4px; }
|
||||
.vl .vlr.aend, .vl .vlr.aflexend { margin-left:6px; }
|
||||
.vl .vlr.acenter { margin-left:3px; }
|
||||
|
||||
.vl .vrl { margin-top:-1px; margin-left:6px; }
|
||||
.vl .vrl.aend, .vl .vrl.aflexend { margin-left:8px; }
|
||||
.vl .vrl.acenter { margin-left:5px; }
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var gridwm = [ "hl", "hr", "vl" ]; // grid-item-align-002.html tests vr/vlr/vrl
|
||||
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
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>
|
||||
107
layout/reftests/css-grid/grid-item-align-001.html
Normal file
107
layout/reftests/css-grid/grid-item-align-001.html
Normal file
@ -0,0 +1,107 @@
|
||||
<!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 (part 1 of 2)</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-001-ref.html">
|
||||
<style type="text/css">
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
||||
}
|
||||
separator { clear:both; display:block; height:6px; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
border-block-start: 2px solid blue;
|
||||
grid-template: 1px 32px 3px / 3px 20px 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: 9px;
|
||||
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:start; }
|
||||
.aend { align-self:end; }
|
||||
.aflexstart { align-self:flex-start; }
|
||||
.aflexend { align-self:flex-end; }
|
||||
.aselfstart { align-self:self-start; }
|
||||
.aselfend { align-self:self-end; }
|
||||
.acenter { align-self:center; }
|
||||
.aleft { align-self:left; }
|
||||
.aright { align-self:right; }
|
||||
.astretch1 { align-self:stretch; }
|
||||
.astretch2 { align-self:stretch; width:13px; height:auto; }
|
||||
.astretch3 { align-self:stretch; height:auto; }
|
||||
.astretch4 { align-self:stretch; width:auto; }
|
||||
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
|
||||
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
|
||||
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
|
||||
.aauto { align-self:auto; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var gridwm = [ "hl", "hr", "vl" ]; // grid-item-align-002.html tests vr/vlr/vrl
|
||||
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
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>
|
||||
127
layout/reftests/css-grid/grid-item-align-002-ref.html
Normal file
127
layout/reftests/css-grid/grid-item-align-002-ref.html
Normal file
@ -0,0 +1,127 @@
|
||||
<!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: align-self (part 2 of 2)</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
|
||||
<style type="text/css">
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
||||
}
|
||||
separator { clear:both; display:block; height:6px; }
|
||||
|
||||
.grid {
|
||||
display: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
/* border-block-start: 2px solid blue; */
|
||||
border-block-start: 2px solid black;
|
||||
inline-size: 36px;
|
||||
block-size: 25px;
|
||||
margin-right: 4px;
|
||||
background: lightgrey;
|
||||
}
|
||||
wrap {
|
||||
display: block;
|
||||
position: relative;
|
||||
offset-inline-start:1px;
|
||||
background: white;
|
||||
block-size:20px;
|
||||
inline-size:32px;
|
||||
border-block-start: 3px solid lightgrey;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: 9px;
|
||||
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;display:none;
|
||||
}
|
||||
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:start; }
|
||||
.aend { align-self:end; }
|
||||
.aflexstart { align-self:flex-start; }
|
||||
.aflexend { align-self:flex-end; }
|
||||
.aselfstart { align-self:self-start; }
|
||||
.aselfend { align-self:self-end; }
|
||||
.acenter { align-self:center; }
|
||||
.aleft { align-self:left; }
|
||||
.aright { align-self:right; }
|
||||
.astretch1 { align-self:stretch; }
|
||||
.astretch2 { align-self:stretch; width:13px; height:auto; }
|
||||
.astretch3 { align-self:stretch; height:auto; }
|
||||
.astretch4 { align-self:stretch; width:auto; }
|
||||
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
|
||||
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
|
||||
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
|
||||
.aauto { align-self:auto; }
|
||||
|
||||
.vr .aend, .vr .aflexend { margin-right:3px; }
|
||||
.vlr .aend, .vlr .aflexend { margin-left:4px; }
|
||||
.vlr .acenter { margin-left:1px; }
|
||||
.vrl .aend, .vrl .aflexend { margin-right:3px; }
|
||||
|
||||
.astretch6 { width:13px; }
|
||||
.astretch5 { width:14px; }
|
||||
.astretch4, .astretch7 { width:15px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-align-001.html tests hl/hr/vl
|
||||
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
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 wrap = document.createElement("wrap");
|
||||
div.appendChild(wrap);
|
||||
var span = document.createElement("span");
|
||||
span.className = wm[j] + " a" + test[k];
|
||||
wrap.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>
|
||||
108
layout/reftests/css-grid/grid-item-align-002.html
Normal file
108
layout/reftests/css-grid/grid-item-align-002.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!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 (part 2 of 2)</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-002-ref.html">
|
||||
<style type="text/css">
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
||||
}
|
||||
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: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: 9px;
|
||||
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:start; }
|
||||
.aend { align-self:end; }
|
||||
.aflexstart { align-self:flex-start; }
|
||||
.aflexend { align-self:flex-end; }
|
||||
.aselfstart { align-self:self-start; }
|
||||
.aselfend { align-self:self-end; }
|
||||
.acenter { align-self:center; }
|
||||
.aleft { align-self:left; }
|
||||
.aright { align-self:right; }
|
||||
.astretch1 { align-self:stretch; }
|
||||
.astretch2 { align-self:stretch; width:13px; height:auto; }
|
||||
.astretch3 { align-self:stretch; height:auto; }
|
||||
.astretch4 { align-self:stretch; width:auto; }
|
||||
.astretch5 { align-self:stretch; width:auto; max-width:13px; }
|
||||
.astretch6 { align-self:stretch; height:auto; max-height:9px; }
|
||||
.astretch7 { align-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
|
||||
.aauto { align-self:auto; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-align-001.html tests hl/hr/vl
|
||||
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
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>
|
||||
118
layout/reftests/css-grid/grid-item-align-003-ref.html
Normal file
118
layout/reftests/css-grid/grid-item-align-003-ref.html
Normal file
@ -0,0 +1,118 @@
|
||||
<!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: align-self with overflow</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
|
||||
<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: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
/* border-block-start: 2px solid blue; */
|
||||
border-block-start: 2px solid black;
|
||||
inline-size: 36px;
|
||||
block-size: 25px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
wrap {
|
||||
display: block;
|
||||
position: relative;
|
||||
offset-inline-start:1px;
|
||||
background: white;
|
||||
block-size:20px;
|
||||
inline-size:32px;
|
||||
border-block-start: 3px solid lightgrey;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
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 { bottom: 22px; }
|
||||
abs2 { top: 23px; }
|
||||
abs3 { left: 33px; }
|
||||
abs4 { right: 35px; }
|
||||
|
||||
.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; }
|
||||
|
||||
.true.hl.aend, .true.hl.aflexend { offset-block-start:-15px; }
|
||||
.true.vrl.aend, .true.vrl.aflexend { offset-inline-start:-15px; }
|
||||
.true.hl.acenter { offset-block-start:-8px; }
|
||||
.true.vrl.acenter { offset-inline-start:-8px; }
|
||||
.astretch2 { width:40px; height:15px; }
|
||||
.astretch3 { height:15px; }
|
||||
.hl.astretch4 { width:27px; }
|
||||
.vrl.astretch4 { width:0px; }
|
||||
.astretch5 { width:27px; max-width:38px; }
|
||||
.vrl.astretch5 { width:0px; }
|
||||
.astretch6 { height:15px; max-height:30px; }
|
||||
.astretch7 { width:27px; height:15px; max-width:38px; max-height:30px; }
|
||||
.vrl.astretch7 { width:0px; }
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var gridwm = [ "hl" ];
|
||||
var wm = [ "hl true", "vrl true", "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 wrap = document.createElement("wrap");
|
||||
div.appendChild(wrap);
|
||||
var span = document.createElement("span");
|
||||
span.className = wm[j] + " a" + test[k];
|
||||
div.appendChild(span);
|
||||
wrap.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>
|
||||
128
layout/reftests/css-grid/grid-item-align-003.html
Normal file
128
layout/reftests/css-grid/grid-item-align-003.html
Normal file
@ -0,0 +1,128 @@
|
||||
<!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>
|
||||
121
layout/reftests/css-grid/grid-item-justify-001-ref.html
Normal file
121
layout/reftests/css-grid/grid-item-justify-001-ref.html
Normal file
@ -0,0 +1,121 @@
|
||||
<!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: justify-self (part 1 of 2)</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
|
||||
<style type="text/css">
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
||||
}
|
||||
separator { clear:both; display:block; height:6px; }
|
||||
|
||||
.grid {
|
||||
display: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
/* border-inline-start: 2px solid lime; */
|
||||
border-inline-start: 2px solid black;
|
||||
inline-size: 36px;
|
||||
block-size: 25px;
|
||||
margin-right: 4px;
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
wrap {
|
||||
display: block;
|
||||
position: relative;
|
||||
offset-inline-start: 1px;
|
||||
background: white;
|
||||
block-size: 20px;
|
||||
inline-size: 32px;
|
||||
border-block-start: 3px solid lightgrey;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: 9px;
|
||||
background: grey;
|
||||
border-block-start: 2px solid blue;
|
||||
border-inline-start: 2px solid lime;
|
||||
margin: 1px 1px 2px 2px;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
.jstart { justify-self:start; }
|
||||
.jend { justify-self:end; }
|
||||
.jflexstart { justify-self:flex-start; }
|
||||
.jflexend { justify-self:flex-end; }
|
||||
.jselfstart { justify-self:self-start; }
|
||||
.jselfend { justify-self:self-end; }
|
||||
.jcenter { justify-self:center; }
|
||||
.jleft { justify-self:left; }
|
||||
.jright { justify-self:right; }
|
||||
.jstretch1 { justify-self:stretch; }
|
||||
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
|
||||
.jstretch3 { justify-self:stretch; height:auto; }
|
||||
.jstretch4 { justify-self:stretch; width:auto; }
|
||||
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
|
||||
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
|
||||
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
|
||||
.jauto { justify-self:auto; }
|
||||
|
||||
.hl .jend, .hl .jflexend, .hl .jright { margin-left: 16px; }
|
||||
.hr .jend, .hr .jflexend { margin-right: 15px; }
|
||||
.hl .jcenter { margin-left: 7px; }
|
||||
.vl .jend, .vl .jflexend { margin-right:3px; }
|
||||
.hr .jcenter { margin-right: 7px; }
|
||||
.hr .jleft { margin-right: 15px; }
|
||||
|
||||
.hl .jstretch5, .hl .jstretch7, .hr .jstretch5, .hr .jstretch7 { width:14px; }
|
||||
|
||||
.jstretch4 { width:27px; }
|
||||
.vl .jstretch4 { width:0px; }
|
||||
|
||||
.vl .jstretch2, .vl .jstretch3 { height:27px; }
|
||||
.vl .jstretch6, .vl .jstretch7 { height:9px; }
|
||||
.vl .jend, .vl .jflexend, .vl .jright { margin-top: 19px; }
|
||||
.vl .jcenter { margin-top: 9px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var gridwm = [ "hl", "hr", "vl" ]; // grid-item-justify-002.html tests vr/vlr/vrl
|
||||
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
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 wrap = document.createElement("wrap");
|
||||
div.appendChild(wrap);
|
||||
var span = document.createElement("span");
|
||||
span.className = wm[j] + " j" + test[k];
|
||||
wrap.appendChild(span);
|
||||
document.body.appendChild(div)
|
||||
}
|
||||
document.body.appendChild(document.createElement("separator"));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
108
layout/reftests/css-grid/grid-item-justify-001.html
Normal file
108
layout/reftests/css-grid/grid-item-justify-001.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!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: justify-self (part 1 of 2)</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-justify-self">
|
||||
<link rel="match" href="grid-item-justify-001-ref.html">
|
||||
<style type="text/css">
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
||||
}
|
||||
separator { clear:both; display:block; height:6px; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
/* border-inline-start: 2px solid lime; */
|
||||
border-inline-start: 2px solid black;
|
||||
grid-template: 1px 32px 3px / 3px 20px 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: 9px;
|
||||
background: grey;
|
||||
border-block-start: 2px solid blue;
|
||||
border-inline-start: 2px solid lime;
|
||||
margin: 1px 1px 2px 2px; /* overconstrained - we'll fix that below */
|
||||
align-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; }
|
||||
|
||||
.jstart { justify-self:start; }
|
||||
.jend { justify-self:end; }
|
||||
.jflexstart { justify-self:flex-start; }
|
||||
.jflexend { justify-self:flex-end; }
|
||||
.jselfstart { justify-self:self-start; }
|
||||
.jselfend { justify-self:self-end; }
|
||||
.jcenter { justify-self:center; }
|
||||
.jleft { justify-self:left; }
|
||||
.jright { justify-self:right; }
|
||||
.jstretch1 { justify-self:stretch; }
|
||||
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
|
||||
.jstretch3 { justify-self:stretch; height:auto; }
|
||||
.jstretch4 { justify-self:stretch; width:auto; }
|
||||
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
|
||||
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
|
||||
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
|
||||
.jauto { justify-self:auto; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var gridwm = [ "hl", "hr", "vl" ]; // grid-item-justify-002.html tests vr/vlr/vrl
|
||||
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
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] + " j" + 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>
|
||||
120
layout/reftests/css-grid/grid-item-justify-002-ref.html
Normal file
120
layout/reftests/css-grid/grid-item-justify-002-ref.html
Normal file
@ -0,0 +1,120 @@
|
||||
<!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: justify-self (part 2 of 2)</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
|
||||
<style type="text/css">
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
||||
}
|
||||
separator { clear:both; display:block; height:6px; }
|
||||
|
||||
.grid {
|
||||
display: block;
|
||||
float: left;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
/* border-inline-start: 2px solid lime; */
|
||||
border-inline-start: 2px solid black;
|
||||
inline-size: 36px;
|
||||
block-size: 25px;
|
||||
margin-right: 4px;
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
wrap {
|
||||
display: block;
|
||||
position: relative;
|
||||
offset-inline-start: 1px;
|
||||
background: white;
|
||||
block-size: 20px;
|
||||
inline-size: 32px;
|
||||
border-block-start: 3px solid lightgrey;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: 9px;
|
||||
background: grey;
|
||||
border-block-start: 2px solid blue;
|
||||
border-inline-start: 2px solid lime;
|
||||
margin: 1px 1px 2px 2px;
|
||||
align-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; }
|
||||
|
||||
.jstart { justify-self:start; }
|
||||
.jend { justify-self:end; }
|
||||
.jflexstart { justify-self:flex-start; }
|
||||
.jflexend { justify-self:flex-end; }
|
||||
.jselfstart { justify-self:self-start; }
|
||||
.jselfend { justify-self:self-end; }
|
||||
.jcenter { justify-self:center; }
|
||||
.jleft { justify-self:left; }
|
||||
.jright { justify-self:right; }
|
||||
.jstretch1 { justify-self:stretch; }
|
||||
.jstretch2 { justify-self:stretch; width:13px; height:27px; }
|
||||
.jstretch3 { justify-self:stretch; height:27px; }
|
||||
.jstretch4 { justify-self:stretch; width:auto; }
|
||||
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
|
||||
.jstretch6 { justify-self:stretch; height:9px; max-height:9px; }
|
||||
.jstretch7 { justify-self:stretch; width:auto; height:9px; max-width:13px; max-height:9px; }
|
||||
.jauto { justify-self:auto; }
|
||||
|
||||
.vr .jend, .vr .jflexend, .vr .jright,
|
||||
.vrl .jend, .vrl .jflexend, .vrl .jright { margin-top: 19px; }
|
||||
.vlr .jend, .vlr .jflexend, .vlr .jleft { margin-bottom: 20px;}
|
||||
.vr .jcenter, .vrl .jcenter { margin-top: 9px; }
|
||||
.vlr .jcenter { margin-bottom: 9px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-justify-001.html tests hl/hr/vl
|
||||
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
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 wrap = document.createElement("wrap");
|
||||
div.appendChild(wrap);
|
||||
var span = document.createElement("span");
|
||||
span.className = wm[j] + " j" + test[k];
|
||||
wrap.appendChild(span);
|
||||
document.body.appendChild(div)
|
||||
}
|
||||
document.body.appendChild(document.createElement("separator"));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
108
layout/reftests/css-grid/grid-item-justify-002.html
Normal file
108
layout/reftests/css-grid/grid-item-justify-002.html
Normal file
@ -0,0 +1,108 @@
|
||||
<!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: justify-self (part 2 of 2)</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-justify-self">
|
||||
<link rel="match" href="grid-item-justify-002-ref.html">
|
||||
<style type="text/css">
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
||||
}
|
||||
separator { clear:both; display:block; height:6px; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
position: relative;
|
||||
border: 1px solid;
|
||||
/* border-inline-start: 2px solid lime; */
|
||||
border-inline-start: 2px solid black;
|
||||
grid-template: 1px 32px 3px / 3px 20px 2px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
grid-area: 2 / 2; /* the center 32 x 20 pixel area */
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: 9px;
|
||||
background: grey;
|
||||
border-block-start: 2px solid blue;
|
||||
border-inline-start: 2px solid lime;
|
||||
margin: 1px 1px 2px 2px;
|
||||
align-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; }
|
||||
|
||||
.jstart { justify-self:start; }
|
||||
.jend { justify-self:end; }
|
||||
.jflexstart { justify-self:flex-start; }
|
||||
.jflexend { justify-self:flex-end; }
|
||||
.jselfstart { justify-self:self-start; }
|
||||
.jselfend { justify-self:self-end; }
|
||||
.jcenter { justify-self:center; }
|
||||
.jleft { justify-self:left; }
|
||||
.jright { justify-self:right; }
|
||||
.jstretch1 { justify-self:stretch; }
|
||||
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
|
||||
.jstretch3 { justify-self:stretch; height:auto; }
|
||||
.jstretch4 { justify-self:stretch; width:auto; }
|
||||
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
|
||||
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
|
||||
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
|
||||
.jauto { justify-self:auto; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
var gridwm = [ "vr", "vlr", "vrl" ]; // grid-item-justify-001.html tests hl/hr/vl
|
||||
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
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] + " j" + 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>
|
||||
109
layout/reftests/css-grid/grid-item-stretch-001-ref.html
Normal file
109
layout/reftests/css-grid/grid-item-stretch-001-ref.html
Normal file
@ -0,0 +1,109 @@
|
||||
<!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: align-items:stretch / justify-items:stretch </title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
|
||||
<style type="text/css">
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
||||
}
|
||||
separator { clear:both; display:block; height:6px; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
border-block-start: 2px solid blue;
|
||||
grid-template: 1px 25px 5px / 3px 21px 1px;
|
||||
padding: 1px 1px 3px 2px;
|
||||
margin-right: 2px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
align-items: start;
|
||||
justify-items: start;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
top:0;left:0;bottom:0;right:0;
|
||||
grid-area: 2 / 2 / 3 / 3; /* the center area */
|
||||
display: block;
|
||||
width: 17px;
|
||||
height: 13px;
|
||||
background: lightgrey;
|
||||
/* good for manual debugging but causes anti-aliasing diff: */
|
||||
/* border-block-start: 2px solid blue; */
|
||||
/* border-inline-start: 2px solid lime; */
|
||||
border-block-start: 2px solid black;
|
||||
border-inline-start: 2px solid black;
|
||||
margin: 1px 1px 2px 2px;
|
||||
}
|
||||
|
||||
abs1,abs2,abs3,abs4 {
|
||||
position: absolute;
|
||||
top:0;left:0;bottom:0;right:0;
|
||||
width:2px; height:2px;
|
||||
background: black;
|
||||
}
|
||||
abs1 { top:auto; left:auto; }
|
||||
abs2 { top:auto; right:auto; }
|
||||
abs3 { bottom:auto; left:auto; }
|
||||
abs4 { bottom:auto; right:auto; }
|
||||
|
||||
.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; }
|
||||
|
||||
.stretch1 { }
|
||||
.stretch2 { height:auto; }
|
||||
.stretch3 { height:auto; max-height:13px; }
|
||||
.stretch4 { width:auto; }
|
||||
.stretch5 { width:auto; max-width:17px; }
|
||||
.stretch6 { width:auto; height:auto; max-width:17px; max-height:13px; }
|
||||
.stretch7 { width:auto; height:auto; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre>
|
||||
There should be no red areas.
|
||||
All grey areas should have a black dot in each corner.
|
||||
</pre>
|
||||
|
||||
|
||||
<script>
|
||||
var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
var test = [ "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
|
||||
"stretch6", "stretch7" ];
|
||||
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] + " " + test[k];
|
||||
div.appendChild(span);
|
||||
span.appendChild(document.createElement("abs1"));
|
||||
span.appendChild(document.createElement("abs2"));
|
||||
span.appendChild(document.createElement("abs3"));
|
||||
span.appendChild(document.createElement("abs4"));
|
||||
|
||||
document.body.appendChild(div)
|
||||
}
|
||||
if (j % 2 == 1) document.body.appendChild(document.createElement("separator"));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
117
layout/reftests/css-grid/grid-item-stretch-001.html
Normal file
117
layout/reftests/css-grid/grid-item-stretch-001.html
Normal file
@ -0,0 +1,117 @@
|
||||
<!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-items:stretch / justify-items:stretch </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/#align-items-property">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-items-property">
|
||||
<link rel="match" href="grid-align-content-001-ref.html">
|
||||
<style type="text/css">
|
||||
html,body {
|
||||
color:black; background-color:white; font-size:16px; padding:0; margin:0;
|
||||
}
|
||||
separator { clear:both; display:block; height:6px; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
border: 1px solid;
|
||||
border-block-start: 2px solid blue;
|
||||
grid-template: 1px 25px 5px / 3px 21px 1px;
|
||||
padding: 1px 1px 3px 2px;
|
||||
margin-right: 2px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
align-items: stretch;
|
||||
justify-items: stretch;
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
grid-area: 2 / 2 / 3 / 3; /* the center area */
|
||||
display: block;
|
||||
width: 17px;
|
||||
height: 13px;
|
||||
background: red;
|
||||
/* good for manual debugging but causes anti-aliasing diff: */
|
||||
/* border-block-start: 2px solid blue; */
|
||||
/* border-inline-start: 2px solid lime; */
|
||||
border-block-start: 2px solid black;
|
||||
border-inline-start: 2px solid black;
|
||||
margin: 1px 1px 2px 2px;
|
||||
}
|
||||
|
||||
abs1,abs2,abs3,abs4 {
|
||||
position: absolute;
|
||||
top:0;left:0;bottom:0;right:0;
|
||||
width:2px; height:2px;
|
||||
background: black;
|
||||
}
|
||||
abs1 { top:auto; left:auto; }
|
||||
abs2 { top:auto; right:auto; }
|
||||
abs3 { bottom:auto; left:auto; }
|
||||
abs4 { bottom:auto; right:auto; }
|
||||
fill {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: lightgrey;
|
||||
}
|
||||
|
||||
.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; }
|
||||
|
||||
.stretch1 { }
|
||||
.stretch2 { height:auto; }
|
||||
.stretch3 { height:auto; max-height:13px; }
|
||||
.stretch4 { width:auto; }
|
||||
.stretch5 { width:auto; max-width:17px; }
|
||||
.stretch6 { width:auto; height:auto; max-width:17px; max-height:13px; }
|
||||
.stretch7 { width:auto; height:auto; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre>
|
||||
There should be no red areas.
|
||||
All grey areas should have a black dot in each corner.
|
||||
</pre>
|
||||
|
||||
|
||||
<script>
|
||||
var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
|
||||
var test = [ "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
|
||||
"stretch6", "stretch7" ];
|
||||
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] + " " + test[k];
|
||||
div.appendChild(span);
|
||||
span.appendChild(document.createElement("fill"));
|
||||
span.appendChild(document.createElement("abs1"));
|
||||
span.appendChild(document.createElement("abs2"));
|
||||
span.appendChild(document.createElement("abs3"));
|
||||
span.appendChild(document.createElement("abs4"));
|
||||
|
||||
document.body.appendChild(div)
|
||||
}
|
||||
if (j % 2 == 1) document.body.appendChild(document.createElement("separator"));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -12,7 +12,7 @@ body,html { color:black; background:white; font-size:12px; padding:0; margin:0;
|
||||
|
||||
.grid {
|
||||
border: 1px solid blue;
|
||||
width:300px;
|
||||
width:270px;
|
||||
}
|
||||
|
||||
.a { background:lime; }
|
||||
@ -50,6 +50,7 @@ span {
|
||||
<div class="grid">
|
||||
<span class="c">c</span><span class="e">e</span><span class="a">a</span><span class="b" span="2">b</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="c">c</span><span class="f">f</span><span class="a">a</span><span class="b" span="2">b</span>
|
||||
</div>
|
||||
@ -74,24 +75,27 @@ span {
|
||||
<div class="grid">
|
||||
<span class="g" style="width:1px">g</span><span class="g" style="width:1px">g</span><span class="a" style="margin-left:161px">a</span><span class="b" span="50">b</span>
|
||||
</div>
|
||||
|
||||
</div><div style="float:left; margin-top:300px;">
|
||||
|
||||
<div class="grid" style="height:40px; position:relative">
|
||||
<span style="margin-top:-10000px; height:10060px; width:78px;"></span>
|
||||
<span style="position:absolute; left:0; width:216px; ">b</span><br>
|
||||
<span style="margin-top:-42px; height:30px; width:78px; color:cyan"></span>
|
||||
<span style="margin-top:-10000px; height:20060px; width:78px;"></span>
|
||||
<span style="position:absolute; z-index:1; left:0; width:216px; height:10000px">b</span><br>
|
||||
<span style="margin-top:-10042px; height:30px; width:78px; color:black"></span>
|
||||
</div>
|
||||
<div class="grid" style="height:40px; position:relative">
|
||||
<span style="margin-top:-10000px; height:10018px; width:78px;"></span>
|
||||
<span style="position:absolute; left:0; width:216px;">b</span><br>
|
||||
<span style="position:absolute; left:0; z-index:1; height:30px; width:78px; color:lime"></span>
|
||||
<span style="margin-top:20px; position:absolute; left:0; z-index:0; height:30px; width:78px; color:black"></span>
|
||||
<span style="margin-top:-10000px; height:20018px; width:78px;"></span>
|
||||
<span style="position:absolute; left:0; width:216px; height:2000px">b</span><br>
|
||||
</div>
|
||||
<div class="grid" style="height:40px; position:relative;">
|
||||
<span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:cyan;"></span>
|
||||
<span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:black;"></span>
|
||||
<span style="position:absolute; left:82px; width: 30px;">b</span>
|
||||
</div>
|
||||
<div class="grid" style="height:40px; position:relative">
|
||||
<span style="position:relative; z-index:2; margin-top:-10000px; height:10018px; width:78px;"></span>
|
||||
<span style="position:absolute; left:0; z-index:2; width:216px;">b</span><br>
|
||||
<span style="position:absolute; left:0; z-index:2; height:30px; width:78px; color:tan"></span>
|
||||
<span style="position:absolute; left:0; z-index:1; margin-top:20px; height:30px; width:78px; color:black; border-left-color:black;"></span>
|
||||
<span style="position:absolute; left:0; width:216px; height:2000px">b</span><br>
|
||||
<span style="position:relative; z-index:1; margin-top:-10000px; height:20018px; width:78px;"></span>
|
||||
</div>
|
||||
<div class="grid" style="height:40px; position:relative;">
|
||||
<span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:silver;"></span>
|
||||
|
||||
@ -20,7 +20,7 @@ body,html { color:black; background:white; font-size:12px; padding:0; margin:0;
|
||||
grid-auto-columns: 3px;
|
||||
grid-auto-rows: 20px;
|
||||
border: 1px solid blue;
|
||||
width: 300px;
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.a { grid-area: 1 / 2; background:lime; }
|
||||
@ -76,24 +76,27 @@ span {
|
||||
<div class="grid">
|
||||
<span class="a">a</span><span class="b" span="50">b</span><span class="g">g</span><span class="g">g</span>
|
||||
</div>
|
||||
|
||||
</div><div style="float:left; margin-top:300px;">
|
||||
|
||||
<div class="grid" style="height:40px">
|
||||
<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
|
||||
<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:cyan"></span>
|
||||
<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:black"></span>
|
||||
<span span="50" style="margin-top:-399960px">b</span>
|
||||
</div>
|
||||
<div class="grid" style="height:40px">
|
||||
<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
|
||||
<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:lime"></span>
|
||||
<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:black"></span>
|
||||
<span style="grid-column: 1 / span 50; margin-top:-399960px">b</span>
|
||||
</div>
|
||||
<div class="grid" style="height:40px">
|
||||
<span style="grid-area: 1 / X -10000 / 5 / span 10000; width: 30px; margin-left:-29980px"></span>
|
||||
<span style="grid-area: 1 / 1 / 5 / span 10000; width: 30px; margin-left:-29980px; color:cyan"></span>
|
||||
<span style="grid-area: 1 / 1 / 5 / span 10000; width: 30px; margin-left:-29980px; color:black"></span>
|
||||
<span style="grid-row: 1; grid-column:auto / span 1; width: 30px; margin-left:-59980px">b</span>
|
||||
</div>
|
||||
<div class="grid" style="height:40px">
|
||||
<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
|
||||
<span style="grid-area: 1 / 1 / span 9998 / 5; margin-top:-199980px; height:30px; color:tan"></span>
|
||||
<span style="grid-area: 1 / 1 / span 9998 / 5; margin-top:-199980px; height:30px; color:black"></span>
|
||||
<span span="50" style="grid-row:auto / span 5; margin-top:-399960px">b</span>
|
||||
</div>
|
||||
<div class="grid" style="height:40px">
|
||||
|
||||
@ -75,7 +75,7 @@ span {
|
||||
<span class="c" style="margin-left:29000px; width:1063px;">c</span>
|
||||
</div>
|
||||
<div class="grid rows" style="border:none">
|
||||
<span class="b" style="margin-top:11px;height:1px;">b</span>
|
||||
<span class="b" style="margin-top:11px;height:1px;"></span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@ -79,7 +79,7 @@ span {
|
||||
<span class="c" style="grid-column: a;">c</span>
|
||||
</div>
|
||||
<div class="grid rows" style="grid-auto-rows:3px; grid-auto-cols:20px; margin-top:-30000px; border:none">
|
||||
<span class="b" style="grid-row: span 1 / a;">b</span>
|
||||
<span class="b" style="grid-row: span 1 / a;"></span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
height: 20px;
|
||||
height: 30px;
|
||||
border: 3px solid;
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ span {
|
||||
border: 1px solid;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
height: 28px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.abs {
|
||||
@ -34,15 +34,16 @@ span {
|
||||
left: 204px;
|
||||
padding-left: 3px;
|
||||
padding-top: 5px;
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
width: 18px;
|
||||
height: 28px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.abs1 {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -11px;
|
||||
width: 27px;
|
||||
height: 21px;
|
||||
width: 30px;
|
||||
height: 36px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@ -52,8 +53,8 @@ span {
|
||||
<span class="c1">1</span>
|
||||
<span class="abs r1"><iframe width="20" height="20" src="data:text/html,<body>F"></iframe></span>
|
||||
<span class="abs r2"><iframe width="20" height="20" src="data:text/html,<body>2"></iframe></span>
|
||||
<span class="abs r3"><span class="abs1">r3</span></span>
|
||||
<span class="abs r4"><span class="abs1">r4</span></span>
|
||||
<span class="abs r3" style="xheight:23px"><span class="abs1">r3</span></span>
|
||||
<span class="abs r4" style="xheight:23px"><span class="abs1">r4</span></span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@ -15,9 +15,9 @@ body,html { color:black; background:white; font-size:16px; padding:0; margin:0;
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 20px 20px [A] 20px;
|
||||
grid-template-rows: 20px;
|
||||
grid-template-rows: 30px;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
grid-auto-rows: 30px;
|
||||
border: solid;
|
||||
}
|
||||
|
||||
@ -38,6 +38,9 @@ span {
|
||||
left: 201px;
|
||||
padding-left: 3px;
|
||||
padding-top: 5px;
|
||||
width: 18px;
|
||||
height: 28px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.abs1 {
|
||||
position: absolute;
|
||||
|
||||
@ -50,3 +50,9 @@ fuzzy-if(winWidget,70,130) fuzzy-if(cocoaWidget,85,180) == grid-col-max-sizing-m
|
||||
== grid-max-sizing-flex-006.html grid-max-sizing-flex-006-ref.html
|
||||
== grid-flex-min-sizing-001.html grid-flex-min-sizing-001-ref.html
|
||||
== grid-flex-min-sizing-002.html grid-flex-min-sizing-002-ref.html
|
||||
== grid-item-align-001.html grid-item-align-001-ref.html
|
||||
== grid-item-align-002.html grid-item-align-002-ref.html
|
||||
== grid-item-align-003.html grid-item-align-003-ref.html
|
||||
== grid-item-justify-001.html grid-item-justify-001-ref.html
|
||||
== grid-item-justify-002.html grid-item-justify-002-ref.html
|
||||
== grid-item-stretch-001.html grid-item-stretch-001-ref.html
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user