active-selection-027.html (2004B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Pseudo-Elements Test: active selection and first-line pseudo-element</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors"> 9 <link rel="match" href="reference/active-selection-027-ref.html"> 10 11 <meta name="assert" content="In this test, the div::selection selector has no 'color' declaration. The div::selection selector should use the 'color' declaration from the div rule and, for the first line only, it should use the 'color' declaration from the ::first-line pseudo-element. Therefore the '1st selected text' should be purple and the '2nd selected text' should be green."> 12 13 <!-- 14 15 More info: 16 [css-pseudo-4] Original color of highlight pseudo inside 17 ::first-letter/::first-line 18 https://github.com/w3c/csswg-drafts/issues/4625 19 20 RESOLVED: Whatever highlight being applied uses colors from before 21 even if came from pseudo element like ::first-letter/::first-line 22 23 --> 24 25 <link rel="stylesheet" href="support/highlights.css"> 26 <style> 27 div 28 { 29 color: green; 30 font-size: 300%; 31 } 32 33 div::first-line 34 { 35 color: purple; 36 } 37 38 div::selection 39 { 40 background-color: yellow; 41 } 42 </style> 43 44 <script> 45 function startTest() 46 { 47 var targetRange = document.createRange(); 48 /* We first create an empty range */ 49 targetRange.selectNodeContents(document.getElementById("test")); 50 /* Then we set the range boundaries to the children of div#test */ 51 window.getSelection().addRange(targetRange); 52 /* Finally, we now select such range of content */ 53 } 54 </script> 55 56 <body onload="startTest();"> 57 58 <p>Test passes if both "selected text" have a yellow background, if the glyphs of "1st selected text" are purple and if the glyphs of "2nd selected text" are green. 59 60 <div id="test" class="highlight_reftest">1st selected text<br>2nd selected text</div>