Bug 1506940 [wpt PR 14038] - Fixes and tweaks to wpt/css/filter-effects/, a=testonly
authorFredrik Söderquist <fs@opera.com>
Thu, 15 Nov 2018 10:14:53 +0000
changeset 503415 d16af01833d24047cb3853e1e0d7214111c9a572
parent 503414 b12ab8efbefe006789483f40036d4b1fe8eab05f
child 503416 9c60d16c8fb338e68718394796205a6a4e16ad5f
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1506940, 14038, 400000, 903383, 1333816, 607628
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1506940 [wpt PR 14038] - Fixes and tweaks to wpt/css/filter-effects/, a=testonly Automatic update from web-platform-testsFixes and tweaks to wpt/css/filter-effects/ filter-contrast-003.html Adjust the color from #400000 to #3f0000, since (0x40 / 255) is just over 0.25 and can after filtering and rounding end up above 0. (0x3f / 255) on the other hand is just below 0.25 and the result will be clamped to zero. filter-external-001-test.html filter-external-002-test.html Change the hue-rotate parameter in the external file from 120 to 150. Move the file to support/ and remove lint entry. Make both filters operate in sRGB to make computing the reference easier. Use rgb(...) notation with percentage values in reference. fecolormatrix-type.html Add color-interpolation-filters=sRGB to the filter to make it easier to reason about what the result should be. Use rgba(...) notation in the ref using percentage notation. filters-test-brightness-003.html Add 'filter: brightness(0)' before 'filter: brightness()' to properly test if the "no argument" notation is considered valid by the parser. filter-grayscale-001.html filter-grayscale-002.html filter-grayscale-003.html filter-grayscale-004.html filter-grayscale-005.html Remove the " (and not blue)" text from the reference and update the 001,004 and 005 tests accordingly. css-filters-animation-saturate.html Interpolate the argument from 4900% rather than 5000% to end at the ref's 2500% (25). css-filters-animation-hue-rotate.html Sample the animation at .5 to match the expectation. css-filters-animation-drop-shadow.html Use explicit rgba(...) in the ref rather than the keyword 'gray'. We're interpolating the color of the drop-shadow from 'black' (rgba(0, 0, 0, 1)) to 'transparent' (rgba(0, 0, 0, 0)) here, so it's better and more accurate to describe the color as "semi-transparent black" (rgba(0, 0, 0, 0.5)). css-filters-animation-combined-001.html Initial value for animation for 'opacity(...)' is '1' - not zero. Change test to interpolate from 0 -> 1 (rather than 1 -> 1) Bug: 903383 Change-Id: I4d0113989414616494b98c22fbac817f007cd762 Reviewed-on: https://chromium-review.googlesource.com/c/1333816 Reviewed-by: Stephen Chenney <schenney@chromium.org> Commit-Queue: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/master@{#607628} -- wpt-commits: 4cf6f845d427b856b1d7557aeaf02c199e6e1d81 wpt-pr: 14038
testing/web-platform/tests/css/filter-effects/css-filters-animation-combined-001.html
testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow-ref.html
testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow.html
testing/web-platform/tests/css/filter-effects/css-filters-animation-hue-rotate.html
testing/web-platform/tests/css/filter-effects/css-filters-animation-saturate.html
testing/web-platform/tests/css/filter-effects/fecolormatrix-type-ref.html
testing/web-platform/tests/css/filter-effects/fecolormatrix-type.html
testing/web-platform/tests/css/filter-effects/filter-contrast-003.html
testing/web-platform/tests/css/filter-effects/filter-external-001-ref.html
testing/web-platform/tests/css/filter-effects/filter-external-001-test.html
testing/web-platform/tests/css/filter-effects/filter-external-002-filter.svg
testing/web-platform/tests/css/filter-effects/filter-external-002-test.html
testing/web-platform/tests/css/filter-effects/filter-grayscale-001.html
testing/web-platform/tests/css/filter-effects/filter-grayscale-004.html
testing/web-platform/tests/css/filter-effects/filter-grayscale-005.html
testing/web-platform/tests/css/filter-effects/filter-grayscale-ref.html
testing/web-platform/tests/css/filter-effects/filters-test-brightness-003.html
testing/web-platform/tests/css/filter-effects/support/filter-external-002-filter.svg
testing/web-platform/tests/lint.whitelist
--- a/testing/web-platform/tests/css/filter-effects/css-filters-animation-combined-001.html
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-combined-001.html
@@ -23,17 +23,17 @@
                 filter:
                     blur(20px)
                     brightness(0%)
                     sepia(100%)
                     grayscale(100%)
                     saturate(0%)
                     hue-rotate(90deg)
                     invert(100%)
-                    opacity(100%)
+                    opacity(0%)
             }
             100% {
                 filter: none;
             }
         }
 
         .square {
             width: 100px;
--- a/testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow-ref.html
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow-ref.html
@@ -5,17 +5,17 @@
     <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
     <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
     <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
     <style type="text/css">
         .square {
             width: 100px;
             height: 100px;
             background: blue;
-            filter: drop-shadow(15px 15px 0px gray);
+            filter: drop-shadow(15px 15px 0px rgba(0, 0, 0, 0.5));
         }
     </style>
 </head>
 <body>
 <p>You should see a blue rectangle in top of a gray one.</p>
 <div class="square"></div>
 </body>
 </html>
--- a/testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow.html
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-drop-shadow.html
@@ -4,17 +4,17 @@
     <title>CSS Filters Animation: Drop Shadow</title>
     <link rel="author" title="Gunther Brunner" href="mailto:takeshimiya@gmail.com">
     <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
     <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com">
     <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
     <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow">
     <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
     <link rel="match" href="css-filters-animation-drop-shadow-ref.html">
-    <meta name="assert" content="The blue square should be in top of a gray one">
+    <meta name="assert" content="The blue square should be on top of a gray one">
     <style type="text/css">
         @keyframes animate {
             0% {
                 filter: drop-shadow(30px 30px 0px black);
             }
             100% {
                 filter: none;
             }
--- a/testing/web-platform/tests/css/filter-effects/css-filters-animation-hue-rotate.html
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-hue-rotate.html
@@ -21,17 +21,17 @@
         }
 
         .square {
             width: 100px;
             height: 100px;
             background: blue;
             animation-name: animate;
             animation-play-state: paused;
-            animation-delay: -1s;
+            animation-delay: -2s;
             animation-duration: 4s;
             animation-timing-function: linear;
         }
     </style>
 </head>
 <body>
 <p>You should see a violet rectangle. Neither red nor blue.</p>
 <div class="square"></div>
--- a/testing/web-platform/tests/css/filter-effects/css-filters-animation-saturate.html
+++ b/testing/web-platform/tests/css/filter-effects/css-filters-animation-saturate.html
@@ -8,17 +8,17 @@
     <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
     <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate">
     <link rel="help" href="http://www.w3.org/TR/css3-animations/#animations">
     <link rel="match" href="css-filters-animation-saturate-ref.html">
     <meta name="assert" content="The blue square should be light-blue">
     <style type="text/css">
         @keyframes animate {
             0% {
-                filter: saturate(5000%);
+                filter: saturate(4900%);
             }
             100% {
                 filter: none;
             }
         }
 
         .square {
             width: 100px;
--- a/testing/web-platform/tests/css/filter-effects/fecolormatrix-type-ref.html
+++ b/testing/web-platform/tests/css/filter-effects/fecolormatrix-type-ref.html
@@ -4,17 +4,17 @@
     <title>Filter Effects: Test feColorMatrix with type matrix</title>
     <link rel="author" title="Takaki Yasuma" href="mailto:takakiyasuma@gmail.com">
     <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
     <style type="text/css">
 
        div{
 	       width: 200px;
 	       height: 200px;
-	       background-color: #a8d7c1;
+	       background-color: rgba(39.3%, 68.6%, 53.4%, 1);
        }
 
     </style>
 </head>
 
 <body>
 
 	<p>You should see a aquamarine colored rectangle.</p>
--- a/testing/web-platform/tests/css/filter-effects/fecolormatrix-type.html
+++ b/testing/web-platform/tests/css/filter-effects/fecolormatrix-type.html
@@ -23,17 +23,17 @@
 
 <body>
 
 	<p>You should see a aquamarine colored rectangle.</p>
 
 	<div></div>
 
 	<svg>
-		<filter id="sepia">
+		<filter id="sepia" color-interpolation-filters="sRGB">
 			<feColorMatrix type="matrix" values="0.393 0.189 0.349 0 0
 	                   0.686 0.168 0.272 0 0
 	                   0.534 0.131 0 0 0
 	                   0 0 0 1 0"/>
 		</filter>
 	</svg>
 
 </body>
--- a/testing/web-platform/tests/css/filter-effects/filter-contrast-003.html
+++ b/testing/web-platform/tests/css/filter-effects/filter-contrast-003.html
@@ -1,25 +1,25 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>CSS Filter contrast: Test for CSS contrast filter shotrhand</title>
+    <title>CSS Filter contrast: Test for CSS contrast filter shorthand</title>
     <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com">
     <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
     <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
     <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast">
     <link rel="match" href="filter-contrast-003-ref.html">
     <meta name="flags" content="">
     <meta name="assert" content="CSS contrast filter will apply a component transfer to the div element to adjust the
     contrast of the colors. Since contrast is 200%, it will be less contrast.">
     <style type="text/css">
        div {
            width: 200px;
            height: 200px;
-           background-color: #400000;
+           background-color: #3f0000;
            filter: contrast(200%);
        }
     </style>
 </head>
 <body>
     <p>The test passes if there is a black box and no dark red.</p>
 
     <div></div>
--- a/testing/web-platform/tests/css/filter-effects/filter-external-001-ref.html
+++ b/testing/web-platform/tests/css/filter-effects/filter-external-001-ref.html
@@ -3,17 +3,17 @@
 <head>
     <title>CSS Filter Test: Reference for Saturate short hand</title>
     <link rel="author" title="Akihiro Oyamada" href="mailto:admin@yomotsu.net">
     <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
     <style type="text/css">
     div {
         width: 200px;
         height: 200px;
-        background: #00b60d;
+        background: rgb(0%, 46.896%, 0.396%);
     }
 
     </style>
 </head>
 <body>
     <p>You should see a green rectangle.</p>
 
     <div></div>
--- a/testing/web-platform/tests/css/filter-effects/filter-external-001-test.html
+++ b/testing/web-platform/tests/css/filter-effects/filter-external-001-test.html
@@ -21,14 +21,14 @@
     </style>
 </head>
 <body>
     <p>You should see a green rectangle.</p>
 
     <div></div>
 
     <svg>
-        <filter id="filter">
+        <filter id="filter" color-interpolation-filters="sRGB">
             <feColorMatrix type="hueRotate" in="SourceGraphic" values="150"/>
         </filter>
     </svg>
 </body>
 </html>
deleted file mode 100644
--- a/testing/web-platform/tests/css/filter-effects/filter-external-002-filter.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
-	<filter id="filter">
-		<feColorMatrix type="hueRotate" in="SourceGraphic" values="120"/>
-	</filter>
-</svg>
\ No newline at end of file
--- a/testing/web-platform/tests/css/filter-effects/filter-external-002-test.html
+++ b/testing/web-platform/tests/css/filter-effects/filter-external-002-test.html
@@ -10,17 +10,17 @@
     <link rel="match" href="filter-external-001-ref.html">
     <meta name="flags" content="svg">
     <meta name="assert" content="the test passes if you see green box.">
     <style type="text/css">
     div {
         width: 200px;
         height: 200px;
         background: red;
-        filter: url( filter-external-002-filter.svg#filter );
+        filter: url( support/filter-external-002-filter.svg#filter );
     }
 
     </style>
 </head>
 <body>
     <p>You should see a green rectangle.</p>
 
     <div></div>
--- a/testing/web-platform/tests/css/filter-effects/filter-grayscale-001.html
+++ b/testing/web-platform/tests/css/filter-effects/filter-grayscale-001.html
@@ -17,14 +17,14 @@
 				width: 30px;
 			}
 			.filter{
 				filter: grayscale(100%);
 			}
 		</style>
 	</head>
 	<body>
-		<p>The test passes if the little box looks grey. (and not blue)</p>
+		<p>The test passes if the little box looks grey.</p>
 		<div class="testzone">
 			<div class="box filter"></div>
 		</div>
 	</body>
-</html>
\ No newline at end of file
+</html>
--- a/testing/web-platform/tests/css/filter-effects/filter-grayscale-004.html
+++ b/testing/web-platform/tests/css/filter-effects/filter-grayscale-004.html
@@ -17,14 +17,14 @@
 				width: 30px;
 			}
 			.filter{
 				filter: grayscale(1);
 			}
 		</style>
 	</head>
 	<body>
-		<p>The test passes if the little box looks grey. (and not blue)</p>
+		<p>The test passes if the little box looks grey.</p>
 		<div class="testzone">
 			<div class="box filter"></div>
 		</div>
 	</body>
-</html>
\ No newline at end of file
+</html>
--- a/testing/web-platform/tests/css/filter-effects/filter-grayscale-005.html
+++ b/testing/web-platform/tests/css/filter-effects/filter-grayscale-005.html
@@ -17,14 +17,14 @@
 				width: 30px;
 			}
 			.filter{
 				filter: grayscale(300%);
 			}
 		</style>
 	</head>
 	<body>
-		<p>The test passes if the little box looks grey. (and not blue)</p>
+		<p>The test passes if the little box looks grey.</p>
 		<div class="testzone">
 			<div class="box filter"></div>
 		</div>
 	</body>
-</html>
\ No newline at end of file
+</html>
--- a/testing/web-platform/tests/css/filter-effects/filter-grayscale-ref.html
+++ b/testing/web-platform/tests/css/filter-effects/filter-grayscale-ref.html
@@ -11,14 +11,14 @@
 			.box{
 				background-color: #121212;
 				height: 30px;
 				width: 30px;
 			}
 		</style>
 	</head>
 	<body>
-		<p>The test passes if the little box looks grey. (and not blue)</p>
+		<p>The test passes if the little box looks grey.</p>
 		<div class="testzone">
 			<div class="box"></div>
 		</div>
 	</body>
-</html>
\ No newline at end of file
+</html>
--- a/testing/web-platform/tests/css/filter-effects/filters-test-brightness-003.html
+++ b/testing/web-platform/tests/css/filter-effects/filters-test-brightness-003.html
@@ -1,26 +1,27 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>CSS Writing Modes Test: drop-shadow offset test</title>
+    <title>CSS Filter Effects: brightness(...) without argument</title>
     <link rel="author" title="Jun Ichikawa" href="mailto:jun1ka0@gmail.com">
     <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
     <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
     <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness">
     <link rel="match" href="filters-ref-brightness-003.html">
     <meta name="flags" content="">
     <meta name="assert" content="This test verifies that the brightness shorthand works. Green rectangle must shown,
     when brightness is not set.">
     <style type="text/css">
 
         div.brightness_noset {
             width: 200px;
             height: 200px;
             background-color: rgb(0, 255, 0);
+            filter: brightness(0);
             filter: brightness();
         }
     </style>
 </head>
 <body>
     <p>You should see green rectangle.</p>
     <div class="brightness_noset"></div>
 
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/filter-effects/support/filter-external-002-filter.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+	<filter id="filter" color-interpolation-filters="sRGB">
+		<feColorMatrix type="hueRotate" in="SourceGraphic" values="150"/>
+	</filter>
+</svg>
--- a/testing/web-platform/tests/lint.whitelist
+++ b/testing/web-platform/tests/lint.whitelist
@@ -373,17 +373,16 @@ SUPPORT-WRONG-DIR: css/css-backgrounds/b
 SUPPORT-WRONG-DIR: css/css-color/htaccess
 SUPPORT-WRONG-DIR: css/css-fonts/font-variant-debug.html
 SUPPORT-WRONG-DIR: css/css-masking/clip-path/svg-clipPath.svg
 SUPPORT-WRONG-DIR: css/css-multicol/multicol-red.png
 SUPPORT-WRONG-DIR: css/CSS2/section-index.xht
 SUPPORT-WRONG-DIR: css/CSS2/other-formats/xml/background-18.css
 SUPPORT-WRONG-DIR: css/CSS2/other-formats/xml/background-19-alt.xml
 SUPPORT-WRONG-DIR: css/CSS2/other-formats/xml/background-19.css
-SUPPORT-WRONG-DIR: css/filter-effects/filter-external-002-filter.svg
 SUPPORT-WRONG-DIR: css/vendor-imports/mozilla/mozilla-central-reftests/check-for-references.sh
 SUPPORT-WRONG-DIR: css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests-filter
 SUPPORT-WRONG-DIR: css/vendor-imports/mozilla/mozilla-central-reftests/sync-tests.sh
 SUPPORT-WRONG-DIR: css/vendor-imports/mozilla/mozilla-central-reftests/masking/blank.html
 SUPPORT-WRONG-DIR: css/WOFF2/testcaseindex.xht
 NON-EXISTENT-REF: css/css-masking/clip-path-svg-content/clip-path-clip-rule-008.svg