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

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <svg xmlns="http://www.w3.org/2000/svg" onload="init()">
   3
   4     <script>
   5         function init()
   6         {
   7             var point = document.rootElement.createSVGPoint();
   8
   9             // Test initial values
  10             if (point.x == 0) {
  11                 document.getElementById("test1").setAttribute("fill", "green");
  12             }
  13             if (point.y == 0) {
  14                 document.getElementById("test2").setAttribute("fill", "green");
  15             }
  16
  17             // Assign new values from local function
  18             point.x = 100;
  19             point.y = 200;
  20             if (point.x == 100) {
  21                 document.getElementById("test3").setAttribute("fill", "green");
  22             }
  23             if (point.y == 200) {
  24                 document.getElementById("test4").setAttribute("fill", "green");
  25             }
  26
  27             // Assign new values from external function
  28             assignValues(point);
  29             if (point.x == 300) {
  30                 document.getElementById("test5").setAttribute("fill", "green");
  31             }
  32             if (point.y == 400) {
  33                 document.getElementById("test6").setAttribute("fill", "green");
  34             }
  35
  36             // Create new point in external function, check values
  37             var newPoint = createNewPoint();
  38             if (newPoint.x == 66) {
  39                 document.getElementById("test7").setAttribute("fill", "green");
  40             }
  41             if (newPoint.y == 666) {
  42                 document.getElementById("test8").setAttribute("fill", "green");
  43             }
  44
  45             // Check swapping of point objects
  46             var savedPoint = point;
  47             point = newPoint;
  48             if (point.x == 66) {
  49                 document.getElementById("test9").setAttribute("fill", "green");
  50             }
  51             if (point.y == 666) {
  52                 document.getElementById("test10").setAttribute("fill", "green");
  53             }
  54
  55             point = savedPoint;
  56             if (point.x == 300) {
  57                 document.getElementById("test11").setAttribute("fill", "green");
  58             }
  59             if (point.y == 400) {
  60                 document.getElementById("test12").setAttribute("fill", "green");
  61             }
  62
  63             // Modifying savedPoint, should also modify point
  64             savedPoint.x = 150;
  65             savedPoint.y = 250;
  66
  67             if (point.x == 150) {
  68                 document.getElementById("test13").setAttribute("fill", "green");
  69             }
  70             if (point.y == 250) {
  71                 document.getElementById("test14").setAttribute("fill", "green");
  72             }
  73         }
  74
  75         function assignValues(p)
  76         {
  77             p.x = 300;
  78             p.y = 400;
  79         }
  80
  81         function createNewPoint()
  82         {
  83             var point = document.rootElement.createSVGPoint();
  84             point.x = 66;
  85             point.y = 666;
  86             return point;
  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>