simple-clips.svg - mozsearch

firefox-main/layout/reftests/svg/webrender/simple-clips.svg

Enable keyboard shortcuts

Source code

File a bug in Core :: SVG

Revision control

Copy as Markdown

Other Tools

HG Web

Test Info:

Manifest: layout/reftests/svg/webrender/reftest.list

SVG Preview (Scaled)

Default Checkerboard Light Dark

Preview of https://raw.githubusercontent.com/mozilla-firefox/firefox/main/layout/reftests/svg/webrender/simple-clips.svg

<!-- Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/ -->

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="480">

  <title>Trivial clipPath elements as native clips</title>

  <defs>

    <clipPath id="rect-clip"><rect x="30" y="30" width="100" height="60"/></clipPath>

    <clipPath id="rounded-clip"><rect x="170" y="30" width="100" height="60" rx="20"/></clipPath>

    <clipPath id="circle-clip"><circle cx="360" cy="60" r="40"/></clipPath>

    <clipPath id="ellipse-clip"><ellipse cx="500" cy="60" rx="60" ry="30"/></clipPath>

    <clipPath id="obb-clip" clipPathUnits="objectBoundingBox"><rect x="0.25" y="0.25" width="0.5" height="0.5"/></clipPath>

    <clipPath id="obb-circle" clipPathUnits="objectBoundingBox"><circle cx="0.5" cy="0.5" r="0.5"/></clipPath>

    <clipPath id="transformed-child"><rect x="0" y="0" width="50" height="30" transform="translate(300 150) scale(2)"/></clipPath>

    <clipPath id="transformed-clip" transform="translate(440 150)"><rect x="0" y="0" width="120" height="60"/></clipPath>

    <clipPath id="rotated"><rect x="20" y="260" width="120" height="60" transform="rotate(10 80 290)"/></clipPath>

    <clipPath id="path-rect"><path d="M 180 260 h 120 v 60 h -120 z"/></clipPath>

    <clipPath id="two-children"><rect x="340" y="260" width="60" height="60"/><rect x="400" y="260" width="60" height="60"/></clipPath>

    <clipPath id="hidden-only"><rect x="30" y="390" width="100" height="60" visibility="hidden"/></clipPath>

    <clipPath id="hidden-sibling"><rect x="0" y="0" width="20" height="20" visibility="hidden"/><rect x="170" y="390" width="100" height="60"/></clipPath>

    <clipPath id="none-sibling"><rect x="0" y="0" width="20" height="20" style="display:none"/><circle cx="360" cy="420" r="40"/></clipPath>

    <clipPath id="hidden-group"><g visibility="hidden"><rect x="440" y="390" width="120" height="60"/></g></clipPath>

  </defs>

  <g clip-path="url(#rect-clip)"><rect x="0" y="0" width="150" height="120" fill="red"/><circle cx="80" cy="60" r="50" fill="green"/></g>

  <rect x="150" y="0" width="150" height="120" fill="blue" clip-path="url(#rounded-clip)"/>

  <rect x="300" y="0" width="150" height="120" fill="purple" clip-path="url(#circle-clip)"/>

  <rect x="430" y="0" width="150" height="120" fill="orange" clip-path="url(#ellipse-clip)"/>

  <rect x="20" y="140" width="120" height="80" fill="teal" clip-path="url(#obb-clip)"/>

  <rect x="160" y="140" width="120" height="80" fill="maroon" clip-path="url(#obb-circle)"/>

  <rect x="290" y="140" width="130" height="80" fill="navy" clip-path="url(#transformed-child)"/>

  <rect x="430" y="140" width="150" height="80" fill="olive" clip-path="url(#transformed-clip)"/>

  <!-- these stay as mask images -->

  <rect x="10" y="250" width="150" height="80" fill="gray" clip-path="url(#rotated)"/>

  <rect x="170" y="250" width="150" height="80" fill="pink" clip-path="url(#path-rect)"/>

  <rect x="330" y="250" width="150" height="80" fill="gold" clip-path="url(#two-children)"/>

  <!-- clipped group with shapes -->

  <g clip-path="url(#rect-clip)" transform="translate(0 280)">

    <circle cx="120" cy="60" r="30" fill="lime" stroke="black" stroke-width="4"/>

  </g>

  <!-- invisible children do not contribute to the clip -->

  <rect x="10" y="380" width="150" height="80" fill="aqua" clip-path="url(#hidden-only)"/>

  <rect x="160" y="380" width="150" height="80" fill="brown" clip-path="url(#hidden-sibling)"/>

  <rect x="300" y="380" width="150" height="80" fill="indigo" clip-path="url(#none-sibling)"/>

  <rect x="430" y="380" width="150" height="80" fill="coral" clip-path="url(#hidden-group)"/>

</svg>