123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203 |
- <!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>
|