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