зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1009776 - part 7, [css-grid] Some reftests for grid item placement with definite positions.
This commit is contained in:
Mats Palmgren
Родитель
58b99a313e
Коммит
a99584fe32
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
|
||||
.grid {
|
||||
height: 60px;
|
||||
border: 10px solid green;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
background: lime;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.a {
|
||||
left: 40px;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
.b {
|
||||
left: 20px;
|
||||
top: 40px;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
}
|
||||
.c {
|
||||
left: 80px;
|
||||
top: 40px;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
}
|
||||
.d {
|
||||
left: 0px;
|
||||
width: 20px;
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class=grid>
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
<span class="d">d</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'. . a a a .'
|
||||
'. . a a a .'
|
||||
'. b b . . .'
|
||||
;
|
||||
border: 10px solid green;
|
||||
grid-template-columns: 20px 20px 20px 20px;
|
||||
grid-template-rows: 20px 20px 20px;
|
||||
grid-auto-flow: column dense;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
background: lime;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.a {
|
||||
grid-area: a;
|
||||
}
|
||||
.b {
|
||||
grid-column: 2 / span 3;
|
||||
grid-row: b;
|
||||
}
|
||||
.c {
|
||||
grid-column: span 3;
|
||||
}
|
||||
.d {
|
||||
grid-row: span 3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class=grid>
|
||||
<span class=a>a</span>
|
||||
<span class=b>b</span>
|
||||
<span class=c>c</span>
|
||||
<span class=d>d</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
.grid {
|
||||
height: 60px;
|
||||
border: 1px solid green;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
background: lime;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.test1 span {
|
||||
top: 0;
|
||||
left: 40px;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.test2 .a {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
.test2 .b {
|
||||
top: 40px;
|
||||
left: 20px;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
}
|
||||
.test2 .c {
|
||||
top: 0;
|
||||
left: 60px;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.test3 span {
|
||||
top: 0;
|
||||
left: 40px;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.test4 span {
|
||||
top: 0;
|
||||
left: 40px;
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.test5 span {
|
||||
top: 0;
|
||||
left: 20px;
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.test6 span {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid test1"><span>a</span></div>
|
||||
|
||||
<div class="grid test2">
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test3"><span>a</span></div>
|
||||
|
||||
<div class="grid test4"><span>a</span></div>
|
||||
|
||||
<div class="grid test5"><span>a</span></div>
|
||||
|
||||
<div class="grid test6"><span>b</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
.grid {
|
||||
display: grid;
|
||||
border: 1px solid green;
|
||||
grid-template-columns: 20px 20px 20px 20px;
|
||||
grid-template-rows: 20px 20px 20px;
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
background: lime;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.test1 { grid-template-areas:'. a a-start .'; }
|
||||
.test1 span { grid-column: a-start / 8; }
|
||||
|
||||
.test2 {
|
||||
grid-template-areas:
|
||||
'a a a . . .'
|
||||
'a a a . . .'
|
||||
'. b b . . .'
|
||||
;
|
||||
}
|
||||
|
||||
.test2 .a {
|
||||
grid-area: a;
|
||||
}
|
||||
.test2 .b {
|
||||
grid-column: 2 / span 3;
|
||||
grid-row: b;
|
||||
}
|
||||
.test2 .c {
|
||||
grid-column: auto / span 3;
|
||||
}
|
||||
|
||||
.test3 {
|
||||
grid-template-areas:'. a .';
|
||||
grid-template-columns: (a-start) 20px 20px (a-start-start) 20px (a-start-end);
|
||||
}
|
||||
.test3 span { grid-column: a-start / 8; }
|
||||
|
||||
.test4, .test5 {
|
||||
grid-template-areas:'. . . a';
|
||||
grid-template-columns: 20px (a-start) 20px (a-start) 20px (a-end) 20px ;
|
||||
}
|
||||
.test4 span { grid-column: a-start 2 / 8; }
|
||||
.test5 span { grid-column: a / 8; }
|
||||
|
||||
.test6 #span1 { grid-row:1/2; grid-column:1/2; }
|
||||
.test6 #span2 { grid-row:1/2; grid-column: non-existent / span 1; }
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid test1"><span>a</span></div>
|
||||
|
||||
<div class="grid test2">
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test3"><span>a</span></div>
|
||||
|
||||
<div class="grid test4"><span>a</span></div>
|
||||
|
||||
<div class="grid test5"><span>a</span></div>
|
||||
|
||||
<div class="grid test6"><span id="span1">a</span><span id="span2">b</span></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,3 +5,5 @@ default-preferences pref(layout.css.grid.enabled,true)
|
|||
fails == grid-whitespace-handling-1a.xhtml grid-whitespace-handling-1-ref.xhtml
|
||||
fails == grid-whitespace-handling-1b.xhtml grid-whitespace-handling-1-ref.xhtml
|
||||
== grid-whitespace-handling-2.xhtml grid-whitespace-handling-2-ref.xhtml
|
||||
== grid-placement-definite-001.html grid-placement-definite-001-ref.html
|
||||
== grid-placement-definite-002.html grid-placement-definite-002-ref.html
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче