Google Git
Sign in
chromium / external / w3c / web-platform-tests / b67742b15568f3b470a7878b53199993f28a5555 / . / cssom-view-1 / elementFromPosition.html
blob: f7cf535bbe5c7d91caead9a1040200fc5b65a31d [file] [log] [blame]
Geoffrey Sneddonf106b6f2015-12-07 15:16:26[diff] [blame]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="http://www.w3.org/TR/cssom-view/#extensions-to-the-document-interface" />
8 <link rel="help" href="http://www.w3.org/TR/cssom-view/#widl-Document-elementFromPoint-Element-float-x-float-y" />
9 <meta name="flags" content="dom" />
10 <script src="/resources/testharness.js" type="text/javascript"></script>
11 <script src="/resources/testharnessreport.js" type="text/javascript"></script>
12 <script id="metadata_cache">/*
13{
14 "document.elementFromPoint": {},
15 "document.elementFromPoint is a Function": {},
16 "test some point of the element: top left corner": {},
17 "test some point of the element: top line": {},
18 "test some point of the element: top right corner": {},
19 "test some point of the element: left line": {},
20 "test some point of the element: inside": {},
21 "test some point of the element: right line": {},
22 "test some point of the element: bottom left corner": {},
23 "test some point of the element: bottom line": {},
24 "test some point of the element: botom right corner": {},
25 "Point (0, 0), return root element(HTML)": {},
26 " test negative x ": {},
Chris Rebertb67742b2016-01-29 09:07:18[diff] [blame^]27 " test negative y ": {},
Geoffrey Sneddonf106b6f2015-12-07 15:16:26[diff] [blame]28 "test outside of viewport": {},
29 "test the top of layer": {}
30}
31 */</script>
32</head>
33<body>
34 <noscript>Test not run - JavaScript required!</noscript>
35 <div id="log"></div>
36 <script type="text/javascript">
37
38 var body = document.getElementsByTagName( 'body' )[0];
39 function createElement( id ) {
40 var elem = document.createElement( 'div' );
41 if ( id && typeof id == 'string' ) {
42 elem.id = id;
43 }
44 body.appendChild( elem );
45 return elem;
46 }
47
48 function setPosition( config ) {
49 var target = config.target;
50 target.style.position = 'absolute';
51 target.style.left = config.left + 'px';
52 target.style.top = config.top + 'px';
53 target.style.width = config.width + 'px';
54 target.style.height = config.height + 'px';
55 if ( config['z-index'] ) {
56 target.style.zIndex = config['z-index'];
57 }
58 }
59
60 var target = createElement( 'dom-1' );
61 setPosition( {
62 width: 100,
63 height: 100,
64 left: 10,
65 top: 10,
66 target: target
67 });
68
69 test( function () {
70 assert_inherits( document, 'elementFromPoint' );
71 }, 'document.elementFromPoint');
72
73 test( function () {
74 assert_true( document.elementFromPoint instanceof Function );
75 }, 'document.elementFromPoint is a Function');
76 (function(){
77 var wrap = [
78 // 左上角.
79 {x: 10, y: 10, r: 'top left corner'},
80 // 上边线
81 {x: 50, y: 10, r: 'top line'},
82 // 右上角
83 {x: 110, y: 10, r: 'top right corner'},
84 // 左边线
85 {x: 10, y: 50, r: 'left line'},
86 // 元素范围内
87 {x: 50, y: 50, r: 'inside'},
88 // 右边线
89 {x: 110, y: 10, r: 'right line'},
90 // 左下角
91 {x: 10, y: 110, r: 'bottom left corner'},
92 // 下边线
93 {x: 50, y: 110, r: 'bottom line'},
94 // 右下角
95 {x: 110, y: 110, r: 'botom right corner'}
96 ];
97 var i = 0, len = wrap.length, item;
98 for ( ; i < len; i++ ) {
Geoffrey Sneddon55a44122015-12-07 15:39:51[diff] [blame]99 item = wrap[ i ];
100 test( function () {
Geoffrey Sneddonf106b6f2015-12-07 15:16:26[diff] [blame]101 assert_equals( document.elementFromPoint( item.x, item.y).id == 'dom-1', true );
102 }, 'test some point of the element: ' + item.r);
103 }
104 })();
105 test( function () {
106 var elem = document.elementFromPoint( 0, 0 );
107 assert_true( elem.nodeName == 'HTML' );
108 }, 'Point (0, 0), return root element(HTML)' );
109
110 test( function () {
111 var elem = document.elementFromPoint( -1000, 0 );
112 assert_true( elem == null, 'negative x, return null' );
113 }, ' test negative x ');
114
115 test( function () {
116 var elem = document.elementFromPoint( 0, -1000 );
117 assert_true( elem == null, 'negative y, return null' );
Chris Rebertb67742b2016-01-29 09:07:18[diff] [blame^]118 }, ' test negative y ');
Geoffrey Sneddonf106b6f2015-12-07 15:16:26[diff] [blame]119
120 test( function () {
121 var elem = document.elementFromPoint( 100000, 0 );
122 assert_true( elem == null );
123 }, 'test outside of viewport');
124
125 test( function () {
126 var config = {
127 width: 100,
128 height: 100,
129 left: 5,
130 top: 5
131 };
132 var target2 = createElement( 'dom-2' );
133 config.target = target2;
134 setPosition( config );
135
136 var elem = document.elementFromPoint( 10, 10 );
137 var elem2 = document.elementFromPoint( 10, 10 );
138 assert_equals( elem.id, elem2.id );
139 }, 'test the top of layer');
140 </script>
141</body>
142</html>
143
144