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