summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-ui/cursor-x-y-001.html
blob: 16b147cc2d63294b59b95fbff9cc141a753d97c5 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html onclick="fail()">
<title>CSS Basic User Interface Test: cursor hotspot coordinates</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
<meta name="flags" content="interact dom">
<meta charset="UTF-8">
<meta name="assert" content="The coordnates of the cursor hotspot can be specified.">
<style>
body, html {
  cursor: url("support/cursors/arrows.png") 31 31, url("support/cursors/arrows.ico") 31 31, help;
}
div {
  margin: 30px;
  width: 15px;
  height: 15px;
  background: green;
}
#fail, #pass { display: none }
</style>

<p>If you are on a device without a cursor, skip this test.
<p>Otherwise, if the cursor does not look like a red and a green arrow, the test has failed.
<p>Place the cursor so that the tip of the <strong>green arrow</strong> is on the <strong>green box</strong>, then click.
<p>If nothing happens when you click, the test has failed.
<div onclick="pass(event)"></div>
<p id=fail>The test has failed.
<p id=pass>The test passes.

<script>
function pass(e) {
  document.getElementById("pass").style.display="block";
  e.stopPropagation();
}
function fail() {
  document.getElementById("fail").style.display="block";
}
</script>