hit-test-inline-fragmentation-with-border-radius.html (9915B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <link rel="help" href="https://www.w3.org/TR/css-break-3/#break-decoration"/> 5 <style> 6 div { 7 margin: 20px; 8 } 9 10 span.round { 11 padding: 20px; 12 line-height: 100px; 13 font-size: 40px; 14 border-radius: 40px; 15 background-color: yellow; 16 } 17 </style> 18 19 <div> 20 <span id="horizontal" class="round">FOO<br>BAR</span> 21 </div> 22 23 <div style="writing-mode:vertical-lr"> 24 <span id="vertical-lr" class="round">FOO<br>BAR</span> 25 </div> 26 27 <div style="writing-mode:vertical-rl"> 28 <span id="vertical-rl" class="round">FOO<br>BAR</span> 29 </div> 30 31 <script> 32 // Hit test horizontal span with border radius 33 const horizontalSpan = document.getElementById('horizontal'); 34 const horizontalDiv = horizontalSpan.parentNode; 35 const horizontalRects = horizontalSpan.getClientRects(); 36 const horizontalLine1 = horizontalRects[0]; 37 const horizontalLine2 = horizontalRects[1]; 38 39 test(() => { 40 const x = horizontalLine1.left + 5; 41 const y = horizontalLine1.top + 5; 42 assert_equals(document.elementFromPoint(x, y), horizontalDiv); 43 }, 'Horizontal line 1, hit test outside top-left rounded corner'); 44 45 test(() => { 46 const x = horizontalLine1.left + 20; 47 const y = horizontalLine1.top + 20; 48 assert_equals(document.elementFromPoint(x, y), horizontalSpan); 49 }, 'Horizontal line 1, hit test inside top-left rounded corner'); 50 51 test(() => { 52 const x = horizontalLine1.left + 5; 53 const y = horizontalLine1.bottom - 5; 54 assert_equals(document.elementFromPoint(x, y), horizontalDiv); 55 }, 'Horizontal line 1, hit test outside bottom-left rounded corner'); 56 57 test(() => { 58 const x = horizontalLine1.left + 20; 59 const y = horizontalLine1.bottom - 20; 60 assert_equals(document.elementFromPoint(x, y), horizontalSpan); 61 }, 'Horizontal line 1, hit test inside bottom-left rounded corner'); 62 63 test(() => { 64 const x = horizontalLine1.right - 5; 65 const y = horizontalLine1.top + 5; 66 assert_equals(document.elementFromPoint(x, y), horizontalSpan); 67 }, 'Horizontal line 1, hit test inside top-right right-angled corner') 68 69 test(() => { 70 const x = horizontalLine1.right - 5; 71 const y = horizontalLine1.bottom - 5; 72 assert_equals(document.elementFromPoint(x, y), horizontalSpan); 73 }, 'Horizontal line 1, hit test inside bottom-right right-angled corner') 74 75 test(() => { 76 const x = horizontalLine2.right - 5; 77 const y = horizontalLine2.top + 5; 78 assert_equals(document.elementFromPoint(x, y), horizontalDiv); 79 }, 'Horizontal line 2, hit test outside top-right rounded corner'); 80 81 test(() => { 82 const x = horizontalLine2.right - 20; 83 const y = horizontalLine2.top + 20; 84 assert_equals(document.elementFromPoint(x, y), horizontalSpan); 85 }, 'Horizontal line 2, hit test inside top-right rounded corner'); 86 87 test(() => { 88 const x = horizontalLine2.right - 5; 89 const y = horizontalLine2.bottom - 5; 90 assert_equals(document.elementFromPoint(x, y), horizontalDiv); 91 }, 'Horizontal line 2, hit test outside bottom-right rounded corner'); 92 93 test(() => { 94 const x = horizontalLine2.right - 20; 95 const y = horizontalLine2.bottom - 20; 96 assert_equals(document.elementFromPoint(x, y), horizontalSpan); 97 }, 'Horizontal line 2, hit test inside bottom-right rounded corner'); 98 99 test(() => { 100 const x = horizontalLine2.left + 5; 101 const y = horizontalLine2.top + 5; 102 assert_equals(document.elementFromPoint(x, y), horizontalSpan); 103 }, 'Horizontal line 2, hit test inside top-left right-angled corner') 104 105 test(() => { 106 const x = horizontalLine2.left + 5; 107 const y = horizontalLine2.bottom - 5; 108 assert_equals(document.elementFromPoint(x, y), horizontalSpan); 109 }, 'Horizontal line 2, hit test inside bottom-left right-angled corner') 110 111 // Hit test vertical-lr span with border radius 112 const verticalLRSpan = document.getElementById('vertical-lr'); 113 const verticalLRDiv = verticalLRSpan.parentNode; 114 const verticalLRRects = verticalLRSpan.getClientRects(); 115 const verticalLRLine1 = verticalLRRects[0]; 116 const verticalLRLine2 = verticalLRRects[1]; 117 118 test(() => { 119 const x = verticalLRLine1.left + 5; 120 const y = verticalLRLine1.top + 5; 121 assert_equals(document.elementFromPoint(x, y), verticalLRDiv); 122 }, 'Vertical LR line 1, hit test outside top-left rounded corner'); 123 124 test(() => { 125 const x = verticalLRLine1.left + 20; 126 const y = verticalLRLine1.top + 20; 127 assert_equals(document.elementFromPoint(x, y), verticalLRSpan); 128 }, 'Vertical LR line 1, hit test inside top-left rounded corner'); 129 130 test(() => { 131 const x = verticalLRLine1.right - 5; 132 const y = verticalLRLine1.top + 5; 133 assert_equals(document.elementFromPoint(x, y), verticalLRDiv); 134 }, 'Vertical LR line 1, hit test outside top-right rounded corner'); 135 136 test(() => { 137 const x = verticalLRLine1.right - 20; 138 const y = verticalLRLine1.top + 20; 139 assert_equals(document.elementFromPoint(x, y), verticalLRSpan); 140 }, 'Vertical LR line 1, hit test inside top-right rounded corner'); 141 142 test(() => { 143 const x = verticalLRLine1.left + 5; 144 const y = verticalLRLine1.bottom - 5; 145 assert_equals(document.elementFromPoint(x, y), verticalLRSpan); 146 }, 'Vertical LR line 1, hit test inside bottom-left right-angled corner') 147 148 test(() => { 149 const x = verticalLRLine1.right - 5; 150 const y = verticalLRLine1.bottom - 5; 151 assert_equals(document.elementFromPoint(x, y), verticalLRSpan); 152 }, 'Vertical LR line 1, hit test inside bottom-right right-angled corner') 153 154 test(() => { 155 const x = verticalLRLine2.left + 5; 156 const y = verticalLRLine2.bottom - 5; 157 assert_equals(document.elementFromPoint(x, y), verticalLRDiv); 158 }, 'Vertical LR line 2, hit test outside bottom-left rounded corner'); 159 160 test(() => { 161 const x = verticalLRLine2.left + 20; 162 const y = verticalLRLine2.bottom - 20; 163 assert_equals(document.elementFromPoint(x, y), verticalLRSpan); 164 }, 'Vertical LR line 2, hit test inside bottom-left rounded corner'); 165 166 test(() => { 167 const x = verticalLRLine2.right - 5; 168 const y = verticalLRLine2.bottom - 5; 169 assert_equals(document.elementFromPoint(x, y), verticalLRDiv); 170 }, 'Vertical LR line 2, hit test outside bottom-right rounded corner'); 171 172 test(() => { 173 const x = verticalLRLine2.right - 20; 174 const y = verticalLRLine2.bottom - 20; 175 assert_equals(document.elementFromPoint(x, y), verticalLRSpan); 176 }, 'Vertical LR line 2, hit test inside bottom-right rounded corner'); 177 178 test(() => { 179 const x = verticalLRLine2.left + 5; 180 const y = verticalLRLine2.top + 5; 181 assert_equals(document.elementFromPoint(x, y), verticalLRSpan); 182 }, 'Vertical LR line 2, hit test inside top-left right-angled corner') 183 184 test(() => { 185 const x = verticalLRLine2.right - 5; 186 const y = verticalLRLine2.top + 5; 187 assert_equals(document.elementFromPoint(x, y), verticalLRSpan); 188 }, 'Vertical LR line 2, hit test inside top-right right-angled corner') 189 190 // Hit test vertical-rl span with border radius 191 const verticalRLSpan = document.getElementById('vertical-rl'); 192 const verticalRLDiv = verticalRLSpan.parentNode; 193 const verticalRLRects = verticalRLSpan.getClientRects(); 194 const verticalRLLine1 = verticalRLRects[0].left > verticalRLRects[1].left ? verticalRLRects[0] : verticalRLRects[1]; 195 const verticalRLLine2 = verticalRLRects[0].left > verticalRLRects[1].left ? verticalRLRects[1] : verticalRLRects[0]; 196 197 test(() => { 198 const x = verticalRLLine1.left + 5; 199 const y = verticalRLLine1.top + 5; 200 assert_equals(document.elementFromPoint(x, y), verticalRLDiv); 201 }, 'Vertical RL line 1, hit test outside top-left rounded corner'); 202 203 test(() => { 204 const x = verticalRLLine1.left + 20; 205 const y = verticalRLLine1.top + 20; 206 assert_equals(document.elementFromPoint(x, y), verticalRLSpan); 207 }, 'Vertical RL line 1, hit test inside top-left rounded corner'); 208 209 test(() => { 210 const x = verticalRLLine1.right - 5; 211 const y = verticalRLLine1.top + 5; 212 assert_equals(document.elementFromPoint(x, y), verticalRLDiv); 213 }, 'Vertical RL line 1, hit test outside top-right rounded corner'); 214 215 test(() => { 216 const x = verticalRLLine1.right - 20; 217 const y = verticalRLLine1.top + 20; 218 assert_equals(document.elementFromPoint(x, y), verticalRLSpan); 219 }, 'Vertical RL line 1, hit test inside top-right rounded corner'); 220 221 test(() => { 222 const x = verticalRLLine1.left + 5; 223 const y = verticalRLLine1.bottom - 5; 224 assert_equals(document.elementFromPoint(x, y), verticalRLSpan); 225 }, 'Vertical RL line 1, hit test inside bottom-left right-angled corner') 226 227 test(() => { 228 const x = verticalRLLine1.right - 5; 229 const y = verticalRLLine1.bottom - 5; 230 assert_equals(document.elementFromPoint(x, y), verticalRLSpan); 231 }, 'Vertical RL line 1, hit test inside bottom-right right-angled corner') 232 233 test(() => { 234 const x = verticalRLLine2.left + 5; 235 const y = verticalRLLine2.bottom - 5; 236 assert_equals(document.elementFromPoint(x, y), verticalRLDiv); 237 }, 'Vertical RL line 2, hit test outside bottom-left rounded corner'); 238 239 test(() => { 240 const x = verticalRLLine2.left + 20; 241 const y = verticalRLLine2.bottom - 20; 242 assert_equals(document.elementFromPoint(x, y), verticalRLSpan); 243 }, 'Vertical RL line 2, hit test inside bottom-left rounded corner'); 244 245 test(() => { 246 const x = verticalRLLine2.right - 5; 247 const y = verticalRLLine2.bottom - 5; 248 assert_equals(document.elementFromPoint(x, y), verticalRLDiv); 249 }, 'Vertical RL line 2, hit test outside bottom-right rounded corner'); 250 251 test(() => { 252 const x = verticalRLLine2.right - 20; 253 const y = verticalRLLine2.bottom - 20; 254 assert_equals(document.elementFromPoint(x, y), verticalRLSpan); 255 }, 'Vertical RL line 2, hit test inside bottom-right rounded corner'); 256 257 test(() => { 258 const x = verticalRLLine2.left + 5; 259 const y = verticalRLLine2.top + 5; 260 assert_equals(document.elementFromPoint(x, y), verticalRLSpan); 261 }, 'Vertical RL line 2, hit test inside top-left right-angled corner') 262 263 test(() => { 264 const x = verticalRLLine2.right - 5; 265 const y = verticalRLLine2.top + 5; 266 assert_equals(document.elementFromPoint(x, y), verticalRLSpan); 267 }, 'Vertical RL line 2, hit test inside top-right right-angled corner') 268 </script>