layout/style/test/test_bug874919.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=874919
   5 -->
   6 <head>
   7   <title>Test for Bug 874919</title>
   8   <script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
   9   <script src="/tests/SimpleTest/SimpleTest.js"></script>
  10   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  11 </head>
  12 <body>
  13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=874919">Mozilla Bug 874919</a>
  14 <p id="display"></p>
  15 <div id="content" style="width: 150px">
  16     <svg id="outer_SVG" style="display: inline; width: 100%">
  17         <circle cx="120" cy="120" r="120" fill="blue"></circle>
  18         <svg id="inner_SVG">
  19             <circle id="circle" cx="120" cy="120" r="120" fill="red"></circle>
  20         </svg>
  21     </svg>
  22 </div>
  23 <pre id="test">
  24
  25 <script type="text/javascript">
  26
  27     var shouldUseComputed = ["inner_SVG"]
  28     var shouldUseUsed = ["outer_SVG"]
  29
  30     shouldUseUsed.forEach(function(elemId) {
  31
  32         var style = window.getComputedStyle(document.getElementById(elemId));
  33
  34         ok(style.width.match(/^\d+px$/),
  35             "Inline Outer SVG element's getComputedStyle.width should be used value. ");
  36
  37         ok(style.height.match(/^\d+px$/),
  38             "Inline Outer SVG element's getComputedStyle.height should be used value.");
  39     });
  40
  41     shouldUseComputed.forEach(function(elemId) {
  42         var style = window.getComputedStyle(document.getElementById(elemId));
  43
  44         // Computed value should match either the percentage used, or "auto" in the case of the inner SVG element.
  45         ok(style.width.match(/^\d+%$|^auto$/),
  46             "Inline inner SVG element's getComputedStyle.width should be computed value. " + style.width);
  47
  48         ok(style.height.match(/^\d+%$|^auto$/),
  49             "Inline inner SVG element's getComputedStyle.height should be computed value. " + style.height);
  50     });
  51
  52 </script>
  53 </pre>
  54 </body>
  55 </html>