layout/reftests/transform/transform-box-svg-3a.svg

   1 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none">
   2   <style>
   3     /* <![CDATA[ */
   4     .ref {
   5       fill: red;
   6     }
   7     .test {
   8       fill: lime;
   9     }
  10     /* ]]> */
  11   </style>
  12   <rect width="100%" height="100%" fill="lime"/>
  13   <!-- all rect.test rects should be covered by the corresponded rest.ref rect-->
  14   <!-- 1st row: transform-box only. -->
  15   <rect class="ref"
  16         x="11" y="11" width="8" height="8"/>
  17   <rect class="test"
  18         style="transform-box: view-box"
  19         x="10" y="10" width="10" height="10"/>
  20   <rect class="ref"
  21         x="26" y="11" width="8" height="8"/>
  22   <rect class="test"
  23         style="transform-box: fill-box"
  24         x="25" y="10" width="10" height="10"/>
  25   <rect class="ref"
  26         x="41" y="11" width="8" height="8"/>
  27   <rect class="test"
  28         style="transform-box: border-box"
  29         x="40" y="10" width="10" height="10"/>
  30
  31   <!-- 2nd row: transform-box plus transform-origin. -->
  32   <rect class="ref"
  33         x="11" y="26" width="8" height="8"/>
  34   <rect class="test"
  35         style="transform-box: view-box; transform-origin: 40% 60%"
  36         x="10" y="25" width="10" height="10"/>
  37   <rect class="ref"
  38         x="26" y="26" width="8" height="8"/>
  39   <rect class="test"
  40         style="transform-box: fill-box; transform-origin: 20px 10px"
  41         x="25" y="25" width="10" height="10"/>
  42   <rect class="ref"
  43         x="41" y="26" width="8" height="8"/>
  44   <rect class="test"
  45         style="transform-box: border-box; transform-origin: 40% 60%"
  46         x="40" y="25" width="10" height="10"/>
  47
  48   <!-- 3rd row: transform-box, transform-origin and transform. -->
  49   <rect class="ref"
  50         x="11" y="46" width="8" height="8"/>
  51   <rect class="test"
  52         style="transform-box: fill-box; transform-origin: 0% 0%; transform: scale(2);"
  53         x="10" y="45" width="5" height="5"/>
  54   <rect class="ref"
  55         x="26" y="46" width="8" height="8"/>
  56   <rect class="test"
  57         style="transform-box: fill-box; transform-origin: 50% 50%; transform:rotate(45deg);"
  58         x="24" y="44" width="12" height="12"/>
  59   <rect class="ref"
  60         x="41" y="46" width="8" height="8"/>
  61   <rect class="test"
  62         style="transform-box: border-box; transform-origin: 100% 100%; transform: scale(1);"
  63         x="40" y="45" width="10" height="10"/>
  64 </svg>