michael@0: <svg
michael@0:   width="500px" height="500px" viewBox="0 0 500 500"
michael@0:   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
michael@0:   >
michael@0:   <title>Filters and offsets, user space origins, invalidation</title>
michael@0:   <defs>
michael@0:     <filter id="flood-boundingBox"
michael@0:             filterUnits="objectBoundingBox"
michael@0:             x="0%" y="0%" width="100%" height="100%"
michael@0:             color-interpolation-filters="sRGB">
michael@0:       <feFlood flood-color="lime"/>
michael@0:     </filter>
michael@0:     <filter id="matrix-boundingBox"
michael@0:             filterUnits="objectBoundingBox"
michael@0:             x="0%" y="0%" width="100%" height="100%"
michael@0:             color-interpolation-filters="sRGB">
michael@0:       <feColorMatrix type="matrix" values="0 1 0 0 0
michael@0:                                            1 0 0 0 0
michael@0:                                            0 0 1 0 0
michael@0:                                            0 0 0 1 0"/>
michael@0:     </filter>
michael@0:     <filter id="matrix-fillPaint-boundingBox"
michael@0:             filterUnits="objectBoundingBox"
michael@0:             x="0%" y="0%" width="100%" height="100%"
michael@0:             color-interpolation-filters="sRGB">
michael@0:       <feColorMatrix type="matrix" values="0 1 0 0 0
michael@0:                                            1 0 0 0 0
michael@0:                                            0 0 1 0 0
michael@0:                                            0 0 0 1 0" in="FillPaint"/>
michael@0:     </filter>
michael@0:     <filter id="flood-userSpace-atZero"
michael@0:             filterUnits="userSpaceOnUse"
michael@0:             x="0" y="0" width="100" height="100"
michael@0:             color-interpolation-filters="sRGB">
michael@0:       <feFlood flood-color="lime"/>
michael@0:     </filter>
michael@0:     <filter id="matrix-userSpace-atZero"
michael@0:             filterUnits="userSpaceOnUse"
michael@0:             x="0" y="0" width="100" height="100"
michael@0:             color-interpolation-filters="sRGB">
michael@0:       <feColorMatrix type="matrix" values="0 1 0 0 0
michael@0:                                            1 0 0 0 0
michael@0:                                            0 0 1 0 0
michael@0:                                            0 0 0 1 0"/>
michael@0:     </filter>
michael@0:     <filter id="flood-userSpace-at100"
michael@0:             filterUnits="userSpaceOnUse"
michael@0:             x="100" y="100" width="100" height="100"
michael@0:             color-interpolation-filters="sRGB">
michael@0:       <feFlood flood-color="lime"/>
michael@0:     </filter>
michael@0:     <filter id="matrix-userSpace-at100"
michael@0:             filterUnits="userSpaceOnUse"
michael@0:             x="100" y="100" width="100" height="100"
michael@0:             color-interpolation-filters="sRGB">
michael@0:       <feColorMatrix type="matrix" values="0 1 0 0 0
michael@0:                                            1 0 0 0 0
michael@0:                                            0 0 1 0 0
michael@0:                                            0 0 0 1 0"/>
michael@0:     </filter>
michael@0:     <filter id="matrix-fillPaint-userSpace-at100"
michael@0:             filterUnits="userSpaceOnUse"
michael@0:             x="100" y="100" width="100" height="100"
michael@0:             color-interpolation-filters="sRGB">
michael@0:       <feColorMatrix type="matrix" values="0 1 0 0 0
michael@0:                                            1 0 0 0 0
michael@0:                                            0 0 1 0 0
michael@0:                                            0 0 0 1 0" in="FillPaint"/>
michael@0:     </filter>
michael@0:     <mask id="boundingBox" maskContentUnits="objectBoundingBox">
michael@0:       <rect x="0" y="0" width="1" height="1" fill="white"/>
michael@0:     </mask>
michael@0:     <mask id="userSpace-atZero" maskContentUnits="userSpaceOnUse">
michael@0:       <rect x="0" y="0" width="100" height="100" fill="white"/>
michael@0:     </mask>
michael@0:     <mask id="userSpace-at100" maskContentUnits="userSpaceOnUse">
michael@0:       <rect x="100" y="100" width="100" height="100" fill="white"/>
michael@0:     </mask>
michael@0:     <g id="usedRect">
michael@0:       <rect class="fillColor" width="100" height="100"/>
michael@0:     </g>
michael@0:   </defs>
michael@0:   <g transform="translate(40,40)">
michael@0:     <rect stroke-width="1" stroke="black" fill="none" x="99.5" y="99.5" width="101" height="101"/>
michael@0: 
michael@0:     <rect x="0" y="100" width="100" height="100" class="fillColor offsetContainer" id="rect"/>
michael@0:     <use xlink:href="#usedRect" x="0" y="100" class="offsetContainer" id="use"/>
michael@0:     <svg x="0" y="100" width="100" height="100" class="offsetContainer" id="innerSVG">
michael@0:       <rect class="fillColor" width="100" height="100"/>
michael@0:     </svg>
michael@0:     <foreignObject x="0" y="100" width="100" height="100" class="offsetContainer" id="foreignObject">
michael@0:       <svg width="100" height="100">
michael@0:         <rect class="fillColor" width="100" height="100"/>
michael@0:       </svg>
michael@0:     </foreignObject>
michael@0:   </g>
michael@0:   <script><![CDATA[
michael@0: 
michael@0: var options = {
michael@0:   offsetContainer: "rect",
michael@0:   filter: null,
michael@0:   mask: null,
michael@0:   updateOffsetOn: "reftestInvalidate" // | "initial" | "timeout"
michael@0: };
michael@0: 
michael@0: location.search.substr(1).split("&").forEach(function (s) {
michael@0:   var pv = s.split("=");
michael@0:   options[pv[0]] = pv[1] || true;
michael@0: });
michael@0: 
michael@0: var offsetContainer = document.getElementById(options.offsetContainer);
michael@0: 
michael@0: function updateOffsetNow() {
michael@0:   offsetContainer.setAttribute("x", "100");
michael@0: }
michael@0: 
michael@0: function updateOffsetOnReftestInvalidate() {
michael@0:   document.documentElement.setAttribute("class", "reftest-wait");
michael@0:   document.addEventListener("MozReftestInvalidate", function () {
michael@0:     updateOffsetNow();
michael@0:     document.documentElement.removeAttribute("class");
michael@0:   }, false);
michael@0: }
michael@0: 
michael@0: function updateOffsetOnTimeout() {
michael@0:   setTimeout(updateOffsetNow, 500);
michael@0: }
michael@0: 
michael@0: options.updateOffset = options.updateOffsetOn == "initial" ? updateOffsetNow :
michael@0:                          (options.updateOffsetOn == "timeout" ? updateOffsetOnTimeout :
michael@0:                           updateOffsetOnReftestInvalidate);
michael@0: 
michael@0: var offsetContainers = Array.prototype.slice.call(document.getElementsByClassName("offsetContainer"), 0);
michael@0: for (var i = 0; i < offsetContainers.length; i++) {
michael@0:   if (offsetContainers[i] != offsetContainer) {
michael@0:     offsetContainers[i].parentNode.removeChild(offsetContainers[i]);
michael@0:   }
michael@0: }
michael@0: 
michael@0: var fillColor = options.filter ? "red" : "lime";
michael@0: if (options.filter) {
michael@0:   offsetContainer.setAttribute("filter", "url(#" + options.filter + ")");
michael@0: }
michael@0: if (options.mask) {
michael@0:   offsetContainer.setAttribute("mask", "url(#" + options.mask + ")");
michael@0: }
michael@0: 
michael@0: var fillColors = document.getElementsByClassName("fillColor");
michael@0: for (var j = 0; j < fillColors.length; j++) {
michael@0:   fillColors[j].setAttribute("fill", fillColor);
michael@0: }
michael@0: 
michael@0: options.updateOffset();
michael@0: 
michael@0: ]]></script>
michael@0: </svg>