| <!DOCTYPE HTML> |
| <html lang="en-US"> |
| <head> |
| <title>CSS Test: CSSOM View elementFromPoint</title> |
| <meta charset="UTF-8"> |
| <link rel="author" title="Chris" href="mailto:pwx.frontend@gmail.com" /> |
| <link rel="help" href="https://www.w3.org/TR/cssom-view/#dom-document-elementfrompoint" /> |
| <meta name="flags" content="dom" /> |
| <script src="/resources/testharness.js" type="text/javascript"></script> |
| <script src="/resources/testharnessreport.js" type="text/javascript"></script> |
| <script id="metadata_cache">/* |
| { |
| "document.elementFromPoint": {}, |
| "document.elementFromPoint is a Function": {}, |
| "test some point of the element: top left corner": {}, |
| "test some point of the element: top line": {}, |
| "test some point of the element: top right corner": {}, |
| "test some point of the element: left line": {}, |
| "test some point of the element: inside": {}, |
| "test some point of the element: right line": {}, |
| "test some point of the element: bottom left corner": {}, |
| "test some point of the element: bottom line": {}, |
| "test some point of the element: bottom right corner": {}, |
| "Point (0, 0), return root element(HTML)": {}, |
| " test negative x ": {}, |
| " test negative y ": {}, |
| "test outside of viewport": {}, |
| "test the top of layer": {} |
| } |
| */</script> |
| </head> |
| <body> |
| <noscript>Test not run - JavaScript required!</noscript> |
| <div id="log"></div> |
| <script type="text/javascript"> |
| |
| var body = document.getElementsByTagName( 'body' )[0]; |
| function createElement( id ) { |
| var elem = document.createElement( 'div' ); |
| if ( id && typeof id == 'string' ) { |
| elem.id = id; |
| } |
| body.appendChild( elem ); |
| return elem; |
| } |
| |
| function setPosition( config ) { |
| var target = config.target; |
| target.style.position = 'absolute'; |
| target.style.left = config.left + 'px'; |
| target.style.top = config.top + 'px'; |
| target.style.width = config.width + 'px'; |
| target.style.height = config.height + 'px'; |
| if ( config['z-index'] ) { |
| target.style.zIndex = config['z-index']; |
| } |
| } |
| |
| var target = createElement( 'dom-1' ); |
| setPosition( { |
| width: 100, |
| height: 100, |
| left: 10, |
| top: 10, |
| target: target |
| }); |
| |
| test( function () { |
| assert_inherits( document, 'elementFromPoint' ); |
| }, 'document.elementFromPoint'); |
| |
| test( function () { |
| assert_true( document.elementFromPoint instanceof Function ); |
| }, 'document.elementFromPoint is a Function'); |
| (function(){ |
| var wrap = [ |
| // 左上角. |
| {x: 10, y: 10, r: 'top left corner'}, |
| // 上边线 |
| {x: 50, y: 10, r: 'top line'}, |
| // 右上角 |
| {x: 110, y: 10, r: 'top right corner'}, |
| // 左边线 |
| {x: 10, y: 50, r: 'left line'}, |
| // 元素范围内 |
| {x: 50, y: 50, r: 'inside'}, |
| // 右边线 |
| {x: 110, y: 10, r: 'right line'}, |
| // 左下角 |
| {x: 10, y: 110, r: 'bottom left corner'}, |
| // 下边线 |
| {x: 50, y: 110, r: 'bottom line'}, |
| // 右下角 |
| {x: 110, y: 110, r: 'bottom right corner'} |
| ]; |
| var i = 0, len = wrap.length, item; |
| for ( ; i < len; i++ ) { |
| item = wrap[ i ]; |
| test( function () { |
| assert_equals( document.elementFromPoint( item.x, item.y).id == 'dom-1', true ); |
| }, 'test some point of the element: ' + item.r); |
| } |
| })(); |
| test( function () { |
| var elem = document.elementFromPoint( 0, 0 ); |
| assert_true( elem.nodeName == 'HTML' ); |
| }, 'Point (0, 0), return root element(HTML)' ); |
| |
| test( function () { |
| var elem = document.elementFromPoint( -1000, 0 ); |
| assert_true( elem == null, 'negative x, return null' ); |
| }, ' test negative x '); |
| |
| test( function () { |
| var elem = document.elementFromPoint( 0, -1000 ); |
| assert_true( elem == null, 'negative y, return null' ); |
| }, ' test negative y '); |
| |
| test( function () { |
| var elem = document.elementFromPoint( 100000, 0 ); |
| assert_true( elem == null ); |
| }, 'test outside of viewport'); |
| |
| test( function () { |
| var config = { |
| width: 100, |
| height: 100, |
| left: 5, |
| top: 5 |
| }; |
| var target2 = createElement( 'dom-2' ); |
| config.target = target2; |
| setPosition( config ); |
| |
| var elem = document.elementFromPoint( 10, 10 ); |
| var elem2 = document.elementFromPoint( 10, 10 ); |
| assert_equals( elem.id, elem2.id ); |
| }, 'test the top of layer'); |
| </script> |
| </body> |
| </html> |
| |
| |
