<!doctype html><!-- webkit-test-runner [ ResizeObserverEnabled=true ] -->
<title>ResizeObserver tests</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/resizeTestHelper.js"></script>
<div id="log"></div>
<script>
'use strict';

// allow uncaught exception because ResizeObserver posts exceptions
// to window error handler when limit is exceeded.
setup({allow_uncaught_exception: true});

function test0() {
  let t = createAndAppendElement("div");
  t.style.width = "100px";

  let helper = new ResizeTestHelper(
    "test0: simple observation",
  [
    {
      setup: observer => {
        observer.observe(t);
        t.style.width = "5px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 5, "target width");
      }
    }
  ]);
  return helper.start(() => t.remove());
}

function test1() {
  let t = createAndAppendElement("div");
  t.style.width = "100px";

  let helper = new ResizeTestHelper(
    "test1: multiple observation on same element trigger only one",
  [
    {
      setup: observer => {
        observer.observe(t);
        observer.observe(t);
        t.style.width = "10px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
      }
    }
  ]);
  return helper.start(() => t.remove());
}

function test2() {
  test(() => {
      assert_throws_js(TypeError, _=> {
        let ro = new ResizeObserver(() => {});
        ro.observe({});
      });
    },
    "test2: throw exception when observing non-element"
  );
  return Promise.resolve();
}

function test3() {
  let t1 = createAndAppendElement("div");
  let t2 = createAndAppendElement("div");
  t1.style.width = "100px";
  t2.style.width = "100px";

  let helper = new ResizeTestHelper(
    "test3: disconnect stops all notifications", [
    {
      setup: observer => {
        observer.observe(t1);
        observer.observe(t2);
        observer.disconnect();
        t1.style.width = "30px";
      },
      notify: entries => {
         assert_unreached("no entries should be observed");
      },
      timeout: () => {
        // expected
      }
    }
  ]);
  return helper.start(() => {
    t1.remove();
    t2.remove();
  });
}

function test4() {
  let t1 = createAndAppendElement("div");
  let t2 = createAndAppendElement("div");
  t1.style.width = "100px";
  t2.style.width = "100px";

  let helper = new ResizeTestHelper(
    "test4: unobserve target stops notifications, unobserve non-observed does nothing", [
    {
      setup: observer => {
        observer.observe(t1);
        observer.observe(t2);
        observer.unobserve(t1);
        observer.unobserve(document.body);
        t1.style.width = "40px";
        t2.style.width = "40px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "only t2");
        assert_equals(entries[0].target, t2, "t2 was observed");
      }
    }
  ]);
  return helper.start(() => {
    t1.remove();
    t2.remove();
  });
}

function test5() {
  const img = new Image();
  img.style.width = "15px";
  img.style.height = "15px";
  img.src = "resources/image.png";

  let helper = new ResizeTestHelper("test5: observe img",[
    {
      setup: observer => {
        observer.observe(img);
      },
      notify: entries => {
      }
    },
    {
      setup: observer => {
        img.style.width = "15.5px";
      },
      notify: entries => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 15.5);
      }
    }
  ]);
  return img.decode().then(() => {
    return new Promise(resolve => {
      requestAnimationFrame(() => {
        document.body.appendChild(img);
        resolve();
      });
    });
  }).catch(error => {
    assert_unreached("decode image failed");
  }).then(() => {
    return helper.start(() => img.remove());
  });
}

function test6() {
  let iframe = createAndAppendElement("iframe");
  iframe.src = "./resources/iframe.html";
  iframe.width = "300px";
  iframe.height = "100px";
  iframe.style.display = "block";

  return new Promise(function(resolve, reject) {
    iframe.onload = () => resolve();
  }).then(() => {
    let resolvePromise;
    let promise = new Promise((resolve) => {
      resolvePromise = resolve;
    });
    let test = async_test('test6: iframe notifications');
    let testRequested = false;
    test.add_cleanup(() => iframe.remove());

    window.addEventListener('message', event => {
      switch(event.data) {
      case 'readyToTest':
        if (!testRequested) {
          iframe.contentWindow.postMessage('startTest', '*');
          testRequested = true;
        }
      break;
      case 'success':
      case 'fail':
        window.requestAnimationFrame(() => {
          test.step( () => {
            assert_equals(event.data, 'success');
            test.done();
            resolvePromise();
          });
        });
      break;
      }
    }, false);
    return promise;
  });
}

function test7() {
  let harnessTest = async_test("test7: callback.this");
  let resolvePromise;
  let ro = new ResizeObserver( function(entries, obs)  {
    let callbackThis = this;
    resolvePromise();
    harnessTest.step(() => {
      assert_equals(callbackThis, ro, "callback.this is ResizeObserver");
      assert_equals(obs, ro, "2nd argument is ResizeObserver");
      ro.disconnect();
      // every reference to RO must be null before test completes
      // to avoid triggering test leak-detection
      ro = null;
      callbackThis = null;
      obs = null;
      harnessTest.done();
     });
    }
  );

  let t = createAndAppendElement("div");
  t.style.width = "100px";
  harnessTest.add_cleanup(() => t.remove());

  ro.observe(t);

  return new Promise( (resolve, reject) => {
    resolvePromise = resolve;
  });
}

function test8() {
  let t = createAndAppendElement("div");
  t.style.width = "100px";
  t.style.height = "100px";

  let helper = new ResizeTestHelper(
    "test8: simple content-box observation",
  [
    {
      setup: observer => {
        observer.observe(t, { box: "content-box" });
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 100, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentRect.top, 0, "target top padding");
        assert_equals(entries[0].contentRect.left, 0, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
                      "target border-box block size");
      }
    },
    {
      setup: observer => {
        t.style.width = "90px";
        t.style.height = "90px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 90, "target width");
        assert_equals(entries[0].contentRect.height, 90, "target height");
        assert_equals(entries[0].contentRect.top, 0, "target top padding");
        assert_equals(entries[0].contentRect.left, 0, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 90,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 90,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 90,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 90,
                      "target border-box block size");
      }
    },
    {
      setup: observer => {
        t.style.padding = "5px";
      },
      notify: entries => {
        assert_unreached("the 'content-box' ResizeObserver shouldn't fire " +
                         "for restyles that don't affect the content-box size");
      },
      timeout: () => {
        // expected
        // Note: the border-box size is 100px x 100px right now.
      }
    }
  ]);
  return helper.start(() => t.remove());
}

function test9() {
  let t = createAndAppendElement("div");
  t.style.width = "100px";
  t.style.height = "100px";

  let helper = new ResizeTestHelper(
    "test9: simple content-box observation but keep border-box size unchanged",
  [
    {
      setup: observer => {
        observer.observe(t, { box: "content-box" });
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 100, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentRect.top, 0, "target top padding");
        assert_equals(entries[0].contentRect.left, 0, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
                      "target border-box block size");
      }
    },
    {
      setup: observer => {
        // Keep the border-box size the same, and change the content-box size.
        t.style.width = "92px";
        t.style.height = "92px";
        t.style.padding = "4px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 92, "target width");
        assert_equals(entries[0].contentRect.height, 92, "target height");
        assert_equals(entries[0].contentRect.top, 4, "target top padding");
        assert_equals(entries[0].contentRect.left, 4, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 92,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 92,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
                      "target border-box block size");
      }
    }
  ]);
  return helper.start(() => t.remove());
}

function test10() {
  let t = createAndAppendElement("div");
  t.style.width = "100px";
  t.style.height = "100px";

  let helper = new ResizeTestHelper(
    "test10: simple border-box observation",
  [
    {
      setup: observer => {
        observer.observe(t, { box: "border-box" });
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 100, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentRect.top, 0, "target top padding");
        assert_equals(entries[0].contentRect.left, 0, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
                      "target border-box block size");
      }
    },
    {
      setup: observer => {
        t.style.padding = "4px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 100, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentRect.top, 4, "target top padding");
        assert_equals(entries[0].contentRect.left, 4, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 108,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 108,
                      "target border-box block size");
      }
    },
    {
      setup: observer => {
        t.style.width = "104px";
        t.style.height = "104px";
        t.style.padding = "2px";
      },
      notify: entries => {
        assert_unreached("the 'border-box' ResizeObserver shouldn't fire " +
                         "for restyles that don't affect the border-box size");
      },
      timeout: () => {
        // expected: 104 + 2 * 2 = 108. The border-box size is the same.
      }
    }
  ]);
  return helper.start(() => t.remove());
}

function test11() {
  let wrapper = createAndAppendElement("div");
  wrapper.style.width = "100px";
  wrapper.style.height = "100px";
  wrapper.style.writingMode = "vertical-rl";
  let t = createAndAppendElement("div", wrapper);
  t.style.inlineSize = "50px";
  t.style.blockSize = "50px";

  let helper = new ResizeTestHelper(
    "test11: simple observation with vertical writing mode",
  [
    {
      setup: observer => {
        observer.observe(t);
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 50, "target width");
        assert_equals(entries[0].contentRect.height, 50, "target height");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 50,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
                      "target border-box block size");
      }
    },
    {
      setup: observer => {
        t.style.blockSize = "75px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 75, "target width");
        assert_equals(entries[0].contentRect.height, 50, "target height");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 75,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 75,
                      "target border-box block size");
      }
    }
  ]);

  return helper.start(() => {
    t.remove();
    wrapper.remove();
  });
}

function test12() {
  let t = createAndAppendElement("div");
  t.style.writingMode = "vertical-lr";
  t.style.inlineSize = "100px";
  t.style.blockSize = "50px";

  let helper = new ResizeTestHelper(
    "test12: no observation is fired after the change of writing mode when " +
    "box's specified size comes from logical size properties.",
  [
    {
      setup: observer => {
        observer.observe(t);
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 50, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 50,
                      "target content-box block size");
      }
    },
    {
      setup: observer => {
        t.style.writingMode = "horizontal-tb";
      },
      notify: entries => {
        assert_unreached("the logical size of content-box doesn't change");
      },
      timeout: () => {
        // expected: We don't change the logical size of content-box.
      }
    }
  ]);

  return helper.start(() => t.remove());
}

function test13() {
  let t = createAndAppendElement("div");
  t.style.writingMode = "vertical-lr";
  t.style.height = "100px";
  t.style.width = "50px";

  let helper = new ResizeTestHelper(
    "test13: an observation is fired after the change of writing mode when " +
    "box's specified size comes from physical size properties.",
  [
    {
      setup: observer => {
        observer.observe(t);
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 50, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 50,
                      "target content-box block size");
      }
    },
    {
      setup: observer => {
        t.style.writingMode = "horizontal-tb";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 50, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
                      "target content-box block size");
      },
    }
  ]);

  return helper.start(() => t.remove());
}

function test14() {
  let t = createAndAppendElement("div");
  t.style.width = "100px";
  t.style.height = "100px";

  let helper = new ResizeTestHelper(
    "test14: observe the same target but using a different box should " +
    "override the previous one",
  [
    {
      setup: observer => {
        observer.observe(t, { box: "content-box" });
        observer.observe(t, { box: "border-box" });
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 100, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentRect.top, 0, "target top padding");
        assert_equals(entries[0].contentRect.left, 0, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
                      "target border-box block size");
      }
    },
    {
      setup: observer => {
        // Change border-box size.
        t.style.padding = "4px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 100, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentRect.top, 4, "target top padding");
        assert_equals(entries[0].contentRect.left, 4, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 108,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 108,
                      "target border-box block size");
      }
    },
    {
      setup: observer => {
        // Change only content-box size.
        t.style.width = "104px";
        t.style.height = "104px";
        t.style.padding = "2px";
      },
      notify: entries => {
        assert_unreached("the 'border-box' ResizeObserver shouldn't fire " +
                         "for restyles that don't affect the border-box size");
      },
      timeout: () => {
        // expected: 104 + 2 * 2 = 108. The border-box size is the same.
      }
    }
  ]);
  return helper.start(() => t.remove());
}

function test15() {
  let t = createAndAppendElement("div");
  t.style.height = "100px";
  t.style.width = "50px";

  let helper = new ResizeTestHelper(
    "test15: an observation is fired with box dimensions 0 when element's " +
    "display property is set to inline",
  [
    {
      setup: observer => {
        observer.observe(t);
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 50, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
                      "target content-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
                      "target content-box block size");
      }
    },
    {
      setup: observer => {
        t.style.display = "inline";
      },
      notify: entries => {
        assert_equals(entries[0].contentRect.width, 0, "target width");
        assert_equals(entries[0].contentRect.height, 0, "target height");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 0,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 0,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 0,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 0,
                      "target border-box block size");
      }
    }
  ]);

  return helper.start(() => t.remove());
}

function test16() {
  let t = createAndAppendElement("span");

  let helper = new ResizeTestHelper(
    // See: https://drafts.csswg.org/resize-observer/#intro.
    "test16: observations do not fire for non-replaced inline elements",
  [
    {
      setup: observer => {
        observer.observe(t);
      },
      notify: entries => {
        assert_unreached("No observation should fire for non box element")
      },
      timeout: () => {}
    }
  ]);

  return helper.start(() => t.remove());

}

function test17() {
  // <div id="outer">
  //   <div id="nested">
  //   </div>
  // </div>

  let outer = document.createElement('div');
  outer.style.width = "100px";
  outer.style.height = "100px";
  outer.style.padding = "10px";
  outer.style.border = "1px solid blue"
  let nested = document.createElement('div');
  nested.style.width = "60px";
  nested.style.height = "50px";
  nested.style.padding = "5%";
  nested.style.boxSizing = "border-box";
  nested.style.border = "5px solid black";
  outer.appendChild(nested);
  document.body.appendChild(outer);

  let helper = new ResizeTestHelper(
    "test17: Box sizing snd Resize Observer notifications",
  [
    {
      setup: observer => {
        observer.observe(nested, { box: "content-box" });
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, nested, "target is nested");
        assert_equals(entries[0].contentRect.width, 40, "target width");
        assert_equals(entries[0].contentRect.height, 30, "target height");
        assert_equals(entries[0].contentRect.top, 5, "target top padding");
        assert_equals(entries[0].contentRect.left, 5, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 40,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 30,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
                      "target border-box block size");
      }
    },
    {
      // Changes to a parent's dimensions with a child's padding set as a percentage
      // should fire observation if content-box is being observed
      setup: observer => {
        outer.style.height = "200px";
        outer.style.width = "200px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, nested, "target is nested");
        assert_equals(entries[0].contentRect.width, 30, "target width");
        assert_equals(entries[0].contentRect.height, 20, "target height");
        assert_equals(entries[0].contentRect.top, 10, "target top padding");
        assert_equals(entries[0].contentRect.left, 10, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 30,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 20,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
                      "target border-box block size");
      }
    },
    {
      // Changes to a parent's dimensions with a child's padding set as a percentage
      // should fire observation if content-box is being observed
      setup: observer => {
        nested.style.border = "1px solid black";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, nested, "target is nested");
        assert_equals(entries[0].contentRect.width, 38, "target width");
        assert_equals(entries[0].contentRect.height, 28, "target height");
        assert_equals(entries[0].contentRect.top, 10, "target top padding");
        assert_equals(entries[0].contentRect.left, 10, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 38,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 28,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
                      "target border-box block size");
      }
    },
    {
      setup: observer => {
        observer.observe(nested, { box: "border-box" });
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, nested, "target is nested");
        assert_equals(entries[0].contentRect.width, 38, "target width");
        assert_equals(entries[0].contentRect.height, 28, "target height");
        assert_equals(entries[0].contentRect.top, 10, "target top padding");
        assert_equals(entries[0].contentRect.left, 10, "target left padding");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 38,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 28,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
                      "target border-box block size");
      }
    },
    {
      // Changes to a parent's dimensions with a child's padding set as a percentage
      // should not fire observation if border-box is being observed
      setup: observer => {
        outer.style.height = "100px";
      },
      notify: entries => {
        assert_unreached("No observation should be fired when nested border box remains constant");
      },
      timeout: () => {
        // expected
      }
    },

  ]);
  return helper.start(() => nested.remove());
}

function test18() {
  let t = createAndAppendElement("div");
  t.style.height = "100px";
  t.style.width = "50px";

  let helper = new ResizeTestHelper(
    "test18: an observation is fired when device-pixel-content-box is being " +
    "observed",
  [
    {
      setup: observer => {
        observer.observe(t, {box: "device-pixel-content-box"});
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 50, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
                      "target border-box block size");
        assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 50,
                      "target device-pixel-content-box inline size");
        assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 100,
                      "target device-pixel-content-box block size");
      }
    },
    {
      setup: observer => {
        document.body.style.zoom = 3;
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t, "target is t");
        assert_equals(entries[0].contentRect.width, 50, "target width");
        assert_equals(entries[0].contentRect.height, 100, "target height");
        assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
                      "target content-box inline size");
        assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
                      "target content-box block size");
        assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
                      "target border-box inline size");
        assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
                      "target border-box block size");
        assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 150,
                      "target device-pixel-content-box inline size");
        assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 300,
                      "target device-pixel-content-box block size");
      }
    }
  ]);

  return helper.start(() => t.remove());
}

let guard;
test(_ => {
  assert_own_property(window, "ResizeObserver");
  guard = async_test('guard');
}, "ResizeObserver implemented")

test0()
  .then(() => test1())
  .then(() => test2())
  .then(() => test3())
  .then(() => test4())
  .then(() => test5())
  .then(() => test6())
  .then(() => test7())
  .then(() => test8())
  .then(() => test9())
  .then(() => test10())
  .then(() => test11())
  .then(() => test12())
  .then(() => test13())
  .then(() => test14())
  .then(() => test15())
  .then(() => test16())
  .then(() => test17())
  .then(() => test18())
  .then(() => guard.done());

</script>