src/third_party/WebKit/LayoutTests/fast/dom/Window/webkitConvertPoint.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2   "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4   <head>
   5     <meta http-equiv="Content-type" content="text/html; charset=utf-8">
   6     <title>Test of webkitConvertPointFromNodeToPage function</title>
   7     <script src="../../../resources/js-test.js"></script>
   8     <style type="text/css" media="screen">
   9       body {
  10           height: 1000px;
  11       }
  12
  13       h1 {
  14           font-size: 14pt;
  15       }
  16       .layer {
  17         position: relative;
  18         width: 600px;
  19         height: 500px;
  20         -webkit-transform: translate(0px);
  21       }
  22       .dot {
  23          position: absolute;
  24          background-color: #0f0;
  25          width: 10px;
  26          height: 10px;
  27          left: 0px;
  28          top: 0px;
  29          visibility: hidden;
  30        }
  31        b.border {
  32          border: 5px solid blue;
  33        }
  34
  35        .a {
  36          position: relative;
  37          left: 10px;
  38          background: #cbc;
  39          width: 800px;
  40          -webkit-transform-origin: top left;
  41          -webkit-transform: translate(130px, 20px) rotate(-35deg) scale(0.6);
  42          padding: 5px;
  43          margin-bottom: 20px;
  44        }
  45        .b {
  46          position: relative;
  47          background: #bcc;
  48          -webkit-transform: translate(20px);
  49        }
  50        .c {
  51          position: relative;
  52          -webkit-transform: translate(20px);
  53          background: #99c;
  54        }
  55        .d {
  56          position: relative;
  57          background: #cc9;
  58        }
  59
  60     </style>
  61     <script>
  62         function runTest(name, id, x1, y1, x2, y2)
  63         {
  64             debug("");
  65             debug(name);
  66             var node = document.getElementById(id);
  67             p = webkitConvertPointFromNodeToPage(node, new WebKitPoint(0, 0));
  68             x = Math.round(p.x);
  69             y = Math.round(p.y);
  70             shouldBe('x', x1+"");
  71             shouldBe('y', y1+"");
  72
  73             debug("Round Trip of (0,0)");
  74             p2 = webkitConvertPointFromPageToNode(node, p);
  75             x = Math.round(p2.x);
  76             y = Math.round(p2.y);
  77             if (x == -0)
  78                 x = 0;
  79             if (y == -0)
  80                 y = 0;
  81             shouldBe('x', '0');
  82             shouldBe('y', '0');
  83
  84             p = webkitConvertPointFromNodeToPage(node, new WebKitPoint(5, 40));
  85             x = Math.round(p.x);
  86             y = Math.round(p.y);
  87             if (x == -0)
  88                 x = 0;
  89             if (y == -0)
  90                 y = 0;
  91             shouldBe('x', x2+"");
  92             shouldBe('y', y2+"");
  93
  94             debug("Round Trip of (5,40)");
  95             p2 = webkitConvertPointFromPageToNode(node, p);
  96             x = Math.round(p2.x);
  97             y = Math.round(p2.y);
  98             if (x == -0)
  99                 x = 0;
 100             if (y == -0)
 101                 y = 0;
 102             shouldBe('x', '5');
 103             shouldBe('y', '40');
 104         }
 105
 106         function run() {
 107             description("This test exercises the webkitConvertPointFromNodeToPage() function");
 108
 109             debug("Test parameter passing - should not crash");
 110             var point = webkitConvertPointFromNodeToPage(new WebKitPoint(0, 0));
 111             if (point == null)
 112                 testPassed("Missing parameter test");
 113             else
 114                 testFailed("Missing parameter test");
 115             debug("Test did not crash and therefore was successful");
 116             debug("");
 117             point = webkitConvertPointFromNodeToPage(null, new WebKitPoint(0, 0));
 118             if (point == null)
 119                 testPassed("null parameter test a");
 120             else
 121                 testFailed("null parameter test a");
 122             debug("Test did not crash and therefore was successful");
 123             debug("");
 124             point = webkitConvertPointFromNodeToPage(null, null);
 125             if (point == null)
 126                 testPassed("null parameter test b");
 127             else
 128                 testFailed("null parameter test b");
 129             debug("Test did not crash and therefore was successful");
 130
 131             runTest("Test 1",  "test1",  8, 13, 13, 53);
 132             runTest("Test 2",  "test2",  8, 51, 13, 91);
 133             runTest("Test 3",  "test3",  8, 85, 13, 125);
 134             runTest("Test 4",  "test4",  8, 119, 13, 159);
 135             runTest("Test 5",  "test5",  28, 153, 33, 193);
 136             runTest("Test 6",  "test6",  28, 187, 33, 227);
 137             runTest("Test 7",  "test7",  8, 239, 13, 279);
 138             runTest("Test 8",  "test8",  8, 273, 13, 313);
 139             runTest("Test 9",  "test9",  28, 291, 33, 331);
 140             runTest("Test 10", "test10", 28, 309, 33, 349);
 141             runTest("Test 11", "test11", 158, 376, 174, 394);
 142             runTest("Test 12", "test12", 168, 451, 184, 469);
 143             runTest("Test 13", "test13", 28, 487, 33, 527);
 144
 145             isSuccessfullyParsed();
 146         }
 147
 148         window.onload = run;
 149
 150     </script>
 151     </head>
 152     <body>
 153         <h1 id="test1">Test 1 - This is a H1 heading.</h1>
 154         <p id="test2">Test 2 - This is a simple paragraph.</p>
 155         <p id="test3">Test 3 - This is a paragraph with a <b>nested</b> element.</p>
 156         <p id="test4">Test 4 - This is a paragraph with a <b class="border">nested</b> element that has a border.</p>
 157         <p id="test5" class="c">Test 5 - This is a transformed paragraph with a <b class="border">nested</b> element that has a border.</p>
 158         <p id="test6" class="c">Test 6 - This is a transformed paragraph with a <b class="border">nested</b> element that has a border.<br>And then a second line.</p>
 159         <div class="d">
 160             <p id="test7">Test 7 - This is a paragraph inside something that does not have a compositing layer.</p>
 161         </div>
 162         <div id="test8" class="d">
 163             Test 8 - This is raw text inside something that does not have a compositing layer.
 164         </div>
 165
 166         <div id="test9" class="b">
 167             Test 9 - This is raw text inside something that has a compositing layer.
 168             <div id="test10" class="d">
 169                 Test 10 - This is raw text inside something that does not have a compositing layer.
 170             </div>
 171         </div>
 172
 173         <div class="a">
 174             <p id="test11">Test 11 - This is a rotated and scaled paragraph</p>
 175         </div>
 176         <div class="a">
 177             <div class="b">
 178                 <p id="test12">Test 12 - This is a rotated and scaled paragraph with a <b class="border">nested</b> element that has a border.</p>
 179             </div>
 180         </div>
 181         <div class="b">
 182             <p id="test13">Test 13 - This is a paragraph with a <b class="border">nested</b> element that has a border.</p>
 183         </div>
 184         <div id="description"></div>
 185         <div id="console"></div>
 186     </body>
 187 </html>