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