ellipse-auto-rx-css-clip-path.html

firefox-main/testing/web-platform/tests/svg/shapes/reftests/ellipse-auto-rx-css-clip-path.html

Enable keyboard shortcuts

Source code

File a bug in Core :: SVG

Revision control

Copy as Markdown

Other Tools

HG Web

Test Info:

This WPT test may be referenced by the following Test IDs:
- /svg/shapes/reftests/ellipse-auto-rx-css-clip-path.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

<title>SVG ellipse with auto rx/ry as CSS clip-path: url() reference resolves per SVG 2</title>

<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/shapes.html#EllipseElement">

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

<link rel="match" href="ellipse-auto-rx-css-clip-path-ref.html">

<meta name="assert" content="An ellipse with auto rx (or auto ry) referenced via CSS clip-path: url(...) must clip identically to an ellipse with the resolved explicit value, per SVG 2 §10.4.">

<svg width="320" height="160">

  <defs>

    <clipPath id="auto-rx" clipPathUnits="userSpaceOnUse">

      <ellipse cx="80" cy="80" rx="auto" ry="50"/>

    </clipPath>

    <clipPath id="auto-ry" clipPathUnits="userSpaceOnUse">

      <ellipse cx="240" cy="80" rx="50" ry="auto"/>

    </clipPath>

  </defs>

  <rect x="0" y="0" width="160" height="160" fill="green" style="clip-path: url(#auto-rx)"/>

  <rect x="160" y="0" width="160" height="160" fill="green" style="clip-path: url(#auto-ry)"/>

</svg>

</html>