chromium/third_party/blink/web_tests/svg/custom/clip-mask-negative-scale.svg

<?xml version="1.0" encoding="UTF-8"?>
<!-- Test for https://bugs.webkit.org/show_bug.cgi?id=97409 -->
<svg width="800" height="600" viewBox="-200 -200 600 450" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="clip">
      <path d="M 10 10 h 90 v 90 h -90 z"/>
    </clipPath>
    <mask id="mask">
      <rect x="10" y="10" width="90" height="90" fill="white"/>
    </mask>
    <!--
      This is a 200x200 image, with a green 100x100 rect in the top-left corner and
      a red 100x100 rect in the bottom-right corner, both with arrows pointing right & down.
      The clip/mask above should isolate the green rect, and negative scaling should flip the arrows.
    -->
    <image id="img" x="10" y="10" width="200" height="200" xlink:href="data:image/png;base64,
      iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A
      /wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wJFxAgAOBU/HEAAAAZdEVYdENv
      bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACCklEQVR42u3cSw6DMAxAQbvi/ld2T1AEUiEf
      z+xgg5TkKdmQjIoKpmE65vIxBCAQEAgIBAQCAgGBgEBAICAQQCAgEBAICAQEAgIBgbwmTSACEQkC
      EQkzOrZZrBnhd27mDyReXKg54Js4Yi1HHAhEHAhEHAgEBAICAYGAQACBgEBAICAQEAgIBAQCAgGB
      AAIBgYBAQCAgEBAICAQEAhv7z82KefLsah7a7yB18z20O2KVOBDItUjEgUAcqxAICAQQCAgEBAIC
      AYGAQEAgIBAQCCAQEAgIBAQCAgGBgEBAICAQEAggEBAICAQEAgIBgYBAQCAgEEAgIBAQCAgEBAIC
      AYGAQEAgIBBAICAQEAgIBAQCAgGBgECgi6OijMJMMo2BHQQEAgIBgYBAAIGAQEAgIBAQCAgEBAIC
      AYEAAgGBgEAYLQUCvSIRCCI5cZhOi/Wp75ZAWEENiHGXq0AcsVg2SIEgDoEgDoGAQEAgIBBAICAQ
      EAgIBAQCAgGBgEBAICAQQCAgEBAICAQEAgIBgYBAoAs3K24oT57L8NhBuqub7xFI+0jEIRB+RCEO
      geBYJRAQCAgEBAICAYGAQACBgEBAICAQEAgIBAQCAgGBAAIBgYBAQCAgEBAICAQEAgIBgQACAYGA
      QEAgIBAQCAgEBAICAYEAAgGBgEBAICAQEAgIBAQCAgEEAgIBgcCDvlPeI47W7oF7AAAAAElFTkSu
      QmCC
    "/>
  </defs>

  <g transform="matrix(1 0 0 1 -100 -100)" mask="url(#mask)">
    <use xlink:href="#img"/>
  </g>
  <g transform="matrix(-1 0 0 -1 -100 -100)" mask="url(#mask)">
    <use xlink:href="#img"/>
  </g>
  <g transform="matrix(-1 0 0 1 -100 -100)" mask="url(#mask)">
    <use xlink:href="#img"/>
  </g>
  <g transform="matrix(1 0 0 -1 -100 -100)" mask="url(#mask)">
    <use xlink:href="#img"/>
  </g>

  <g transform="translate(300, 0)">
    <g transform="matrix(1 0 0 1 -100 -100)" clip-path="url(#clip)">
      <use xlink:href="#img"/>
    </g>
    <g transform="matrix(-1 0 0 -1 -100 -100)" clip-path="url(#clip)">
      <use xlink:href="#img"/>
    </g>
    <g transform="matrix(-1 0 0 1 -100 -100)" clip-path="url(#clip)">
      <use xlink:href="#img"/>
    </g>
    <g transform="matrix(1 0 0 -1 -100 -100)" clip-path="url(#clip)">
      <use xlink:href="#img"/>
    </g>
  </g>

  <text x="-200" y="100" font-size="10px">
    This test passes when it displays two four-square groups, all green and with arrows pointing away from the group center.
  </text>
</svg>