mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 01:05:45 +00:00
Bug 1545239 - Add tests for border-box and different writing modes. r=dholbert
1. Add new tests with an extra argument of "content-box"/"border-box" in observe(), and test contectBoxSize and borderBoxSize. 2. Add a new test for changing the writing mode. Changing writing mode makes the element change the orientation, but the logical box size is still the same, so we shouldn't fire the event. Differential Revision: https://phabricator.services.mozilla.com/D28739 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Boris Chiou
parent
d8c029b6bf
commit
efb8ebe0fe
@ -228,6 +228,343 @@ function test7() {
|
||||
});
|
||||
}
|
||||
|
||||
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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 100,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 100,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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.inlineSize, 90,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 90,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 90,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 100,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 100,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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.inlineSize, 92,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 92,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 100,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 100,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 100,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 100,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 108,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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.inlineSize, 50,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 50,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 50,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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.inlineSize, 50,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 75,
|
||||
"target content-box block size");
|
||||
assert_equals(entries[0].borderBoxSize.inlineSize, 50,
|
||||
"target border-box inline size");
|
||||
assert_equals(entries[0].borderBoxSize.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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.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.inlineSize, 100,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.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.inlineSize, 50,
|
||||
"target content-box inline size");
|
||||
assert_equals(entries[0].contentBoxSize.blockSize, 100,
|
||||
"target content-box block size");
|
||||
},
|
||||
}
|
||||
]);
|
||||
|
||||
return helper.start(() => t.remove());
|
||||
}
|
||||
|
||||
let guard;
|
||||
test(_ => {
|
||||
assert_own_property(window, "ResizeObserver");
|
||||
@ -242,6 +579,12 @@ test0()
|
||||
.then(() => test5())
|
||||
.then(() => test6())
|
||||
.then(() => test7())
|
||||
.then(() => test8())
|
||||
.then(() => test9())
|
||||
.then(() => test10())
|
||||
.then(() => test11())
|
||||
.then(() => test12())
|
||||
.then(() => test13())
|
||||
.then(() => guard.done());
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user