Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>An image under a reference frame at a fractional position is not resampled</title>
<!--
The size an image is rasterized at is picked by rounding its destination
rect, so it has to be rounded at the sub-pixel phase that rect is snapped
at. WebRender composes a reference frame's origin into the transform it
snaps against, so a reference frame whose origin is not on a device pixel
shifts the phase for everything inside it, and the inherited transform Gecko
rounds the rect with has to carry the origin too. Otherwise the size comes
out a pixel away from the one the rect is snapped to (bugs 2070683 and
2086864).
The transform creates the reference frame; the query parameter is the
frame's top followed by the image's top inside it, in CSS pixels, and at
devPixelsPerPx 1 those are also device offsets:
?100.6,0 a fractional origin, the image on the frame's own grid
?100,0.6 the origin on the grid, the image at the same fraction inside
Both put the image at device rows 100.6 to 301.2, so they snap to the same
rect and have to render identically. In the second Gecko sees the fraction
in the image's own rect; in the first only through the frame's origin.
The image's height is deliberately fractional: with a whole extent every
rounding agrees at every phase and there is nothing to detect.
-->
<style>
body {
margin: 0;
}
#refframe {
position: absolute;
left: 20px;
transform: translate(0, 0);
}
img {
display: block;
position: relative;
width: 400px;
height: 200.6px;
}
</style>
<div id="refframe">
<img src="stripes-fractional.svg">
</div>
<script>
const [frameTop, imageTop] = location.search.substring(1).split(",");
document.getElementById("refframe").style.top = frameTop + "px";
document.querySelector("img").style.top = imageTop + "px";
</script>
</html>