OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <script src="../resources/testharness.js"></script> | |
3 <script src="../resources/testharnessreport.js"></script> | |
4 <script src="./resources/resizeTestHelper.js"></script> | |
5 <p>ResizeObserver tests</p> | |
6 <div id="target1" style="width:100px;height:100px;">t1</div> | |
7 <div id="target2" style="width:100px;height:100px;">t2</div> | |
8 <img id="target3" style="width:100px;height:100px;"> | |
9 <iframe src="./resources/iframe.html" width="300px" height="100px" style="displa
y:block"></iframe> | |
10 <script> | |
11 'use strict'; | |
12 | |
13 var helper = new ResizeTestHelper(); | |
14 | |
15 let t1 = document.querySelector('#target1'); | |
16 let t2 = document.querySelector('#target2'); | |
17 | |
18 // allow uncaught exception because ResizeObserver posts exceptions | |
19 // to window error handler when limit is exceeded. | |
20 setup({allow_uncaught_exception: true}); | |
21 | |
22 function test0() { | |
23 helper.createTest( | |
24 "simple observation", | |
25 _ => { | |
26 helper.observer.disconnect(); | |
27 helper.observer.observe(t1); | |
28 t1.style.width = "5px"; | |
29 }, | |
30 entries => { | |
31 assert_equals(entries.length, 1, "1 pending notification"); | |
32 assert_equals(entries[0].target, t1, "target is t1"); | |
33 assert_equals(entries[0].contentRect.width, 5, "target width"); | |
34 test1(); | |
35 } | |
36 ); | |
37 helper.nextTest(); | |
38 } | |
39 | |
40 function test1() { | |
41 helper.createTest( | |
42 "multiple observation on same element trigger only one", | |
43 _ => { | |
44 helper.observer.observe(t1); | |
45 helper.observer.observe(t1); | |
46 t1.style.width = "10px"; | |
47 }, | |
48 entries => { | |
49 assert_equals(entries.length, 1, "1 pending notification"); | |
50 helper.observer.disconnect(); | |
51 test2(); | |
52 } | |
53 ); | |
54 helper.nextTestRaf(); | |
55 } | |
56 | |
57 function test2() { | |
58 test(_ => { | |
59 assert_throws(null, _=> { | |
60 helper.observer.observe({}); | |
61 }); | |
62 test3(); | |
63 }, | |
64 "throw exception when observing non-element" | |
65 ); | |
66 } | |
67 | |
68 function test3() { | |
69 helper.createTest( | |
70 "disconnect stops all notifications", | |
71 setup => { | |
72 helper.observer.observe(t1); | |
73 helper.observer.observe(t2); | |
74 helper.observer.disconnect(); | |
75 t1.style.width = "30px"; | |
76 }, | |
77 entries => { | |
78 assert_unreached("no entries should happen"); | |
79 }, | |
80 timeout => { | |
81 // timeout happened, all is well. | |
82 test4(); | |
83 } | |
84 ); | |
85 helper.nextTestRaf(); | |
86 } | |
87 | |
88 function test4() { | |
89 helper.createTest( | |
90 "unobserve target stops notifications, unobserve non-observed does nothing", | |
91 setup => { | |
92 helper.observer.observe(t1); | |
93 helper.observer.observe(t2); | |
94 helper.observer.unobserve(t1); | |
95 helper.observer.unobserve(document.body); | |
96 t1.style.width = "40px"; | |
97 t2.style.width = "40px"; | |
98 }, | |
99 entries => { | |
100 assert_equals(entries.length, 1, "only t2"); | |
101 assert_equals(entries[0].target, t2, "t2 was observed"); | |
102 helper.observer.disconnect(); | |
103 test5(); | |
104 } | |
105 ); | |
106 helper.nextTestRaf(); | |
107 } | |
108 | |
109 function test5() { | |
110 let t4 = document.querySelector('#target3'); | |
111 helper.createTest( | |
112 "observe img", | |
113 setup => { | |
114 helper.observer.observe(t4); | |
115 }, | |
116 entries => { | |
117 helper.nextTest(); | |
118 } | |
119 ); | |
120 helper.createTest( | |
121 "observe img, part 2", | |
122 setup => { | |
123 t4.style.width = "100.5px"; | |
124 }, | |
125 entries => { | |
126 assert_equals(entries.length, 1); | |
127 assert_equals(entries[0].contentRect.width, 100.5); | |
128 helper.observer.disconnect(); | |
129 test6(); | |
130 } | |
131 ); | |
132 helper.nextTestRaf(); | |
133 } | |
134 | |
135 function test6() { | |
136 let test = async_test('iframe notifications'); | |
137 let testRequested = false; | |
138 let iframe = document.querySelector('iframe'); | |
139 window.addEventListener('message', event => { | |
140 switch(event.data) { | |
141 case 'readyToTest': | |
142 if (!testRequested) { | |
143 iframe.contentWindow.postMessage('startTest', '*'); | |
144 testRequested = true; | |
145 } | |
146 break; | |
147 case 'success': | |
148 case 'fail': | |
149 test.step( () => { | |
150 assert_equals(event.data, 'success'); | |
151 test.done(); | |
152 }); | |
153 break; | |
154 } | |
155 }, false); | |
156 } | |
157 | |
158 test0(); | |
159 | |
160 </script> | |
OLD | NEW |