test_bbox-changes.xhtml (2527B)
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>