96 lines
3.6 KiB
XML
96 lines
3.6 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" onload="runRepaintTest()">
|
|
<script xlink:href="../../fast/repaint/resources/repaint.js"/>
|
|
<g id="content"/>
|
|
|
|
<script>
|
|
var content = document.getElementById("content");
|
|
|
|
function repaintTest() {
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
setTimeout(createGradients, 0);
|
|
}
|
|
|
|
function createGradients()
|
|
{
|
|
// Setup "fillLinearGradient"
|
|
var gradient1 = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
|
|
gradient1.setAttribute("id", "fillLinearGradient");
|
|
gradient1.setAttribute("x1", "0");
|
|
gradient1.setAttribute("x2", "1");
|
|
|
|
var stop11 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
stop11.setAttribute("stop-color", "blue");
|
|
stop11.setAttribute("offset", "0");
|
|
|
|
var stop21 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
stop21.setAttribute("stop-color", "red");
|
|
stop21.setAttribute("offset", "1");
|
|
|
|
gradient1.appendChild(stop11);
|
|
gradient1.appendChild(stop21);
|
|
|
|
content.appendChild(gradient1);
|
|
|
|
// Setup "strokeLinearGradient"
|
|
var gradient2 = document.createElementNS("http://www.w3.org/2000/svg", "linearGradient");
|
|
gradient2.setAttribute("id", "strokeLinearGradient");
|
|
gradient2.setAttribute("x1", "0");
|
|
gradient2.setAttribute("x2", "1");
|
|
|
|
var stop22 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
stop22.setAttribute("stop-color", "yellow");
|
|
stop22.setAttribute("offset", "0");
|
|
|
|
var stop22 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
|
|
stop22.setAttribute("stop-color", "green");
|
|
stop22.setAttribute("offset", "1");
|
|
|
|
gradient2.appendChild(stop22);
|
|
gradient2.appendChild(stop22);
|
|
|
|
content.appendChild(gradient2);
|
|
setTimeout(setupGradientUsers, 0);
|
|
}
|
|
|
|
function setupGradientUsers()
|
|
{
|
|
var text1 = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
|
text1.setAttribute("font-size", "68");
|
|
text1.setAttribute("x", "-150");
|
|
text1.setAttribute("y", "70")
|
|
text1.setAttribute("fill", "url(#fillLinearGradient)");
|
|
text1.setAttribute("stroke", "none");
|
|
text1.appendChild(document.createTextNode("Gradient on fill"));
|
|
|
|
content.appendChild(text1);
|
|
|
|
var text2 = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
|
text2.setAttribute("font-size", "68");
|
|
text2.setAttribute("x", "-150");
|
|
text2.setAttribute("y", "140")
|
|
text2.setAttribute("fill", "none");
|
|
text2.setAttribute("stroke", "url(#strokeLinearGradient)");
|
|
text2.appendChild(document.createTextNode("Gradient on stroke"));
|
|
|
|
content.appendChild(text2);
|
|
|
|
var text3 = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
|
text3.setAttribute("font-size", "68");
|
|
text3.setAttribute("x", "-150");
|
|
text3.setAttribute("y", "210")
|
|
text3.setAttribute("fill", "url(#fillLinearGradient)");
|
|
text3.setAttribute("stroke", "url(#strokeLinearGradient)");
|
|
text3.appendChild(document.createTextNode("Gradient on fill/stroke"));
|
|
|
|
content.appendChild(text3);
|
|
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
}
|
|
</script>
|
|
|
|
</svg>
|