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