third_party/WebKit/ManualTests/pointer-events.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 in HTML</title>
   7   <style type="text/css" media="screen">
   8   #a {
   9     pointer-events: auto;
  10     background: #88f;
  11   }
  12
  13   #a:hover {
  14     background: green;
  15   }
  16
  17   #b {
  18     pointer-events: none;
  19     background: #88f;
  20   }
  21
  22   #b:hover {
  23     background: red;
  24   }
  25
  26   #c {
  27     pointer-events: auto;
  28     background: #88f;
  29   }
  30
  31   #c span {
  32     pointer-events: none;
  33     background: #8ff;
  34   }
  35
  36   #c:hover {
  37     background: green;
  38   }
  39
  40   #d {
  41     pointer-events: none;
  42     background: #88f;
  43   }
  44
  45   #d span {
  46     pointer-events: auto;
  47     padding: 0 10px;
  48     background: #8ff;
  49   }
  50
  51   #d:hover {
  52     background: gray;
  53   }
  54
  55   #e {
  56     padding: 10px;
  57     pointer-events: none;
  58     background: #88f;
  59   }
  60
  61   #e div {
  62     pointer-events: auto;
  63     background: #8ff;
  64   }
  65
  66   #e:hover {
  67     background: gray;
  68   }
  69
  70   #e div:hover {
  71     background: green;
  72   }
  73
  74   #f, #g, #h, #i, #k, #m {
  75     padding: 10px;
  76     background: #88f;
  77   }
  78
  79   #f {
  80     pointer-events: auto;
  81   }
  82
  83   #f:hover {
  84     background: green;
  85   }
  86
  87   #g {
  88     pointer-events: none;
  89   }
  90
  91   #g:hover {
  92     background: red;
  93   }
  94
  95   #h {
  96     pointer-events: auto;
  97   }
  98
  99   #h:hover {
 100     background: green;
 101   }
 102
 103   #i {
 104     pointer-events: none;
 105   }
 106
 107   #i:hover {
 108     background: red;
 109   }
 110
 111   #j {
 112     background: #88f;
 113     pointer-events: none;
 114   }
 115
 116   #j:hover {
 117     background: gray;
 118   }
 119
 120   #k {
 121     pointer-events: auto;
 122   }
 123
 124   #k:hover {
 125     background: green;
 126   }
 127
 128   #l {
 129     background: #88f;
 130     pointer-events: auto;
 131   }
 132
 133   #l:hover {
 134     background: green;
 135   }
 136
 137   #m {
 138     pointer-events: none;
 139   }
 140
 141   #m:hover {
 142     background: red;
 143   }
 144
 145   </style>
 146
 147 </head>
 148 <body>
 149   <h1>Testing 'pointer-events' property in HTML</h1>
 150
 151   <p id="a">This whole paragraph SHOULD change background when hovered</p>
 152
 153   <p id="b">This whole paragraph SHOULD NOT change background when hovered</p>
 154
 155   <p id="c">This paragraph SHOULD change background when hovered anywhere including
 156     <span>this inline text</span> even though the inline text ignores pointer events.</p>
 157
 158   <p id="d">This paragraph SHOULD NOT change when the pointer is over only it but
 159     <span>this inline text</span> SHOULD change and cause the parent to change also.</p>
 160
 161   <div id="e">This paragraph SHOULD NOT change when the pointer is over only it (not the child)
 162     <div>This child element SHOULD change and cause the parent to change also</div>
 163   </div>
 164
 165   <p>
 166     The following image SHOULD change when the pointer is over it.
 167   </p>
 168
 169   <img id="f" src="../../../LayoutTests/media/content/abe.png">
 170
 171   <p>
 172     The following image SHOULD NOT change when the pointer is over it.
 173   </p>
 174
 175   <img id="g" src="../../../LayoutTests/media/content/abe.png">
 176
 177   <p>
 178     The following image SHOULD change when the pointer is over it. It is inline
 179     with this paragraph.
 180     <img id="h" src="../../../LayoutTests/media/content/abe.png">
 181   </p>
 182
 183   <p>
 184     The following image SHOULD NOT change when the pointer is over it. It is inline
 185     with this paragraph.
 186     <img id="i" src="../../../LayoutTests/media/content/abe.png">
 187   </p>
 188
 189   <p id="j">
 190     This paragraph SHOULD NOT change when the pointer is over only it, but the child
 191     image SHOULD react and cause the parent to change.
 192     <img id="k" src="../../../LayoutTests/media/content/abe.png">
 193   </p>
 194
 195   <p id="l">
 196     This paragraph SHOULD change when the pointer is over it, but the child
 197     image SHOULD NOT react.
 198     <img id="m" src="../../../LayoutTests/media/content/abe.png">
 199   </p>
 200
 201
 202 </body>
 203 </html>