blob: b69106f35c65e04d30efc967e5fc90eba26b020e [file] [log] [blame]
<!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] SVGFEBlendElement-svgdom-in2-prop.js
// [Expected rendering result] Seven blended rectangles in a gradient - and a series of PASS messages
description("Tests dynamic updates of the 'in2' property of the SVGFEBlendElement object")
createSVGTestCase();
var backgroundImage = createSVGElement("image");
backgroundImage.setAttribute("x", "35");
backgroundImage.setAttribute("y", "5");
backgroundImage.setAttribute("width", "220");
backgroundImage.setAttribute("height", "171");
backgroundImage.setAttribute("preserveAspectRatio", "none");
backgroundImage.setAttributeNS(xlinkNS, "xlink:href", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAABCAMAAAAfBfuPAAAABGdBTUEAAK/INwWK6QAAABl0RVh0 U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAEsUExURfb/AK3/AAD/9/9sAIn/AN7/ABT/ AAB//zD/AP9GAAD/s1H/AAD/H/8AxwD/bn8A/1wA/wD/XJv/AP8Ai//MAGP/ABMA/wD/LP8A6P8K AP8AF/8A9QD/xAAA/wD1/9MA/wD/gABY/wD/Cf8ATJEA//+6AACT/wCn/+v/AAD/TAD/kf8AYKMA //8kAAAk/wAV/y0A/3b/AP80AAD/O/cA//8A/wD///8An/8A2QD/Ev8AAMQA/+0A/7MA////AP8A CuAA//8AJ24A/0sA//8AOAA0/wAK/wBF//8WAAgA/x8A///2AL//AP8AdTwA/wn/AP/bAP+AAP+U AM//AP+nAP8AtADp/wD/o0D/AP/qAADb/wC5/wDL/wD/AAD/7QD/0gD/4CH/AABr//9ZAG2IeB4A AABvSURBVHjaYrCyl3J0Udb2FTYP5bWQkDY1sXGQt7bVUeF3EnD2M/AS85R109dzdVdMYldTj46J CpMzY4pLiJfhCtdS4BPUNBbnsVSK9WdL5IjgFjVkEWL0CWbVYLDzjgwQUQ0JCmRO5jTS9ZAECDAA 3aQTV3E5iioAAAAASUVORK5CYII=");
rootSVGElement.appendChild(backgroundImage);
var normalFlood = createSVGElement("feFlood");
normalFlood.setAttribute("in", "BackgroundAlpha");
normalFlood.setAttribute("flood-color", "#0f0");
normalFlood.setAttribute("flood-opacity", "0.5");
normalFlood.setAttribute("result", "normalImg");
var multiplyFlood = createSVGElement("feFlood");
multiplyFlood.setAttribute("in", "SourceGraphic");
multiplyFlood.setAttribute("flood-color", "#0f0");
multiplyFlood.setAttribute("flood-opacity", "0.5");
multiplyFlood.setAttribute("result", "multiplyImg");
var screenFlood = createSVGElement("feFlood");
screenFlood.setAttribute("in", "SourceGraphic");
screenFlood.setAttribute("flood-color", "#0f0");
screenFlood.setAttribute("flood-opacity", "0.5");
screenFlood.setAttribute("result", "screenImg");
var darkenFlood = createSVGElement("feFlood");
darkenFlood.setAttribute("in", "SourceGraphic");
darkenFlood.setAttribute("flood-color", "#0f0");
darkenFlood.setAttribute("flood-opacity", "0.5");
darkenFlood.setAttribute("result", "darkenImg");
var lightenFlood = createSVGElement("feFlood");
lightenFlood.setAttribute("in", "SourceGraphic");
lightenFlood.setAttribute("flood-color", "#0f0");
lightenFlood.setAttribute("flood-opacity", "0.5");
lightenFlood.setAttribute("result", "lightenImg");
var normalBlend = createSVGElement("feBlend");
normalBlend.setAttribute("in", "SourceGraphic");
normalBlend.setAttribute("in2", "lightenImg");
normalBlend.setAttribute("mode", "normal");
var multiplyBlend = createSVGElement("feBlend");
multiplyBlend.setAttribute("in", "SourceGraphic");
multiplyBlend.setAttribute("in2", "normalImg");
multiplyBlend.setAttribute("mode", "multiply");
var screenBlend = createSVGElement("feBlend");
screenBlend.setAttribute("in", "SourceGraphic");
screenBlend.setAttribute("in2", "multiplyImg");
screenBlend.setAttribute("mode", "screen");
var darkenBlend = createSVGElement("feBlend");
darkenBlend.setAttribute("in", "SourceGraphic");
darkenBlend.setAttribute("in2", "screenImg");
darkenBlend.setAttribute("mode", "darken");
var lightenBlend = createSVGElement("feBlend");
lightenBlend.setAttribute("in", "SourceGraphic");
lightenBlend.setAttribute("in2", "darkenImg");
lightenBlend.setAttribute("mode", "lighten");
var normalBlendFilter = createSVGElement("filter");
normalBlendFilter.setAttribute("id", "normalFilter");
normalBlendFilter.setAttribute("filterUnits", "objectBoundingBox");
normalBlendFilter.setAttribute("x", "0%");
normalBlendFilter.setAttribute("y", "0%");
normalBlendFilter.setAttribute("width", "100%");
normalBlendFilter.setAttribute("height", "100%");
normalBlendFilter.appendChild(normalFlood);
normalBlendFilter.appendChild(normalBlend);
var multiplyBlendFilter = createSVGElement("filter");
multiplyBlendFilter.setAttribute("id", "multiplyFilter");
multiplyBlendFilter.setAttribute("filterUnits", "objectBoundingBox");
multiplyBlendFilter.setAttribute("x", "0%");
multiplyBlendFilter.setAttribute("y", "0%");
multiplyBlendFilter.setAttribute("width", "100%");
multiplyBlendFilter.setAttribute("height", "100%");
multiplyBlendFilter.appendChild(multiplyFlood);
multiplyBlendFilter.appendChild(multiplyBlend);
var screenBlendFilter = createSVGElement("filter");
screenBlendFilter.setAttribute("id", "screenFilter");
screenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");
screenBlendFilter.setAttribute("x", "0%");
screenBlendFilter.setAttribute("y", "0%");
screenBlendFilter.setAttribute("width", "100%");
screenBlendFilter.setAttribute("height", "100%");
screenBlendFilter.appendChild(screenFlood);
screenBlendFilter.appendChild(screenBlend);
var darkenBlendFilter = createSVGElement("filter");
darkenBlendFilter.setAttribute("id", "darkenFilter");
darkenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");
darkenBlendFilter.setAttribute("x", "0%");
darkenBlendFilter.setAttribute("y", "0%");
darkenBlendFilter.setAttribute("width", "100%");
darkenBlendFilter.setAttribute("height", "100%");
darkenBlendFilter.appendChild(darkenFlood);
darkenBlendFilter.appendChild(darkenBlend);
var lightenBlendFilter = createSVGElement("filter");
lightenBlendFilter.setAttribute("id", "lightenFilter");
lightenBlendFilter.setAttribute("filterUnits", "objectBoundingBox");
lightenBlendFilter.setAttribute("x", "0%");
lightenBlendFilter.setAttribute("y", "0%");
lightenBlendFilter.setAttribute("width", "100%");
lightenBlendFilter.setAttribute("height", "100%");
lightenBlendFilter.appendChild(lightenFlood);
lightenBlendFilter.appendChild(lightenBlend);
var defsElement = createSVGElement("defs");
defsElement.appendChild(normalBlendFilter);
defsElement.appendChild(multiplyBlendFilter);
defsElement.appendChild(screenBlendFilter);
defsElement.appendChild(darkenBlendFilter);
defsElement.appendChild(lightenBlendFilter);
rootSVGElement.appendChild(defsElement);
var normalRectElement = createSVGElement("rect");
normalRectElement.setAttribute("x", "25");
normalRectElement.setAttribute("y", "10");
normalRectElement.setAttribute("width", "240");
normalRectElement.setAttribute("height", "20");
normalRectElement.setAttribute("fill", "blue");
normalRectElement.setAttribute("opacity", "0.5");
normalRectElement.setAttribute("filter", "url(#normalFilter)");
rootSVGElement.appendChild(normalRectElement);
var multiplyRectElement = createSVGElement("rect");
multiplyRectElement.setAttribute("x", "25");
multiplyRectElement.setAttribute("y", "33");
multiplyRectElement.setAttribute("width", "240");
multiplyRectElement.setAttribute("height", "20");
multiplyRectElement.setAttribute("fill", "blue");
multiplyRectElement.setAttribute("opacity", "0.5");
multiplyRectElement.setAttribute("filter", "url(#multiplyFilter)");
rootSVGElement.appendChild(multiplyRectElement);
var gElement = createSVGElement("g");
gElement.setAttribute("filter", "url(#multiplyFilter)");
var embeddedMultiplyRectElement1 = createSVGElement("rect");
embeddedMultiplyRectElement1.setAttribute("x", "25");
embeddedMultiplyRectElement1.setAttribute("y", "56");
embeddedMultiplyRectElement1.setAttribute("width", "240");
embeddedMultiplyRectElement1.setAttribute("height", "20");
embeddedMultiplyRectElement1.setAttribute("fill", "blue");
embeddedMultiplyRectElement1.setAttribute("opacity", "0.5");
gElement.appendChild(embeddedMultiplyRectElement1);
var embeddedMultiplyRectElement2 = createSVGElement("rect");
embeddedMultiplyRectElement2.setAttribute("x", "25");
embeddedMultiplyRectElement2.setAttribute("y", "79");
embeddedMultiplyRectElement2.setAttribute("width", "240");
embeddedMultiplyRectElement2.setAttribute("height", "20");
embeddedMultiplyRectElement2.setAttribute("fill", "#ff0");
embeddedMultiplyRectElement2.setAttribute("opacity", "0.5");
gElement.appendChild(embeddedMultiplyRectElement2);
rootSVGElement.appendChild(gElement);
var screenRectElement = createSVGElement("rect");
screenRectElement.setAttribute("x", "25");
screenRectElement.setAttribute("y", "102");
screenRectElement.setAttribute("width", "240");
screenRectElement.setAttribute("height", "20");
screenRectElement.setAttribute("fill", "blue");
screenRectElement.setAttribute("opacity", "0.5");
screenRectElement.setAttribute("filter", "url(#screenFilter)");
rootSVGElement.appendChild(screenRectElement);
var darkenRectElement = createSVGElement("rect");
darkenRectElement.setAttribute("x", "25");
darkenRectElement.setAttribute("y", "125");
darkenRectElement.setAttribute("width", "240");
darkenRectElement.setAttribute("height", "20");
darkenRectElement.setAttribute("fill", "blue");
darkenRectElement.setAttribute("opacity", "0.5");
darkenRectElement.setAttribute("filter", "url(#darkenFilter)");
rootSVGElement.appendChild(darkenRectElement);
var lightenRectElement = createSVGElement("rect");
lightenRectElement.setAttribute("x", "25");
lightenRectElement.setAttribute("y", "148");
lightenRectElement.setAttribute("width", "240");
lightenRectElement.setAttribute("height", "20");
lightenRectElement.setAttribute("fill", "blue");
lightenRectElement.setAttribute("opacity", "0.5");
lightenRectElement.setAttribute("filter", "url(#lightenFilter)");
rootSVGElement.appendChild(lightenRectElement);
rootSVGElement.setAttribute("fill", "#333");
rootSVGElement.setAttribute("font-size", "14");
rootSVGElement.setAttribute("width", "350");
rootSVGElement.setAttribute("height", "250");
shouldBeEqualToString("normalBlend.in2.baseVal", "lightenImg");
shouldBeEqualToString("multiplyBlend.in2.baseVal", "normalImg");
shouldBeEqualToString("screenBlend.in2.baseVal", "multiplyImg");
shouldBeEqualToString("darkenBlend.in2.baseVal", "screenImg");
shouldBeEqualToString("lightenBlend.in2.baseVal", "darkenImg");
function repaintTest() {
normalBlend.in2.baseVal = "normalImg";
multiplyBlend.in2.baseVal = "multiplyImg";
screenBlend.in2.baseVal = "screenImg";
darkenBlend.in2.baseVal = "darkenImg";
lightenBlend.in2.baseVal = "lightenImg";
shouldBeEqualToString("normalBlend.in2.baseVal", "normalImg");
shouldBeEqualToString("multiplyBlend.in2.baseVal", "multiplyImg");
shouldBeEqualToString("screenBlend.in2.baseVal", "screenImg");
shouldBeEqualToString("darkenBlend.in2.baseVal", "darkenImg");
shouldBeEqualToString("lightenBlend.in2.baseVal", "lightenImg");
completeTest();
}
var successfullyParsed = true;
</script>
</body>
</html>