selection-textarea-011-ref.html (1585B)
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 textarea 11 { 12 background-color: yellow; 13 color: green; 14 font-family: monospace; 15 font-size: 48px; 16 height: 112px; 17 line-height: 56px; 18 padding: 0px; 19 resize: none; 20 width: 8ch; 21 outline: none; 22 } 23 </style> 24 25 <script> 26 function startReference() 27 { 28 /* 29 Some browsers, like Chromium 80+ or Safari 14+, will 30 transfer focus to a selected element like a textarea 31 and therefore style the border of such element according 32 to an user agent stylesheet rule, such as: 33 :focus {outline: -webkit-focus-ring-color auto 1px;} . 34 So, we deliberately trigger such focus with the focus() 35 method in the reference file. 36 */ 37 38 document.getElementById("ref").focus(); 39 40 /* 41 When a textarea element is focused in Firefox 42 82+, then the caret becomes visible and blinking and 43 it is painted with the ::selected's color which is 44 the green color in this case. We therefore counter, 45 neutralize this by resetting the caret's color to the 46 background color. 47 */ 48 49 document.getElementById("ref").style.caretColor = "yellow"; 50 51 } 52 </script> 53 54 <body onload="startReference();"> 55 56 <p>Test passes if each glyph of both "Selected" is green with a yellow background and if there is <strong>no red</strong>. 57 58 <div><textarea id="ref" rows="2" cols="8">Selected Selected </textarea></div>