зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1656281 - Allow to stretch items with no intrinsic ratio. r=mats
There's no reason this shouldn't work per the grid spec. We also remove some outdated condition on the meaning of align/justify-self: normal on grid items without aspect ratio. This matches the behavior of other browsers, and the spec as far as I can tell. https://drafts.csswg.org/css-grid/#grid-item-sizing no longer mentions 'stretch' from the definition of 'normal'. Differential Revision: https://phabricator.services.mozilla.com/D85435
This commit is contained in:
Emilio Cobos Álvarez
Родитель
70a8a87c2d
Коммит
1ab557e3f4
|
|
@ -2556,12 +2556,7 @@ LogicalSize nsContainerFrame::ComputeSizeWithIntrinsicDimensions(
|
|||
auto inlineAxisAlignment =
|
||||
isOrthogonal ? stylePos->UsedAlignSelf(GetParent()->Style())._0
|
||||
: stylePos->UsedJustifySelf(GetParent()->Style())._0;
|
||||
// Note: 'normal' means 'start' for elements with an intrinsic size
|
||||
// or ratio in the relevant dimension, otherwise 'stretch'.
|
||||
// https://drafts.csswg.org/css-grid/#grid-item-sizing
|
||||
if ((inlineAxisAlignment == StyleAlignFlags::NORMAL &&
|
||||
!hasIntrinsicISize && !logicalRatio) ||
|
||||
inlineAxisAlignment == StyleAlignFlags::STRETCH) {
|
||||
if (inlineAxisAlignment == StyleAlignFlags::STRETCH) {
|
||||
stretchI = eStretch;
|
||||
}
|
||||
}
|
||||
|
|
@ -2624,12 +2619,7 @@ LogicalSize nsContainerFrame::ComputeSizeWithIntrinsicDimensions(
|
|||
auto blockAxisAlignment =
|
||||
!isOrthogonal ? stylePos->UsedAlignSelf(GetParent()->Style())._0
|
||||
: stylePos->UsedJustifySelf(GetParent()->Style())._0;
|
||||
// Note: 'normal' means 'start' for elements with an intrinsic size
|
||||
// or ratio in the relevant dimension, otherwise 'stretch'.
|
||||
// https://drafts.csswg.org/css-grid/#grid-item-sizing
|
||||
if ((blockAxisAlignment == StyleAlignFlags::NORMAL &&
|
||||
!hasIntrinsicBSize && !logicalRatio) ||
|
||||
blockAxisAlignment == StyleAlignFlags::STRETCH) {
|
||||
if (blockAxisAlignment == StyleAlignFlags::STRETCH) {
|
||||
stretchB = eStretch;
|
||||
}
|
||||
}
|
||||
|
|
@ -2717,33 +2707,31 @@ LogicalSize nsContainerFrame::ComputeSizeWithIntrinsicDimensions(
|
|||
stretchB = (stretchI == eStretch ? eStretch : eStretchPreservingRatio);
|
||||
}
|
||||
|
||||
if (logicalRatio) {
|
||||
if (stretchI == eStretch) {
|
||||
tentISize = iSize; // * / 'stretch'
|
||||
if (stretchB == eStretch) {
|
||||
tentBSize = bSize; // 'stretch' / 'stretch'
|
||||
} else if (stretchB == eStretchPreservingRatio) {
|
||||
// 'normal' / 'stretch'
|
||||
tentBSize = logicalRatio.Inverted().ApplyTo(iSize);
|
||||
}
|
||||
} else if (stretchB == eStretch) {
|
||||
tentBSize = bSize; // 'stretch' / * (except 'stretch')
|
||||
if (stretchI == eStretchPreservingRatio) {
|
||||
// 'stretch' / 'normal'
|
||||
tentISize = logicalRatio.ApplyTo(bSize);
|
||||
}
|
||||
} else if (stretchI == eStretchPreservingRatio) {
|
||||
tentISize = iSize; // * (except 'stretch') / 'normal'
|
||||
if (stretchI == eStretch) {
|
||||
tentISize = iSize; // * / 'stretch'
|
||||
if (stretchB == eStretch) {
|
||||
tentBSize = bSize; // 'stretch' / 'stretch'
|
||||
} else if (stretchB == eStretchPreservingRatio && logicalRatio) {
|
||||
// 'normal' / 'stretch'
|
||||
tentBSize = logicalRatio.Inverted().ApplyTo(iSize);
|
||||
if (stretchB == eStretchPreservingRatio && tentBSize > bSize) {
|
||||
// Stretch within the CB size with preserved intrinsic ratio.
|
||||
tentBSize = bSize; // 'normal' / 'normal'
|
||||
tentISize = logicalRatio.ApplyTo(bSize);
|
||||
}
|
||||
} else if (stretchB == eStretchPreservingRatio) {
|
||||
tentBSize = bSize; // 'normal' / * (except 'normal' and 'stretch')
|
||||
}
|
||||
} else if (stretchB == eStretch) {
|
||||
tentBSize = bSize; // 'stretch' / * (except 'stretch')
|
||||
if (stretchI == eStretchPreservingRatio && logicalRatio) {
|
||||
// 'stretch' / 'normal'
|
||||
tentISize = logicalRatio.ApplyTo(bSize);
|
||||
}
|
||||
} else if (stretchI == eStretchPreservingRatio && logicalRatio) {
|
||||
tentISize = iSize; // * (except 'stretch') / 'normal'
|
||||
tentBSize = logicalRatio.Inverted().ApplyTo(iSize);
|
||||
if (stretchB == eStretchPreservingRatio && tentBSize > bSize) {
|
||||
// Stretch within the CB size with preserved intrinsic ratio.
|
||||
tentBSize = bSize; // 'normal' / 'normal'
|
||||
tentISize = logicalRatio.ApplyTo(bSize);
|
||||
}
|
||||
} else if (stretchB == eStretchPreservingRatio && logicalRatio) {
|
||||
tentBSize = bSize; // 'normal' / * (except 'normal' and 'stretch')
|
||||
tentISize = logicalRatio.ApplyTo(bSize);
|
||||
}
|
||||
|
||||
// ComputeAutoSizeWithIntrinsicDimensions preserves the ratio when
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Загрузка…
Ссылка в новой задаче