selection-input-011-ref.html (1508B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Reftest Reference</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 9 <style> 10 input 11 { 12 background-color: yellow; 13 color: green; 14 font-family: monospace; 15 font-size: 48px; 16 line-height: 56px; 17 padding: 0px; 18 width: 13ch; 19 } 20 </style> 21 22 <script> 23 function startReference() 24 { 25 /* 26 Some browsers, like Chromium 80+ or Safari 14+, will 27 transfer focus to a selected element like a text input 28 and therefore style the border of such element according 29 to an user agent stylesheet rule, such as: 30 :focus {outline: -webkit-focus-ring-color auto 1px;} . 31 So, we deliberately trigger such focus with the focus() 32 method in the reference file. 33 */ 34 35 document.getElementById("ref").focus(); 36 37 /* 38 When a text input element is focused in Firefox 39 82+, then the caret becomes visible and blinking and 40 it is painted with the ::selected's color which is 41 the green color in this case. We therefore counter, 42 neutralize this by resetting the caret's color to the 43 background color. 44 */ 45 46 document.getElementById("ref").style.caretColor = "yellow"; 47 } 48 </script> 49 50 <body onload="startReference();"> 51 52 <p>Test passes if each glyph of "Selected Text" is green with a yellow background and if there is <strong>no red</strong>. 53 54 <div><input id="ref" type="text" value="Selected Text"></div>