| <!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­Aspect­Ratio | |
| </th> | |
| <th> | |
| <img> | |
| </th> | |
| <th> | |
| <div> | |
| </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> |