Skip to content

Commit 34c61ef

Browse files
frivoalfrivoal
committed
[css-ui-3] Updated tests for cursor auto
This adjusts and completes the test suite, reflecting the changes resolved in w3c/csswg-drafts#1598 (comment)
1 parent 21ecb70 commit 34c61ef

File tree

3 files changed

+103
-4
lines changed

3 files changed

+103
-4
lines changed

‎css/css-ui-3/cursor-auto-005.html

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!DOCTYPE html>
22
<title>CSS Basic User Interface Test: cursor:auto on form elements</title>
3-
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
3+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
44
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
55
<meta name="flags" content="interact">
66
<meta charset="UTF-8">
7-
<meta name="assert" content="The 'auto' cursor value does the same as 'default' over everything other than text, such as form elements.">
7+
<meta name="assert" content="The 'auto' cursor value does the same as 'default' over everything other than selectable text or editable elements, such as form elements that do not take text input.">
88
<style>
99
#test {
1010
border: solid blue;
@@ -33,8 +33,6 @@
3333
<p>Place the cursor into the orange box for a reference of what this should look like.</p>
3434
<div id=test>
3535
<button>button</button>
36-
<textarea></textarea>
37-
<input>
3836
<input type=button value=input-button>
3937
<select></select>
4038
</div>

‎css/css-ui-3/cursor-auto-006.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: cursor:auto on editable elements</title>
3+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
5+
<meta name="flags" content="interact">
6+
<meta charset="UTF-8">
7+
<meta name="assert" content="The 'auto' cursor value does the same as 'text' over editable elements.">
8+
<style>
9+
#test {
10+
border: solid blue;
11+
width: 200px;
12+
cursor: auto;
13+
}
14+
#test * {
15+
cursor: url("support/cursors/fail.png"), help !important; /* Override UA styles, regardless of specificity */
16+
cursor: auto !important; /* Override UA styles, regardless of specificity */
17+
resize: none; /* The appearance of the cursor over UA provided resize controls is out of scope. */
18+
overflow: hidden; /* The appearance of the cursor over UA provided scroll controls is out of scope */
19+
}
20+
#ref {
21+
width: 100px;
22+
height: 100px;
23+
cursor: text;
24+
border: solid orange;
25+
}
26+
:root {
27+
cursor: help; /* give the root element a different cursor so that
28+
it is easy to tell if something changes when hovering the target.*/
29+
}
30+
31+
[contenteditable] {
32+
border: solid;
33+
height: 1em;
34+
margin: 5px;
35+
}
36+
</style>
37+
<body>
38+
<p>The test passes if, when moved over every element inside the blue box, the cursor looks like the text insertion and selection cursor.</p>
39+
<p>Place the cursor into the orange box for a reference of what this should look like.</p>
40+
<div id=test>
41+
<textarea></textarea>
42+
<input>
43+
<div contenteditable=true style="border:solid"></div>
44+
</div>
45+
<div id=ref></div>
46+
</body>

‎css/css-ui-3/cursor-auto-007.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: cursor:auto on unselectable text</title>
3+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor">
5+
<link rel="help" href="https://drafts.csswg.org/css-ui-4/#content-selection">
6+
<meta name="flags" content="interact">
7+
<meta charset="UTF-8">
8+
<meta name="assert" content="The 'auto' cursor value does the same as 'default' over unselectable text.">
9+
<style>
10+
#test {
11+
border: solid blue;
12+
width: 200px;
13+
cursor: auto;
14+
}
15+
#test * {
16+
cursor: url("support/cursors/fail.png"), help !important; /* Override UA styles, regardless of specificity */
17+
cursor: auto !important; /* Override UA styles, regardless of specificity */
18+
}
19+
#ref {
20+
width: 100px;
21+
height: 100px;
22+
cursor: default;
23+
border: solid orange;
24+
}
25+
:root {
26+
cursor: help; /* give the root element a different cursor so that
27+
it is easy to tell if something changes when hovering the target.*/
28+
}
29+
30+
/* Hide the text if we cannot make it unselectable.
31+
user-select is not part of css-ui level 3, so we should not depend on it
32+
but it is nice to test it if it is supported.
33+
Test for level 4 can take the conditional out. */
34+
.unselectable { display: none; }
35+
@supports (user-select: none) or (-webkit-user-select: none) {
36+
.unselectable {
37+
display: block;
38+
user-select: none;
39+
-webkit-user-select: none; /* Yes, vendor prefixes are ugly. But this one was grandfathered in and support is required by spec. */
40+
}
41+
}
42+
43+
</style>
44+
<body>
45+
<p>The test passes if, when moved over every element inside the blue box, the cursor remains the platform-dependent default cursor.</p>
46+
<p>Place the cursor into the orange box for a reference of what this should look like.</p>
47+
<div id=test>
48+
<!-- text in a button is either not considered text because it's in a replaced element,
49+
or it is text but it is unselectable, eitherway, we should get the default cursor-->
50+
<button>Text in a button</button>
51+
52+
<div class=unselectable>Unselectable text</div>
53+
</div>
54+
<div id=ref></div>
55+
</body>

0 commit comments

Comments
 (0)