selection-contenteditable-011-ref.html (1381B)
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 div 11 { 12 background-color: yellow; 13 color: green; 14 display: inline; 15 font-size: 300%; 16 } 17 </style> 18 19 <script> 20 function startReference() 21 { 22 document.getElementById("ref").focus(); 23 /* 24 Some browsers, like Chromium 80+, will transfer focus 25 to a selected element like a contenteditable div and 26 therefore style the border of such element according 27 to the user agent stylesheet rule: 28 :focus {outline: -webkit-focus-ring-color auto 1px;} . 29 So, we deliberately trigger such focus with the focus() 30 method in the reference file. 31 */ 32 document.getElementById("ref").style.caretColor = "yellow"; 33 /* 34 When a contenteditable element is focused in Firefox 35 82+, then the caret becomes visible and blinking and 36 it is painted with the ::selected's color which is 37 the green color in this case. We therefore counter, 38 neutralize this by resetting the caret's color to the 39 background color. 40 */ 41 } 42 </script> 43 44 <body onload="startReference();"> 45 46 <p>Test passes if each glyph of "Selected Text" is green with a yellow background and if there is <strong>no red</strong>. 47 48 <div contenteditable="true" id="ref">Selected Text</div>