elementFromPosition.html (4348B)
1 <!DOCTYPE HTML> 2 <html lang="en-US"> 3 <head> 4 <title>CSS Test: CSSOM View elementFromPoint</title> 5 <meta charset="UTF-8"> 6 <link rel="author" title="Chris" href="mailto:pwx.frontend@gmail.com" /> 7 <link rel="help" href="https://www.w3.org/TR/cssom-view/#dom-document-elementfrompoint" /> 8 <meta name="flags" content="dom" /> 9 <script src="/resources/testharness.js" type="text/javascript"></script> 10 <script src="/resources/testharnessreport.js" type="text/javascript"></script> 11 </head> 12 <body> 13 <noscript>Test not run - JavaScript required!</noscript> 14 <div id="log"></div> 15 <script type="text/javascript"> 16 17 var body = document.getElementsByTagName( 'body' )[0]; 18 function createElement( id ) { 19 var elem = document.createElement( 'div' ); 20 if ( id && typeof id == 'string' ) { 21 elem.id = id; 22 } 23 body.appendChild( elem ); 24 return elem; 25 } 26 27 function setPosition( config ) { 28 var target = config.target; 29 target.style.position = 'absolute'; 30 target.style.left = config.left + 'px'; 31 target.style.top = config.top + 'px'; 32 target.style.width = config.width + 'px'; 33 target.style.height = config.height + 'px'; 34 if ( config['z-index'] ) { 35 target.style.zIndex = config['z-index']; 36 } 37 } 38 39 var target = createElement( 'dom-1' ); 40 setPosition( { 41 width: 100, 42 height: 100, 43 left: 10, 44 top: 10, 45 target: target 46 }); 47 48 test( function () { 49 assert_inherits( document, 'elementFromPoint' ); 50 }, 'document.elementFromPoint'); 51 52 test( function () { 53 assert_true( document.elementFromPoint instanceof Function ); 54 }, 'document.elementFromPoint is a Function'); 55 (function(){ 56 var wrap = [ 57 // 左上角. 58 {x: 10, y: 10, r: 'top left corner'}, 59 // 上边线 60 {x: 50, y: 10, r: 'top line'}, 61 // 右上角 62 {x: 110, y: 10, r: 'top right corner'}, 63 // 左边线 64 {x: 10, y: 50, r: 'left line'}, 65 // 元素范围内 66 {x: 50, y: 50, r: 'inside'}, 67 // 右边线 68 {x: 110, y: 50, r: 'right line'}, 69 // 左下角 70 {x: 10, y: 110, r: 'bottom left corner'}, 71 // 下边线 72 {x: 50, y: 110, r: 'bottom line'}, 73 // 右下角 74 {x: 110, y: 110, r: 'bottom right corner'} 75 ]; 76 var i = 0, len = wrap.length, item; 77 for ( ; i < len; i++ ) { 78 item = wrap[ i ]; 79 test( function () { 80 assert_equals( document.elementFromPoint( item.x, item.y).id == 'dom-1', true ); 81 }, 'test some point of the element: ' + item.r); 82 } 83 })(); 84 test( function () { 85 var elem = document.elementFromPoint( 0, 0 ); 86 assert_equals( elem.nodeName, 'HTML' ); 87 }, 'Point (0, 0), return root element(HTML)' ); 88 89 test( function () { 90 var elem = document.elementFromPoint( -1000, 0 ); 91 assert_equals( elem, null, 'negative x, return null' ); 92 }, ' test negative x '); 93 94 test( function () { 95 var elem = document.elementFromPoint( 0, -1000 ); 96 assert_equals( elem, null, 'negative y, return null' ); 97 }, ' test negative y '); 98 99 test( function () { 100 var elem = document.elementFromPoint( 100000, 0 ); 101 assert_equals( elem, null ); 102 }, 'test outside of viewport'); 103 104 test( function () { 105 var config = { 106 width: 100, 107 height: 100, 108 left: 5, 109 top: 5 110 }; 111 var target2 = createElement( 'dom-2' ); 112 config.target = target2; 113 setPosition( config ); 114 115 var elem = document.elementFromPoint( 10, 10 ); 116 var elem2 = document.elementFromPoint( 10, 10 ); 117 assert_equals( elem.id, elem2.id ); 118 }, 'test the top of layer'); 119 </script> 120 </body> 121 </html>