mask-absolutely-positioned-child-gap.html

Enable keyboard shortcuts

<!doctype html>

<html reftest-zoom="1.2">

<meta charset="utf-8">

<!--

  Bug 2055747: a mask on an absolutely positioned child whose visual overflow

  extends slightly above its border box (from line-height:normal text). Under

  page zoom the mask blob is rasterized on the nearest-pixel grid, but the

  placement rect was cropped to the building rect and snapped independently,

  landing the mask ~1px below its own alpha and clipping the child's top row --

  a light gap between the parent bar and the child. The bug only appears at a

  fractional device scale: at the reftest default devPixelsPerPx of 1,

  reftest-zoom=1.2 (page zoom, as the reporter used) places the child at a

  fractional device position (top 51.6 -> snaps to 52, one pixel below the blob

  rasterized at 51).

  The text is the same colour as its background so it paints nothing visible

  (avoiding antialiasing differences) while still establishing the line box

  that triggers the bug. A real text line box is required: synthetic overflow

  extenders (a transparent or a painted positioned descendant) do not

  reproduce the ~0.5px above-box overflow that this depends on. The mask is

  fully opaque, so the masked child must be pixel-identical to the unmasked

  reference.

-->

<style>

  html { background: #f4f4f6; }

  body { margin: 0; }

  .stage { position: relative; height: 160px; overflow: hidden; }

  #parent {

    position: absolute;

    left: 40px;

    top: 7px;

    width: 560px;

    height: 36px;

    background: #202024;

  #child {

    position: absolute;

    left: 0;

    top: 36px;

    width: 180px;

    height: 22px;

    padding-left: 10px;

    box-sizing: border-box;

    color: #202024;

    font: 700 13px system-ui, sans-serif;

    background: #202024;

    mask-image: linear-gradient(#000 0 0);

    mask-size: 100% 100%;

    mask-position: left top;

    mask-repeat: no-repeat;

</style>

<div class="stage">

  <div id="parent">

    <div id="child">Found over 1,000</div>

  </div>

</div>