intrinsic-ratio-replaced-box-sizing.html (1298B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Replaced sizing should account properly for border-box sizing</title> 4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> 5 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1978106"> 6 <link rel="match" href="intrinsic-ratio-replaced-box-sizing-ref.html"> 7 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 8 <link rel="author" title="Mozilla" href="https://mozilla.com"> 9 <style> 10 svg, img { 11 margin: 5px; 12 border: 10px solid grey; 13 } 14 15 .border-box { 16 box-sizing: border-box; 17 } 18 19 div { 20 display: inline-block; 21 margin: 10px; 22 border: 1px solid black; 23 width: 100px; 24 height: 100px; 25 } 26 </style> 27 <div> 28 <img src="data:image/svg+xml;charset=UTF-8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='lime'/></svg>"> 29 </div> 30 <div> 31 <img src="data:image/svg+xml;charset=UTF-8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='lime'/></svg>" class="border-box"> 32 </div> 33 <div> 34 <svg viewBox="0 0 100 100"><rect width="100%" height="100%" fill="lime"></rect></svg> 35 </div> 36 <div> 37 <svg viewBox="0 0 100 100" class="border-box"><rect width="100%" height="100%" fill="lime"></rect></svg> 38 </div>