dom/svg/test/test_bbox-changes.xhtml

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=1159053
   5 -->
   6 <head>
   7   <title>Test that the results of getBBox update for changes</title>
   8   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  10 </head>
  11 <body>
  12
  13 <p id="display">
  14   <svg xmlns="http://www.w3.org/2000/svg">
  15     <rect id="rect1" x="10" y="10" width="10" height="10"/>
  16     <rect id="rect2" x="30" y="10" width="10" height="10"/>
  17     <g id="g">
  18       <circle id="circle1" cx="60" cy="20" r="5"/>
  19       <circle id="circle2" cx="120" cy="20" r="5"/>
  20     </g>
  21   </svg>
  22 </p>
  23
  24 <div id="content" style="display: none"></div>
  25
  26 <pre id="test">
  27 <script class="testbody" type="application/javascript">//<![CDATA[
  28
  29 SimpleTest.waitForExplicitFinish();
  30
  31 function init_and_run() {
  32   SpecialPowers.pushPrefEnv({"set": [["svg.new-getBBox.enabled", true]]}, run);
  33 }
  34
  35 function checkBBox(id, options, x, y, width, height, msg) {
  36   var bbox = document.getElementById(id).getBBox(options);
  37   is(bbox.x, x, id + ".getBBox().x" + msg);
  38   is(bbox.y, y, id + ".getBBox().y" + msg);
  39   is(bbox.width, width, id + ".getBBox().width" + msg);
  40   is(bbox.height, height, id + ".getBBox().height" + msg);
  41 }
  42
  43 function run() {
  44   // First call getBBox on 'rect1' with stroke included:
  45   $("rect1").setAttribute("stroke", "black");
  46   $("rect1").setAttribute("stroke-width", "10");
  47   checkBBox("rect1", { fill: true, stroke: true }, 5, 5, 20, 20, " with stroke");
  48
  49   // Now remove the stroke from 'rect1' and check again:
  50   $("rect1").removeAttribute("stroke");
  51   $("rect1").removeAttribute("stroke-width");
  52   checkBBox("rect1", { fill: true }, 10, 10, 10, 10, " after stroke removed");
  53
  54   // First call getBBox on 'rect2' without a stroke included:
  55   checkBBox("rect2", { fill: true }, 30, 10, 10, 10, " with stroke");
  56
  57   // Now add a stroke to 'rect2' and check again:
  58   $("rect2").setAttribute("stroke", "black");
  59   $("rect2").setAttribute("stroke-width", "10");
  60   checkBBox("rect2", { fill: true, stroke: true }, 25, 5, 20, 20, " with stroke");
  61
  62   // Check the initial result for getBBox on the group:
  63   checkBBox("g", { fill: true }, 55, 15, 70, 10, " before child moves");
  64
  65   // Now move one of the circle children and check again:
  66   $("circle2").setAttribute("cx", "110");
  67   checkBBox("g", { fill: true }, 55, 15, 60, 10, " after child moves");
  68
  69   SimpleTest.finish();
  70 }
  71
  72 window.addEventListener("load", init_and_run);
  73
  74 //]]></script>
  75 </pre>
  76 </body>
  77 </html>