<!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>