Bug 1338042 - Compute a missing width/height from the aspect ratio and the other dimension. r?longsonr draft
authorMantaroh Yoshinaga <mantaroh@gmail.com>
Thu, 23 Feb 2017 17:03:35 +0900
changeset 488519 fb176ae8b0fb2deabcdd78734098a7afc699b9c0
parent 486741 16effd5b21ab03629feca04b5b83911bb757394c
child 546755 5c32f918c1a0eed52c948c6187b675d949b76dba
push id46557
push usermantaroh@gmail.com
push dateThu, 23 Feb 2017 08:10:28 +0000
reviewerslongsonr
bugs1338042
milestone54.0a1
Bug 1338042 - Compute a missing width/height from the aspect ratio and the other dimension. r?longsonr MozReview-Commit-ID: 7mg0xzJWMQs
layout/painting/nsCSSRendering.cpp
layout/reftests/svg/background-ref.html
layout/reftests/svg/background-svg-without-height-width.html
layout/reftests/svg/background-svg-without-height.html
layout/reftests/svg/background-svg-without-width.html
layout/reftests/svg/reftest.list
--- 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