2 width=
"500px" height=
"500px" viewBox=
"0 0 500 500"
3 xmlns=
"http://www.w3.org/2000/svg" xmlns:
xlink=
"http://www.w3.org/1999/xlink"
5 <title>Filters and offsets, user space origins, invalidation
</title>
7 <filter id=
"flood-boundingBox"
8 filterUnits=
"objectBoundingBox"
9 x=
"0%" y=
"0%" width=
"100%" height=
"100%"
10 color-interpolation-filters=
"sRGB">
11 <feFlood flood-color=
"lime"/>
13 <filter id=
"matrix-boundingBox"
14 filterUnits=
"objectBoundingBox"
15 x=
"0%" y=
"0%" width=
"100%" height=
"100%"
16 color-interpolation-filters=
"sRGB">
17 <feColorMatrix type=
"matrix" values=
"0 1 0 0 0
22 <filter id=
"matrix-fillPaint-boundingBox"
23 filterUnits=
"objectBoundingBox"
24 x=
"0%" y=
"0%" width=
"100%" height=
"100%"
25 color-interpolation-filters=
"sRGB">
26 <feColorMatrix type=
"matrix" values=
"0 1 0 0 0
29 0 0 0 1 0" in=
"FillPaint"/>
31 <filter id=
"flood-userSpace-atZero"
32 filterUnits=
"userSpaceOnUse"
33 x=
"0" y=
"0" width=
"100" height=
"100"
34 color-interpolation-filters=
"sRGB">
35 <feFlood flood-color=
"lime"/>
37 <filter id=
"matrix-userSpace-atZero"
38 filterUnits=
"userSpaceOnUse"
39 x=
"0" y=
"0" width=
"100" height=
"100"
40 color-interpolation-filters=
"sRGB">
41 <feColorMatrix type=
"matrix" values=
"0 1 0 0 0
46 <filter id=
"flood-userSpace-at100"
47 filterUnits=
"userSpaceOnUse"
48 x=
"100" y=
"100" width=
"100" height=
"100"
49 color-interpolation-filters=
"sRGB">
50 <feFlood flood-color=
"lime"/>
52 <filter id=
"matrix-userSpace-at100"
53 filterUnits=
"userSpaceOnUse"
54 x=
"100" y=
"100" width=
"100" height=
"100"
55 color-interpolation-filters=
"sRGB">
56 <feColorMatrix type=
"matrix" values=
"0 1 0 0 0
61 <filter id=
"matrix-fillPaint-userSpace-at100"
62 filterUnits=
"userSpaceOnUse"
63 x=
"100" y=
"100" width=
"100" height=
"100"
64 color-interpolation-filters=
"sRGB">
65 <feColorMatrix type=
"matrix" values=
"0 1 0 0 0
68 0 0 0 1 0" in=
"FillPaint"/>
70 <mask id=
"boundingBox" maskContentUnits=
"objectBoundingBox">
71 <rect x=
"0" y=
"0" width=
"1" height=
"1" fill=
"white"/>
73 <mask id=
"userSpace-atZero" maskContentUnits=
"userSpaceOnUse">
74 <rect x=
"0" y=
"0" width=
"100" height=
"100" fill=
"white"/>
76 <mask id=
"userSpace-at100" maskContentUnits=
"userSpaceOnUse">
77 <rect x=
"100" y=
"100" width=
"100" height=
"100" fill=
"white"/>
80 <rect class=
"fillColor" width=
"100" height=
"100"/>
83 <g transform=
"translate(40,40)">
84 <rect stroke-width=
"1" stroke=
"black" fill=
"none" x=
"99.5" y=
"99.5" width=
"101" height=
"101"/>
86 <rect x=
"0" y=
"100" width=
"100" height=
"100" class=
"fillColor offsetContainer" id=
"rect"/>
87 <use xlink:
href=
"#usedRect" x=
"0" y=
"100" class=
"offsetContainer" id=
"use"/>
88 <svg x=
"0" y=
"100" width=
"100" height=
"100" class=
"offsetContainer" id=
"innerSVG">
89 <rect class=
"fillColor" width=
"100" height=
"100"/>
91 <foreignObject x=
"0" y=
"100" width=
"100" height=
"100" class=
"offsetContainer" id=
"foreignObject">
92 <svg width=
"100" height=
"100">
93 <rect class=
"fillColor" width=
"100" height=
"100"/>
100 offsetContainer:
"rect",
103 updateOffsetOn:
"reftestInvalidate" // |
"initial" |
"timeout"
106 location.search.substr(
1).split(
"&").forEach(function (s) {
107 var pv = s.split(
"=");
108 options[pv[
0]] = pv[
1] || true;
111 var offsetContainer = document.getElementById(options.offsetContainer);
113 function updateOffsetNow() {
114 offsetContainer.setAttribute(
"x",
"100");
117 function updateOffsetOnReftestInvalidate() {
118 document.documentElement.setAttribute(
"class",
"reftest-wait");
119 document.addEventListener(
"MozReftestInvalidate", function () {
121 document.documentElement.removeAttribute(
"class");
125 function updateOffsetOnTimeout() {
126 setTimeout(updateOffsetNow,
500);
129 options.updateOffset = options.updateOffsetOn ==
"initial" ? updateOffsetNow :
130 (options.updateOffsetOn ==
"timeout" ? updateOffsetOnTimeout :
131 updateOffsetOnReftestInvalidate);
133 var offsetContainers = Array.prototype.slice.call(document.getElementsByClassName(
"offsetContainer"),
0);
134 for (var i =
0; i < offsetContainers.length; i++) {
135 if (offsetContainers[i] != offsetContainer) {
136 offsetContainers[i].parentNode.removeChild(offsetContainers[i]);
140 var fillColor = options.filter ?
"red" :
"lime";
141 if (options.filter) {
142 offsetContainer.setAttribute(
"filter",
"url(#" + options.filter +
")");
145 offsetContainer.setAttribute(
"mask",
"url(#" + options.mask +
")");
148 var fillColors = document.getElementsByClassName(
"fillColor");
149 for (var j =
0; j < fillColors.length; j++) {
150 fillColors[j].setAttribute(
"fill", fillColor);
153 options.updateOffset();