Remove notion of percentage intrinsic size: remove the single case that (incorrectly) sets percentage intrinsic sizes, and fix all of the tests that depend on our old incorrect behavior. (Bug 611099) r=dholbert
authorL. David Baron <dbaron@dbaron.org>
Sun, 12 Jun 2011 18:52:32 -0700
changeset 70944 58fe3ede72f834b7110fa5b937bee6995d43a174
parent 70943 c07445f34e926477e6c61885b2781d8922a898d9
child 70945 3af9fed4e33a1f0f165dc6b911815d21b199045e
push id20456
push userdbaron@mozilla.com
push dateMon, 13 Jun 2011 01:53:02 +0000
treeherdermozilla-central@eab02b0b7c7d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs611099
milestone7.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Remove notion of percentage intrinsic size: remove the single case that (incorrectly) sets percentage intrinsic sizes, and fix all of the tests that depend on our old incorrect behavior. (Bug 611099) r=dholbert Needed to help CSS 2.1 meet Proposed Recommendation entrance criteria.
layout/reftests/svg/as-image/img-novb-height-all-1-ref.html
layout/reftests/svg/as-image/img-novb-width-all-1-ref.html
layout/reftests/svg/dynamic-rect-04.xhtml
layout/reftests/svg/sizing/dynamic--inline-resize-cb-height.xhtml
layout/reftests/svg/sizing/dynamic--inline-resize-cb-width.xhtml
layout/reftests/svg/sizing/dynamic--object--auto-auto--pct-px.html
layout/reftests/svg/sizing/inline--position-absolute--02.xhtml
layout/reftests/svg/sizing/object--auto-auto--0-pct--ref.html
layout/reftests/svg/sizing/object--auto-auto--0-pct.html
layout/reftests/svg/sizing/object--auto-auto--pct-0--ref.html
layout/reftests/svg/sizing/object--auto-auto--pct-0.html
layout/reftests/svg/sizing/reftest.list
layout/reftests/svg/svg-in-foreignObject-01.xhtml
layout/reftests/svg/svg-in-foreignObject-02.xhtml
layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml
layout/reftests/svg/svg-integration/clipPath-html-06.xhtml
layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml
layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml
layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml
layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml
layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml
layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml
layout/svg/base/src/nsSVGOuterSVGFrame.cpp
parser/htmlparser/tests/reftest/bug577418-1.html
--- a/layout/reftests/svg/as-image/img-novb-height-all-1-ref.html
+++ b/layout/reftests/svg/as-image/img-novb-height-all-1-ref.html
@@ -13,25 +13,25 @@
         meetOrSlice: null // This means "use pAR=none"
       };
 
       // Descriptions below describe the behavior of the rows of <img> elements
       // in the corresponding test cases, which we mimic with specially-crafted
       // <embed> elements.
 
       // * FIRST TWO ROWS: <img> has width=auto height=auto
-      //  - Each <img> renders w/ width = 10% * body_width = .1*600 = 60px
-      //  - Synthesized viewBox has width = 10% * viewport_width = .1*60 = 6
+      //  - Each <img> renders w/ width = 300px (default)
+      //  - Synthesized viewBox has width = 10% * viewport_width = .1*300 = 30
       //  - <img> & viewBox both get height=30px, from <svg> height attr
-      svgParams.viewBox = [0, 0, 6, 30],
-      appendSVGSubArrayWithParams(svgParams, "embed", "60px", "30px");
+      svgParams.viewBox = [0, 0, 30, 30],
+      appendSVGSubArrayWithParams(svgParams, "embed", "300px", "30px");
 
       // * SECOND TWO ROWS: <img> has width=auto, height=20px
       // Calculations are as above, except <img> now imposes height="20px".
-      appendSVGSubArrayWithParams(svgParams, "embed", "60px", "20px");
+      appendSVGSubArrayWithParams(svgParams, "embed", "300px", "20px");
 
       // * THIRD TWO ROWS: <img> has width=30px height=auto
       //  - <img> now renders w/ width = 30px (imposed by <img> width attr)
       //  - Synthesized viewBox has width = 10% * viewport_width = .1*30 = 3
       //  - <img> & viewBox both get height=30px, from <svg> height attr
       svgParams.viewBox =  [0, 0, 3, 30];
       appendSVGSubArrayWithParams(svgParams, "embed", "30px", "30px");
 
--- a/layout/reftests/svg/as-image/img-novb-width-all-1-ref.html
+++ b/layout/reftests/svg/as-image/img-novb-width-all-1-ref.html
@@ -13,34 +13,34 @@
         meetOrSlice: null // This means "use pAR=none"
       };
 
       // Descriptions below describe the behavior of the rows of <img> elements
       // in the corresponding test cases, which we mimic with specially-crafted
       // <embed> elements.
 
       // * FIRST TWO ROWS: <img> has width=auto height=auto
-      //  - Each <img> renders w/ height = 20% * body_height = .2*600 = 120px
-      //  - Synthesized viewBox has height = 20% * viewport_height = .2*120 = 24
+      //  - Each <img> renders w/ height = 150px (default)
+      //  - Synthesized viewBox has height = 20% * viewport_height = .2*150 = 30
       //  - <img> & viewBox both get width=20px, from <svg> width attr
-      svgParams.viewBox = [0, 0, 20, 24],
-      appendSVGSubArrayWithParams(svgParams, "embed", "20px", "120px");
+      svgParams.viewBox = [0, 0, 20, 30],
+      appendSVGSubArrayWithParams(svgParams, "embed", "20px", "150px");
 
       // * SECOND TWO ROWS: <img> has width=auto, height=20px
       //  - <img> now renders w/ height = 20px (imposed by <img> height attr)
       //  - Synthesized viewBox has height = 20% * viewport_width = .2*20 = 4
       //  - <img> & viewBox both get width=20px, from <svg> width attr
       svgParams.viewBox = [0, 0, 20, 4],
       appendSVGSubArrayWithParams(svgParams, "embed", "20px", "20px");
 
       // * THIRD TWO ROWS: <img> has width=30px height=auto
       // Calculations are as with "FIRST TWO ROWS", except <img> now imposes
       // width="30px".
-      svgParams.viewBox = [0, 0, 20, 24],
-      appendSVGSubArrayWithParams(svgParams, "embed", "30px", "120px");
+      svgParams.viewBox = [0, 0, 20, 30],
+      appendSVGSubArrayWithParams(svgParams, "embed", "30px", "150px");
 
       // * FOURTH TWO ROWS: <img> has width=30px height=20px
       // Calculations are as with "SECOND TWO ROWS", except <img> now imposes
       // width="30px".
       svgParams.viewBox = [0, 0, 20, 4],
       appendSVGSubArrayWithParams(svgParams, "embed", "30px", "20px");
 
   </script>
--- a/layout/reftests/svg/dynamic-rect-04.xhtml
+++ b/layout/reftests/svg/dynamic-rect-04.xhtml
@@ -9,16 +9,18 @@
 <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=438867 -->
 <script>
 function m() {
     var SVG_NS = "http://www.w3.org/2000/svg";
     var svg = document.createElementNS(SVG_NS, 'svg');
     svg.style.position = 'absolute';
     svg.style.left = '0px';
     svg.style.top = '0px';
+    svg.style.width = '100%';
+    svg.style.height = '100%';
     document.body.appendChild(svg);
     
     var rect = document.createElementNS(SVG_NS, "rect");
     rect.setAttribute('width', '100%');
     rect.setAttribute('height', '100%');
     rect.setAttribute('fill', 'lime');
     svg.appendChild(rect);
 }
--- a/layout/reftests/svg/sizing/dynamic--inline-resize-cb-height.xhtml
+++ b/layout/reftests/svg/sizing/dynamic--inline-resize-cb-height.xhtml
@@ -17,17 +17,17 @@
     <style type="text/css">
 
 html, body, div {
   padding: 0;
   border: 0;
   margin: 0;
   width: 100%;
   height: 100%;  /* inline style override on the div below */
-  background: red;
+  background: white;
   overflow: hidden;
 }
 
     </style>
     <script type="text/javascript">
 
 function resize_div()
 {
@@ -39,14 +39,14 @@ function resize_div()
 document.addEventListener("MozReftestInvalidate", resize_div, false);
 
     </script>
   </head>
   <body>
 
     <div style="height:50%;">
       <svg xmlns="http://www.w3.org/2000/svg" width="5000" height="100%">
-        <rect width="100%" height="100%" fill="lime"/>
+        <rect width="100%" height="100%" fill="blue"/>
       </svg>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/svg/sizing/dynamic--inline-resize-cb-width.xhtml
+++ b/layout/reftests/svg/sizing/dynamic--inline-resize-cb-width.xhtml
@@ -17,17 +17,17 @@
     <style type="text/css">
 
 html, body, div {
   padding: 0;
   border: 0;
   margin: 0;
   width: 100%;  /* inline style override on the div below */
   height: 100%;
-  background: red;
+  background: white;
   overflow: hidden;
 }
 
     </style>
     <script type="text/javascript">
 
 function resize_div()
 {
@@ -39,14 +39,14 @@ function resize_div()
 document.addEventListener("MozReftestInvalidate", resize_div, false);
 
     </script>
   </head>
   <body>
 
     <div style="width:50%;">
       <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="5000">
-        <rect width="100%" height="100%" fill="lime"/>
+        <rect width="100%" height="100%" fill="blue"/>
       </svg>
     </div>
 
   </body>
 </html>
--- a/layout/reftests/svg/sizing/dynamic--object--auto-auto--pct-px.html
+++ b/layout/reftests/svg/sizing/dynamic--object--auto-auto--pct-px.html
@@ -5,20 +5,21 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
 
     <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
 
     <title>Test: width:auto; height:auto; width="49%" height="70px"</title>
 
     <!--
-    This testcase checks that the <object> element uses the intrinsic width and
-    height of the embedded SVG. Since the intrinsic width is 49% and the
-    intrinsic height is 70px, you should see a blue rectangle 49% wide by 70px
-    high when viewing this file. You should not see any red.
+    This testcase checks that the <object> element uses the intrinsic
+    height of the embedded SVG, but ignores the percentage width. Since
+    the intrinsic height is 70px, you should see a blue rectangle 300px
+    (the magic default) wide by 70px high when viewing this file. You
+    should not see any red.
     -->
 
     <style type="text/css">
 
 html, body {
   padding: 0;
   border: 0;
   margin: 0;
--- a/layout/reftests/svg/sizing/inline--position-absolute--02.xhtml
+++ b/layout/reftests/svg/sizing/inline--position-absolute--02.xhtml
@@ -30,21 +30,21 @@ html, body {
   <body>
 
     <!-- create containing block for absolutely positioned children -->
     <div style="position:relative;">
 
       <!-- div to expand parent div to a computed height of 20px -->
       <div style="height:20px; background:red;"/>
 
-      <!-- absolutely positioned SVG - the implicity 100% percentage height
+      <!-- absolutely positioned SVG - the explicit 100% percentage height
            should compute as a percentage of the parent div's computed height,
            not as a percentage of the body's height! I.e. no red should show.
       -->
-      <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; top:0;">
+      <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; top:0; width: 100%; height: 100%">
         <rect width="100%" height="100%" fill="red"/>
         <rect width="100%" height="20px" fill="lime"/>
       </svg>
 
     </div>
 
   </body>
 </html>
--- a/layout/reftests/svg/sizing/object--auto-auto--0-pct--ref.html
+++ b/layout/reftests/svg/sizing/object--auto-auto--0-pct--ref.html
@@ -21,17 +21,17 @@ html, body {
   overflow: hidden;
 }
 
 div {
   padding: 0;
   border: 1px solid blue;
   margin: 50px;
   width: 0;
-  height: 49%;
+  height: 150px;
 }
 
     </style>
   </head>
   <body>
     <div></div>
   </body>
 </html>
--- a/layout/reftests/svg/sizing/object--auto-auto--0-pct.html
+++ b/layout/reftests/svg/sizing/object--auto-auto--0-pct.html
@@ -5,20 +5,21 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
 
     <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
 
     <title>Test: width:auto; height:auto; width="0" height="49%"</title>
 
     <!--
-    This testcase checks that the <object> element uses the intrinsic width and
-    height of the embedded SVG. Since the intrinsic width is zero and the
-    intrinsic height is 49%, you should see a 1px blue border around rectangle
-    0px wide by 49% high when viewing this file. You should not see any red.
+    This testcase checks that the <object> element uses the intrinsic
+    width of the embedded SVG but ignores the (percentage) height.
+    Since the intrinsic width is zero, you should see a 1px blue border
+    around rectangle 0px wide by 150px high when viewing this file. You
+    should not see any red.
     -->
 
     <style type="text/css">
 
 html, body {
   padding: 0;
   border: 0;
   margin: 0;
--- a/layout/reftests/svg/sizing/object--auto-auto--pct-0--ref.html
+++ b/layout/reftests/svg/sizing/object--auto-auto--pct-0--ref.html
@@ -20,17 +20,17 @@ html, body {
   /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
   overflow: hidden;
 }
 
 div {
   padding: 0;
   border: 1px solid blue;
   margin: 50px;
-  width: 49%;
+  width: 300px;
   height: 0;
 }
 
     </style>
   </head>
   <body>
     <div></div>
   </body>
--- a/layout/reftests/svg/sizing/object--auto-auto--pct-0.html
+++ b/layout/reftests/svg/sizing/object--auto-auto--pct-0.html
@@ -5,21 +5,21 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
 
     <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
 
     <title>Test: width:auto; height:auto; width="49%" height="0"</title>
 
     <!--
-    This testcase checks that the <object> element uses the intrinsic width and
-    height of the embedded SVG. Since the intrinsic width is 49% and the
-    intrinsic height is zero, you should see a 1px blue border around a
-    rectangle 49% wide by 0px high when viewing this file. You should not see
-    any red.
+    This testcase checks that the <object> element uses the intrinsic
+    height of the embedded SVG, but ignores the percentage intrinsic
+    width. Since the intrinsic height is zero, you should see a 1px blue
+    border around a rectangle 300px wide by 0px high when viewing this
+    file. You should not see any red.
     -->
 
     <style type="text/css">
 
 html, body {
   padding: 0;
   border: 0;
   margin: 0;
--- a/layout/reftests/svg/sizing/reftest.list
+++ b/layout/reftests/svg/sizing/reftest.list
@@ -298,15 +298,17 @@ random-if(Android) == object--auto-auto-
 # Assorted tests to check that dynamic changes work correctly
 #
 # Here we have an assortment of different tests to check that updates occur
 # correctly when changes are made that should result in a change in the size
 # or position of the SVG.
 
 == dynamic--inline-css-height.xhtml             pass.svg
 == dynamic--inline-css-width.xhtml              pass.svg
-== dynamic--inline-resize-cb-height.xhtml       pass.svg
-== dynamic--inline-resize-cb-width.xhtml        pass.svg
+# These two don't have a whole lot of point anymore now that the meaning
+# of percentages has changed.
+== dynamic--inline-resize-cb-height.xhtml       standalone-sanity-height-150px.svg
+== dynamic--inline-resize-cb-width.xhtml        standalone-sanity-width-300px.svg
 skip == dynamic--inline-resize-window-height.xhtml  pass.svg # XXX breaks the reftest run as the window height somehow is not restored
 skip == dynamic--inline-resize-window-width.xhtml    pass.svg # Fails way too much
 fails == dynamic--object-svg-unloaded.xhtml     pass.svg
 # == dynamic--object--auto-auto--pct-px.html 
 
--- a/layout/reftests/svg/svg-in-foreignObject-01.xhtml
+++ b/layout/reftests/svg/svg-in-foreignObject-01.xhtml
@@ -4,17 +4,17 @@
 -->
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 
   <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=411146 -->
 
   <title>Test percentages dimensions for SVG inside a foreignObject</title>
 
   <foreignObject width="50%" height="50%">
-    <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%">
+    <svg xmlns="http://www.w3.org/2000/svg" style="width: 50%; height: 50%">
       <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
     </svg>
   </foreignObject>
 
   <svg x="25%" width="25%" height="25%">
     <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
   </svg>
   <svg y="25%" width="25%" height="25%">
--- a/layout/reftests/svg/svg-in-foreignObject-02.xhtml
+++ b/layout/reftests/svg/svg-in-foreignObject-02.xhtml
@@ -5,17 +5,17 @@
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
 
   <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=411146 -->
 
   <title>Test percentages dimensions for SVG inside a foreignObject</title>
 
   <foreignObject width="50%" height="50%">
     <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;">
-      <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%">
+      <svg xmlns="http://www.w3.org/2000/svg" style="width: 50%; height: 50%">
         <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
       </svg>
     </div>
   </foreignObject>
 
   <svg x="25%" width="25%" height="25%">
     <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
   </svg>
--- a/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml
+++ b/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml
@@ -11,14 +11,14 @@
 </style>
 </head>
 <body style="margin:0">
   <span style="clip-path: url(clipPath-html-06.xhtml#c1);">
     <span class="unit" style="background:lime;"></span>
     <div style="height:200px; width:100px;"/>
     <span class="unit" style="background:lime;"></span>
   </span>
-  <svg:svg height="0">
+  <svg:svg height="0" style="display: block">
     <!-- use an empty g to force clipPath-html-06.xhtml to load before onload -->
     <svg:use xlink:href="clipPath-html-06.xhtml#empty" />
   </svg:svg>
 </body>
 </html>
--- a/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml
+++ b/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml
@@ -12,17 +12,17 @@
 </head>
 <body style="margin:0">
   <span style="clip-path: url(#c1);">
     <span class="unit" style="background:lime;"></span>
     <div style="height:200px; width:100px;"/>
     <span class="unit" style="background:lime;"></span>
   </span>
 
-  <svg:svg height="0">
+  <svg:svg height="0" style="display: block">
     <!-- so that other documents can svg:use this one and force it to
          load before onload -->
     <svg:g id="empty" />
     <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
       <svg:rect x="0" y="0.5" width="0.5" height="0.5"/>
     </svg:clipPath>
   </svg:svg>
 </body>
--- a/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml
+++ b/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml
@@ -2,17 +2,17 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/licenses/publicdomain/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:svg="http://www.w3.org/2000/svg">
 <head>
   <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
   <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
-  <style>svg { position: absolute; top: 0; left: 0 }</style>
+  <style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style>
 </head>
 <body>
 
 <svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
 <svg:svg requiredExtensions="x"><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
 
 </body>
 </html>
--- a/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml
+++ b/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml
@@ -3,17 +3,17 @@
      http://creativecommons.org/licenses/publicdomain/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:svg="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">
 <head>
   <title>Test that using elements from conditional-failing outer 'svg' elements works</title>
   <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
-  <style>svg { position: absolute; top: 0; left: 0 }</style>
+  <style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style>
 </head>
 <body>
 
 <svg:svg requiredExtensions="x"><svg:rect id="r" width="100%" height="100%" fill="lime"/></svg:svg>
 <svg:svg><svg:use xlink:href="#r"/></svg:svg>
 
 </body>
 </html>
--- a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml
@@ -2,17 +2,17 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/licenses/publicdomain/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:svg="http://www.w3.org/2000/svg">
 <head>
   <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
   <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
-  <style>svg { position: absolute; top: 0; left: 0 }</style>
+  <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
 </head>
 <body onload="document.getElementById('a').setAttribute('requiredExtensions', 'x')">
 
 <svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
 <svg:svg id="a"><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
 
 </body>
 </html>
--- a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml
@@ -2,17 +2,17 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/licenses/publicdomain/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:svg="http://www.w3.org/2000/svg">
 <head>
   <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
   <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
-  <style>svg { position: absolute; top: 0; left: 0 }</style>
+  <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
 </head>
 <body onload="document.getElementById('a').removeAttribute('requiredExtensions')">
 
 <svg:svg><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
 <svg:svg id="a" requiredExtensions="x"><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
 
 </body>
 </html>
--- a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml
@@ -2,17 +2,17 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/licenses/publicdomain/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:svg="http://www.w3.org/2000/svg">
 <head>
   <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
   <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
-  <style>svg { position: absolute; top: 0; left: 0 }</style>
+  <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
 </head>
 <body onload="document.getElementById('a').setAttribute('requiredFeatures', 'x')">
 
 <svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
 <svg:svg id="a" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient"><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
 
 </body>
 </html>
--- a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml
+++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml
@@ -2,17 +2,17 @@
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/licenses/publicdomain/
 -->
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:svg="http://www.w3.org/2000/svg">
 <head>
   <title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
   <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
-  <style>svg { position: absolute; top: 0; left: 0 }</style>
+  <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
 </head>
 <body onload="document.getElementById('a').setAttribute('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Gradient')">
 
 <svg:svg><svg:rect width="100%" height="100%" fill="red"/></svg:svg>
 <svg:svg id="a" requiredFeatures="x"><svg:rect width="100%" height="100%" fill="lime"/></svg:svg>
 
 </body>
 </html>
--- a/layout/svg/base/src/nsSVGOuterSVGFrame.cpp
+++ b/layout/svg/base/src/nsSVGOuterSVGFrame.cpp
@@ -243,31 +243,23 @@ nsSVGOuterSVGFrame::GetIntrinsicSize()
   // specified and we're embedded inside an nsIObjectLoadingContent.
 
   IntrinsicSize intrinsicSize;
 
   nsSVGSVGElement *content = static_cast<nsSVGSVGElement*>(mContent);
   nsSVGLength2 &width  = content->mLengthAttributes[nsSVGSVGElement::WIDTH];
   nsSVGLength2 &height = content->mLengthAttributes[nsSVGSVGElement::HEIGHT];
 
-  if (width.IsPercentage()) {
-    float val = width.GetAnimValInSpecifiedUnits() / 100.0f;
-    if (val < 0.0f) val = 0.0f;
-    intrinsicSize.width.SetPercentValue(val);
-  } else {
+  if (!width.IsPercentage()) {
     nscoord val = nsPresContext::CSSPixelsToAppUnits(width.GetAnimValue(content));
     if (val < 0) val = 0;
     intrinsicSize.width.SetCoordValue(val);
   }
 
-  if (height.IsPercentage()) {
-    float val = height.GetAnimValInSpecifiedUnits() / 100.0f;
-    if (val < 0.0f) val = 0.0f;
-    intrinsicSize.height.SetPercentValue(val);
-  } else {
+  if (!height.IsPercentage()) {
     nscoord val = nsPresContext::CSSPixelsToAppUnits(height.GetAnimValue(content));
     if (val < 0) val = 0;
     intrinsicSize.height.SetCoordValue(val);
   }
 
   return intrinsicSize;
 }
 
@@ -313,26 +305,62 @@ nsSVGOuterSVGFrame::GetIntrinsicRatio()
 /* virtual */ nsSize
 nsSVGOuterSVGFrame::ComputeSize(nsRenderingContext *aRenderingContext,
                                 nsSize aCBSize, nscoord aAvailableWidth,
                                 nsSize aMargin, nsSize aBorder, nsSize aPadding,
                                 PRBool aShrinkWrap)
 {
   nsSVGSVGElement* content = static_cast<nsSVGSVGElement*>(mContent);
 
-  if ((content->HasValidViewbox() || content->ShouldSynthesizeViewBox()) &&
-      (IsRootOfImage() || IsRootOfReplacedElementSubDoc())) {
-    // The embedding element has done the replaced element sizing, using our
-    // intrinsic dimensions as necessary. We just need to fill the viewport.
-    return aCBSize;
+  IntrinsicSize intrinsicSize = GetIntrinsicSize();
+
+  if (!mContent->GetParent()) {
+    if (IsRootOfImage() || IsRootOfReplacedElementSubDoc()) {
+      // The embedding element has done the replaced element sizing,
+      // using our intrinsic dimensions as necessary. We just need to
+      // fill the viewport.
+      return aCBSize;
+    } else {
+      // We're the root of a browsing context, so we need to honor
+      // widths and heights in percentages.  (GetIntrinsicSize() doesn't
+      // report these since there's no such thing as a percentage
+      // intrinsic size.)
+      nsSVGLength2 &width =
+        content->mLengthAttributes[nsSVGSVGElement::WIDTH];
+      if (width.IsPercentage()) {
+        NS_ABORT_IF_FALSE(intrinsicSize.width.GetUnit() == eStyleUnit_None,
+                          "GetIntrinsicSize should have reported no "
+                          "intrinsic width");
+        float val = width.GetAnimValInSpecifiedUnits() / 100.0f;
+        if (val < 0.0f) val = 0.0f;
+        intrinsicSize.width.SetCoordValue(val * aCBSize.width);
+      }
+
+      nsSVGLength2 &height =
+        content->mLengthAttributes[nsSVGSVGElement::HEIGHT];
+      NS_ABORT_IF_FALSE(aCBSize.height != NS_AUTOHEIGHT,
+                        "root should not have auto-height containing block");
+      if (height.IsPercentage()) {
+        NS_ABORT_IF_FALSE(intrinsicSize.height.GetUnit() == eStyleUnit_None,
+                          "GetIntrinsicSize should have reported no "
+                          "intrinsic height");
+        float val = height.GetAnimValInSpecifiedUnits() / 100.0f;
+        if (val < 0.0f) val = 0.0f;
+        intrinsicSize.height.SetCoordValue(val * aCBSize.height);
+      }
+      NS_ABORT_IF_FALSE(intrinsicSize.height.GetUnit() == eStyleUnit_Coord &&
+                        intrinsicSize.width.GetUnit() == eStyleUnit_Coord,
+                        "We should have just handled the only situation where"
+                        "we lack an intrinsic height or width.");
+    }
   }
 
   return nsLayoutUtils::ComputeSizeWithIntrinsicDimensions(
                             aRenderingContext, this,
-                            GetIntrinsicSize(), GetIntrinsicRatio(), aCBSize,
+                            intrinsicSize, GetIntrinsicRatio(), aCBSize,
                             aMargin, aBorder, aPadding);
 }
 
 NS_IMETHODIMP
 nsSVGOuterSVGFrame::Reflow(nsPresContext*           aPresContext,
                            nsHTMLReflowMetrics&     aDesiredSize,
                            const nsHTMLReflowState& aReflowState,
                            nsReflowStatus&          aStatus)
--- a/parser/htmlparser/tests/reftest/bug577418-1.html
+++ b/parser/htmlparser/tests/reftest/bug577418-1.html
@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html style="width:100%;height:100%;margin:0;border:0;overflow:hidden">
 <body style="width:100%;height:100%;margin:0;border:0;overflow:hidden">
-<svg>
+<svg style="width:100%;height:100%">
  <rect height="100%" width="100%" fill="red"/>
    <foreignObject>
      <html>
        <body>
        </body>
      </html>
     </foreignObject>
   <rect height="100%" width="100%" fill="lime"/>