Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 16:25:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1609580 [wpt PR 21212] - Resize Observer - Simple content-box and border-box observations, a=testonly

Browse Source 
Automatic update from web-platform-tests
Resize Observer - Simple content-box and border-box observations

It is possible to now observe changes to content box and border box of
an element that is being observed. However, changes to an element's
content box without a change in its border box can not be observed yet,
and will be addressed in a subsequent change.

Bug: 1042537
Change-Id: I6415fc4f5cec783cc717051c11b2fdd95d3a28e2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2004051
Reviewed-by: Philip Rogers <pdr@chromium.org>
Reviewed-by: Daniel Libby <dlibby@microsoft.com>
Commit-Queue: Sahir Vellani <sahir.vellani@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#737369}

--

wpt-commits: 276cbde855f10082da600bef4d2e8432f4e3a9fe
wpt-pr: 21212
This commit is contained in:
Sahir Vellani 2020-02-04 13:19:34 +00:00 committed by moz-wptsync-bot
parent 555b6e48bd
commit 94a79bbbd7
2 changed files with 108 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
testing/web-platform/tests/resize-observer/resources/resizeTestHelper.js
View File

@ -104,7 +104,9 @@ ResizeTestHelper.prototype = {
this._currentStep.timeout();
}
else {
assert_unreached("Timed out waiting for notification. (" + ResizeTestHelper.TIMEOUT + "ms)");
this._harnessTest.step(() => {
assert_unreached("Timed out waiting for notification. (" + ResizeTestHelper.TIMEOUT + "ms)");
});
}
this._nextStep();
});

105
testing/web-platform/tests/resize-observer/svg.html
View File

@ -19,6 +19,9 @@
<polyline points="0,300 100,300 50,350" style="fill:orange;stroke:black;stroke-width:1"/>
<rect x="0" y="380" width="10" height="10" style="fill:orange; stroke:black; stroke-width:1" />
<text x="0" y="400" font-size="20">svg text tag</text>
<g fill="white" stroke="green" stroke-width="5">
<rect x="0" y="380" width="50" height="20" id="g_rect" />
</g>
</svg>
<script>
'use strict';
@ -363,6 +366,105 @@ function test11() {
return helper.start(() => svg.remove());
}
function test12() {
let target = document.querySelector('rect');
let helper = new ResizeTestHelper(
"test12: observe svg:rect content box",
[
{
setup: observer => {
observer.observe(target);
},
notify: (entries, observer) => {
return true; // Delay next step
}
},
{
setup: observer => {
target.setAttribute('width', 45);
},
notify: (entries, observer) => {
assert_equals(entries.length, 1);
assert_equals(entries[0].contentRect.width, 45);
assert_equals(entries[0].contentRect.height, 10);
assert_equals(entries[0].contentBoxSize.inlineSize, 45);
assert_equals(entries[0].contentBoxSize.blockSize, 10);
}
}
]);
return helper.start();
}
function test13() {
let target = document.querySelector('rect');
let helper = new ResizeTestHelper(
"test13: observe svg:circle border box",
[
{
setup: observer => {
observer.observe(target);
},
notify: (entries, observer) => {
return true; // Delay next step
}
},
{
setup: observer => {
target.setAttribute('width', 20);
target.setAttribute('height', 20);
},
notify: (entries, observer) => {
assert_equals(entries.length, 1);
assert_equals(entries[0].contentRect.width, 20);
assert_equals(entries[0].contentRect.height, 20);
assert_equals(entries[0].contentBoxSize.inlineSize, 20);
assert_equals(entries[0].contentBoxSize.blockSize, 20);
assert_equals(entries[0].borderBoxSize.inlineSize, 20);
assert_equals(entries[0].borderBoxSize.blockSize, 20);
}
}
]);
return helper.start();
}
function test14() {
let target = document.querySelector('#g_rect');
let helper = new ResizeTestHelper(
"test14: observe g:rect content and border box",
[
{
setup: observer => {
observer.observe(target);
},
notify: (entries, observer) => {
assert_equals(entries.length, 1);
assert_equals(entries[0].contentRect.width, 50);
assert_equals(entries[0].contentRect.height, 20);
assert_equals(entries[0].contentBoxSize.inlineSize, 50);
assert_equals(entries[0].contentBoxSize.blockSize, 20);
assert_equals(entries[0].borderBoxSize.inlineSize, 50);
assert_equals(entries[0].borderBoxSize.blockSize, 20);
return true; // Delay next step
}
},
{
setup: observer => {
target.setAttribute('width', 15);
},
notify: (entries, observer) => {
assert_equals(entries.length, 1);
assert_equals(entries[0].contentRect.width, 15);
assert_equals(entries[0].contentRect.height, 20);
assert_equals(entries[0].contentBoxSize.inlineSize, 15);
assert_equals(entries[0].contentBoxSize.blockSize, 20);
assert_equals(entries[0].borderBoxSize.inlineSize, 15);
assert_equals(entries[0].borderBoxSize.blockSize, 20);
}
}
]);
return helper.start();
}
let guard;
test(_ => {
assert_own_property(window, "ResizeObserver");
@ -381,6 +483,9 @@ test0()
.then(() => { return test9(); })
.then(() => { return test10(); })
.then(() => { return test11(); })
.then(() => { return test12(); })
.then(() => { return test13(); })
.then(() => { return test14(); })
.then(() => { guard.done(); });
</script>