114 lines
3 KiB
HTML
114 lines
3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<title>Test for Bug 1774135</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
|
|
<style>
|
|
.split {
|
|
width: 299px;
|
|
display: flex;
|
|
background: red; /* so we can see if it's visible. It should NOT be visible */
|
|
}
|
|
.split>* {
|
|
flex: 1 1 auto;
|
|
height: 50px;
|
|
}
|
|
.left {
|
|
background: pink;
|
|
}
|
|
.middle {
|
|
background: lightgreen;
|
|
}
|
|
.right {
|
|
background: lightblue;
|
|
}
|
|
</style>
|
|
<script>
|
|
function WidthTracker(observed) {
|
|
this._observer = new ResizeObserver(this._handleNotification.bind(this));
|
|
this._observed = observed;
|
|
}
|
|
|
|
WidthTracker.prototype = {
|
|
_handleNotification(entries) {
|
|
for (let entry of entries) {
|
|
this._elemToWidth.set(
|
|
entry.target,
|
|
entry.devicePixelContentBoxSize[0].inlineSize
|
|
);
|
|
}
|
|
for (let elem of this._observed) {
|
|
if (!this._elemToWidth.has(elem)) {
|
|
return;
|
|
}
|
|
}
|
|
// Note(dshin): Wait a tick - we need to let the resize observer loop exit
|
|
// and avoid resize loop error.
|
|
const resolve = this._resolve;
|
|
const result = new Map(this._elemToWidth);
|
|
this._observer.disconnect();
|
|
delete this._resolve;
|
|
delete this._elemToWidth;
|
|
window.requestAnimationFrame(function() {
|
|
resolve(result);
|
|
});
|
|
},
|
|
start() {
|
|
this._elemToWidth = new Map();
|
|
for (const elem of this._observed) {
|
|
this._observer.observe(elem);
|
|
}
|
|
return new Promise(res => { this._resolve = res; });
|
|
},
|
|
};
|
|
async function run_test(tracker, container, children, relativeZoom) {
|
|
SpecialPowers.setFullZoom(window, relativeZoom);
|
|
let result = await tracker.start(Array.from(children).concat([container]));
|
|
let observedChildrenWidths = 0;
|
|
for (const child of children) {
|
|
observedChildrenWidths += result.get(child);
|
|
}
|
|
let containerWidth = result.get(container);
|
|
is(observedChildrenWidths, containerWidth, "Combined widths of children == container width");
|
|
}
|
|
|
|
const originalZoom = SpecialPowers.getFullZoom(window);
|
|
let tracker;
|
|
let container;
|
|
let children;
|
|
|
|
const zoomsToTest = [
|
|
300,
|
|
240,
|
|
200,
|
|
170,
|
|
150,
|
|
133,
|
|
120,
|
|
110,
|
|
100,
|
|
90,
|
|
80,
|
|
67,
|
|
50,
|
|
30,
|
|
];
|
|
|
|
add_task(async () => {
|
|
container = document.querySelector('.split');
|
|
children = document.querySelectorAll('.split>*');
|
|
tracker = new WidthTracker(Array.from(children).concat([container]));
|
|
});
|
|
for (let i = 0; i < zoomsToTest.length; ++i) {
|
|
let relativeZoom = originalZoom * zoomsToTest[i] / 100;
|
|
add_task(async () => { await run_test(tracker, container, children, relativeZoom); });
|
|
}
|
|
add_task(async () => { SpecialPowers.setFullZoom(window, originalZoom); });
|
|
</script>
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1774135">Mozilla Bug 1774135</a>
|
|
<div class="split">
|
|
<div class="left"></div>
|
|
<div class="middle"></div>
|
|
<div class="right"></div>
|
|
</div>
|