src/third_party/WebKit/LayoutTests/fast/events/pointer-events-2.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 for pointer-events property</title>
   7   <style type="text/css" media="screen">
   8     body { overflow: hidden; }
   9
  10     .row {
  11       position: absolute;
  12       width: 300px;
  13       height: 100px;
  14       left: 10px;
  15     }
  16
  17     .row1 { top: 140px; }
  18     .row2 { top: 240px; }
  19     .row3 { top: 340px; }
  20     .row4 { top: 440px; }
  21     .row5 { top: 540px; }
  22     .row6 { top: 140px; left: 340px;}
  23     .row7 { top: 240px; left: 340px;}
  24     .row8 { top: 340px; left: 340px;}
  25     .row9 { top: 440px; left: 340px;}
  26     .row10 { top: 540px; left: 340px; }
  27
  28     .col {
  29       position: absolute;
  30       width: 80px;
  31       height: 80px;
  32       top: 0;
  33     }
  34
  35     .col1 {
  36       left: 0px;
  37     }
  38
  39     .col2 {
  40       left: 100px;
  41     }
  42
  43     .col3 {
  44       left: 200px;
  45     }
  46
  47     div, p {
  48       font-size: 16px;
  49     }
  50
  51     div p {
  52       padding: 0;
  53       margin: 0;
  54       position: absolute;
  55       width: 80px;
  56       height: 80px;
  57     }
  58
  59     #p1 {
  60       background: gray;
  61     }
  62
  63     #p2 {
  64       background: gray;
  65       pointer-events: none;
  66     }
  67
  68     #p3 {
  69       background: gray;
  70       pointer-events: none;
  71     }
  72
  73     #p4 {
  74       pointer-events: auto;
  75     }
  76
  77     #p5 {
  78       background: gray;
  79       pointer-events: auto;
  80     }
  81
  82     #p6 {
  83       pointer-events: none;
  84     }
  85
  86     #p7 { /* this is a div - not a p */
  87       pointer-events: auto;
  88       padding: 0;
  89       margin: 0;
  90       position: absolute;
  91       width: 80px;
  92       height: 80px;
  93     }
  94
  95     #p8 {
  96       background: gray;
  97       pointer-events: none;
  98     }
  99
 100     #p9 { /* this is a div - not a p */
 101       pointer-events: none;
 102       padding: 0;
 103       margin: 0;
 104       position: absolute;
 105       width: 80px;
 106       height: 80px;
 107     }
 108
 109     #p10 {
 110       background: gray;
 111       pointer-events: auto;
 112     }
 113
 114     #p11 {
 115       position: absolute;
 116       margin: 0;
 117       padding: 0;
 118       pointer-events: auto;
 119       width: 80px;
 120       height: 80px;
 121     }
 122
 123     #p12 {
 124       position: absolute;
 125       margin: 0;
 126       padding: 0;
 127       pointer-events: none;
 128       width: 80px;
 129       height: 80px;
 130     }
 131
 132     #p13 {
 133       background: gray;
 134       pointer-events: none;
 135     }
 136
 137     #p14 {
 138       background: yellow;
 139       pointer-events: auto;
 140     }
 141
 142     #p15 {
 143       background: gray;
 144       pointer-events: auto;
 145     }
 146
 147     #p16 {
 148       background: yellow;
 149       pointer-events: none;
 150     }
 151
 152
 153   </style>
 154   <script>
 155     if (window.testRunner) {
 156       testRunner.waitUntilDone();
 157     }
 158
 159     var pointerEventsValues = ['auto', 'none'];
 160
 161     var topEdge = 140;
 162
 163     function clickHit(event) {
 164       // iterate up to the containing row
 165       var parent = event.target;
 166       while (parent && (!parent.className || !parent.className.match(/^row/))) {
 167         parent = parent.parentNode;
 168       }
 169       if (parent && parent.className && parent.className.match(/^row/)) {
 170         var actual = parent.querySelector(".col3");
 171         if (actual && event.target.id)
 172           actual.innerText = event.target.id;
 173       }
 174     }
 175
 176     function testContent() {
 177
 178       // hit left side
 179       var yOffset = topEdge;
 180       for (var i=0; i < 5; i++) {
 181         if (window.eventSender) {
 182           eventSender.mouseMoveTo(15, yOffset + 5);
 183           eventSender.mouseDown();
 184           eventSender.mouseUp();
 185         }
 186         yOffset += 100;
 187       }
 188
 189       // hit right side
 190       yOffset = topEdge;
 191       for (var i=0; i < 5; i++) {
 192         if (window.eventSender) {
 193           eventSender.mouseMoveTo(345, yOffset + 5);
 194           eventSender.mouseDown();
 195           eventSender.mouseUp();
 196         }
 197         yOffset += 100;
 198       }
 199
 200       if (window.testRunner)
 201         testRunner.notifyDone();
 202     }
 203   </script>
 204
 205 </head>
 206 <body onload="testContent()" onclick="clickHit(event)">
 207   <h1>Testing the values of 'pointer-events' on HTML content</h1>
 208   <p>This test is expected to be run from within DumpRenderTree. If running manually, click on
 209     the elements in the first column, making sure the actual result (3rd column) matches
 210     the expected result (2nd column). Repeat for click target (4th column), expected result (5th column)
 211     and actual result (6th column). Note: You should click on a yellow inline element if
 212     one exists, otherwise anywhere in the box.</p>
 213
 214   <div class="row row1">
 215     <div class="col col1">
 216       <p id="p1">pointer-events auto</p>
 217     </div>
 218     <div class="col col2">p1</div>
 219     <div class="col col3">none</div>
 220   </div>
 221
 222   <div class="row row2">
 223     <div class="col col1">
 224       <p id="p2">pointer-events none</p>
 225     </div>
 226     <div class="col col2">none</div>
 227     <div class="col col3">none</div>
 228   </div>
 229
 230   <div class="row row3">
 231     <div class="col col1">
 232       <p id="p3">siblings - auto on top</p>
 233       <p id="p4"></p>
 234     </div>
 235     <div class="col col2">p4</div>
 236     <div class="col col3">none</div>
 237   </div>
 238
 239   <div class="row row4">
 240     <div class="col col1">
 241       <p id="p5">siblings - none on top</p>
 242       <p id="p6"></p>
 243     </div>
 244     <div class="col col2">p5</div>
 245     <div class="col col3">none</div>
 246   </div>
 247
 248   <div class="row row5">
 249     <div class="col col1">
 250       <div id="p7">
 251         <p id="p8">nested - auto outer</p>
 252       </div>
 253     </div>
 254     <div class="col col2">p7</div>
 255     <div class="col col3">none</div>
 256   </div>
 257
 258   <div class="row row6">
 259     <div class="col col1">
 260       <div id="p9">
 261         <p id="p10">nested - none outer</p>
 262       </div>
 263     </div>
 264     <div class="col col2">p10</div>
 265     <div class="col col3">none</div>
 266   </div>
 267
 268   <div class="row row7">
 269     <div class="col col1">
 270       <img id="p11" src="resources/abe.png">
 271     </div>
 272     <div class="col col2">p11</div>
 273     <div class="col col3">none</div>
 274   </div>
 275
 276   <div class="row row8">
 277     <div class="col col1">
 278       <img id="p12" src="resources/abe.png">
 279     </div>
 280     <div class="col col2">none</div>
 281     <div class="col col3">none</div>
 282   </div>
 283
 284   <div class="row row9">
 285     <div class="col col1">
 286       <p id="p13"><span id="p14">inline</span> has auto, parent none
 287       </p>
 288     </div>
 289     <div class="col col2">p14</div>
 290     <div class="col col3">none</div>
 291   </div>
 292
 293   <div class="row row10">
 294     <div class="col col1">
 295       <p id="p15"><span id="p16">inline</span> has none, parent auto
 296       </p>
 297     </div>
 298     <div class="col col2">p15</div>
 299     <div class="col col3">none</div>
 300   </div>
 301
 302 </body>
 303 </html>