scrollable-overflow-padding.html (7350B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable"> 3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/129"> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <style> 6 scrollable-container { 7 display: block; 8 width: 100px; 9 height: 100px; 10 overflow: scroll; 11 padding: 10px 5px; 12 line-height: 0; 13 } 14 15 scrollable-container > div { 16 position: relative; 17 writing-mode: horizontal-tb; 18 direction: ltr; 19 outline: solid red 2px; 20 } 21 </style> 22 <script src="/resources/testharness.js"></script> 23 <script src="/resources/testharnessreport.js"></script> 24 <script src="/resources/check-layout-th.js"></script> 25 <body onload="checkLayout('scrollable-container')"> 26 27 <!-- 28 All of these tests have a child which contributes to the "alignment rectangle" ("infow-bounds" in Blink). 29 However doesn't directly contribute to the scrollable-overflow as it is relative-positioned before the 30 "scroll origin" edge(s). 31 32 All of these tests have an inline/block end margin (wrt. the parent writing-mode + direction). 33 --> 34 35 <!-- HTB + LTR --> 36 <div style="writing-mode: horizontal-tb; direction: ltr;"> 37 <scrollable-container data-expected-scroll-height="270"> 38 <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div> 39 </scrollable-container> 40 41 <scrollable-container data-expected-scroll-width="260"> 42 <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px;"></div> 43 </scrollable-container> 44 45 <scrollable-container data-expected-scroll-height="270"> 46 <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div> 47 </scrollable-container> 48 49 <scrollable-container data-expected-scroll-width="260"> 50 <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px; display: inline-block;"></div> 51 </scrollable-container> 52 53 <!-- For this specific case collapsed-margins affect the size of the alignment rectangle. --> 54 <scrollable-container data-expected-scroll-height="270"> 55 <div style="width: 0; margin-bottom: 100px; top: -1000px;"> 56 <div style="height: 200px; margin-bottom: -50px;"></div> 57 </div> 58 </scrollable-container> 59 </div> 60 61 <!-- HTB + RTL --> 62 <div style="writing-mode: horizontal-tb; direction: rtl;"> 63 <scrollable-container data-expected-scroll-height="270"> 64 <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div> 65 </scrollable-container> 66 67 <scrollable-container data-expected-scroll-width="260"> 68 <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px;"></div> 69 </scrollable-container> 70 71 <scrollable-container data-expected-scroll-height="270"> 72 <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div> 73 </scrollable-container> 74 75 <scrollable-container data-expected-scroll-width="260"> 76 <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px; display: inline-block;"></div> 77 </scrollable-container> 78 79 <scrollable-container data-expected-scroll-height="270"> 80 <div style="width: 0; margin-bottom: 100px; top: -1000px;"> 81 <div style="height: 200px; margin-bottom: -50px;"></div> 82 </div> 83 </scrollable-container> 84 </div> 85 86 <!-- VRL + LTR --> 87 <div style="writing-mode: vertical-rl; direction: ltr;"> 88 <scrollable-container data-expected-scroll-width="260"> 89 <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px;"></div> 90 </scrollable-container> 91 92 <scrollable-container data-expected-scroll-height="270"> 93 <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div> 94 </scrollable-container> 95 96 <scrollable-container data-expected-scroll-width="260"> 97 <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px; display: inline-block;"></div> 98 </scrollable-container> 99 100 <scrollable-container data-expected-scroll-height="270"> 101 <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div> 102 </scrollable-container> 103 104 <scrollable-container data-expected-scroll-width="260"> 105 <div style="height: 0; margin-left: 100px; right: -1000px;"> 106 <div style="width: 200px; margin-left: -50px;"></div> 107 </div> 108 </scrollable-container> 109 </div> 110 111 <!-- VRL + RTL --> 112 <div style="writing-mode: vertical-rl; direction: rtl;"> 113 <scrollable-container data-expected-scroll-width="260"> 114 <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px;"></div> 115 </scrollable-container> 116 117 <scrollable-container data-expected-scroll-height="270"> 118 <div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px;"></div> 119 </scrollable-container> 120 121 <scrollable-container data-expected-scroll-width="260"> 122 <div style="width: 200px; height: 0; margin-left: 50px; right: -1000px; display: inline-block;"></div> 123 </scrollable-container> 124 125 <scrollable-container data-expected-scroll-height="270"> 126 <div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px; display: inline-block;"></div> 127 </scrollable-container> 128 129 <scrollable-container data-expected-scroll-width="260"> 130 <div style="height: 0; margin-left: 100px; right: -1000px;"> 131 <div style="width: 200px; margin-left: -50px;"></div> 132 </div> 133 </scrollable-container> 134 </div> 135 136 <!-- VLR + LTR --> 137 <div style="writing-mode: vertical-lr; direction: ltr;"> 138 <scrollable-container data-expected-scroll-width="260"> 139 <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px;"></div> 140 </scrollable-container> 141 142 <scrollable-container data-expected-scroll-height="270"> 143 <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px;"></div> 144 </scrollable-container> 145 146 <scrollable-container data-expected-scroll-width="260"> 147 <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px; display: inline-block;"></div> 148 </scrollable-container> 149 150 <scrollable-container data-expected-scroll-height="270"> 151 <div style="width: 0; height: 200px; margin-bottom: 50px; top: -1000px; display: inline-block;"></div> 152 </scrollable-container> 153 154 <scrollable-container data-expected-scroll-width="260"> 155 <div style="height: 0; margin-right: 100px; left: -1000px;"> 156 <div style="width: 200px; margin-right: -50px;"></div> 157 </div> 158 </scrollable-container> 159 </div> 160 161 <!-- VLR + RTL --> 162 <div style="writing-mode: vertical-rl; direction: rtl;"> 163 <scrollable-container data-expected-scroll-width="260"> 164 <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px;"></div> 165 </scrollable-container> 166 167 <scrollable-container data-expected-scroll-height="270"> 168 <div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px;"></div> 169 </scrollable-container> 170 171 <scrollable-container data-expected-scroll-width="260"> 172 <div style="width: 200px; height: 0; margin-right: 50px; left: -1000px; display: inline-block;"></div> 173 </scrollable-container> 174 175 <scrollable-container data-expected-scroll-height="270"> 176 <div style="width: 0; height: 200px; margin-top: 50px; bottom: -1000px; display: inline-block;"></div> 177 </scrollable-container> 178 179 <scrollable-container data-expected-scroll-width="260"> 180 <div style="height: 0; margin-right: 100px; left: -1000px;"> 181 <div style="width: 200px; margin-right: -50px;"></div> 182 </div> 183 </scrollable-container> 184 </div>