third_party/WebKit/LayoutTests/svg/custom/SVGRect-interface.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <svg xmlns="http://www.w3.org/2000/svg" onload="init()">
   3
   4     <script><![CDATA[
   5         function init()
   6         {
   7             var rect = document.rootElement.createSVGRect();
   8
   9             // Test initial values
  10             if (rect.x == 0 && rect.y == 0) {
  11                 document.getElementById("test1").setAttribute("fill", "green");
  12             }
  13             if (rect.width == 0 && rect.height == 0) {
  14                 document.getElementById("test2").setAttribute("fill", "green");
  15             }
  16
  17             // Assign new values from local function
  18             rect.x = 100; rect.y = 200;
  19             rect.width = 300; rect.height = 400;
  20             if (rect.x == 100 && rect.y == 200) {
  21                 document.getElementById("test3").setAttribute("fill", "green");
  22             }
  23             if (rect.width == 300 && rect.height == 400) {
  24                 document.getElementById("test4").setAttribute("fill", "green");
  25             }
  26
  27             // Assign new values from external function
  28             assignValues(rect);
  29             if (rect.x == 250 && rect.y == 350) {
  30                 document.getElementById("test5").setAttribute("fill", "green");
  31             }
  32             if (rect.width == 450 && rect.height == 550) {
  33                 document.getElementById("test6").setAttribute("fill", "green");
  34             }
  35
  36             // Create new rect in external function, check values
  37             var newRect = createNewRect();
  38             if (newRect.x == 6 && newRect.y == 66) {
  39                 document.getElementById("test7").setAttribute("fill", "green");
  40             }
  41             if (newRect.width == 666 && newRect.height == 6666) {
  42                 document.getElementById("test8").setAttribute("fill", "green");
  43             }
  44
  45             // Check swapping of rect objects
  46             var savedRect = rect;
  47             rect = newRect;
  48             if (rect.x == 6 && rect.y == 66) {
  49                 document.getElementById("test9").setAttribute("fill", "green");
  50             }
  51             if (rect.width == 666 && rect.height == 6666) {
  52                 document.getElementById("test10").setAttribute("fill", "green");
  53             }
  54
  55             rect = savedRect;
  56             if (rect.x == 250 && rect.y == 350) {
  57                 document.getElementById("test11").setAttribute("fill", "green");
  58             }
  59             if (rect.width == 450 && rect.height == 550) {
  60                 document.getElementById("test12").setAttribute("fill", "green");
  61             }
  62
  63             // Modifying savedRect, should also modify rect
  64             savedRect.x = 150; savedRect.y = 250;
  65             savedRect.width = 350; savedRect.height = 450;
  66
  67             if (rect.x == 150 && rect.y == 250) {
  68                 document.getElementById("test13").setAttribute("fill", "green");
  69             }
  70             if (rect.width == 350 && rect.height == 450) {
  71                 document.getElementById("test14").setAttribute("fill", "green");
  72             }
  73         }
  74
  75         function assignValues(r)
  76         {
  77             r.x = 250; r.y = 350;
  78             r.width = 450; r.height = 550;
  79         }
  80
  81         function createNewRect()
  82         {
  83             var rect = document.rootElement.createSVGRect();
  84             rect.x = 6; rect.y = 66;
  85             rect.width = 666; rect.height = 6666;
  86             return rect;
  87         }
  88     ]]></script>
  89
  90     <rect id="test1" transform="translate(0, 0)" x="0" y="0" width="100" height="20" fill="red"/>
  91     <rect id="test2" transform="translate(0, 30)" x="0" y="0" width="100" height="20" fill="red"/>
  92     <rect id="test3" transform="translate(0, 60)" x="0" y="0" width="100" height="20" fill="red"/>
  93     <rect id="test4" transform="translate(0, 90)" x="0" y="0" width="100" height="20" fill="red"/>
  94     <rect id="test5" transform="translate(0, 120)" x="0" y="0" width="100" height="20" fill="red"/>
  95     <rect id="test6" transform="translate(0, 150)" x="0" y="0" width="100" height="20" fill="red"/>
  96     <rect id="test7" transform="translate(0, 180)" x="0" y="0" width="100" height="20" fill="red"/>
  97
  98     <rect id="test8" transform="translate(110, 0)" x="0" y="0" width="100" height="20" fill="red"/>
  99     <rect id="test9" transform="translate(110, 30)" x="0" y="0" width="100" height="20" fill="red"/>
 100     <rect id="test10" transform="translate(110, 60)" x="0" y="0" width="100" height="20" fill="red"/>
 101     <rect id="test11" transform="translate(110, 90)" x="0" y="0" width="100" height="20" fill="red"/>
 102     <rect id="test12" transform="translate(110, 120)" x="0" y="0" width="100" height="20" fill="red"/>
 103     <rect id="test13" transform="translate(110, 150)" x="0" y="0" width="100" height="20" fill="red"/>
 104     <rect id="test14" transform="translate(110, 180)" x="0" y="0" width="100" height="20" fill="red"/>
 105 </svg>