src/third_party/WebKit/LayoutTests/svg/as-image/img-preserveAspectRatio-support-1.html

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