third_party/WebKit/LayoutTests/svg/transforms/percent-transform-values.xhtml

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2 <body>
   3   <p>Test for bug <a href="">79068</a> - SVG should support transform-origin and relative values
   4   Verify that CSS transform translate values can be specified with percentages.
   5   </p>
   6   You should see a series of "PASS" messages and one 80x60 green rectangle.   The green rectangle obscures two
   7   red rectangles of the same size which have been translated to the same location.
   8   <p>
   9   </p>
  10   <svg style="position:absolute; left:0px; top:0px;" xmlns="http://www.w3.org/2000/svg">
  11     <rect id="r1" x="10" y="200" width="80" height="60" fill="red" style="transform: translate(50%)"/>
  12     <rect id="r2" x="90" y="260" width="80" height="60" fill="red" style="transform: translate(-50%, -100%)"/>
  13     <rect id="r3" x="10" y="200" width="80" height="60" fill="green" style="transform: translate(50%, 0%)"/>
  14   </svg>
  15   <pre id="log"></pre>
  16 </body>
  17 <script><![CDATA[
  18
  19     var resultString = "";
  20
  21     function checkClientRect(rectID) {
  22         var cr = document.getElementById(rectID).getBoundingClientRect();
  23         var crString = "[" + cr.left + "," + cr.top + " " + cr.width + "x" + cr.height + "]";
  24         var expected = "[50,200 80x60]";
  25         resultString += ((crString == expected) ? "PASS " : "FAIL ") + " rect \"" + rectID + "\" " + crString + " expected " + expected + "\n";
  26     }
  27
  28     ["r1", "r2", "r3"].map(checkClientRect);
  29     document.getElementById("log").innerHTML = resultString;
  30
  31     if (window.testRunner)
  32         testRunner.dumpAsText();
  33
  34  ]]></script>
  35 </html>