mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 01:35:08 +02:00
c56c933014
If our UI informed the page of a DPI change, we would store the new device pixel ratio and leave it at that. It would take a layout/style update (e.g. by clicking the page) to actually render the page using the new DPI. This is very visible on macOS when moving the Ladybird window from a 1x resolution monitor to a HiDPI 2x monitor. We now instantly update the backing stores and mark media queries for reevaluation. Moving the Ladybird window on macOS now immediately updates the page when dragging it to a HiDPI monitor.
37 lines
1.3 KiB
HTML
37 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<script src="include.js"></script>
|
|
<script>
|
|
asyncTest(done => {
|
|
const mql = window.matchMedia("(resolution: 2dppx)");
|
|
println(`Initial matches (at 1x): ${mql.matches}`);
|
|
|
|
let changeCount = 0;
|
|
|
|
mql.addEventListener("change", (event) => {
|
|
changeCount++;
|
|
println(`Change event ${changeCount}: matches = ${event.matches}`);
|
|
|
|
if (changeCount === 1) {
|
|
// First change: 1x -> 2x, should now match.
|
|
if (event.matches) {
|
|
println("PASS: Media query matched after DPI changed to 2x");
|
|
} else {
|
|
println("FAIL: Media query should match at 2x DPI");
|
|
}
|
|
internals.setDevicePixelRatio(1);
|
|
} else if (changeCount === 2) {
|
|
// Second change: 2x -> 1x, should no longer match.
|
|
if (!event.matches) {
|
|
println("PASS: Media query unmatched after DPI changed back to 1x");
|
|
} else {
|
|
println("FAIL: Media query should not match at 1x DPI");
|
|
}
|
|
done();
|
|
}
|
|
});
|
|
|
|
// Change to 2x DPI - this should trigger the first change event.
|
|
internals.setDevicePixelRatio(2);
|
|
});
|
|
</script>
|