50 lines
2.8 KiB
HTML
50 lines
2.8 KiB
HTML
<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> |