Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(182)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/resize-observer/observe.html

Issue 2204503002: ResizeObserver pt6: integration (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Added test for moving dom inside eventloop Created 4 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« third_party/WebKit/LayoutTests/resize-observer/eventloop.html ('K') | « third_party/WebKit/LayoutTests/resize-observer/notify.html ('k') | third_party/WebKit/LayoutTests/resize-observer/resources/iframe.html » ('j') | third_party/WebKit/Source/core/frame/FrameView.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!doctype html>
2 <head>
3 <script src="../resources/testharness.js"></script>
4 <script src="../resources/testharnessreport.js"></script>
5 <script src="./resources/resizeTestHelper.js"></script>
6 </head>
7 <p>ResizeObserver tests</p>
8 <div id="target1" style="width:100px;height:100px;">t1</div>
9 <div id="target2" style="width:100px;height:100px;">t2</div>
10 <img id="target3" style="width:100px;height:100px;">
11 <iframe src="./resources/iframe.html" width="300px" height="100px" style="displa y:block"></iframe>
12 <script>
13 'use strict';
14
15 var helper = new ResizeTestHelper();
16
17 let t1 = document.querySelector('#target1');
18 let t2 = document.querySelector('#target2');
19
20 // allow uncaught exception because ResizeObserver posts exceptions
21 // to window error handler when limit is exceeded.
22 setup({allow_uncaught_exception: true});
23
24 function test0() {
25 helper.createTest(
26 "simple observation",
27 _ => {
28 helper.observer.disconnect();
29 helper.observer.observe(t1);
30 t1.style.width = "5px";
31 },
32 entries => {
33 assert_equals(entries.length, 1, "1 pending notification");
34 assert_equals(entries[0].target, t1, "target is t1");
35 assert_equals(entries[0].contentRect.width, 5, "target width");
36 test1();
37 }
38 );
39 helper.nextTest();
40 }
41
42 function test1() {
43 helper.createTest(
44 "multiple observation on same element trigger only one",
45 _ => {
46 helper.observer.observe(t1);
47 helper.observer.observe(t1);
48 t1.style.width = "10px";
49 },
50 entries => {
51 assert_equals(entries.length, 1, "1 pending notification");
52 helper.observer.disconnect();
53 test2();
54 }
55 );
56 helper.nextTestRaf();
57 }
58
59 function test2() {
60 test(_ => {
61 assert_throws(null, _=> {
62 helper.observer.observe({});
63 });
64 test3();
65 },
66 "throw exception when observing non-element"
67 );
68 }
69
70 function test3() {
71 helper.createTest(
72 "disconnect stops all notifications",
73 setup => {
74 helper.observer.observe(t1);
75 helper.observer.observe(t2);
76 helper.observer.disconnect();
77 t1.style.width = "30px";
78 },
79 entries => {
80 assert_unreached("no entries should happen");
81 },
82 timeout => {
83 // timeout happened, all is well.
84 test4();
85 }
86 );
87 helper.nextTestRaf();
88 }
89
90 function test4() {
91 helper.createTest(
92 "unobserve target stops notifications, unobserve non-observed does nothing",
93 setup => {
94 helper.observer.observe(t1);
95 helper.observer.observe(t2);
96 helper.observer.unobserve(t1);
97 helper.observer.unobserve(document.body);
98 t1.style.width = "40px";
99 t2.style.width = "40px";
100 },
101 entries => {
102 assert_equals(entries.length, 1, "only t2");
103 assert_equals(entries[0].target, t2, "t2 was observed");
104 helper.observer.disconnect();
105 test5();
106 }
107 );
108 helper.nextTestRaf();
109 }
110
111 function test5() {
112 let t4 = document.querySelector('#target3');
113 helper.createTest(
114 "observe img",
115 setup => {
116 helper.observer.observe(t4);
117 },
118 entries => {
119 helper.nextTest();
120 }
121 );
122 helper.createTest(
123 "observe img, part 2",
124 setup => {
125 t4.style.width = "100.5px";
126 },
127 entries => {
128 assert_equals(entries.length, 1);
129 assert_equals(entries[0].contentRect.width, 100.5);
130 helper.observer.disconnect();
131 test6();
132 }
133 );
134 helper.nextTestRaf();
135 }
136
137 function test6() {
138 let test = async_test('iframe notifications');
139 let testRequested = false;
140 let iframe = document.querySelector('iframe');
141 window.addEventListener('message', event => {
142 switch(event.data) {
143 case 'readyToTest':
144 if (!testRequested) {
145 iframe.contentWindow.postMessage('startTest', '*');
146 testRequested = true;
147 }
148 break;
149 case 'success':
150 case 'fail':
151 test.step( () => {
152 assert_equals(event.data, 'success');
153 test.done();
154 });
155 break;
156 }
157 }, false);
158 }
159
160 test0();
161
162 </script>
OLDNEW
« third_party/WebKit/LayoutTests/resize-observer/eventloop.html ('K') | « third_party/WebKit/LayoutTests/resize-observer/notify.html ('k') | third_party/WebKit/LayoutTests/resize-observer/resources/iframe.html » ('j') | third_party/WebKit/Source/core/frame/FrameView.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698