svg-text-selection-002.html (1740B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Pseudo Test: active selection of text within a svg object styled with 'color'</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="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> 10 <link rel="help" href="https://www.w3.org/TR/fill-stroke-3/#fill-color"> 11 <link rel="match" href="reference/svg-text-selection-002-ref.html"> 12 13 <meta content="svg" name="flags"> 14 <meta content="This test checks that an SVG application with a text can be selected and then be styled with 'color'." name="assert"> 15 16 <style> 17 text::selection 18 { 19 color: green; 20 } 21 </style> 22 23 <p>Test passes if the glyphs of "Selected text" are green and <strong>not red</strong>. 24 25 <div> 26 27 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="460" height="180" style="border: black solid 3px;"> 28 29 <text x="50" y="100" fill="red" font-size="48" id="test">Selected text</text> 30 31 </svg> 32 33 </div> 34 35 <script> 36 var targetRange = document.createRange(); 37 /* We first create an empty range */ 38 39 targetRange.setStart(document.getElementById("test").childNodes[0], 0); 40 /* 41 Then we set the start boundary of the range inside text#test to 42 the 1st character, which is "S" 43 */ 44 45 targetRange.setEnd(document.getElementById("test").childNodes[0], 13); 46 /* And we set the end boundary of the range inside text#test 47 right after the 14th character which is "t" */ 48 49 window.getSelection().addRange(targetRange); 50 /* Finally, we now select such range of content */ 51 </script>