| 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>
|
|
|