Annotate CSS Transforms WPT reftests as fuzzy where needed.

This annotation is done based on the results on wpt.fyi across browser engines. (I went through nearly all the reftest failures on the experimental channel, although I sometimes skipped through groups of failures when the group appeared to be all real failures and not fuzz.) However, in the case of the svg-origin-length-{cm,px}* tests, instead of annotating them, modify the references so that they don't need to be annotated. Bug: 1175179 Change-Id: I8eb48eeaec866bb311251981cd39b37973013092 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3199326 Commit-Queue: David Baron <[email protected]> Reviewed-by: Philip Rogers <[email protected]> Cr-Commit-Position: refs/heads/main@{#931810}
web-platform-tests · Mar 15, 2022 · f223ef2 · f223ef2
1 parent b1380a6
commit f223ef2
Show file tree

Hide file tree

Showing 54 changed files with 60 additions and 14 deletions.
diff --git a/css/css-transforms/2d-rotate-001.html b/css/css-transforms/2d-rotate-001.html
@@ -5,6 +5,7 @@
 	    <link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs">
 	    <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
 	    <link rel="match" href="2d-rotate-ref.html">
+	    <meta name="fuzzy" content="maxDifference=87-128;totalPixels=1081-1193">
 	    <meta name="flags" content="svg">
 	    <meta name="assert" content="asserting that you can rotate an element with CSS">
 	    <style type="text/css">

diff --git a/css/css-transforms/animation/rotate-transform-equivalent.html b/css/css-transforms/animation/rotate-transform-equivalent.html
@@ -3,6 +3,7 @@
 <meta charset="utf-8">
 <title>Rotate transform equivalent</title>
 <link rel="match" href="rotate-transform-equivalent-ref.html">
+<meta name="fuzzy" content="maxDifference=0-46;totalPixels=0-277">
 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#ctm">
 <script src="/common/reftest-wait.js"></script>
 <style>

diff --git a/css/css-transforms/animation/transform-interpolation-rotate.html b/css/css-transforms/animation/transform-interpolation-rotate.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html class="reftest-wait">
 <link rel="match" href="transform-interpolation-ref.html?rotate">
+<meta name="fuzzy" content="maxDifference=0-2;totalPixels=0-17">
 <link rel="help" href="https://drafts.csswg.org/css-transforms/">
 
 <script src="../../../common/reftest-wait.js"></script>

diff --git a/css/css-transforms/backface-visibility-001.html b/css/css-transforms/backface-visibility-001.html
@@ -3,6 +3,7 @@
 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
 <link rel="match" href="backface-visibility-001.ref.html">
+<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-1">
 <meta name="assert" content="backface-visibility should have no effect when no transforms are present">
 <style>
 .box {

diff --git a/css/css-transforms/backface-visibility-hidden-001.html b/css/css-transforms/backface-visibility-hidden-001.html
@@ -6,7 +6,7 @@
     <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property">
     <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility">
     <link rel="match" href="reference/backface-visibility-hidden-ref.html">
-    <meta name=fuzzy content="0-25;0-200">
+    <meta name="fuzzy" content="maxDifference=0-79;totalPixels=0-200">
     <meta name="assert" content="When the value of backface visibility property is 'hidden', the back side of a transformed element is invisible when facing the viewer.">
     <style type="text/css">
         .greenSquare {
@@ -56,4 +56,4 @@
         </div>
     </div>
 </body>
-</html>
+</html>
diff --git a/css/css-transforms/css-skew-002.html b/css/css-transforms/css-skew-002.html
@@ -6,6 +6,7 @@
     <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
     <link rel="author" title="Adrien Pachkoff" href="mailto:[email protected]">
     <link rel="match" href="css-skew-002-ref.html">
+    <meta name="fuzzy" content="maxDifference=5-32;totalPixels=44-159">
     <style type="text/css">
         div {
             top:0px;

diff --git a/css/css-transforms/group/svg-transform-nested-009.html b/css/css-transforms/group/svg-transform-nested-009.html
@@ -6,6 +6,7 @@
     <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
     <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
     <link rel="match" href="reference/svg-green-square-250x250-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-1">
     <meta name="flags" content="svg">
     <meta name="assert" content="Transforms on a parent element should be pre-multiplied to transforms on a child element.  The group of elements should be skewed vertically.  Additionally, the child rect should be skewed vertically.">
     <style type="text/css">
@@ -25,4 +26,4 @@
         </g>
     </svg>
 </body>
-</html>
+</html>
diff --git a/css/css-transforms/perspective-transforms-equivalence.html b/css/css-transforms/perspective-transforms-equivalence.html
@@ -9,7 +9,7 @@
 Perspective with different transforms can have small anti-aliasing
 pixel differences, so the test should fuzzy patch to the ref.
 -->
-<meta name="fuzzy" content="maxDifference=0-10;totalPixels=0-10">
+<meta name="fuzzy" content="maxDifference=0-27;totalPixels=0-174">
 <style>
 
 #container {

diff --git a/css/css-transforms/rotate_45deg.html b/css/css-transforms/rotate_45deg.html
@@ -5,6 +5,7 @@
   <link rel="author" title="Ebay Inc." href="mailto:[email protected]"/>
   <link rel="help" href="https://www.w3.org/TR/css-transforms-1/#funcdef-transform-rotate"/>
   <link rel="match" href="rotate_45deg-ref.html"/>
+  <meta name="fuzzy" content="maxDifference=159-255;totalPixels=100-200">
   <meta name="flags" content="" />
   <meta name="assert" content="Rotate 45 degree in y axis"/>
   <style type="text/css">

diff --git a/css/css-transforms/rotate_x_45deg.html b/css/css-transforms/rotate_x_45deg.html
@@ -5,7 +5,7 @@
   <link rel="author" title="Ebay Inc." href="mailto:[email protected]"/>
   <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"/>
   <link rel="match" href="rotate_x_45deg-ref.html"/>
-  <meta name=fuzzy content="159-200;200">
+  <meta name="fuzzy" content="maxDifference=159-255;totalPixels=100-200">
   <meta name="flags" content="" />
   <meta name="assert" content="Rotate 45 degree in y axis"/>
   <style type="text/css">

diff --git a/css/css-transforms/rotate_y_45deg.html b/css/css-transforms/rotate_y_45deg.html
@@ -5,7 +5,7 @@
   <link rel="author" title="Ebay Inc." href="mailto:[email protected]"/>
   <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"/>
   <link rel="match" href="rotate_y_45deg-ref.html"/>
-  <meta name=fuzzy content="159-200;200">
+  <meta name="fuzzy" content="maxDifference=159-255;totalPixels=100-200">
   <meta name="flags" content="" />
   <meta name="assert" content="Rotate 45 degree in y axis"/>
   <style type="text/css">

diff --git a/css/css-transforms/skew-test1.html b/css/css-transforms/skew-test1.html
@@ -8,6 +8,7 @@
     <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#svg-transform">
     <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#two-d-transform-functions">
     <link rel="match" href="reference/skew-test1-ref.html">
+    <meta name="fuzzy" content="maxDifference=17-97;totalPixels=96-771">
     <meta name="flags" content="svg">
     <meta name="assert" content="The lime square in this test has a skew method applied : 30deg on x and 20deg on y. The red polygon should be totally hidden by the lime skewed square. Both start at 0,0">
   <style>

diff --git a/css/css-transforms/transform-3d-rotateY-stair-below-001.xht b/css/css-transforms/transform-3d-rotateY-stair-below-001.xht
@@ -5,6 +5,7 @@
   <link rel="author" title="Apple Inc." href="http://www.apple.com/"/>
   <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"/>
   <link rel="match" href="reference/transform-3d-rotateY-stair-above-ref-001.xht"/>
+  <meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-80" />
   <meta name="flags" content="" />
   <meta name="assert" content="A rotateY transform with perspective
   should result in a trapezoid."/>

diff --git a/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html b/css/css-transforms/transform-3d-scales-different-x-y-dynamic-001.html
@@ -4,6 +4,7 @@
 <title>Raster transform 3D scales with different X and Y components changing dynamically</title>
 <link rel="author" title="Oriol Brufau" href="mailto:[email protected]" />
 <link rel="match" href="transform-3d-scales-different-x-y-dynamic-001-ref.html" />
+<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-7">
 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#funcdef-scale3d" />
 <meta name="assert" content="Checks that when the X and Y components of a 3D scale are changed dynamically, the result looks like when setting the value from the very beginning." />
 <style>

diff --git a/css/css-transforms/transform-applies-to-002.xht b/css/css-transforms/transform-applies-to-002.xht
@@ -5,6 +5,7 @@
   <link rel="author" title="Apple Inc." href="http://www.apple.com/"/>
   <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"/>
   <link rel="match" href="reference/transform-applies-to-002-ref.xht"/>
+  <meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-754" />
   <meta name="flags" content="ahem" />
   <meta name="assert" content="The 'transform' property does not apply to non-replaced inline elements."/>
   <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

diff --git a/css/css-transforms/transform-background-001.html b/css/css-transforms/transform-background-001.html
@@ -9,6 +9,7 @@
     border box, so they need to be transformed along with it.">
     <meta name="flags" content="svg">
     <link rel="match" href="transform-background-ref-1.html">
+    <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-400">
     <style>
       div {
         width: 100px;

diff --git a/css/css-transforms/transform-background-002.html b/css/css-transforms/transform-background-002.html
@@ -9,6 +9,7 @@
     border box, so they need to be transformed along with it.">
     <meta name="flags" content="svg">
     <link rel="match" href="transform-background-ref-1.html">
+    <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-400">
     <style>
       div {
         width: 100px;

diff --git a/css/css-transforms/transform-background-005.html b/css/css-transforms/transform-background-005.html
@@ -11,6 +11,7 @@
     from propagating to the canvas, so it's just a regular background.">
     <meta name="flags" content="svg">
     <link rel="match" href="transform-background-ref-2.html">
+    <meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-12102">
     <style>
       html, body {
         width: 100%;

diff --git a/css/css-transforms/transform-background-007.html b/css/css-transforms/transform-background-007.html
@@ -21,6 +21,7 @@
     the original top row of triangles will now be on the left.'>
     <meta name="flags" content="svg">
     <link rel="match" href="transform-background-ref-2.html">
+    <meta name="fuzzy" content="maxDifference=1-1;totalPixels=4800-4800">
     <style>
       html {
         overflow: hidden;

diff --git a/css/css-transforms/transform-background-008.html b/css/css-transforms/transform-background-008.html
@@ -11,6 +11,7 @@
     root.'>
     <meta name="flags" content="svg">
     <link rel="match" href="transform-background-ref-2.html">
+    <meta name="fuzzy" content="maxDifference=1-1;totalPixels=4800-4800">
     <style>
       html {
         background: url(support/transform-triangle-left.svg);

diff --git a/css/css-transforms/transform-fixed-bg-003.html b/css/css-transforms/transform-fixed-bg-003.html
@@ -11,6 +11,7 @@
     affect fixed backgrounds.'>
     <meta name="flags" content="svg">
     <link rel="match" href="transform-fixed-bg-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200">
     <style>
       body {
         margin: 0;

diff --git a/css/css-transforms/transform-fixed-bg-004.html b/css/css-transforms/transform-fixed-bg-004.html
@@ -11,6 +11,7 @@
     affect fixed backgrounds.'>
     <meta name="flags" content="svg dom">
     <link rel="match" href="transform-fixed-bg-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200">
     <style>
       body {
         margin: 0;

diff --git a/css/css-transforms/transform-fixed-bg-006.html b/css/css-transforms/transform-fixed-bg-006.html
@@ -16,6 +16,7 @@
     they would be if background-attachment: scroll.'>
     <meta name="flags" content="svg">
     <link rel="match" href="transform-fixed-bg-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200">
     <style>
       body {
         margin: 0;

diff --git a/css/css-transforms/transform-fixed-bg-007.html b/css/css-transforms/transform-fixed-bg-007.html
@@ -16,6 +16,7 @@
     backgrounds.'>
     <meta name="flags" content="svg">
     <link rel="match" href="transform-fixed-bg-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200">
     <style>
       html {
         transform: rotate(-90deg);

diff --git a/css/css-transforms/transform-image-001.html b/css/css-transforms/transform-image-001.html
@@ -10,6 +10,7 @@
     img element with a 90deg rotation transform applied to a different image
     that was pre-rotated by 90 degrees.'>
     <link rel="match" href="transform-image-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-200">
     <style>
       img {
         transform: rotate(90deg);

diff --git a/css/css-transforms/transform-input-001.html b/css/css-transforms/transform-input-001.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-001-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-553">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-002.html b/css/css-transforms/transform-input-002.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-002-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-222">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-003.html b/css/css-transforms/transform-input-003.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-003-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-553">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-004.html b/css/css-transforms/transform-input-004.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-004-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-1094">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-005.html b/css/css-transforms/transform-input-005.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-005-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-2389">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-006.html b/css/css-transforms/transform-input-006.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-006-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-2333">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-007.html b/css/css-transforms/transform-input-007.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-007-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-544">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-008.html b/css/css-transforms/transform-input-008.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-008-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-1940">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-009.html b/css/css-transforms/transform-input-009.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-009-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-129;totalPixels=0-1340">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-010.html b/css/css-transforms/transform-input-010.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-010-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-1010">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-011.html b/css/css-transforms/transform-input-011.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-011-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-112;totalPixels=0-150">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-012.html b/css/css-transforms/transform-input-012.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-012-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-1201">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-013.html b/css/css-transforms/transform-input-013.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-013-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-2254">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-014.html b/css/css-transforms/transform-input-014.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-014-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-128;totalPixels=0-866">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-016.html b/css/css-transforms/transform-input-016.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-016-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-34;totalPixels=0-4">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-input-019.html b/css/css-transforms/transform-input-019.html
@@ -13,6 +13,7 @@
     difficult to construct a correct reference file for more complex
     transforms.)'>
     <link rel="match" href="transform-input-019-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-60;totalPixels=0-100">
     <style>
       input {
         /* Margin to avoid overlap of translated inputs */

diff --git a/css/css-transforms/transform-origin/reference/svg-origin-length-cm-ref.html b/css/css-transforms/transform-origin/reference/svg-origin-length-cm-ref.html
@@ -21,7 +21,7 @@
          <stop offset="50%" stop-color="orange"/>
        </linearGradient>
      </defs>
-     <rect width="2cm" height="2cm" fill="url(#grad)"/>
+     <rect width="2cm" height="2cm" transform="rotate(360)" fill="url(#grad)"/>
    </svg>
  </body>
-</html>
+</html>
diff --git a/css/css-transforms/transform-origin/reference/svg-origin-length-pt-ref.html b/css/css-transforms/transform-origin/reference/svg-origin-length-pt-ref.html
@@ -21,7 +21,7 @@
          <stop offset="50%" stop-color="orange"/>
        </linearGradient>
      </defs>
-     <rect width="80pt" height="80pt" fill="url(#grad)"/>
+     <rect width="80pt" height="80pt" transform="rotate(360)" fill="url(#grad)"/>
    </svg>
  </body>
-</html>
+</html>
diff --git a/css/css-transforms/transform-percent-008.html b/css/css-transforms/transform-percent-008.html
@@ -9,6 +9,7 @@
     transformed element's border box.  This test adds a thicker border plus
     margin and padding to make any discrepancies more evident.">
     <link rel="match" href="transform-percent-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-99;totalPixels=0-416">
     <link rel="mismatch" href="transform-percent-notref.html">
     <style>
       div {

diff --git a/css/css-transforms/transform-rotate-003.html b/css/css-transforms/transform-rotate-003.html
@@ -11,6 +11,7 @@
     that various combinations of rotate() with different units are equivalent
     to rotate(45deg).">
     <link rel="match" href="transform-rotate-001-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-9;totalPixels=0-10">
     <link rel="mismatch" href="transform-rotate-001-notref.html">
     <style>
       div {

diff --git a/css/css-transforms/transform-rotate-004.html b/css/css-transforms/transform-rotate-004.html
@@ -10,6 +10,7 @@
     that various combinations of rotate() with different units are equivalent
     to rotate(45deg).">
     <link rel="match" href="transform-rotate-001-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-13;totalPixels=0-4">
     <link rel="mismatch" href="transform-rotate-001-notref.html">
     <style>
       div {

diff --git a/css/css-transforms/transform-rotate-007.html b/css/css-transforms/transform-rotate-007.html
@@ -9,6 +9,7 @@
     <meta name="assert" content="This tests that rotating a simple rectangle by
     90 degrees produces another rectangle of the appropriate dimensions.">
     <link rel="match" href="transform-rotate-007-ref.html">
+    <meta name="fuzzy" content="maxDifference=0-64;totalPixels=0-4">
     <link rel="mismatch" href="transform-rotate-007-notref.html">
     <style>
       div {