mask-position-1a-svg.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-masking/mask-image/mask-position-1a-svg.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSS Masking: mask-position: mask positioning, SVG content</title>

<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-position">

<link rel="match" href="mask-position-1-ref.html">

<meta name="assert" content="Test checks whether positioning mask layer works correctly or not.">

<style type="text/css">

  rect.frame {

    x: -0.5px;

    y: -0.5px;

    width: 101px;

    height: 101px;

    stroke: black;

    fill: none;

  rect.masked {

    width: 100px;

    height: 100px;

    fill: purple;

    mask-image: url(support/50x50-opaque-blue.svg);

    mask-repeat: no-repeat;

  #masked1 { mask-position: right 20% bottom 70%; }

  #masked2 { mask-position: bottom 70% right 20%; }

  #masked3 { mask-position: right 30px bottom 25px; }

  #masked4 { mask-position: bottom 25px right 30px; }

</style>

<svg height="408">

  <g transform="translate(1 1)">

    <rect class="masked" id="masked1"/>

    <rect class="frame"/>

  </g>

  <g transform="translate(1 103)">

    <rect class="masked" id="masked2"/>

    <rect class="frame"/>

  </g>

  <g transform="translate(1 205)">

    <rect class="masked" id="masked3"/>

    <rect class="frame"/>

  </g>

  <g transform="translate(1 307)">

    <rect class="masked" id="masked4"/>

    <rect class="frame"/>

  </g>

</svg>