image-fractional-raster-1-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<title>Reference: the image's own raster drawn 1:1 and clipped to its snapped rect</title>

<!--

  Reference for the fractional-raster tests. The image in those tests is

  rasterized a device pixel taller than the rect it is snapped to, and

  WebRender draws such a texture 1:1 from the snapped origin and clips the

  surplus rather than resampling it to fit (bug 2070683). This reproduces that

  directly: an image whose height is the raster height, on the device grid so

  nothing is resampled, inside a wrapper clipped to the snapped height.

  Query parameters, in CSS pixels at devPixelsPerPx 1: the wrapper's top, the

  image's height, and the wrapper's height.

-->

<style>

body {

  margin: 0;

#clip {

  position: absolute;

  left: 20px;

  width: 400px;

  overflow: hidden;

img {

  display: block;

  width: 400px;

</style>

<div id="clip">

  <img src="stripes-fractional.svg">

</div>

<script>

const [clipTop, imageHeight, clipHeight] =

  location.search.substring(1).split(",");

document.getElementById("clip").style.top = clipTop + "px";

document.getElementById("clip").style.height = clipHeight + "px";

document.querySelector("img").style.height = imageHeight + "px";

</script>

</html>