scrollbar.https.html (5820B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges"> 4 <link rel="match" href="scrollbar-ref.html"> 5 <meta name="assert" content="This test checks that scrollbar sizes are passed to the layout correctly." /> 6 <style> 7 td { text-align: center; } 8 9 .parent { 10 box-sizing: border-box; 11 width: 50px; 12 height: 50px; 13 border: solid; 14 position: relative; 15 background: red; 16 } 17 18 @supports (display: layout(test)) { 19 .parent { 20 display: layout(test); 21 background: initial; 22 } 23 } 24 25 .child { 26 width: 10px; 27 height: 10px; 28 background: green; 29 } 30 </style> 31 <!-- 32 This test works by placing four children in each corner of the layout using the edges. 33 The reference to this test uses absolute positioning to achieve the same effect. 34 --> 35 <table> 36 <tr> 37 <td></td> 38 <td colspan=2>LTR</td> 39 <td colspan=2>RTL</td> 40 </tr> 41 <tr> 42 <td></td> 43 <td>Y</td> 44 <td>X</td> 45 <td>Y</td> 46 <td>X</td> 47 </tr> 48 <tr> 49 <td>HTB</td> 50 <td> 51 <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;"> 52 <div class="child"></div> 53 <div class="child"></div> 54 <div class="child"></div> 55 <div class="child"></div> 56 </div> 57 </td> 58 <td> 59 <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;"> 60 <div class="child"></div> 61 <div class="child"></div> 62 <div class="child"></div> 63 <div class="child"></div> 64 </div> 65 </td> 66 <td> 67 <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;"> 68 <div class="child"></div> 69 <div class="child"></div> 70 <div class="child"></div> 71 <div class="child"></div> 72 </div> 73 </td> 74 <td> 75 <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;"> 76 <div class="child"></div> 77 <div class="child"></div> 78 <div class="child"></div> 79 <div class="child"></div> 80 </div> 81 </td> 82 </tr> 83 <tr> 84 <td>VRL</td> 85 <td> 86 <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;"> 87 <div class="child"></div> 88 <div class="child"></div> 89 <div class="child"></div> 90 <div class="child"></div> 91 </div> 92 </td> 93 <td> 94 <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;"> 95 <div class="child"></div> 96 <div class="child"></div> 97 <div class="child"></div> 98 <div class="child"></div> 99 </div> 100 </td> 101 <td> 102 <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;"> 103 <div class="child"></div> 104 <div class="child"></div> 105 <div class="child"></div> 106 <div class="child"></div> 107 </div> 108 </td> 109 <td> 110 <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;"> 111 <div class="child"></div> 112 <div class="child"></div> 113 <div class="child"></div> 114 <div class="child"></div> 115 </div> 116 </td> 117 </tr> 118 <tr> 119 <td>VLR</td> 120 <td> 121 <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;"> 122 <div class="child"></div> 123 <div class="child"></div> 124 <div class="child"></div> 125 <div class="child"></div> 126 </div> 127 </td> 128 <td> 129 <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;"> 130 <div class="child"></div> 131 <div class="child"></div> 132 <div class="child"></div> 133 <div class="child"></div> 134 </div> 135 </td> 136 <td> 137 <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;"> 138 <div class="child"></div> 139 <div class="child"></div> 140 <div class="child"></div> 141 <div class="child"></div> 142 </div> 143 </td> 144 <td> 145 <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;"> 146 <div class="child"></div> 147 <div class="child"></div> 148 <div class="child"></div> 149 <div class="child"></div> 150 </div> 151 </td> 152 </tr> 153 </table> 154 <script src="/common/reftest-wait.js"></script> 155 <script src="/common/worklet-reftest.js"></script> 156 <script id="code" type="text/worklet"> 157 registerLayout('test', class { 158 async intrinsicSizes() {} 159 async layout(children, edges, constraints) { 160 const topLeftFragment = await children[0].layoutNextFragment(); 161 const topRightFragment = await children[1].layoutNextFragment(); 162 const bottomLeftFragment = await children[2].layoutNextFragment(); 163 const bottomRightFragment = await children[3].layoutNextFragment(); 164 165 topLeftFragment.inlineOffset = edges.inlineStart; 166 topLeftFragment.blockOffset = edges.blockStart; 167 168 topRightFragment.inlineOffset = 169 constraints.fixedInlineSize - topRightFragment.inlineSize - edges.inlineEnd; 170 topRightFragment.blockOffset = edges.blockStart; 171 172 bottomLeftFragment.inlineOffset = edges.inlineStart; 173 bottomLeftFragment.blockOffset = 174 constraints.fixedBlockSize - bottomLeftFragment.blockSize - edges.blockEnd; 175 176 bottomRightFragment.inlineOffset = 177 constraints.fixedInlineSize - bottomRightFragment.inlineSize - edges.inlineEnd; 178 bottomRightFragment.blockOffset = 179 constraints.fixedBlockSize - bottomRightFragment.blockSize - edges.blockEnd; 180 181 return {childFragments: [ 182 topLeftFragment, 183 topRightFragment, 184 bottomLeftFragment, 185 bottomRightFragment 186 ]}; 187 } 188 }); 189 </script> 190 <script> 191 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent); 192 </script>