201 lines
8.1 KiB
HTML
201 lines
8.1 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
|
|
<html>
|
|
<head>
|
|
<script src="resources/SVGTestCase.js"></script>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<script src="../../fast/repaint/resources/repaint.js"></script>
|
|
</head>
|
|
<body onload="runRepaintTest()">
|
|
<h1>SVG 1.1 dynamic update tests</h1>
|
|
<p id="description"></p>
|
|
<div id="console"></div>
|
|
<script>
|
|
// [Name] SVGFEColorMatrixElement-dom-in-attr.js
|
|
// [Expected rendering result] Five lines with feColorMatrix filter - and a series of PASS messages
|
|
|
|
description("Tests dynamic updates of the 'in' attribute of the SVGFEColorMatrixElement object")
|
|
createSVGTestCase();
|
|
|
|
var matrixElement = createSVGElement("feColorMatrix");
|
|
matrixElement.setAttribute("in", "SourceAlpha");
|
|
matrixElement.setAttribute("type", "matrix");
|
|
matrixElement.setAttribute("values", ".33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0");
|
|
|
|
var saturateElement = createSVGElement("feColorMatrix");
|
|
saturateElement.setAttribute("in", "SourceAlpha");
|
|
saturateElement.setAttribute("type", "saturate");
|
|
saturateElement.setAttribute("values", "0.25");
|
|
|
|
var hueRotateElement = createSVGElement("feColorMatrix");
|
|
hueRotateElement.setAttribute("in", "SourceAlpha");
|
|
hueRotateElement.setAttribute("type", "hueRotate");
|
|
hueRotateElement.setAttribute("values", "90");
|
|
|
|
var luminanceToAlphaElement = createSVGElement("feColorMatrix");
|
|
luminanceToAlphaElement.setAttribute("in", "SourceAlpha");
|
|
luminanceToAlphaElement.setAttribute("type", "luminanceToAlpha");
|
|
luminanceToAlphaElement.setAttribute("result", "a");
|
|
|
|
var compositeElement = createSVGElement("feComposite");
|
|
compositeElement.setAttribute("in", "SourceGraphic");
|
|
compositeElement.setAttribute("in2", "a");
|
|
compositeElement.setAttribute("operator", "in");
|
|
|
|
var matrixFilter = createSVGElement("filter");
|
|
matrixFilter.setAttribute("id", "MatrixFilter");
|
|
matrixFilter.setAttribute("filterUnits", "objectBoundingBox");
|
|
matrixFilter.setAttribute("x", "-5%");
|
|
matrixFilter.setAttribute("y", "-5%");
|
|
matrixFilter.setAttribute("width", "110%");
|
|
matrixFilter.setAttribute("height", "110%");
|
|
matrixFilter.appendChild(matrixElement);
|
|
|
|
var saturatedFilter = createSVGElement("filter");
|
|
saturatedFilter.setAttribute("id", "SaturateFilter");
|
|
saturatedFilter.setAttribute("filterUnits", "objectBoundingBox");
|
|
saturatedFilter.setAttribute("x", "-5%");
|
|
saturatedFilter.setAttribute("y", "-5%");
|
|
saturatedFilter.setAttribute("width", "110%");
|
|
saturatedFilter.setAttribute("height", "110%");
|
|
saturatedFilter.appendChild(saturateElement);
|
|
|
|
var hueRotateFilter = createSVGElement("filter");
|
|
hueRotateFilter.setAttribute("id", "HueRotateFilter");
|
|
hueRotateFilter.setAttribute("filterUnits", "objectBoundingBox");
|
|
hueRotateFilter.setAttribute("x", "-5%");
|
|
hueRotateFilter.setAttribute("y", "-5%");
|
|
hueRotateFilter.setAttribute("width", "110%");
|
|
hueRotateFilter.setAttribute("height", "110%");
|
|
hueRotateFilter.appendChild(hueRotateElement);
|
|
|
|
var luminanceToAlphaFilter = createSVGElement("filter");
|
|
luminanceToAlphaFilter.setAttribute("id", "LuminanceToAlphaFilter");
|
|
luminanceToAlphaFilter.setAttribute("filterUnits", "objectBoundingBox");
|
|
luminanceToAlphaFilter.setAttribute("x", "-5%");
|
|
luminanceToAlphaFilter.setAttribute("y", "-5%");
|
|
luminanceToAlphaFilter.setAttribute("width", "110%");
|
|
luminanceToAlphaFilter.setAttribute("height", "110%");
|
|
luminanceToAlphaFilter.appendChild(luminanceToAlphaElement);
|
|
luminanceToAlphaFilter.appendChild(compositeElement);
|
|
|
|
var gradientElement = createSVGElement("linearGradient");
|
|
gradientElement.setAttribute("id", "MyGradient");
|
|
gradientElement.setAttribute("gradientUnits", "userSpaceOnUse");
|
|
gradientElement.setAttribute("x1", "20");
|
|
gradientElement.setAttribute("y1", "0");
|
|
gradientElement.setAttribute("x2", "760");
|
|
gradientElement.setAttribute("y2", "0");
|
|
|
|
var stopElement1 = createSVGElement("stop");
|
|
stopElement1.setAttribute("offset", "0");
|
|
stopElement1.setAttribute("stop-color", "#dd00dd");
|
|
|
|
var stopElement2 = createSVGElement("stop");
|
|
stopElement2.setAttribute("offset", ".33");
|
|
stopElement2.setAttribute("stop-color", "#22cc22");
|
|
|
|
var stopElement3 = createSVGElement("stop");
|
|
stopElement3.setAttribute("offset", ".67");
|
|
stopElement3.setAttribute("stop-color", "#400000");
|
|
|
|
var stopElement4 = createSVGElement("stop");
|
|
stopElement4.setAttribute("offset", "1");
|
|
stopElement4.setAttribute("stop-color", "#a0a0ff");
|
|
|
|
gradientElement.appendChild(stopElement1);
|
|
gradientElement.appendChild(stopElement2);
|
|
gradientElement.appendChild(stopElement3);
|
|
gradientElement.appendChild(stopElement4);
|
|
|
|
var defsElement = createSVGElement("defs");
|
|
defsElement.appendChild(saturatedFilter);
|
|
defsElement.appendChild(matrixFilter);
|
|
defsElement.appendChild(hueRotateFilter);
|
|
defsElement.appendChild(luminanceToAlphaFilter);
|
|
defsElement.appendChild(gradientElement);
|
|
|
|
rootSVGElement.appendChild(defsElement);
|
|
rootSVGElement.setAttribute("width", "800");
|
|
rootSVGElement.setAttribute("height", "400");
|
|
|
|
var rectElement = createSVGElement("rect");
|
|
rectElement.setAttribute("width", 798);
|
|
rectElement.setAttribute("height", 320);
|
|
rectElement.setAttribute("x", "1");
|
|
rectElement.setAttribute("y", "1");
|
|
rectElement.setAttribute("fill", "none");
|
|
rectElement.setAttribute("stroke", "blue");
|
|
rectElement.setAttribute("filter", "url(#SaturateFilter)");
|
|
|
|
var unfilteredRect = createSVGElement("rect");
|
|
unfilteredRect.setAttribute("x", "20");
|
|
unfilteredRect.setAttribute("y", "20");
|
|
unfilteredRect.setAttribute("width", "760");
|
|
unfilteredRect.setAttribute("height", "30");
|
|
unfilteredRect.setAttribute("fill", "url(#MyGradient)");
|
|
rootSVGElement.appendChild(unfilteredRect);
|
|
|
|
var matrixRect = createSVGElement("rect");
|
|
matrixRect.setAttribute("x", "20");
|
|
matrixRect.setAttribute("y", "80");
|
|
matrixRect.setAttribute("width", "760");
|
|
matrixRect.setAttribute("height", "30");
|
|
matrixRect.setAttribute("fill", "url(#MyGradient)");
|
|
matrixRect.setAttribute("filter", "url(#MatrixFilter)");
|
|
rootSVGElement.appendChild(matrixRect);
|
|
|
|
var saturatedRect = createSVGElement("rect");
|
|
saturatedRect.setAttribute("x", "20");
|
|
saturatedRect.setAttribute("y", "140");
|
|
saturatedRect.setAttribute("width", "760");
|
|
saturatedRect.setAttribute("height", "30");
|
|
saturatedRect.setAttribute("fill", "url(#MyGradient)");
|
|
saturatedRect.setAttribute("filter", "url(#SaturateFilter)");
|
|
rootSVGElement.appendChild(saturatedRect);
|
|
|
|
var hueRotateRect = createSVGElement("rect");
|
|
hueRotateRect.setAttribute("x", "20");
|
|
hueRotateRect.setAttribute("y", "200");
|
|
hueRotateRect.setAttribute("width", "760");
|
|
hueRotateRect.setAttribute("height", "30");
|
|
hueRotateRect.setAttribute("fill", "url(#MyGradient)");
|
|
hueRotateRect.setAttribute("filter", "url(#HueRotateFilter)");
|
|
rootSVGElement.appendChild(hueRotateRect);
|
|
|
|
var luminanceToAlphaRect = createSVGElement("rect");
|
|
luminanceToAlphaRect.setAttribute("x", "20");
|
|
luminanceToAlphaRect.setAttribute("y", "260");
|
|
luminanceToAlphaRect.setAttribute("width", "760");
|
|
luminanceToAlphaRect.setAttribute("height", "30");
|
|
luminanceToAlphaRect.setAttribute("fill", "url(#MyGradient)");
|
|
luminanceToAlphaRect.setAttribute("filter", "url(#LuminanceToAlphaFilter)");
|
|
rootSVGElement.appendChild(luminanceToAlphaRect);
|
|
|
|
rootSVGElement.appendChild(rectElement);
|
|
rootSVGElement.setAttribute("font-size", "20");
|
|
rootSVGElement.setAttribute("font-family", "Verdana");
|
|
|
|
shouldBeEqualToString("matrixElement.getAttribute('in')", "SourceAlpha");
|
|
shouldBeEqualToString("saturateElement.getAttribute('in')", "SourceAlpha");
|
|
shouldBeEqualToString("hueRotateElement.getAttribute('in')", "SourceAlpha");
|
|
shouldBeEqualToString("luminanceToAlphaElement.getAttribute('in')", "SourceAlpha");
|
|
|
|
function repaintTest() {
|
|
matrixElement.setAttribute("in", "SourceGraphic");
|
|
saturateElement.setAttribute("in", "SourceGraphic");
|
|
hueRotateElement.setAttribute("in", "SourceGraphic");
|
|
luminanceToAlphaElement.setAttribute("in", "SourceGraphic");
|
|
|
|
shouldBeEqualToString("matrixElement.getAttribute('in')", "SourceGraphic");
|
|
shouldBeEqualToString("saturateElement.getAttribute('in')", "SourceGraphic");
|
|
shouldBeEqualToString("hueRotateElement.getAttribute('in')", "SourceGraphic");
|
|
shouldBeEqualToString("luminanceToAlphaElement.getAttribute('in')", "SourceGraphic");
|
|
|
|
completeTest();
|
|
}
|
|
|
|
var successfullyParsed = true;
|
|
</script>
|
|
</body>
|
|
</html>
|