elementFromPoint-float-in-table.html (1404B)
1 <!DOCTYPE html> 2 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> 3 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint" /> 4 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 .outer { 9 width: 100px; 10 height: 100px; 11 background: green; 12 } 13 .inner { 14 float: left; 15 width: 50px; 16 height: 50px; 17 background: blue; 18 } 19 </style> 20 <body> 21 <div id="log"></div> 22 23 <div class="outer" onclick="clicked('outer')"> 24 <div id="float-in-div" class="inner" onclick="clicked('inner')"> 25 </div> 26 </div> 27 28 <table> 29 <tr> 30 <td> 31 <div class="outer" onclick="clicked('outer')"> 32 <div id='float-in-table' class="inner" onclick="clicked('inner')"> 33 </div> 34 </div> 35 </td> 36 </tr> 37 </table> 38 39 <pre id="output"></pre> 40 <script> 41 function clicked(p) { 42 output.textContent += 'clicked ' + p + '\n'; 43 } 44 45 function testElementFromPoint(element) { 46 let bounds = element.getBoundingClientRect(); 47 let result = document.elementFromPoint(bounds.x + 1, bounds.y + 1); 48 assert_equals(result, element); 49 } 50 51 let targets = [ 52 'float-in-div', 53 'float-in-table', 54 ]; 55 for (let target of targets) { 56 let element = document.getElementById(target); 57 test(() => { testElementFromPoint(element); }, target); 58 } 59 </script> 60 </body>