layout/reftests/invalidation/filter-userspace-offset.svg

   1 <svg
   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"
   4   >
   5   <title>Filters and offsets, user space origins, invalidation</title>
   6   <defs>
   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"/>
  12     </filter>
  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
  18                                            1 0 0 0 0
  19                                            0 0 1 0 0
  20                                            0 0 0 1 0"/>
  21     </filter>
  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
  27                                            1 0 0 0 0
  28                                            0 0 1 0 0
  29                                            0 0 0 1 0" in="FillPaint"/>
  30     </filter>
  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"/>
  36     </filter>
  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
  42                                            1 0 0 0 0
  43                                            0 0 1 0 0
  44                                            0 0 0 1 0"/>
  45     </filter>
  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"/>
  51     </filter>
  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
  57                                            1 0 0 0 0
  58                                            0 0 1 0 0
  59                                            0 0 0 1 0"/>
  60     </filter>
  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
  66                                            1 0 0 0 0
  67                                            0 0 1 0 0
  68                                            0 0 0 1 0" in="FillPaint"/>
  69     </filter>
  70     <mask id="boundingBox" maskContentUnits="objectBoundingBox">
  71       <rect x="0" y="0" width="1" height="1" fill="white"/>
  72     </mask>
  73     <mask id="userSpace-atZero" maskContentUnits="userSpaceOnUse">
  74       <rect x="0" y="0" width="100" height="100" fill="white"/>
  75     </mask>
  76     <mask id="userSpace-at100" maskContentUnits="userSpaceOnUse">
  77       <rect x="100" y="100" width="100" height="100" fill="white"/>
  78     </mask>
  79     <g id="usedRect">
  80       <rect class="fillColor" width="100" height="100"/>
  81     </g>
  82   </defs>
  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"/>
  85
  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"/>
  90     </svg>
  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"/>
  94       </svg>
  95     </foreignObject>
  96   </g>
  97   <script><![CDATA[
  98
  99 var options = {
 100   offsetContainer: "rect",
 101   filter: null,
 102   mask: null,
 103   updateOffsetOn: "reftestInvalidate" // | "initial" | "timeout"
 104 };
 105
 106 location.search.substr(1).split("&").forEach(function (s) {
 107   var pv = s.split("=");
 108   options[pv[0]] = pv[1] || true;
 109 });
 110
 111 var offsetContainer = document.getElementById(options.offsetContainer);
 112
 113 function updateOffsetNow() {
 114   offsetContainer.setAttribute("x", "100");
 115 }
 116
 117 function updateOffsetOnReftestInvalidate() {
 118   document.documentElement.setAttribute("class", "reftest-wait");
 119   document.addEventListener("MozReftestInvalidate", function () {
 120     updateOffsetNow();
 121     document.documentElement.removeAttribute("class");
 122   }, false);
 123 }
 124
 125 function updateOffsetOnTimeout() {
 126   setTimeout(updateOffsetNow, 500);
 127 }
 128
 129 options.updateOffset = options.updateOffsetOn == "initial" ? updateOffsetNow :
 130                          (options.updateOffsetOn == "timeout" ? updateOffsetOnTimeout :
 131                           updateOffsetOnReftestInvalidate);
 132
 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]);
 137   }
 138 }
 139
 140 var fillColor = options.filter ? "red" : "lime";
 141 if (options.filter) {
 142   offsetContainer.setAttribute("filter", "url(#" + options.filter + ")");
 143 }
 144 if (options.mask) {
 145   offsetContainer.setAttribute("mask", "url(#" + options.mask + ")");
 146 }
 147
 148 var fillColors = document.getElementsByClassName("fillColor");
 149 for (var j = 0; j < fillColors.length; j++) {
 150   fillColors[j].setAttribute("fill", fillColor);
 151 }
 152
 153 options.updateOffset();
 154
 155 ]]></script>
 156 </svg>