layout/reftests/svg/viewBox-invalid-01.svg

   1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
   2      xmlns:xlink="http://www.w3.org/1999/xlink">
   3   <title>Testing invalid values for |viewBox| attribute</title>
   4   <defs>
   5     <rect id="redRect"  fill="red"  height="10" width="10"/>
   6     <rect id="limeRect" fill="lime" height="10" width="10"/>
   7   </defs>
   8   <rect fill="lime" height="100%" width="100%"/>
   9
  10   <!-- SUMMARY: Each <svg> subdocument below has an invalid viewBox. If we
  11        honor the invalid viewBox (ignoring typos), that will make us scale
  12        the <use>'d redRect to appear larger than the limeRect, and we'll have
  13        some red showing (and we'll fail the test). -->
  14
  15   <!-- First row: Initial comma(s) -->
  16   <g transform="translate(0, 0)">
  17     <g transform="translate(0, 0)">
  18       <svg width="20" height="20" viewBox=",0,0,1,1">
  19         <use xlink:href="#redRect"/>
  20       </svg><use xlink:href="#limeRect"/>
  21     </g>
  22     <g transform="translate(40, 0)">
  23       <svg width="20" height="20" viewBox=",,0,0,1,1">
  24         <use xlink:href="#redRect"/>
  25       </svg><use xlink:href="#limeRect"/>
  26     </g>
  27     <g transform="translate(80, 0)">
  28       <svg width="20" height="20" viewBox=", ,0,0,1,1">
  29         <use xlink:href="#redRect"/>
  30       </svg><use xlink:href="#limeRect"/>
  31     </g>
  32     <g transform="translate(120, 0)">
  33       <svg width="20" height="20" viewBox=", 0,0,1,1">
  34         <use xlink:href="#redRect"/>
  35       </svg><use xlink:href="#limeRect"/>
  36     </g>
  37     <g transform="translate(160, 0)">
  38       <svg width="20" height="20" viewBox=",,, 0,0,1,1">
  39         <use xlink:href="#redRect"/>
  40       </svg><use xlink:href="#limeRect"/>
  41     </g>
  42   </g>
  43   <!-- Second row: Trailing comma(s) -->
  44   <g transform="translate(0, 40)">
  45     <g transform="translate(0, 0)">
  46       <svg width="20" height="20" viewBox="0,0,1,1,">
  47         <use xlink:href="#redRect"/>
  48       </svg><use xlink:href="#limeRect"/>
  49     </g>
  50     <g transform="translate(40, 0)">
  51       <svg width="20" height="20" viewBox="0,0,1,1 ,">
  52         <use xlink:href="#redRect"/>
  53       </svg><use xlink:href="#limeRect"/>
  54     </g>
  55     <g transform="translate(80, 0)">
  56       <svg width="20" height="20" viewBox="0,0,1,1,,">
  57         <use xlink:href="#redRect"/>
  58       </svg><use xlink:href="#limeRect"/>
  59     </g>
  60     <g transform="translate(120, 0)">
  61       <svg width="20" height="20" viewBox="0,0,1,1, ,">
  62         <use xlink:href="#redRect"/>
  63       </svg><use xlink:href="#limeRect"/>
  64     </g>
  65     <g transform="translate(160, 0)">
  66       <svg width="20" height="20" viewBox="0,0,1,1 ,,,">
  67         <use xlink:href="#redRect"/>
  68       </svg><use xlink:href="#limeRect"/>
  69     </g>
  70   </g>
  71   <!-- Third row: Repeated commas in the middle -->
  72   <g transform="translate(0, 80)">
  73     <g transform="translate(0, 0)">
  74       <svg width="20" height="20" viewBox="0,,0,1,1">
  75         <use xlink:href="#redRect"/>
  76       </svg><use xlink:href="#limeRect"/>
  77     </g>
  78     <g transform="translate(40, 0)">
  79       <svg width="20" height="20" viewBox="0,,,0,1,1">
  80         <use xlink:href="#redRect"/>
  81       </svg><use xlink:href="#limeRect"/>
  82     </g>
  83     <g transform="translate(80, 0)">
  84       <svg width="20" height="20" viewBox="0, ,0,1,1">
  85         <use xlink:href="#redRect"/>
  86       </svg><use xlink:href="#limeRect"/>
  87     </g>
  88     <g transform="translate(120, 0)">
  89       <svg width="20" height="20" viewBox="0 0,, 1,1">
  90         <use xlink:href="#redRect"/>
  91       </svg><use xlink:href="#limeRect"/>
  92     </g>
  93     <g transform="translate(160, 0)">
  94       <svg width="20" height="20" viewBox="0 0,,1 1">
  95         <use xlink:href="#redRect"/>
  96       </svg><use xlink:href="#limeRect"/>
  97     </g>
  98   </g>
  99   <!-- Fourth row: wrong number of values -->
 100   <g transform="translate(0, 120)">
 101     <g transform="translate(0, 0)">
 102       <svg width="20" height="20" viewBox="">
 103         <use xlink:href="#redRect"/>
 104       </svg><use xlink:href="#limeRect"/>
 105     </g>
 106     <g transform="translate(40, 0)">
 107       <svg width="20" height="20" viewBox="0">
 108         <use xlink:href="#redRect"/>
 109       </svg><use xlink:href="#limeRect"/>
 110     </g>
 111     <g transform="translate(80, 0)">
 112       <svg width="20" height="20" viewBox="0 0">
 113         <use xlink:href="#redRect"/>
 114       </svg><use xlink:href="#limeRect"/>
 115     </g>
 116     <g transform="translate(120, 0)">
 117       <svg width="20" height="20" viewBox="0 0 1">
 118         <use xlink:href="#redRect"/>
 119       </svg><use xlink:href="#limeRect"/>
 120     </g>
 121     <g transform="translate(160, 0)">
 122       <svg width="20" height="20" viewBox="0 0 1 1 1 ">
 123         <use xlink:href="#redRect"/>
 124       </svg><use xlink:href="#limeRect"/>
 125     </g>
 126   </g>
 127 </svg>