mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision 5fe9625d7445a6b88640f830d90dd5489c4bda05
This commit is contained in:
WPT Sync Bot
parent
39c3f46375
commit
92d17be4fe
104 changed files with 2429 additions and 236 deletions
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: purple;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
background: green;
|
||||
}
|
||||
.justify {
|
||||
width: 350px;
|
||||
}
|
||||
.align {
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<svg class="align justify"></svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg class="align"></svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg class="justify"></svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-1-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-grid;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: purple;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
svg {
|
||||
background: green;
|
||||
}
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.align {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<svg class="align justify"></svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg class="align"></svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg class="justify"></svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg></svg>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-grid;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.align {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.justify {
|
||||
width: 350px;
|
||||
}
|
||||
.align {
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align" style="width:20px">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:20px">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-2-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-grid;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.align {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.justify {
|
||||
width: 350px;
|
||||
}
|
||||
.align {
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify" style="height:20px">
|
||||
</div>
|
||||
<div>
|
||||
<img style="height:20px">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-3-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-grid;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.align {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.justify {
|
||||
width: 350px;
|
||||
}
|
||||
.align {
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align" style="width:10px">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify" style="height:20px">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:10px; height:20px">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-4-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-grid;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.align {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.justify {
|
||||
width: 350px;
|
||||
}
|
||||
.align {
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align" style="width:20px">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify" style="width:350px; height:40px">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:20px; height:40px">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-5-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-grid;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.align {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.justify {
|
||||
width: 350px;
|
||||
}
|
||||
.align {
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align" style="width:0px">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify" style="height:20px">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:0px; height:20px">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-6-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-grid;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
img { background: blue; }
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.align {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px" viewBox="0 0 50 100"></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.justify {
|
||||
width: 350px;
|
||||
}
|
||||
.align {
|
||||
height: 250px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align" style="width:20px">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify" style="height:0px">
|
||||
</div>
|
||||
<div>
|
||||
<img style="width:20px; height:0px">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-7-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-grid;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
img { background: blue; }
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.align {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px" viewBox="0 0 50 100"></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-grid;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.align {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="0px" height="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>stretching works for replaced items with no aspect ratio</title>
|
||||
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281">
|
||||
<link rel="match" href="grid-item-no-aspect-ratio-stretch-8-ref.html">
|
||||
<style>
|
||||
body {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-grid;
|
||||
height: 250px;
|
||||
width: 350px;
|
||||
background: grey;
|
||||
margin: 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.justify {
|
||||
justify-self: stretch;
|
||||
}
|
||||
.align {
|
||||
align-self: stretch;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<img class="align justify">
|
||||
</div>
|
||||
<div>
|
||||
<img class="align">
|
||||
</div>
|
||||
<div>
|
||||
<img class="justify">
|
||||
</div>
|
||||
<div>
|
||||
<img>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>'
|
||||
var imgs = document.querySelectorAll('img');
|
||||
for (var i = 0; i < imgs.length; ++i) {
|
||||
var img = imgs[i];
|
||||
img.src = url;
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue