third_party/WebKit/LayoutTests/svg/custom/clip-mask-negative-scale.svg

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!-- Test for https://bugs.webkit.org/show_bug.cgi?id=97409 -->
   3 <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">
   4   <defs>
   5     <clipPath id="clip">
   6       <path d="M 10 10 h 90 v 90 h -90 z"/>
   7     </clipPath>
   8     <mask id="mask">
   9       <rect x="10" y="10" width="90" height="90" fill="white"/>
  10     </mask>
  11     <!--
  12       This is a 200x200 image, with a green 100x100 rect in the top-left corner and
  13       a red 100x100 rect in the bottom-right corner, both with arrows pointing right & down.
  14       The clip/mask above should isolate the green rect, and negative scaling should flip the arrows.
  15     -->
  16     <image id="img" x="10" y="10" width="200" height="200" xlink:href="data:image/png;base64,
  17       iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A
  18       /wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wJFxAgAOBU/HEAAAAZdEVYdENv
  19       bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAACCklEQVR42u3cSw6DMAxAQbvi/ld2T1AEUiEf
  20       z+xgg5TkKdmQjIoKpmE65vIxBCAQEAgIBAQCAgGBgEBAICAQQCAgEBAICAQEAgIBgbwmTSACEQkC
  21       EQkzOrZZrBnhd27mDyReXKg54Js4Yi1HHAhEHAhEHAgEBAICAYGAQACBgEBAICAQEAgIBAQCAgGB
  22       AAIBgYBAQCAgEBAICAQEAhv7z82KefLsah7a7yB18z20O2KVOBDItUjEgUAcqxAICAQQCAgEBAIC
  23       AYGAQEAgIBAQCCAQEAgIBAQCAgGBgEBAICAQEAggEBAICAQEAgIBgYBAQCAgEEAgIBAQCAgEBAIC
  24       AYGAQEAgIBBAICAQEAgIBAQCAgGBgECgi6OijMJMMo2BHQQEAgIBgYBAAIGAQEAgIBAQCAgEBAIC
  25       AYEAAgGBgEAYLQUCvSIRCCI5cZhOi/Wp75ZAWEENiHGXq0AcsVg2SIEgDoEgDoGAQEAgIBBAICAQ
  26       EAgIBAQCAgGBgEBAICAQQCAgEBAICAQEAgIBgYBAoAs3K24oT57L8NhBuqub7xFI+0jEIRB+RCEO
  27       geBYJRAQCAgEBAICAYGAQACBgEBAICAQEAgIBAQCAgGBAAIBgYBAQCAgEBAICAQEAgIBgQACAYGA
  28       QEAgIBAQCAgEBAICAYEAAgGBgEBAICAQEAgIBAQCAgEEAgIBgcCDvlPeI47W7oF7AAAAAElFTkSu
  29       QmCC
  30     "/>
  31   </defs>
  32
  33   <g transform="matrix(1 0 0 1 -100 -100)" mask="url(#mask)">
  34     <use xlink:href="#img"/>
  35   </g>
  36   <g transform="matrix(-1 0 0 -1 -100 -100)" mask="url(#mask)">
  37     <use xlink:href="#img"/>
  38   </g>
  39   <g transform="matrix(-1 0 0 1 -100 -100)" mask="url(#mask)">
  40     <use xlink:href="#img"/>
  41   </g>
  42   <g transform="matrix(1 0 0 -1 -100 -100)" mask="url(#mask)">
  43     <use xlink:href="#img"/>
  44   </g>
  45
  46   <g transform="translate(300, 0)">
  47     <g transform="matrix(1 0 0 1 -100 -100)" clip-path="url(#clip)">
  48       <use xlink:href="#img"/>
  49     </g>
  50     <g transform="matrix(-1 0 0 -1 -100 -100)" clip-path="url(#clip)">
  51       <use xlink:href="#img"/>
  52     </g>
  53     <g transform="matrix(-1 0 0 1 -100 -100)" clip-path="url(#clip)">
  54       <use xlink:href="#img"/>
  55     </g>
  56     <g transform="matrix(1 0 0 -1 -100 -100)" clip-path="url(#clip)">
  57       <use xlink:href="#img"/>
  58     </g>
  59   </g>
  60
  61   <text x="-200" y="100" font-size="10px">
  62     This test passes when it displays two four-square groups, all green and with arrows pointing away from the group center.
  63   </text>
  64 </svg>