LayoutTests/svg/custom/getBoundingClientRect.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <head>
   3 </head>
   4 <body style="margin:0; border:0; padding:0;">
   5
   6 <div style="width:500px;height:100px;">
   7 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
   8      width="100px" height="100px">
   9   <rect id="r1" x="20" y="30" width="40" height="50" fill="blue" />
  10 </svg><svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  11      width="200px" height="100px" viewBox="0 0 50 200"
  12      preserveAspectRatio="none">
  13   <rect id="r2" x="20" y="30" width="40" height="50" fill="green" />
  14 </svg><svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  15      width="200px" height="100px">
  16   <svg x="0" y="0" width="100px" height="100px">
  17     <rect id="r3" x="0" y="0" width="210px" height="50px" fill="yellow" overflow="hidden" />
  18     <rect id="r4" x="0" y="50px" width="210px" height="60px" fill="orange" overflow="visible" />
  19   </svg>
  20 </svg>
  21 </div>
  22
  23 <div id="description"></div>
  24 <div id="console"></div>
  25
  26 <script src="../../fast/js/resources/js-test-pre.js"></script>
  27 <script>
  28
  29 description("This test checks getBoundingClientRect() on rectangles");
  30
  31 debug("Checking a rectangle of absolute size at absolute coordinates:");
  32 var r1 = document.getElementById("r1").getBoundingClientRect();
  33 shouldBe('r1.left', '20');
  34 shouldBe('r1.top', '30');
  35 shouldBe('r1.width', '40');
  36 shouldBe('r1.height', '50');
  37 shouldBe('r1.right', '60');
  38 shouldBe('r1.bottom', '80');
  39 debug("");
  40
  41 debug("Checking a resized rectangle at relative coordinates:");
  42 var r2 = document.getElementById("r2").getBoundingClientRect();
  43 shouldBe('r2.left', '180');
  44 shouldBe('r2.top', '15');
  45 shouldBe('r2.width', '160');
  46 shouldBe('r2.height', '25');
  47 shouldBe('r2.right', '340');
  48 shouldBe('r2.bottom', '40');
  49 debug("");
  50
  51 debug("Checking rectangles with overflow:");
  52 var r3 = document.getElementById("r3").getBoundingClientRect();
  53 shouldBe('r3.left', '300');
  54 shouldBe('r3.top', '0');
  55 shouldBe('r3.width', '210');
  56 shouldBe('r3.height', '50');
  57 shouldBe('r3.right', '510');
  58 shouldBe('r3.bottom', '50');
  59
  60 var r4 = document.getElementById("r4").getBoundingClientRect();
  61 shouldBe('r4.left', '300');
  62 shouldBe('r4.top', '50');
  63 shouldBe('r4.width', '210');
  64 shouldBe('r4.height', '60');
  65 shouldBe('r4.right', '510');
  66 shouldBe('r4.bottom', '110');
  67 debug("");
  68
  69
  70 </script>
  71 <script src="../../fast/js/resources/js-test-post.js"></script>
  72
  73 </body>
  74 </html>