[WPT] Move green-100x100 images

schenney-chromium · chromium-wpt-export-bot · commit 84856289b8d5 · 2026-05-16T19:29:24.000-07:00
Move the images from the css-masking directory to the general /images directory as they will shortly be used by a host of HTML-in-Canvas tests. Bug: 507356242 Change-Id: I5916994dd4796410e03ee7fa61652407439894ac Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7851076 Commit-Queue: Philip Rogers <pdr@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Auto-Submit: Stephen Chenney <schenney@chromium.org> Cr-Commit-Position: refs/heads/main@{#1631808}
diff --git a/css/css-masking/mask-image/backdrop-filter-mask-image-while-loading.html b/css/css-masking/mask-image/backdrop-filter-mask-image-while-loading.html
@@ -13,7 +13,7 @@
 <script>
   onload = () => {
     const p = document.getElementById('target');
-    p.style.maskImage = `url("support/transparent-100x50-blue-100x50.svg?pipe=trickle(d10)")`;
+    p.style.maskImage = `url("/images/transparent-100x50-blue-100x50.svg?pipe=trickle(d10)")`;
     waitForAtLeastOneFrame().then(takeScreenshot);
   };
 </script>
diff --git a/css/css-masking/mask-image/mask-clip-1.html b/css/css-masking/mask-image/mask-clip-1.html
@@ -30,7 +30,7 @@
       div.mask {
         mask-size: 100% 100%;
         mask-origin: border-box;
-        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+        mask-image: url(/images/transparent-100x50-blue-100x50.svg);
       }
 
       div.border {
diff --git a/css/css-masking/mask-image/mask-clip-3.html b/css/css-masking/mask-image/mask-clip-3.html
@@ -29,7 +29,7 @@
       div.mask {
         mask-size: 100% 100%;
         mask-origin: border-box;
-        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+        mask-image: url(/images/transparent-100x50-blue-100x50.svg);
       }
 
       div.stroke {
diff --git a/css/css-masking/mask-image/mask-clip-8-ref.html b/css/css-masking/mask-image/mask-clip-8-ref.html
@@ -20,7 +20,7 @@
         width: 40px;
         height: 20px;
         mask-size: 100% 100%;
-        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+        mask-image: url(/images/transparent-100x50-blue-100x50.svg);
       }
 
       div.first {
diff --git a/css/css-masking/mask-image/mask-clip-8.html b/css/css-masking/mask-image/mask-clip-8.html
@@ -24,7 +24,7 @@
         width: 40px;
         height: 20px;
         mask-size: 100% 100%;
-        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+        mask-image: url(/images/transparent-100x50-blue-100x50.svg);
       }
 
       div.first {
diff --git a/css/css-masking/mask-image/mask-composite-1-ref.html b/css/css-masking/mask-image/mask-composite-1-ref.html
@@ -17,12 +17,12 @@
 
       div.add {
         left: 10px;
-        background-image: url(support/blue-100x50-transparent-100x50.svg);
+        background-image: url(/images/blue-100x50-transparent-100x50.svg);
       }
 
       div.intersect {
         left: 230px;
-        background-image: url(support/blue-100x50-transparent-100x50.svg);
+        background-image: url(/images/blue-100x50-transparent-100x50.svg);
       }
     </style>
   </head>
diff --git a/css/css-masking/mask-image/mask-composite-1a.html b/css/css-masking/mask-image/mask-composite-1a.html
@@ -17,8 +17,8 @@
         width: 100px;
         height: 100px;
         top:10px;
-        mask-image: url(support/blue-100x50-transparent-100x50.svg),
-                    url(support/blue-100x50-transparent-100x50.svg);
+        mask-image: url(/images/blue-100x50-transparent-100x50.svg),
+                    url(/images/blue-100x50-transparent-100x50.svg);
       }
 
       div.add {
diff --git a/css/css-masking/mask-image/mask-composite-1b.html b/css/css-masking/mask-image/mask-composite-1b.html
@@ -17,8 +17,8 @@
         width: 100px;
         height: 100px;
         top:10px;
-        mask-image: url(support/blue-100x50-transparent-100x50.png),
-                    url(support/blue-100x50-transparent-100x50.png);
+        mask-image: url(/images/blue-100x50-transparent-100x50.png),
+                    url(/images/blue-100x50-transparent-100x50.png);
       }
 
       div.add {
diff --git a/css/css-masking/mask-image/mask-composite-1d.html b/css/css-masking/mask-image/mask-composite-1d.html
@@ -22,33 +22,33 @@
       div.add {
         left: 10px;
         mask-composite: add;
-        mask-image: url(support/blue-100x50-transparent-100x50.svg),
-                    url(support/blue-100x50-transparent-100x50.svg),
-                    url(support/blue-100x50-transparent-100x50.svg);
+        mask-image: url(/images/blue-100x50-transparent-100x50.svg),
+                    url(/images/blue-100x50-transparent-100x50.svg),
+                    url(/images/blue-100x50-transparent-100x50.svg);
       }
 
       div.intersect {
         left: 120px;
         mask-composite: intersect;
-        mask-image: url(support/blue-100x50-transparent-100x50.svg),
-                    url(support/transparent-100x50-blue-100x50.svg),
+        mask-image: url(/images/blue-100x50-transparent-100x50.svg),
+                    url(/images/transparent-100x50-blue-100x50.svg),
                     linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
       }
 
       div.subtract {
         left: 230px;
         mask-composite: subtract;
-        mask-image: url(support/blue-100x50-transparent-100x50.svg),
-                    url(support/blue-100x50-transparent-100x50.svg),
-                    url(support/blue-100x50-transparent-100x50.svg);
+        mask-image: url(/images/blue-100x50-transparent-100x50.svg),
+                    url(/images/blue-100x50-transparent-100x50.svg),
+                    url(/images/blue-100x50-transparent-100x50.svg);
       }
 
       div.exclude {
         left: 340px;
         mask-composite: exclude;
-        mask-image: url(support/transparent-100x50-blue-100x50.svg),
+        mask-image: url(/images/transparent-100x50-blue-100x50.svg),
                     linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%),
-                    url(support/blue-100x50-transparent-100x50.svg);
+                    url(/images/blue-100x50-transparent-100x50.svg);
       }
     </style>
   </head>
diff --git a/css/css-masking/mask-image/mask-composite-2-ref.html b/css/css-masking/mask-image/mask-composite-2-ref.html
@@ -22,7 +22,7 @@
 
       div.subtract {
         left: 120px;
-        background-image: url(support/blue-100x50-transparent-100x50.svg);
+        background-image: url(/images/blue-100x50-transparent-100x50.svg);
       }
 
       div.exclude {
diff --git a/css/css-masking/mask-image/mask-composite-2a.html b/css/css-masking/mask-image/mask-composite-2a.html
@@ -17,8 +17,8 @@
         width: 100px;
         height: 100px;
         top:10px;
-        mask-image: url(support/blue-100x50-transparent-100x50.svg),
-                    url(support/transparent-100x50-blue-100x50.svg);
+        mask-image: url(/images/blue-100x50-transparent-100x50.svg),
+                    url(/images/transparent-100x50-blue-100x50.svg);
       }
 
       div.add {
diff --git a/css/css-masking/mask-image/mask-composite-2b.html b/css/css-masking/mask-image/mask-composite-2b.html
@@ -17,8 +17,8 @@
         width: 100px;
         height: 100px;
         top:10px;
-        mask-image: url(support/blue-100x50-transparent-100x50.png),
-                    url(support/transparent-100x50-blue-100x50.png);
+        mask-image: url(/images/blue-100x50-transparent-100x50.png),
+                    url(/images/transparent-100x50-blue-100x50.png);
       }
 
       div.add {
diff --git a/css/css-masking/mask-image/mask-composite-2d.html b/css/css-masking/mask-image/mask-composite-2d.html
@@ -15,8 +15,8 @@
     width: 100px;
     height: 100px;
     y: 10px;
-    mask-image: url(support/blue-100x50-transparent-100x50.svg),
-                url(support/transparent-100x50-blue-100x50.svg);
+    mask-image: url(/images/blue-100x50-transparent-100x50.svg),
+                url(/images/transparent-100x50-blue-100x50.svg);
   }
 
   rect.add {
diff --git a/css/css-masking/mask-image/mask-image-1a.html b/css/css-masking/mask-image/mask-image-1a.html
@@ -16,7 +16,7 @@
       }
 
       div.mask-by-png {
-        mask-image: url(support/transparent-100x50-blue-100x50.png);
+        mask-image: url(/images/transparent-100x50-blue-100x50.png);
       }
     </style>
   </head>
diff --git a/css/css-masking/mask-image/mask-image-1b.html b/css/css-masking/mask-image/mask-image-1b.html
@@ -16,7 +16,7 @@
       }
 
       div.mask-by-svg {
-        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+        mask-image: url(/images/transparent-100x50-blue-100x50.svg);
       }
     </style>
   </head>
diff --git a/css/css-masking/mask-image/mask-image-6-ref.html b/css/css-masking/mask-image/mask-image-6-ref.html
@@ -14,7 +14,7 @@
       }
 
       div.mask-by-png {
-        mask-image: url(support/transparent-100x50-blue-100x50.png);
+        mask-image: url(/images/transparent-100x50-blue-100x50.png);
       }
     </style>
   </head>
diff --git a/css/css-masking/mask-image/mask-image-6.html b/css/css-masking/mask-image/mask-image-6.html
@@ -17,7 +17,7 @@
       span {
         font-size: 100px;
         line-height: 100px;
-        mask-image: url(support/transparent-100x50-blue-100x50.png);
+        mask-image: url(/images/transparent-100x50-blue-100x50.png);
         mask-position: center;
         mask-repeat: repeat;
       }
diff --git a/css/css-masking/mask-image/mask-image-svg-loading-error.html b/css/css-masking/mask-image/mask-image-svg-loading-error.html
@@ -5,7 +5,7 @@
 <link rel="match" href="reference/mask-image-ref.html">
 <style>
   svg > rect {
-    mask-image: image-set(url("support/green-100x100.png?pipe=slice(1,200)"));
+    mask-image: image-set(url("/images/green-100x100.png?pipe=slice(1,200)"));
   }
 </style>
 <p>The test passes if there is a green square and no red below.</p>
diff --git a/css/css-masking/mask-image/mask-mode-a.html b/css/css-masking/mask-image/mask-mode-a.html
@@ -23,31 +23,31 @@
       div.auto {
         left: 10px;
         mask-mode: match-source;
-        mask-image: url(support/blue-100x100.svg);
+        mask-image: url(/images/blue-100x100.svg);
       }
 
       div.alpha {
         left: 120px;
         mask-mode: alpha;
-        mask-image: url(support/blue-100x100.svg);
+        mask-image: url(/images/blue-100x100.svg);
       }
 
       div.luminance1 {
         left: 230px;
         mask-mode: luminance;
-        mask-image: url(support/blue-100x100.svg);
+        mask-image: url(/images/blue-100x100.svg);
       }
 
       div.luminance2 {
         left: 340px;
         mask-mode: luminance;
-        mask-image: url(support/red-100x100.svg);
+        mask-image: url(/images/red-100x100.svg);
       }
 
       div.luminance3 {
         left: 450px;
         mask-mode: luminance;
-        mask-image: url(support/green-100x100.svg);
+        mask-image: url(/images/green-100x100.svg);
       }
     </style>
   </head>
diff --git a/css/css-masking/mask-image/mask-mode-b.html b/css/css-masking/mask-image/mask-mode-b.html
@@ -23,31 +23,31 @@
       div.auto {
         left: 10px;
         mask-mode: match-source;
-        mask-image: url(support/blue-100x100.png);
+        mask-image: url(/images/blue-100x100.png);
       }
 
       div.alpha {
         left: 120px;
         mask-mode: alpha;
-        mask-image: url(support/blue-100x100.png);
+        mask-image: url(/images/blue-100x100.png);
       }
 
       div.luminance1 {
         left: 230px;
         mask-mode: luminance;
-        mask-image: url(support/blue-100x100.png);
+        mask-image: url(/images/blue-100x100.png);
       }
 
       div.luminance2 {
         left: 340px;
         mask-mode: luminance;
-        mask-image: url(support/red-100x100.png);
+        mask-image: url(/images/red-100x100.png);
       }
 
       div.luminance3 {
         left: 450px;
         mask-mode: luminance;
-        mask-image: url(support/green-100x100.png);
+        mask-image: url(/images/green-100x100.png);
       }
     </style>
   </head>
diff --git a/css/css-masking/mask-image/mask-mode-luminance-with-mask-size.html b/css/css-masking/mask-image/mask-mode-luminance-with-mask-size.html
@@ -21,7 +21,7 @@
 
         mask-mode: luminance;
         mask-size: 100px 50px;
-        mask-image: url(support/transparent-100x50-blue-100x50.png);
+        mask-image: url(/images/transparent-100x50-blue-100x50.png);
       }
 
     </style>
diff --git a/css/css-masking/mask-image/mask-mode-ref.html b/css/css-masking/mask-image/mask-mode-ref.html
@@ -18,12 +18,12 @@
 
       div.auto {
         left: 10px;
-        background-image: url(support/blue-100x100.svg);
+        background-image: url(/images/blue-100x100.svg);
       }
 
       div.alpha {
         left: 120px;
-        background-image: url(support/blue-100x100.svg);
+        background-image: url(/images/blue-100x100.svg);
       }
 
       div.luminance1 {
diff --git a/css/css-masking/mask-image/mask-opacity-1a.html b/css/css-masking/mask-image/mask-opacity-1a.html
@@ -18,7 +18,7 @@
         width: 100px;
         height: 100px;
         filter: invert(100%);
-        mask-image: url(support/blue-100x50-transparent-100x50.png);
+        mask-image: url(/images/blue-100x50-transparent-100x50.png);
         opacity: 0.5;
       }
     </style>
diff --git a/css/css-masking/mask-image/mask-opacity-1b.html b/css/css-masking/mask-image/mask-opacity-1b.html
@@ -22,7 +22,7 @@
         background-color: rgb(0,0,255);
         width: 100px;
         height: 100px;
-        mask-image: url(support/blue-100x50-transparent-100x50.png);
+        mask-image: url(/images/blue-100x50-transparent-100x50.png);
         opacity: 0.5;
       }
     </style>
diff --git a/css/css-masking/mask-image/mask-opacity-1e.html b/css/css-masking/mask-image/mask-opacity-1e.html
@@ -15,8 +15,8 @@
         top: 10px;
         width: 100px;
         height: 100px;
-        mask-image: url(support/blue-100x50-transparent-100x50.png),
-                    url(support/blue-100x50-transparent-100x50.png);
+        mask-image: url(/images/blue-100x50-transparent-100x50.png),
+                    url(/images/blue-100x50-transparent-100x50.png);
         opacity: 0.5;
       }
 
diff --git a/css/css-masking/mask-image/mask-size-percent-percent-stretch.html b/css/css-masking/mask-image/mask-size-percent-percent-stretch.html
@@ -20,7 +20,7 @@
 
       #inner {
         background-color: purple;
-        mask-image: url(support/transparent-100x50-blue-100x50.svg);
+        mask-image: url(/images/transparent-100x50-blue-100x50.svg);
         mask-repeat: no-repeat;
         mask-position: left top;
         mask-size: 100% 100%;
diff --git a/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html b/css/css-shapes/shape-outside/shape-image/reference/shape-image-000-ref.html
@@ -25,7 +25,7 @@
         The test passes if you see a solid green square. There should be no red.
     </p>
     <div class="container">
-        <img src="../support/left-half-rectangle-50.png"/>
+        <img src="/images/left-half-rectangle-50.png"/>
         <div class="green"></div>
     </div>
 </body>
diff --git a/css/css-shapes/shape-outside/shape-image/shape-image-004.html b/css/css-shapes/shape-outside/shape-image/shape-image-004.html
@@ -23,7 +23,7 @@
         }
         #image {
             float: left;
-            shape-outside: url("support/left-half-rectangle-50.png");
+            shape-outside: url("/images/left-half-rectangle-50.png");
             shape-image-threshold: 0.6;
         }
     </style>
@@ -33,7 +33,7 @@
         The test passes if you see a solid green square. There should be no red.
     </p>
     <div id="test" class="container">
-        <img id="image" src="support/left-half-rectangle-50.png"/>
+        <img id="image" src="/images/left-half-rectangle-50.png"/>
         X
         X
     </div>
diff --git a/css/css-shapes/shape-outside/shape-image/shape-image-011.html b/css/css-shapes/shape-outside/shape-image/shape-image-011.html
@@ -39,7 +39,7 @@
             float: left;
             width: 100px;
             height: 100px;
-            shape-outside: url("support/left-half-rectangle-50.svg");
+            shape-outside: url("/images/left-half-rectangle-50.svg");
             shape-margin: 10px;
             shape-image-threshold: 0.55;
         }
@@ -66,7 +66,7 @@
         The test passes if the green rectangle on the right is completely between the two blue lines.
         There should be no red.
     </p>
-    <img id="image" src="support/left-half-rectangle-50.svg"/>
+    <img id="image" src="/images/left-half-rectangle-50.svg"/>
     <div id="white"></div>
     <div id="test">
         <div id="shape-image"></div>
diff --git a/images/blue-100x100.png b/images/blue-100x100.png
diff --git a/images/blue-100x100.svg b/images/blue-100x100.svg
diff --git a/images/blue-100x50-transparent-100x50.png b/images/blue-100x50-transparent-100x50.png
diff --git a/images/blue-100x50-transparent-100x50.svg b/images/blue-100x50-transparent-100x50.svg
diff --git a/images/green-100x100.png b/images/green-100x100.png
diff --git a/images/green-100x100.svg b/images/green-100x100.svg
diff --git a/images/left-half-rectangle-50.png b/images/left-half-rectangle-50.png
diff --git a/images/left-half-rectangle-50.svg b/images/left-half-rectangle-50.svg
diff --git a/images/red-100x100.png b/images/red-100x100.png
diff --git a/images/red-100x100.svg b/images/red-100x100.svg
diff --git a/images/transparent-100x50-blue-100x50.png b/images/transparent-100x50-blue-100x50.png
diff --git a/images/transparent-100x50-blue-100x50.svg b/images/transparent-100x50-blue-100x50.svg

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`	`div.mask {`
`31`	`31`	`mask-size: 100% 100%;`
`32`	`32`	`mask-origin: border-box;`
`33`		`- mask-image: url(support/transparent-100x50-blue-100x50.svg);`
	`33`	`+ mask-image: url(/images/transparent-100x50-blue-100x50.svg);`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`div.border {`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@`
`29`	`29`	`div.mask {`
`30`	`30`	`mask-size: 100% 100%;`
`31`	`31`	`mask-origin: border-box;`
`32`		`- mask-image: url(support/transparent-100x50-blue-100x50.svg);`
	`32`	`+ mask-image: url(/images/transparent-100x50-blue-100x50.svg);`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`div.stroke {`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@`
`20`	`20`	`width: 40px;`
`21`	`21`	`height: 20px;`
`22`	`22`	`mask-size: 100% 100%;`
`23`		`- mask-image: url(support/transparent-100x50-blue-100x50.svg);`
	`23`	`+ mask-image: url(/images/transparent-100x50-blue-100x50.svg);`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`div.first {`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`width: 40px;`
`25`	`25`	`height: 20px;`
`26`	`26`	`mask-size: 100% 100%;`
`27`		`- mask-image: url(support/transparent-100x50-blue-100x50.svg);`
	`27`	`+ mask-image: url(/images/transparent-100x50-blue-100x50.svg);`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`div.first {`
Original file line number	Diff line number	Diff line change
`@@ -17,12 +17,12 @@`
`17`	`17`
`18`	`18`	`div.add {`
`19`	`19`	`left: 10px;`
`20`		`- background-image: url(support/blue-100x50-transparent-100x50.svg);`
	`20`	`+ background-image: url(/images/blue-100x50-transparent-100x50.svg);`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`div.intersect {`
`24`	`24`	`left: 230px;`
`25`		`- background-image: url(support/blue-100x50-transparent-100x50.svg);`
	`25`	`+ background-image: url(/images/blue-100x50-transparent-100x50.svg);`
`26`	`26`	`}`
`27`	`27`	`</style>`
`28`	`28`	`</head>`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@`
`22`	`22`
`23`	`23`	`div.subtract {`
`24`	`24`	`left: 120px;`
`25`		`- background-image: url(support/blue-100x50-transparent-100x50.svg);`
	`25`	`+ background-image: url(/images/blue-100x50-transparent-100x50.svg);`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`div.exclude {`