third_party/WebKit/LayoutTests/svg/as-background-image/background-image-preserveaspectRatio-support.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>preserveAspectRatio test for background-image</title>
   5     <style>
   6         th {
   7             background-color: #dd9;
   8             font-family: sans-serif;
   9         }
  10
  11         img, div {
  12             /* background-color: #EBF; */
  13             border: 2px dashed maroon;
  14             height: 50px;
  15             left: 100px;
  16             overflow: visible;
  17             padding: 3px;
  18             top: 20px;
  19             width: 200px;
  20             box-sizing: border-box;
  21         }
  22     </style>
  23 </head>
  24 <body>
  25     <table>
  26         <tr>
  27             <th>
  28                 viewBox?
  29             </th>
  30             <th>
  31                 preserve&shy;Aspect&shy;Ratio
  32             </th>
  33             <th>
  34                 &lt;img&gt;
  35             </th>
  36             <th>
  37                 &lt;div&gt;
  38             </th>
  39         </tr>
  40         <tr>
  41             <th rowspan=4>
  42                 No viewBox
  43             </th>
  44             <th>
  45             </th>
  46             <td>
  47                 <img src="../as-image/resources/circle-default-default.svg" />
  48             </td>
  49             <td>
  50                 <div style="background: url(../as-image/resources/circle-default-default.svg)"></div>
  51             </td>
  52         </tr>
  53         <tr>
  54             <th>
  55                 none
  56             </th>
  57             <td>
  58                 <img src="../as-image/resources/circle-default-none.svg" />
  59             </td>
  60             <td>
  61                 <div style="background: url(../as-image/resources/circle-default-none.svg)"></div>
  62             </td>
  63         </tr>
  64         <tr>
  65             <th>
  66                 meet
  67             </th>
  68             <td>
  69                 <img src="../as-image/resources/circle-default-meet.svg" />
  70             </td>
  71             <td>
  72                 <div style="background: url(../as-image/resources/circle-default-meet.svg)"></div>
  73             </td>
  74         </tr>
  75         <tr>
  76             <th>
  77                 slice
  78             </th>
  79             <td>
  80                 <img src="../as-image/resources/circle-default-slice.svg" />
  81             </td>
  82             <td>
  83                 <div style="background: url(../as-image/resources/circle-default-slice.svg)"></div>
  84             </td>
  85         </tr>
  86         <tr>
  87             <th rowspan=4>
  88                 viewBox
  89             </th>
  90             <th>
  91             </th>
  92             <td>
  93                 <img src="../as-image/resources/circle-viewbox-default.svg" />
  94             </td>
  95             <td>
  96                 <div style="background: url(../as-image/resources/circle-viewbox-default.svg)"></div>
  97             </td>
  98         </tr>
  99         <tr>
 100             <th>
 101                 none
 102             </th>
 103             <td>
 104                 <img src="../as-image/resources/circle-viewbox-none.svg" />
 105             </td>
 106             <td>
 107                 <div style="background: url(../as-image/resources/circle-viewbox-none.svg)"></div>
 108             </td>
 109         </tr>
 110         <tr>
 111             <th>
 112                 meet
 113             </th>
 114             <td>
 115                 <img src="../as-image/resources/circle-viewbox-meet.svg" />
 116             </td>
 117             <td>
 118                 <div style="background: url(../as-image/resources/circle-viewbox-meet.svg)"></div>
 119             </td>
 120         </tr>
 121         <tr>
 122             <th>
 123                 slice
 124             </th>
 125             <td>
 126                 <img src="../as-image/resources/circle-viewbox-slice.svg" />
 127             </td>
 128             <td>
 129                 <div style="background: url(../as-image/resources/circle-viewbox-slice.svg)"></div>
 130             </td>
 131         </tr>
 132     </table>
 133 </body>
 134 </html>