overflow-area-003.html (3389B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Flexible Box Layout Test: Test flex container's overflow rect</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 7 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> 8 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1712496"> 9 <link rel="match" href="reference/overflow-area-003-ref.html"> 10 <meta name="assert" content="This test verifies that a flex container's padding rect should not not affect its overflow rect at all."> 11 12 <style> 13 .set { 14 clear: both; 15 margin: 1em; 16 } 17 18 .test { 19 display: flex; 20 overflow: auto; 21 padding: 10px; 22 width: 60px; 23 height: 60px; 24 background: teal; 25 margin: 0.5em; 26 float: left; 27 } 28 29 .item { 30 width: 10px; 31 height: 10px; 32 } 33 34 .absolute { 35 position: absolute; 36 } 37 38 .center { 39 justify-content: center; 40 align-items: center 41 } 42 43 .relative { 44 position: relative; 45 } 46 47 .relative > .item { 48 flex-shrink: 0; 49 width: 60px; 50 height: 60px; 51 } 52 53 .top-left { 54 left: -10px; 55 top: -10px; 56 } 57 58 .bottom-right { 59 bottom: -10px; 60 right: -10px; 61 } 62 </style> 63 64 <p>Test passes if all the teal boxes have no scrollbars.</p> 65 66 <!-- This set tests empty flex containers. --> 67 <div class="set"> 68 <div class="test" style="flex-direction: row;"></div> 69 <div class="test" style="flex-direction: column;"></div> 70 <div class="test" style="flex-direction: row-reverse;"></div> 71 <div class="test" style="flex-direction: column-reverse;"></div> 72 </div> 73 74 <!-- This set tests flex containers having only a abs-pos child, but no flex items. --> 75 <div class="set"> 76 <div class="test" style="flex-direction: row;"> 77 <div class="absolute item"></div> 78 </div> 79 <div class="test" style="flex-direction: column;"> 80 <div class="absolute item"></div> 81 </div> 82 <div class="test" style="flex-direction: row-reverse;"> 83 <div class="absolute item"></div> 84 </div> 85 <div class="test" style="flex-direction: column-reverse;"> 86 <div class="absolute item"></div> 87 </div> 88 </div> 89 90 <!-- This set tests flex containers having a small centered flex item. --> 91 <div class="set"> 92 <div class="test center" style="flex-direction: row;"> 93 <div class="item"></div> 94 </div> 95 <div class="test center" style="flex-direction: column;"> 96 <div class="item"></div> 97 </div> 98 <div class="test center" style="flex-direction: row-reverse;"> 99 <div class="item"></div> 100 </div> 101 <div class="test center" style="flex-direction: column-reverse;"> 102 <div class="item"></div> 103 </div> 104 </div> 105 106 <!-- This set tests flex containers having a relative positioned flex item. --> 107 <div class="set"> 108 <div class="test relative" style="flex-direction: row;"> 109 <div class="item relative bottom-right"></div> 110 </div> 111 <div class="test relative" style="flex-direction: column;"> 112 <div class="item relative bottom-right"></div> 113 </div> 114 <div class="test relative" style="flex-direction: row-reverse;"> 115 <div class="item relative top-left"></div> 116 </div> 117 <div class="test relative" style="flex-direction: column-reverse;"> 118 <div class="item relative top-left"></div> 119 </div> 120 </div> 121 122 </html>