Index: third_party/WebKit/LayoutTests/resize-observer/observe.html |
diff --git a/third_party/WebKit/LayoutTests/resize-observer/observe.html b/third_party/WebKit/LayoutTests/resize-observer/observe.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..595b98ece314eee96ceb01359cd58d095ecde8fd |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/resize-observer/observe.html |
@@ -0,0 +1,103 @@ |
+<!doctype html> |
+<head> |
+ <script src="../resources/testharness.js"></script> |
+ <script src="../resources/testharnessreport.js"></script> |
+ <script src="./resources/resizeTestHelper.js"></script> |
+</head> |
+<p>ResizeObserver tests</p> |
+<div id="target1" style="width:100px;height:100px;">t1</div> |
+<div id="target2" style="width:100px;height:100px;">t2</div> |
+<script> |
+'use strict'; |
+ |
+var helper = new ResizeTestHelper(); |
+ |
+let t1 = document.querySelector('#target1'); |
+let t2 = document.querySelector('#target2'); |
+ |
+function test0() { |
+ helper.createTest( |
+ "simple observation", |
+ _ => { |
+ helper.observer.disconnect(); |
+ helper.observer.observe(t1); |
+ t1.style.width = "5px"; |
+ }, |
+ entries => { |
+ assert_equals(entries.length, 1, "1 pending notification"); |
+ assert_equals(entries[0].target, t1, "target is t1"); |
+ assert_equals(entries[0].contentRect.width, 5, "target width"); |
+ test1(); |
+ } |
+ ); |
+} |
+ |
+function test1() { |
+ helper.createTest( |
+ "multiple observation on same element trigger only one", |
+ _ => { |
+ helper.observer.disconnect(); |
+ helper.observer.observe(t1); |
+ helper.observer.observe(t1); |
+ t1.style.width = "10px"; |
+ }, |
+ entries => { |
+ assert_equals(entries.length, 1, "1 pending notification"); |
+ test2(); |
+ } |
+ ); |
+} |
+ |
+function test2() { |
+ test(_ => { |
+ assert_throws(null, _=> { |
+ helper.observer.observe({}); |
+ }); |
+ test3(); |
+ }, |
+ "throw exception when observing non-element" |
+ ); |
+} |
+ |
+function test3() { |
+ helper.createTest( |
+ "disconnect stops all notifications", |
+ _ => { |
+ helper.observer.observe(t1); |
+ helper.observer.observe(t2); |
+ helper.observer.disconnect(); |
+ t1.style.width = "30px"; |
+ }, |
+ entries => { |
+ assert_unreached("no entries should happen"); |
+ }, |
+ _ => { |
+ // timeout happened, all is well. |
+ test4(); |
+ } |
+ ); |
+} |
+ |
+function test4() { |
+ helper.createTest( |
+ "unobserve target stops notifications, unobserve non-observed does nothing", |
+ _ => { |
+ helper.observer.disconnect(); |
+ helper.observer.observe(t1); |
+ helper.observer.observe(t2); |
+ helper.observer.unobserve(t1); |
+ helper.observer.unobserve(document.body); |
+ t1.style.width = "40px"; |
+ t2.style.width = "40px"; |
+ }, |
+ entries => { |
+ assert_equals(entries.length, 1, "only t2"); |
+ assert_equals(entries[0].target, t2, "t2 was observed"); |
+ } |
+ ); |
+} |
+ |
+test0(); |
+helper.startTests(); |
+ |
+</script> |