| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
| "http://www.w3.org/TR/html4/strict.dtd"> |
| <html> |
| <head> |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
| <title>Test for 'pointer-events' property in HTML</title> |
| <style type="text/css" media="screen"> |
| #a { |
| pointer-events: auto; |
| background: #88f; |
| } |
| |
| #a:hover { |
| background: green; |
| } |
| |
| #b { |
| pointer-events: none; |
| background: #88f; |
| } |
| |
| #b:hover { |
| background: red; |
| } |
| |
| #c { |
| pointer-events: auto; |
| background: #88f; |
| } |
| |
| #c span { |
| pointer-events: none; |
| background: #8ff; |
| } |
| |
| #c:hover { |
| background: green; |
| } |
| |
| #d { |
| pointer-events: none; |
| background: #88f; |
| } |
| |
| #d span { |
| pointer-events: auto; |
| padding: 0 10px; |
| background: #8ff; |
| } |
| |
| #d:hover { |
| background: gray; |
| } |
| |
| #e { |
| padding: 10px; |
| pointer-events: none; |
| background: #88f; |
| } |
| |
| #e div { |
| pointer-events: auto; |
| background: #8ff; |
| } |
| |
| #e:hover { |
| background: gray; |
| } |
| |
| #e div:hover { |
| background: green; |
| } |
| |
| #f, #g, #h, #i, #k, #m { |
| padding: 10px; |
| background: #88f; |
| } |
| |
| #f { |
| pointer-events: auto; |
| } |
| |
| #f:hover { |
| background: green; |
| } |
| |
| #g { |
| pointer-events: none; |
| } |
| |
| #g:hover { |
| background: red; |
| } |
| |
| #h { |
| pointer-events: auto; |
| } |
| |
| #h:hover { |
| background: green; |
| } |
| |
| #i { |
| pointer-events: none; |
| } |
| |
| #i:hover { |
| background: red; |
| } |
| |
| #j { |
| background: #88f; |
| pointer-events: none; |
| } |
| |
| #j:hover { |
| background: gray; |
| } |
| |
| #k { |
| pointer-events: auto; |
| } |
| |
| #k:hover { |
| background: green; |
| } |
| |
| #l { |
| background: #88f; |
| pointer-events: auto; |
| } |
| |
| #l:hover { |
| background: green; |
| } |
| |
| #m { |
| pointer-events: none; |
| } |
| |
| #m:hover { |
| background: red; |
| } |
| |
| </style> |
| |
| </head> |
| <body> |
| <h1>Testing 'pointer-events' property in HTML</h1> |
| |
| <p id="a">This whole paragraph SHOULD change background when hovered</p> |
| |
| <p id="b">This whole paragraph SHOULD NOT change background when hovered</p> |
| |
| <p id="c">This paragraph SHOULD change background when hovered anywhere including |
| <span>this inline text</span> even though the inline text ignores pointer events.</p> |
| |
| <p id="d">This paragraph SHOULD NOT change when the pointer is over only it but |
| <span>this inline text</span> SHOULD change and cause the parent to change also.</p> |
| |
| <div id="e">This paragraph SHOULD NOT change when the pointer is over only it (not the child) |
| <div>This child element SHOULD change and cause the parent to change also</div> |
| </div> |
| |
| <p> |
| The following image SHOULD change when the pointer is over it. |
| </p> |
| |
| <img id="f" src="../../../LayoutTests/media/content/abe.png"> |
| |
| <p> |
| The following image SHOULD NOT change when the pointer is over it. |
| </p> |
| |
| <img id="g" src="../../../LayoutTests/media/content/abe.png"> |
| |
| <p> |
| The following image SHOULD change when the pointer is over it. It is inline |
| with this paragraph. |
| <img id="h" src="../../../LayoutTests/media/content/abe.png"> |
| </p> |
| |
| <p> |
| The following image SHOULD NOT change when the pointer is over it. It is inline |
| with this paragraph. |
| <img id="i" src="../../../LayoutTests/media/content/abe.png"> |
| </p> |
| |
| <p id="j"> |
| This paragraph SHOULD NOT change when the pointer is over only it, but the child |
| image SHOULD react and cause the parent to change. |
| <img id="k" src="../../../LayoutTests/media/content/abe.png"> |
| </p> |
| |
| <p id="l"> |
| This paragraph SHOULD change when the pointer is over it, but the child |
| image SHOULD NOT react. |
| <img id="m" src="../../../LayoutTests/media/content/abe.png"> |
| </p> |
| |
| |
| </body> |
| </html> |
