textpath-selection-011.html (2545B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Test: active selection of text following a path (complex)</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-shorthand"> 11 <link rel="help" href="https://www.w3.org/TR/fill-stroke-3/#stroke-shorthand"> 12 <link rel="match" href="textpath-selection-011-ref.html"> 13 14 <meta content="svg" name="flags"> 15 <meta content="This test checks that an SVG application with a text following a text path can be selected and then be styled." name="assert"> 16 17 <style> 18 ::selection 19 { 20 background-color: transparent; 21 /* 22 color suppresses UA default background-color, 23 but fill and stroke do not, so set explicitly 24 */ 25 fill: green; 26 /* 27 fill is the shorthand form for fill-color, 28 fill-image, fill-origin, fill-position, fill-size 29 and fill-repeat 30 https://www.w3.org/TR/fill-stroke-3/#fill-shorthand 31 */ 32 stroke: yellow; 33 /* 34 stroke is the shorthand form for stroke-color, 35 stroke-image, stroke-origin, stroke-position, 36 stroke-size, and stroke-repeat 37 https://www.w3.org/TR/fill-stroke-3/#stroke-shorthand 38 */ 39 stroke-width: 2px; 40 } 41 </style> 42 43 <p>Test passes if the glyphs of "Curvy text sample" are green with a yellow outline. 44 45 <div> 46 47 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="550" height="300"> 48 49 <path id="pathToApply" 50 d="M 100 200 51 C 100 100 200 0 500 200" fill="none" /> 52 53 <text fill="red" style="font-size: 48px;"><textPath xlink:href="#pathToApply" id="test">Curvy text sample</textPath></text> 54 55 </svg> 56 57 </div> 58 59 <script> 60 var targetRange = document.createRange(); 61 /* We first create an empty range */ 62 63 targetRange.setStart(document.getElementById("test").childNodes[0], 0); 64 /* 65 Then we set the start boundary of the range inside textPath#test to 66 the 1st character, which is "C" 67 */ 68 69 targetRange.setEnd(document.getElementById("test").childNodes[0], 17); 70 /* And we set the end boundary of the range inside textPath#test 71 right after the 18th character which is "e" */ 72 73 window.getSelection().addRange(targetRange); 74 /* Finally, we now select such range of content */ 75 </script>