intrinsic-percent-replaced-020.html (1387B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 4 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-sizes"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1748339"> 7 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 8 9 <style> 10 .outer { 11 width: 100px; 12 } 13 14 .photogallery-wrapper { 15 height: 0px; 16 padding-top: 80%; 17 position: relative; 18 box-sizing: border-box; 19 border: 10px solid green; 20 } 21 22 .photogallery-swiper { 23 position: absolute; 24 top: 0; 25 left: 0; 26 width: 100%; 27 height: 100%; 28 } 29 30 .swiper-slide { 31 width: 100%; 32 height: 100%; 33 position: relative; 34 display: flex; 35 box-sizing: border-box; 36 border: 10px solid green; 37 } 38 39 .img-wrapper { 40 height: 100%; 41 border: 10px solid green; 42 box-sizing: border-box; 43 } 44 45 svg { 46 max-height: 100%; 47 width: 100%; 48 display: block; 49 } 50 </style> 51 52 <p>Test passes if there is a filled green square.</p> 53 <div class="outer"> 54 <div class="photogallery-wrapper"> 55 <div class="photogallery-swiper"> 56 <div class="swiper-slide"> 57 <div class="img-wrapper"> 58 <svg width="400" height="400"> 59 <rect height="100%" width="100%" fill="green"></rect> 60 </svg> 61 </div> 62 </div> 63 </div> 64 </div> 65 </div>