Google Git
Sign in
nest-open-source / manifest_repos / chromium_src / 1389d67935ffbffe8a70c1fa06867f6cf7ecf464 / . / chromium / src / third_party / blink / web_tests / svg / as-background-image / background-image-preserveaspectRatio-support.html
blob: e5e8d2f4e4084a98c1b1ebfe38efc5456a4e9619 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>preserveAspectRatio test for background-image</title>
<style>
th {
background-color: #dd9;
font-family: sans-serif;
}
img, div {
/* background-color: #EBF; */
border: 2px dashed maroon;
height: 50px;
left: 100px;
overflow: visible;
padding: 3px;
top: 20px;
width: 200px;
box-sizing: border-box;
}
</style>
</head>
<body>
<table>
<tr>
<th>
viewBox?
</th>
<th>
preserve&shy;Aspect&shy;Ratio
</th>
<th>
&lt;img&gt;
</th>
<th>
&lt;div&gt;
</th>
</tr>
<tr>
<th rowspan=4>
No viewBox
</th>
<th>
</th>
<td>
<img src="../as-image/resources/circle-default-default.svg" />
</td>
<td>
<div style="background: url(../as-image/resources/circle-default-default.svg)"></div>
</td>
</tr>
<tr>
<th>
none
</th>
<td>
<img src="../as-image/resources/circle-default-none.svg" />
</td>
<td>
<div style="background: url(../as-image/resources/circle-default-none.svg)"></div>
</td>
</tr>
<tr>
<th>
meet
</th>
<td>
<img src="../as-image/resources/circle-default-meet.svg" />
</td>
<td>
<div style="background: url(../as-image/resources/circle-default-meet.svg)"></div>
</td>
</tr>
<tr>
<th>
slice
</th>
<td>
<img src="../as-image/resources/circle-default-slice.svg" />
</td>
<td>
<div style="background: url(../as-image/resources/circle-default-slice.svg)"></div>
</td>
</tr>
<tr>
<th rowspan=4>
viewBox
</th>
<th>
</th>
<td>
<img src="../as-image/resources/circle-viewbox-default.svg" />
</td>
<td>
<div style="background: url(../as-image/resources/circle-viewbox-default.svg)"></div>
</td>
</tr>
<tr>
<th>
none
</th>
<td>
<img src="../as-image/resources/circle-viewbox-none.svg" />
</td>
<td>
<div style="background: url(../as-image/resources/circle-viewbox-none.svg)"></div>
</td>
</tr>
<tr>
<th>
meet
</th>
<td>
<img src="../as-image/resources/circle-viewbox-meet.svg" />
</td>
<td>
<div style="background: url(../as-image/resources/circle-viewbox-meet.svg)"></div>
</td>
</tr>
<tr>
<th>
slice
</th>
<td>
<img src="../as-image/resources/circle-viewbox-slice.svg" />
</td>
<td>
<div style="background: url(../as-image/resources/circle-viewbox-slice.svg)"></div>
</td>
</tr>
</table>
</body>
</html>