зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1774135 - `ResizeObserver`: Take subpixel snapping into account when reporting `devicePixelContentBoxSize`. r=emilio
Differential Revision: https://phabricator.services.mozilla.com/D151549
This commit is contained in:
David Shin
Родитель
bc21b9473b
Коммит
3fa1dd240a
|
|
@ -12,6 +12,7 @@
|
|||
#include "nsIContent.h"
|
||||
#include "nsIContentInlines.h"
|
||||
#include "nsIScrollableFrame.h"
|
||||
#include "nsLayoutUtils.h"
|
||||
#include <limits>
|
||||
|
||||
namespace mozilla::dom {
|
||||
|
|
@ -113,18 +114,34 @@ static gfx::Size CalculateBoxSize(Element* aTarget,
|
|||
case ResizeObserverBoxOptions::Border_box:
|
||||
return CSSPixel::FromAppUnits(frame->GetSize()).ToUnknownSize();
|
||||
case ResizeObserverBoxOptions::Device_pixel_content_box: {
|
||||
// This is a implementation-dependent for subpixel snapping algorithm.
|
||||
// Gecko relies on LayoutDevicePixel to convert (and snap) the app units
|
||||
// into device pixels in painting and gfx code, so here we simply
|
||||
// convert it into dev pixels and round it.
|
||||
//
|
||||
// Note: This size must contain integer values.
|
||||
// https://drafts.csswg.org/resize-observer/#dom-resizeobserverboxoptions-device-pixel-content-box
|
||||
const LayoutDeviceIntSize snappedSize =
|
||||
LayoutDevicePixel::FromAppUnitsRounded(
|
||||
GetContentRectSize(*frame),
|
||||
frame->PresContext()->AppUnitsPerDevPixel());
|
||||
return gfx::Size(snappedSize.ToUnknownSize());
|
||||
// Simply converting from app units to device units is insufficient - we
|
||||
// need to take subpixel snapping into account. Subpixel snapping happens
|
||||
// with respect to the reference frame, so do the dev pixel conversion
|
||||
// with our rectangle positioned relative to the reference frame, then
|
||||
// get the size from there.
|
||||
const auto* referenceFrame = nsLayoutUtils::GetReferenceFrame(frame);
|
||||
// GetOffsetToCrossDoc version handles <iframe>s in addition to normal
|
||||
// cases. We don't expect this to tight loop for additional checks to
|
||||
// matter.
|
||||
const auto offset = frame->GetOffsetToCrossDoc(referenceFrame);
|
||||
const auto contentSize = GetContentRectSize(*frame);
|
||||
// Casting to double here is deliberate to minimize rounding error in
|
||||
// upcoming operations.
|
||||
const auto appUnitsPerDevPixel =
|
||||
static_cast<double>(frame->PresContext()->AppUnitsPerDevPixel());
|
||||
// Calculation here is a greatly simplified version of
|
||||
// `NSRectToSnappedRect` as 1) we're not actually drawing (i.e. no draw
|
||||
// target), and 2) transform does not need to be taken into account.
|
||||
gfx::Rect rect{gfx::Float(offset.X() / appUnitsPerDevPixel),
|
||||
gfx::Float(offset.Y() / appUnitsPerDevPixel),
|
||||
gfx::Float(contentSize.Width() / appUnitsPerDevPixel),
|
||||
gfx::Float(contentSize.Height() / appUnitsPerDevPixel)};
|
||||
gfx::Point tl = rect.TopLeft().Round();
|
||||
gfx::Point br = rect.BottomRight().Round();
|
||||
|
||||
rect.SizeTo(gfx::Size(br.x - tl.x, br.y - tl.y));
|
||||
rect.NudgeToIntegers();
|
||||
return rect.Size().ToUnknownSize();
|
||||
}
|
||||
case ResizeObserverBoxOptions::Content_box:
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -163,3 +163,4 @@ support-files = window_bug1171215.html
|
|||
skip-if = toolkit == 'android' # Bug 1358633 - window.find doesn't work for Android
|
||||
[test_postmessage.html]
|
||||
skip-if = xorigin # JavaScript error: http://mochi.xorigin-test:8888/tests/SimpleTest/TestRunner.js, line 157: SecurityError: Permission denied to access property "wrappedJSObject" on cross-origin object
|
||||
[test_bug1774135.html]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,114 @@
|
|||
<!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>
|
||||
Загрузка…
Ссылка в новой задаче