| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>preserveAspectRatio test 1/2</title> |
| <style> |
| th { |
| background-color: #dd9; |
| font-family: sans-serif; |
| } |
| |
| img, object { |
| /* background-color: #EBF; */ |
| border: 2px dashed maroon; |
| height: 50px; |
| left: 100px; |
| overflow: visible; |
| padding: 3px; |
| top: 20px; |
| width: 200px; |
| box-sizing: border-box; |
| } |
| |
| object { |
| border-color: green; |
| border-width: 1px; |
| } |
| </style> |
| </head> |
| <body> |
| <table> |
| <tr> |
| <th> |
| viewBox? |
| </th> |
| <th> |
| preserve­Aspect­Ratio |
| </th> |
| <th> |
| <img> |
| </th> |
| <th> |
| <object> |
| </th> |
| </tr> |
| <tr> |
| <th rowspan=4> |
| No viewBox |
| </th> |
| <th> |
| </th> |
| <td> |
| <img src="resources/circle-default-default.svg" /> |
| </td> |
| <td> |
| <object data="resources/circle-default-default.svg"></object> |
| </td> |
| </tr> |
| <tr> |
| <th> |
| none |
| </th> |
| <td> |
| <img src="resources/circle-default-none.svg" /> |
| </td> |
| <td> |
| <object data="resources/circle-default-none.svg"></object> |
| </td> |
| </tr> |
| <tr> |
| <th> |
| meet |
| </th> |
| <td> |
| <img src="resources/circle-default-meet.svg" /> |
| </td> |
| <td> |
| <object data="resources/circle-default-meet.svg"></object> |
| </td> |
| </tr> |
| <tr> |
| <th> |
| slice |
| </th> |
| <td> |
| <img src="resources/circle-default-slice.svg" /> |
| </td> |
| <td> |
| <object data="resources/circle-default-slice.svg"></object> |
| </td> |
| </tr> |
| <tr> |
| <th rowspan=4> |
| viewBox |
| </th> |
| <th> |
| </th> |
| <td> |
| <img src="resources/circle-viewbox-default.svg" /> |
| </td> |
| <td> |
| <object data="resources/circle-viewbox-default.svg"></object> |
| </td> |
| </tr> |
| <tr> |
| <th> |
| none |
| </th> |
| <td> |
| <img src="resources/circle-viewbox-none.svg" /> |
| </td> |
| <td> |
| <object data="resources/circle-viewbox-none.svg"></object> |
| </td> |
| </tr> |
| <tr> |
| <th> |
| meet |
| </th> |
| <td> |
| <img src="resources/circle-viewbox-meet.svg" /> |
| </td> |
| <td> |
| <object data="resources/circle-viewbox-meet.svg"></object> |
| </td> |
| </tr> |
| <tr> |
| <th> |
| slice |
| </th> |
| <td> |
| <img src="resources/circle-viewbox-slice.svg" /> |
| </td> |
| <td> |
| <object data="resources/circle-viewbox-slice.svg"></object> |
| </td> |
| </tr> |
| </table> |
| </body> |
| </html> |
