cursor-auto-007.html (1984B)
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; 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>