clip-path-with-transform-and-zoom.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-masking/clip-path/clip-path-with-transform-and-zoom.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSS Masking: objectBoundingBox &lt;clipPath> with a transform honors zoom</title>

<link rel="author" title="Sampath Samaraweera" href="mailto:sampath.samaraweera@codimite.com">

<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-clip-path">

<link rel="help" href="https://drafts.csswg.org/css-viewport/#zoom-property">

<link rel="match" href="reference/clip-path-with-transform-and-zoom-ref.html">

<meta name="assert" content="The transform on a <clipPath> with objectBoundingBox

                             units is in user units, so it is scaled by zoom

                             along with the bounding box basis. An HTML element

                             and an SVG element of the same size referencing the

                             same <clipPath> are therefore clipped identically.">

<style>

  body { margin: 0; }

  /* Each target is 100x100 CSS px, so 200x200 after zoom. The clip keeps the

     right half: translate(50, 0) shifts a half-width rect by 50 user units,

     which is 100 device px once zoomed. */

  #html-target {

    width: 100px;

    height: 100px;

    background: green;

    clip-path: url(#c);

    zoom: 2;

  #svg-target {

    display: block;

    zoom: 2;

</style>

<svg width="0" height="0" style="position: absolute">

  <clipPath id="c" clipPathUnits="objectBoundingBox" transform="translate(50, 0)">

    <rect width="0.5" height="1"/>

  </clipPath>

</svg>

<div id="html-target"></div>

<svg id="svg-target" width="100" height="100">

  <rect width="100" height="100" fill="green" clip-path="url(#c)"/>

</svg>