<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">

<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.">

<title>CSS Basic User Interface Test: cursor:auto on editable elements</title>

<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">

<link rel="help" href="https://www.w3.org/TR/css3-ui/#cursor">

<meta name="flags" content="interact">

<meta charset="UTF-8">

<meta name="assert" content="The 'auto' cursor value does the same as 'text' over editable elements.">

#test {

border: solid blue;

width: 200px;

cursor: auto;

}

#test * {

cursor: url("support/cursors/fail.png"), help !important; /* Override UA styles, regardless of specificity */

cursor: auto !important; /* Override UA styles, regardless of specificity */

resize: none; /* The appearance of the cursor over UA provided resize controls is out of scope. */

overflow: hidden; /* The appearance of the cursor over UA provided scroll controls is out of scope */

}

#ref {

width: 100px;

height: 100px;

cursor: text;

border: solid orange;

}

:root {

cursor: help; /* give the root element a different cursor so that

}

[contenteditable] {

border: solid;

height: 1em;

margin: 5px;

}

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

<p>Place the cursor into the orange box for a reference of what this should look like.</p>

<div id=test>

<textarea></textarea>

<input>

<div contenteditable=true style="border:solid"></div>

</div>

<div id=ref></div>

<title>CSS Basic User Interface Test: cursor:auto on unselectable text</title>

<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">

<link rel="help" href="https://www.w3.org/TR/css3-ui/#cursor">

<link rel="help" href="https://drafts.csswg.org/css-ui-4/#content-selection">

<meta name="flags" content="interact">

<meta charset="UTF-8">

<meta name="assert" content="The 'auto' cursor value does the same as 'default' over unselectable text.">

#test {

border: solid blue;

width: 200px;

cursor: auto;

}

#test * {

cursor: url("support/cursors/fail.png"), help !important; /* Override UA styles, regardless of specificity */

cursor: auto !important; /* Override UA styles, regardless of specificity */

}

#ref {

width: 100px;

height: 100px;

cursor: default;

border: solid orange;

}

:root {

cursor: help; /* give the root element a different cursor so that

}

.unselectable { display: none; }

@supports (user-select: none) or (-webkit-user-select: none) {

.unselectable {

display: block;

user-select: none;

-webkit-user-select: none; /* Yes, vendor prefixes are ugly. But this one was grandfathered in and support is required by spec. */

}

}

<p>The test passes if, when moved over every element inside the blue box, the cursor remains the platform-dependent default cursor.</p>

<p>Place the cursor into the orange box for a reference of what this should look like.</p>

<div id=test>

<!-- text in a button is either not considered text because it's in a replaced element,

<button>Text in a button</button>

<div class=unselectable>Unselectable text</div>

</div>

<div id=ref></div>