block-height-001.html (3383B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width"> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <script src="/resources/check-layout-th.js"></script> 6 <meta name="assert" content="Checks the behaviour of stretch in various configurations."> 7 <style> 8 .content { 9 width: 20px; 10 height: 20px; 11 background: lime; 12 } 13 .tall-content { 14 width: 20px; 15 height: 120px; 16 background: lime; 17 } 18 </style> 19 <body onload="checkLayout('[data-expected-height]')"> 20 21 <div style="height: 100px;"> 22 <div data-expected-height=100 style="display: block; height: stretch;"> 23 <div class=content></div> 24 </div> 25 </div> 26 27 <div style="height: 100px;"> 28 <div data-expected-height=100 style="display: flex; height: stretch;"> 29 <div class=content></div> 30 </div> 31 </div> 32 33 <div style="height: 100px;"> 34 <div data-expected-height=100 style="display: grid; height: stretch;"> 35 <div class=content></div> 36 </div> 37 </div> 38 39 <!-- As the height of the container is indefinite, stretch is treated as auto. --> 40 <div style="height: 100%;"> 41 <div data-expected-height=20 style="display: block; height: stretch;"> 42 <div class=content></div> 43 </div> 44 </div> 45 46 <div style="height: 100%;"> 47 <div data-expected-height=20 style="display: flex; height: stretch;"> 48 <div class=content></div> 49 </div> 50 </div> 51 52 <div style="height: 100%;"> 53 <div data-expected-height=20 style="display: grid; height: stretch;"> 54 <div class=content></div> 55 </div> 56 </div> 57 58 <div style="height: 100px;"> 59 <div data-expected-height=100 style="display: block; min-height: stretch;"> 60 <div class=content></div> 61 </div> 62 </div> 63 64 <div style="height: 100px;"> 65 <div data-expected-height=100 style="display: flex; min-height: stretch;"> 66 <div class=content></div> 67 </div> 68 </div> 69 70 <div style="height: 100px;"> 71 <div data-expected-height=100 style="display: grid; min-height: stretch;"> 72 <div class=content></div> 73 </div> 74 </div> 75 76 <div style="height: 100%;"> 77 <div data-expected-height=20 style="display: block; min-height: stretch;"> 78 <div class=content></div> 79 </div> 80 </div> 81 82 <div style="height: 100%;"> 83 <div data-expected-height=20 style="display: flex; min-height: stretch;"> 84 <div class=content></div> 85 </div> 86 </div> 87 88 <div style="height: 100%;"> 89 <div data-expected-height=20 style="display: grid; min-height: stretch;"> 90 <div class=content></div> 91 </div> 92 </div> 93 94 <div style="height: 100px;"> 95 <div data-expected-height=100 style="display: block; max-height: stretch;"> 96 <div class=tall-content></div> 97 </div> 98 </div> 99 100 <div style="height: 100px;"> 101 <div data-expected-height=100 style="display: flex; max-height: stretch;"> 102 <div class=tall-content></div> 103 </div> 104 </div> 105 106 <div style="height: 100px;"> 107 <div data-expected-height=100 style="display: grid; max-height: stretch;"> 108 <div class=tall-content></div> 109 </div> 110 </div> 111 112 <div style="height: 100%;"> 113 <div data-expected-height=120 style="display: block; max-height: stretch;"> 114 <div class=tall-content></div> 115 </div> 116 </div> 117 118 <div style="height: 100%;"> 119 <div data-expected-height=120 style="display: flex; max-height: stretch;"> 120 <div class=tall-content></div> 121 </div> 122 </div> 123 124 <div style="height: 100%;"> 125 <div data-expected-height=120 style="display: grid; max-height: stretch;"> 126 <div class=tall-content></div> 127 </div> 128 </div>