percent-height-overflowing-image-1.html (3512B)
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Testcase for %-height potentially-overflowing images</title> 5 <!-- This test exercises a series of scenarios where the presence of 6 scrollbars affects the layout in a way that may make those scrollbars 7 unnecessary. Specifically, we have a series of examples here 8 with a scrollable div, where... 9 - The child's width depends on its container's height, via 10 its aspect ratio and via having a percent-height. 11 - *Without* scrollbars, the child is too wide and causes horizontal 12 overflow. 13 - If we *add* a horizontal scrollbar (which occupies vertical space), 14 the child's height is reduced (on platforms where scrollbars take up 15 space) and so its width is reduced as well, and it might not 16 cause horizontal overflow beyond its parent's border-box anymore. 17 This creates a bit of a paradox. We resolve it by opting to show 18 scrollbars, to be on the safe side & to make sure that we don't 19 have any unreachable content. 20 --> 21 <style> 22 .container { 23 overflow: auto; 24 height: 80px; 25 border: 2px solid purple; 26 margin: 1px; 27 display: inline-block; 28 } 29 .percent-size { 30 display: block; 31 height: 100%; 32 border: 2px solid black; 33 box-sizing: border-box; 34 } 35 </style> 36 </head> 37 <body> 38 <!-- Here, the div is extremely skinny; there'll definitely be horizontal 39 overflow (but not vertical), so we should just show the horizontal 40 scrollbar: --> 41 <div class="container" style="width: 50px; height: 120px"> 42 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 43 </div> 44 <div class="container" style="width: 60px; height: 120px"> 45 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 46 </div> 47 <br> 48 49 <!-- Here, the div is nearly wide enough to avoid overflow, but not quite. On 50 platforms where scrollbars occupy layout-space, the presence of any 51 horizontal scrollbar here will reduce the height of the child, and (via 52 the child's aspect ratio) reduce the width of the child, such that the 53 child ends up skinnier than the parent's width and won't overflow the 54 parent's border-box anymore. We resolve this by just throwing up our 55 hands and showing *both* scrollbars (horizontal and vertical). --> 56 <div class="container" style="width: 78px"> 57 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 58 </div> 59 <div class="container" style="width: 79px"> 60 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 61 </div> 62 <br> 63 64 <!-- Here, the div is wide enough so that no scrollbars are needed. --> 65 <div class="container" style="width: 80px"> 66 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 67 </div> 68 <div class="container" style="width: 90px"> 69 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 70 </div> 71 </body>