Bug 1338042 - Compute a missing width/height from the aspect ratio and the other dimension. r?longsonr
MozReview-Commit-ID: 7mg0xzJWMQs
--- a/layout/painting/nsCSSRendering.cpp
+++ b/layout/painting/nsCSSRendering.cpp
@@ -5418,16 +5418,33 @@ nsImageRenderer::ComputeIntrinsicSize()
nsLayoutUtils::ComputeSizeForDrawing(mImageContainer, imageIntSize,
result.mRatio, haveWidth, haveHeight);
if (haveWidth) {
result.SetWidth(nsPresContext::CSSPixelsToAppUnits(imageIntSize.width));
}
if (haveHeight) {
result.SetHeight(nsPresContext::CSSPixelsToAppUnits(imageIntSize.height));
}
+
+ // If we know the aspect ratio and one of the dimensions,
+ // we can compute the other missing width or height.
+ if (!haveHeight && haveWidth && result.mRatio.width != 0) {
+ nscoord intrinsicHeight =
+ NSCoordSaturatingNonnegativeMultiply(imageIntSize.width,
+ float(result.mRatio.height) /
+ float(result.mRatio.width));
+ result.SetHeight(nsPresContext::CSSPixelsToAppUnits(intrinsicHeight));
+ } else if (haveHeight && !haveWidth && result.mRatio.height != 0) {
+ nscoord intrinsicWidth =
+ NSCoordSaturatingNonnegativeMultiply(imageIntSize.height,
+ float(result.mRatio.width) /
+ float(result.mRatio.height));
+ result.SetWidth(nsPresContext::CSSPixelsToAppUnits(intrinsicWidth));
+ }
+
break;
}
case eStyleImageType_Element:
{
// XXX element() should have the width/height of the referenced element,
// and that element's ratio, if it matches. If it doesn't match, it
// should have no width/height or ratio. See element() in CSS images:
// <http://dev.w3.org/csswg/css-images-4/#element-notation>.
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/background-ref.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+ div {
+ position: relative;
+ }
+ svg {
+ display: block;
+ margin: auto;
+ }
+</style>
+<body>
+ <div>
+ <svg xmlns='http://www.w3.org/2000/svg' width='100px' height='200px'
+ viewport='0 0 100 200'>
+ <rect x='0' y='100' width='100' height='100' fill='purple'>
+ </rect>
+ </svg>
+ </div>
+</body>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/background-svg-without-height-width.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+.bgsvg {
+ background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Crect x='0' y='16' width='16' height='16' fill='purple'/%3E%3C/svg%3E") no-repeat;
+ background-size: contain;
+ width: 100px;
+ height: auto;
+ margin: auto;
+ position: relative;
+}
+.bgsvg::after {
+ content: ' ';
+ display: block;
+ padding-bottom: 200%;
+}
+</style>
+<div class="bgsvg"></div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/background-svg-without-height.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+.bgsvg {
+ background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' viewBox='0 0 16 32'%3E%3Crect x='0' y='16' width='16' height='16' fill='purple'/%3E%3C/svg%3E") no-repeat;
+ background-size: contain;
+ width: 100px;
+ height: auto;
+ margin: auto;
+ position: relative;
+}
+.bgsvg::after {
+ content: ' ';
+ display: block;
+ padding-bottom: 200%;
+}
+</style>
+<div class="bgsvg"></div>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/background-svg-without-width.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+.bgsvg {
+ background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32' viewBox='0 0 16 32'%3E%3Crect x='0' y='16' width='16' height='16' fill='purple'/%3E%3C/svg%3E") no-repeat;
+ background-size: contain;
+ width: 100px;
+ height: auto;
+ margin: auto;
+ position: relative;
+}
+.bgsvg::after {
+ content: ' ';
+ display: block;
+ padding-bottom: 200%;
+}
+</style>
+<div class="bgsvg"></div>
--- a/layout/reftests/svg/reftest.list
+++ b/layout/reftests/svg/reftest.list
@@ -469,8 +469,12 @@ pref(layout.css.clip-path-shapes.enabled
fuzzy(71,817) == filter-on-continuation-box-01.html filter-on-continuation-box-ref.html
== mask-contains-inner-svg-01.svg pass.svg
== mask-contains-inner-svg-02.svg pass.svg
== mask-use-element-01.svg pass.svg
== clip-use-element-01.svg pass.svg
== clip-use-element-02.svg pass.svg
== filter-use-element-01.svg pass.svg
+
+== background-svg-without-height.html background-ref.html
+== background-svg-without-height-width.html background-ref.html
+== background-svg-without-width.html background-ref.html