[css-ui-3] Updated tests for cursor auto · web-platform-tests/wpt@34c61ef (original) (raw)

3 files changed

lines changed

Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
1 1
2 2 <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="" title="undefined" rel="noopener noreferrer">https://florian.rivoal.net/"\>
4 4 <link rel="help" href="" title="undefined" rel="noopener noreferrer">http://www.w3.org/TR/css3-ui/#cursor"\>
5 5 <meta name="flags" content="interact">
6 6 <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.">
8 8 <style>
9 9 #test {
10 10 border: solid blue;
@@ -33,8 +33,6 @@
33 33 <p>Place the cursor into the orange box for a reference of what this should look like.</p>
34 34 <div id=test>
35 35 <button>button</button>
36 -<textarea></textarea>
37 -<input>
38 36 <input type=button value=input-button>
39 37 <select></select>
40 38 </div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
1 +
2 +<title>CSS Basic User Interface Test: cursor:auto on editable elements</title>
3 +<link rel="author" title="Florian Rivoal" href="" title="undefined" rel="noopener noreferrer">https://florian.rivoal.net/"\>
4 +<link rel="help" href="" title="undefined" rel="noopener noreferrer">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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
1 +
2 +<title>CSS Basic User Interface Test: cursor:auto on unselectable text</title>
3 +<link rel="author" title="Florian Rivoal" href="" title="undefined" rel="noopener noreferrer">https://florian.rivoal.net/"\>
4 +<link rel="help" href="" title="undefined" rel="noopener noreferrer">http://www.w3.org/TR/css3-ui/#cursor"\>
5 +<link rel="help" href="" title="undefined" rel="noopener noreferrer">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>