blob: 28bba68e1f4c0a96d215a446825ceb8528467d38 [file] [log] [blame]
<!DOCTYPE html><!-- webkit-test-runner [ experimental:ResizeObserverEnabled=true ] -->
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="./resources/resizeTestHelper.js"></script>
<style>
#target {
width: 200px;
height: 200px;
}
</style>
<div id="target"></div>
<svg height="200" width="200">
<circle cx="10" cy="10" r="5" style="fill:orange;stroke:black;stroke-width:1" />
</svg>
<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 target = document.querySelector('#target');
let helper = new ResizeTestHelper(
"test0: The change of zoom shouldn't affect resizeObserver size.",
[
{
setup: observer => {
observer.observe(target);
},
notify: entries => {
assert_equals(entries[0].contentRect.width, 200);
assert_equals(entries[0].contentRect.height, 200);
}
},
{
setup: observer => {
window.internals.setPageZoomFactor(2);
target.style.width = "100px";
},
notify: entries => {
assert_equals(entries[0].contentRect.width, 100);
assert_equals(entries[0].contentRect.height, 200);
}
}
]);
return helper.start();
}
function test1() {
let target = document.querySelector('circle');
let helper = new ResizeTestHelper(
"test1: The change of zoom shouldn't affect svg resizeObserver size.",
[
{
setup: observer => {
observer.observe(target);
},
notify: entries => {
assert_equals(entries[0].contentRect.width, 10);
assert_equals(entries[0].contentRect.height, 10);
}
},
{
setup: observer => {
window.internals.setPageZoomFactor(2);
target.setAttribute('r', 10);
},
notify: entries => {
assert_equals(entries[0].contentRect.width, 20);
assert_equals(entries[0].contentRect.height, 20);
}
}
]);
return helper.start();
}
let guard;
test(_ => {
assert_own_property(window, "ResizeObserver");
guard = async_test('guard');
}, "ResizeObserver implemented")
test0()
.then(() => { return test1(); })
.then(() => { guard.done(); });
</script>