background-size-contain-svg-view.html (675B)
1 <!DOCTYPE html> 2 <title>SVG <view>-based sprites in background-image, background-size: contain</title> 3 <link rel="help" href="https://drafts.csswg.org/css-backgrounds/#background-size"> 4 <link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> 5 <style> 6 #target { 7 width: 100px; 8 height: 100px; 9 background-image: url('support/sprite-view-no-viewbox.svg#rect'); 10 background-repeat: no-repeat; 11 background-position: 50%; 12 border: 25px solid green; 13 box-sizing: border-box; 14 background-origin: border-box; 15 background-size: contain; 16 } 17 </style> 18 <p>Test passes if there is a filled green square.</p> 19 <div id="target"></div>