1936259.html (1031B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <style> 4 * { box-sizing: border-box; } 5 6 .ImagesViewer-LayoutMain { 7 display: flex; 8 flex-direction: column; 9 width: 200px; 10 height: 200px; 11 } 12 13 .ImagesViewer-LayoutScene { 14 flex-grow: 1; 15 position: relative; 16 } 17 18 .ImagesViewer-View { 19 height: 100%; 20 position: absolute; 21 } 22 .MMImageWrapper { 23 display: flex; 24 flex-direction: column; 25 height: 100%; 26 width: 300px; 27 } 28 29 .MMImageContainer { 30 display: block; 31 margin-right: auto; 32 max-height: 100%; 33 } 34 35 .MMImage-Preview { 36 width: 100%; 37 height: 100%; 38 background: lime; 39 } 40 </style> 41 42 <!-- This test is adapted from Bug 1936259 comment 7 reduced testcase 3. --> 43 <p>There should be a 200x200 lime square.</p> 44 <div class="ImagesViewer-LayoutMain"> 45 <div class="ImagesViewer-LayoutScene"> 46 <div class="ImagesViewer-View"> 47 <div class="SwipeImage MMImageWrapper"> 48 <div class="MMImageContainer"> 49 <canvas class="MMImage-Preview" width="300" height="300"></canvas> 50 </div> 51 </div> 52 </div> 53 </div> 54 </div>