<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
body, svg { margin: 0px; padding: 0px; }
text.test::selection { background-color: transparent; }
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" class="test">Selected text should be filled with solid blue.</text>
<text y="60px" id="solidStroke" class="test">Selected text should be stroked with solid blue.</text>
<text y="90px" id="gradFill" class="test">Selected text should be filled with gradient.</text>
<text y="120px" id="gradStroke" class="test">Selected text should be stroked with gradient.</text>
<text y="150px" id="none" class="test">Selected text should get invisible.</text>
<text y="180px" id="compound" class="test">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="test compound">Selected text should have both gradient fill, solid stroke and background</text>
<text y="270px" id="solidStrokeText" class="test compound">Selected text should have both gradient fill, solid stroke and background</text>
<text y="300px" id="gradFillText" class="test compound">Selected text should have both gradient fill, solid stroke and background</text>
<text y="330px" id="gradStrokeText" class="test compound">Selected text should have both gradient fill, solid stroke and background</text>
<text y="360px" id="noneText" class="test compound">Selected text should have both gradient fill, solid stroke and background</text>
<text y="390px" id="compoundText" class="test compound">Selected text should have both gradient fill, solid stroke and background</text>
</g>
</svg>
</body>
</html>
Codebase Browser
chromium