| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head> |
| <style> |
| body, svg { margin: 0px; padding: 0px; } |
| text#solidFill::selection, #solidFillText { fill: blue; } |
| text#solidStroke::selection, #solidStrokeText { fill: none; stroke:blue; stroke-width: 1px; } |
| text#gradFill::selection, #gradFillText { fill: url(#grad1); } |
| text#gradStroke::selection, #gradStrokeText { fill: none; stroke: url(#grad1); stroke-width: 1px; } |
| text#none::selection, #noneText { fill: none; stroke: none; } |
| text#compound::selection, text.compound::selection { fill: url(#grad1); stroke:blue; stroke-width: 1px; background-color: yellow; } |
| #compoundText { fill: url(#grad2); stroke:purple; stroke-width: 1px; } |
| </style> |
| <script> |
| function runTests() |
| { |
| document.execCommand("SelectAll"); |
| } |
| </script> |
| </head> |
| <body onload="runTests()"> |
| <svg xmlns="http://www.w3.org/2000/svg" font-size="20" width="800px" height="500px"> |
| <defs> |
| <linearGradient id="grad1" gradientTransform="rotate(45)"> |
| <stop offset="0" stop-color="black"/> |
| <stop offset="1" stop-color="white"/> |
| </linearGradient> |
| <linearGradient id="grad2" gradientTransform="rotate(45)"> |
| <stop offset="0" stop-color="red"/> |
| <stop offset="1" stop-color="green"/> |
| </linearGradient> |
| </defs> |
| <g transform="translate(10,0)"> |
| <!-- select with various style --> |
| <text y="30px" id="solidFill">Selected text should be filled with solid blue.</text> |
| <text y="60px" id="solidStroke">Selected text should be stroked with solid blue.</text> |
| <text y="90px" id="gradFill">Selected text should be filled with gradient.</text> |
| <text y="120px" id="gradStroke">Selected text should be stroked with gradient.</text> |
| <text y="150px" id="none">Selected text should get invisible.</text> |
| <text y="180px" id="compound">Selected text should have both gradient fill, solid stroke and background</text> |
| <!-- select various pre-styled texts with a style --> |
| <text y="240px" id="solidFillText" class="compound">Selected text should have both gradient fill, solid stroke and background</text> |
| <text y="270px" id="solidStrokeText" class="compound">Selected text should have both gradient fill, solid stroke and background</text> |
| <text y="300px" id="gradFillText" class="compound">Selected text should have both gradient fill, solid stroke and background</text> |
| <text y="330px" id="gradStrokeText" class="compound">Selected text should have both gradient fill, solid stroke and background</text> |
| <text y="360px" id="noneText" class="compound">Selected text should have both gradient fill, solid stroke and background</text> |
| <text y="390px" id="compoundText" class="compound">Selected text should have both gradient fill, solid stroke and background</text> |
| </g> |
| </svg> |
| </body> |
| </html> |
