symbol-in-mask.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /svg/painting/reftests/symbol-in-mask.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Mask behaviour when mask contains a symbol element</title>

  <link rel="match" href="green-100x100.svg">

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

  <meta name="assert" content="A symbol in a mask should not be displayed">

</head>

<style>

  html, body, svg {

    padding: 0;

    margin: 0;

</style>

<body>

  <svg width="200" height="200">

    <defs>

      <mask id="aMask">

        <symbol>

          <rect x="0" y="0" width="100" height="100" fill="#ffffff"/>

        </symbol>

      </mask>

    </defs>

    <rect width="100" height="100" fill="green"/>

    <foreignObject width="200" height="200" style="mask: url('#aMask');">

      <div style="width: 200px; height: 200px; background: red;"></div>

    </foreignObject>

  </svg>

</body>

</html>