background-size-044.html (1800B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Backgrounds and Borders Test: background-size with <percent> value and 'auto' and image with no intrinsic size and no intrinsic ratio</title> 6 7 <!-- 8 Credit should go to Henrik Andersson 9 for originally reporting this issue. 10 --> 11 12 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 13 <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> 14 15 <!-- 16 17 [css-backgrounds] [css-images] Interop for sizing gradients with only width 18 http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html 19 20 Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect 21 https://bugs.chromium.org/p/chromium/issues/detail?id=935057 22 23 Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered 24 https://bugs.webkit.org/show_bug.cgi?id=170834 25 26 --> 27 28 <link rel="match" href="reference/background-size-043-ref.html"> 29 30 <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert"> 31 32 <style> 33 div 34 { 35 background-clip: border-box; 36 background-image: url("support/orange-intrinsic-none.svg"); 37 background-origin: content-box; 38 background-position: center; 39 background-repeat: no-repeat; 40 background-size: 50% auto; 41 border: solid 40px; 42 border-color: transparent black; 43 height: 400px; 44 width: 400px; 45 } 46 </style> 47 48 <div></div>