204 lines
3.6 KiB
HTML
204 lines
3.6 KiB
HTML
<!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>
|