Skip to content

GitLab

T
tangled
Commit f3331bb8 authored by Xida Chen's avatar Xida Chen Committed by Commit Bot
Browse files
Options

Port backdrop-filter-interpolation.html to external/wpt 

There are already some backdrop-filter-*.html, this CL picks the ones
that don't exist in wpt, and put them there.

Bug: 900581
Change-Id: Ie6cf7454fed6d3e89f31e69cbad93fdaa7bf3f55
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1760889
Commit-Queue: Xida Chen <xidachen@chromium.org>
Reviewed-by: default avatarStephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#688652}
parent 8b5332ee
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 389 additions and 330 deletions
third_party/blink/web_tests/animations/interpolation/backdrop-filter-interpolation.html deleted 100644 → 0
View file @ 8b5332ee
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
backdrop-filter: hue-rotate(30deg);
}
.target {
display: inline-block;
width: 50px;
height: 50px;
background-color: green;
color: white;
margin-right: 2px;
backdrop-filter: hue-rotate(10deg);
}
.expected {
margin-right: 20px;
}
.test {
padding-bottom: 10px;
}
</style>
<body>
<svg style="display:none">
<filter id="svgfilter">
<feGaussianBlur stdDeviation="5"></feGaussianBlur>
</filter>
</svg>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
property: 'backdrop-filter',
from: neutralKeyframe,
to: 'hue-rotate(20deg)',
}, [
{at: -0.5, is: 'hue-rotate(5deg)'},
{at: 0, is: 'hue-rotate(10deg)'},
{at: 0.3, is: 'hue-rotate(13deg)'},
{at: 0.6, is: 'hue-rotate(16deg)'},
{at: 1, is: 'hue-rotate(20deg)'},
{at: 1.5, is: 'hue-rotate(25deg)'},
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'initial',
to: 'hue-rotate(20deg)',
}, [
{at: -0.5, is: 'hue-rotate(-10deg)'},
{at: 0, is: 'none'},
{at: 0.3, is: 'hue-rotate(6deg)'},
{at: 0.6, is: 'hue-rotate(12deg)'},
{at: 1, is: 'hue-rotate(20deg)'},
{at: 1.5, is: 'hue-rotate(30deg)'},
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'inherit',
to: 'hue-rotate(20deg)',
}, [
{at: -0.5, is: 'hue-rotate(35deg)'},
{at: 0, is: 'hue-rotate(30deg)'},
{at: 0.3, is: 'hue-rotate(27deg)'},
{at: 0.6, is: 'hue-rotate(24deg)'},
{at: 1, is: 'hue-rotate(20deg)'},
{at: 1.5, is: 'hue-rotate(15deg)'},
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'unset',
to: 'hue-rotate(20deg)',
}, [
{at: -0.5, is: 'hue-rotate(-10deg)'},
{at: 0, is: 'none'},
{at: 0.3, is: 'hue-rotate(6deg)'},
{at: 0.6, is: 'hue-rotate(12deg)'},
{at: 1, is: 'hue-rotate(20deg)'},
{at: 1.5, is: 'hue-rotate(30deg)'},
]);
// Matching lists:
assertInterpolation({
property: 'backdrop-filter',
from: 'hue-rotate(0deg) blur(6px)',
to: 'hue-rotate(180deg) blur(10px)'
}, [
{at: -0.5, is: 'hue-rotate(-90deg) blur(4px)'},
{at: 0, is: 'hue-rotate(0deg) blur(6px)'},
{at: 0.25, is: 'hue-rotate(45deg) blur(7px)'},
{at: 0.5, is: 'hue-rotate(90deg) blur(8px)'},
{at: 1, is: 'hue-rotate(180deg) blur(10px)'},
{at: 1.5, is: 'hue-rotate(270deg) blur(12px)'}
]);
// Matching lists with differing units:
assertInterpolation({
property: 'backdrop-filter',
from: 'hue-rotate(80deg) blur(6mm)',
to: 'hue-rotate(100grad) blur(1cm)'
}, [
{at: -0.5, is: 'hue-rotate(75deg) blur(4mm)'},
{at: 0, is: 'hue-rotate(80deg) blur(6mm)'},
{at: 0.25, is: 'hue-rotate(82.5deg) blur(7mm)'},
{at: 0.5, is: 'hue-rotate(85deg) blur(8mm)'},
{at: 1, is: 'hue-rotate(90deg) blur(10mm)'},
{at: 1.5, is: 'hue-rotate(95deg) blur(12mm)'}
]);
// Mismatched lists:
assertNoInterpolation({
property: 'backdrop-filter',
from: 'grayscale(0) blur(0px)',
to: 'blur(10px)'
});
// Partially matching lists:
assertInterpolation({
property: 'backdrop-filter',
from: 'none',
to: 'opacity(0.5) hue-rotate(180deg)',
}, [
{at: -0.5, is: 'opacity(1) hue-rotate(-90deg)'},
{at: 0, is: 'none'},
{at: 0.25, is: 'opacity(0.875) hue-rotate(45deg)'},
{at: 0.5, is: 'opacity(0.75) hue-rotate(90deg)'},
{at: 1, is: 'opacity(0.5) hue-rotate(180deg)'},
{at: 1.5, is: 'opacity(0.25) hue-rotate(270deg)'},
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'blur(6px)',
to: 'blur(10px) hue-rotate(180deg)'
}, [
{at: -0.5, is: 'blur(4px) hue-rotate(-90deg)'},
{at: 0, is: 'blur(6px)'},
{at: 0.25, is: 'blur(7px) hue-rotate(45deg)'},
{at: 0.5, is: 'blur(8px) hue-rotate(90deg)'},
{at: 1, is: 'blur(10px) hue-rotate(180deg)'},
{at: 1.5, is: 'blur(12px) hue-rotate(270deg)'},
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'none',
to: 'hue-rotate(180deg)'
}, [
{at: -0.5, is: 'hue-rotate(-90deg)'},
{at: 0, is: 'none'},
{at: 0.25, is: 'hue-rotate(45deg)'},
{at: 0.5, is: 'hue-rotate(90deg)'},
{at: 1, is: 'hue-rotate(180deg)'},
{at: 1.5, is: 'hue-rotate(270deg)'},
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'hue-rotate(180deg)',
to: 'none'
}, [
{at: -0.5, is: 'hue-rotate(270deg)'},
{at: 0, is: 'hue-rotate(180deg)'},
{at: 0.25, is: 'hue-rotate(135deg)'},
{at: 0.5, is: 'hue-rotate(90deg)'},
{at: 1, is: 'none'},
{at: 1.5, is: 'hue-rotate(-90deg)'},
]);
// Filter functions (tests lacuna and clamping):
assertInterpolation({
property: 'backdrop-filter',
from: 'none', // lacuna is 0px
to: 'blur(10px)'
}, [
{at: -1, is: 'blur(0px)'}, // Negative values are not allowed.
{at: 0, is: 'none'},
{at: 0.5, is: 'blur(5px)'},
{at: 1, is: 'blur(10px)'},
{at: 1.5, is: 'blur(15px)'}
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'brightness(0)',
to: 'none' // lacuna is 1
}, [
{at: -1, is: 'brightness(0)'}, // Negative values are not allowed.
{at: 0, is: 'brightness(0)'},
{at: 0.5, is: 'brightness(0.5)'},
{at: 1, is: 'none'},
{at: 1.5, is: 'brightness(1.5)'}
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'contrast(0)',
to: 'none' // lacuna is 1
}, [
{at: -1, is: 'contrast(0)'}, // Negative values are not allowed.
{at: 0, is: 'contrast(0)'},
{at: 0.5, is: 'contrast(0.5)'},
{at: 1, is: 'none'},
{at: 1.5, is: 'contrast(1.5)'}
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'none', // lacuna is drop-shadow(0px 0px 0px transparent)
to: 'drop-shadow(20px 10px green)'
}, [
{at: -1, is: 'drop-shadow(-20px -10px transparent)'},
{at: 0, is: 'none'},
{at: 0.5, is: 'drop-shadow(10px 5px rgba(0, 128, 0, 0.5))'},
{at: 1, is: 'drop-shadow(20px 10px green)'},
{at: 1.5, is: 'drop-shadow(30px 15px #00C000)'}
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'drop-shadow(0px 0px 0px currentcolor)',
to: 'drop-shadow(20px 10px green)'
}, [
{at: -1, is: 'drop-shadow(-20px -10px white)'},
{at: 0, is: 'drop-shadow(0px 0px 0px currentcolor)'},
{at: 0.5, is: 'drop-shadow(10px 5px #80C080)'},
{at: 1, is: 'drop-shadow(20px 10px green)'},
{at: 1.5, is: 'drop-shadow(30px 15px #004100)'}
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'none', // lacuna is 0
to: 'grayscale(1)'
}, [
{at: -1, is: 'grayscale(0)'}, // Negative values are not allowed.
{at: 0, is: 'none'},
{at: 0.5, is: 'grayscale(0.5)'},
{at: 1, is: 'grayscale(1)'},
{at: 1.5, is: 'grayscale(1)'} // Should clamp values to 1.
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'none', // lacuna is 0deg
to: 'hue-rotate(360deg)'
}, [
{at: -1, is: 'hue-rotate(-360deg)'},
{at: 0, is: 'none'},
{at: 0.5, is: 'hue-rotate(180deg)'},
{at: 1, is: 'hue-rotate(360deg)'},
{at: 1.5, is: 'hue-rotate(540deg)'}
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'none', // lacuna is 0
to: 'invert(1)'
}, [
{at: -1, is: 'invert(0)'}, // Negative values are not allowed.
{at: 0, is: 'none'},
{at: 0.5, is: 'invert(0.5)'},
{at: 1, is: 'invert(1)'},
{at: 1.5, is: 'invert(1)'} // Should clamp values to 1.
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'opacity(0)',
to: 'none' // lacuna is 1
}, [
{at: -1, is: 'opacity(0)'}, // Negative values are not allowed.
{at: 0, is: 'opacity(0)'},
{at: 0.5, is: 'opacity(0.5)'},
{at: 1, is: 'none'},
{at: 1.5, is: 'opacity(1)'} // Should clamp values to 1.
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'saturate(0)',
to: 'none' // lacuna is 1
}, [
{at: -1, is: 'saturate(0)'}, // Negative values are not allowed.
{at: 0, is: 'saturate(0)'},
{at: 0.5, is: 'saturate(0.5)'},
{at: 1, is: 'none'},
{at: 1.5, is: 'saturate(1.5)'}
]);
assertInterpolation({
property: 'backdrop-filter',
from: 'none', // lacuna is 0
to: 'sepia(1)'
}, [
{at: -1, is: 'sepia(0)'}, // Negative values are not allowed.
{at: 0, is: 'none'},
{at: 0.5, is: 'sepia(0.5)'},
{at: 1, is: 'sepia(1)'},
{at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
]);
assertNoInterpolation({
property: 'backdrop-filter',
from: 'url("#svgfilter")',
to: 'none', // lacuna is not defined
});
assertNoInterpolation({
property: 'backdrop-filter',
from: 'url("#svgfilter")',
to: 'blur(5px)',
});
assertInterpolation({
property: 'backdrop-filter',
from: 'initial', // lacuna is 0
to: 'sepia(1)'
}, [
{at: -1, is: 'sepia(0)'}, // Negative values are not allowed.
{at: 0, is: 'none'}, // Equivalent to sepia(0)
{at: 0.5, is: 'sepia(0.5)'},
{at: 1, is: 'sepia(1)'},
{at: 1.5, is: 'sepia(1)'} // Should clamp values to 1.
]);
</script>
</body>
third_party/blink/web_tests/external/wpt/css/filter-effects/animation/backdrop-filter-interpolation-001.html
View file @ f3331bb8
......@@ -9,8 +9,23 @@
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
body {
color: blue;
.parent {
backdrop-filter: hue-rotate(30deg);
}
.target {
display: inline-block;
width: 50px;
height: 50px;
background-color: green;
color: white;
margin-right: 2px;
backdrop-filter: hue-rotate(10deg);
}
.expected {
margin-right: 20px;
}
.test {
padding-bottom: 10px;
}
</style>
</head>
......@@ -44,6 +59,114 @@
{at: 1, expect: 'hue-rotate(90deg) blur(10mm)'},
{at: 1.5, expect: 'hue-rotate(95deg) blur(12mm)'}
]);
test_interpolation({
property: 'backdrop-filter',
from: neutralKeyframe,
to: 'hue-rotate(20deg)',
}, [
{at: -0.5, expect: 'hue-rotate(5deg)'},
{at: 0, expect: 'hue-rotate(10deg)'},
{at: 0.3, expect: 'hue-rotate(13deg)'},
{at: 0.6, expect: 'hue-rotate(16deg)'},
{at: 1, expect: 'hue-rotate(20deg)'},
{at: 1.5, expect: 'hue-rotate(25deg)'},
]);
test_interpolation({
property: 'backdrop-filter',
from: 'initial',
to: 'hue-rotate(20deg)',
}, [
{at: -0.5, expect: 'hue-rotate(-10deg)'},
{at: 0, expect: 'hue-rotate(0deg)'},
{at: 0.3, expect: 'hue-rotate(6deg)'},
{at: 0.6, expect: 'hue-rotate(12deg)'},
{at: 1, expect: 'hue-rotate(20deg)'},
{at: 1.5, expect: 'hue-rotate(30deg)'},
]);
test_interpolation({
property: 'backdrop-filter',
from: 'inherit',
to: 'hue-rotate(20deg)',
}, [
{at: -0.5, expect: 'hue-rotate(35deg)'},
{at: 0, expect: 'hue-rotate(30deg)'},
{at: 0.3, expect: 'hue-rotate(27deg)'},
{at: 0.6, expect: 'hue-rotate(24deg)'},
{at: 1, expect: 'hue-rotate(20deg)'},
{at: 1.5, expect: 'hue-rotate(15deg)'},
]);
test_interpolation({
property: 'backdrop-filter',
from: 'unset',
to: 'hue-rotate(20deg)',
}, [
{at: -0.5, expect: 'hue-rotate(-10deg)'},
{at: 0, expect: 'hue-rotate(0deg)'},
{at: 0.3, expect: 'hue-rotate(6deg)'},
{at: 0.6, expect: 'hue-rotate(12deg)'},
{at: 1, expect: 'hue-rotate(20deg)'},
{at: 1.5, expect: 'hue-rotate(30deg)'},
]);
test_interpolation({
property: 'backdrop-filter',
from: 'none',
to: 'hue-rotate(180deg)'
}, [
{at: -0.5, expect: 'hue-rotate(-90deg)'},
{at: 0, expect: 'hue-rotate(0deg)'},
{at: 0.25, expect: 'hue-rotate(45deg)'},
{at: 0.5, expect: 'hue-rotate(90deg)'},
{at: 1, expect: 'hue-rotate(180deg)'},
{at: 1.5, expect: 'hue-rotate(270deg)'},
]);
test_interpolation({
property: 'backdrop-filter',
from: 'hue-rotate(180deg)',
to: 'none'
}, [
{at: -0.5, expect: 'hue-rotate(270deg)'},
{at: 0, expect: 'hue-rotate(180deg)'},
{at: 0.25, expect: 'hue-rotate(135deg)'},
{at: 0.5, expect: 'hue-rotate(90deg)'},
{at: 1, expect: 'hue-rotate(0deg)'},
{at: 1.5, expect: 'hue-rotate(-90deg)'},
]);
test_interpolation({
property: 'backdrop-filter',
from: 'drop-shadow(0px 0px 0px currentcolor)',
to: 'drop-shadow(20px 10px green)'
}, [
{at: -1, expect: 'drop-shadow(-20px -10px white)'},
{at: 0, expect: 'drop-shadow(0px 0px 0px currentcolor)'},
{at: 0.5, expect: 'drop-shadow(10px 5px #80C080)'},
{at: 1, expect: 'drop-shadow(20px 10px green)'},
{at: 1.5, expect: 'drop-shadow(30px 15px #004100)'}
]);
test_no_interpolation({
property: 'backdrop-filter',
from: 'url("#svgfilter")',
to: 'blur(5px)',
});
test_interpolation({
property: 'backdrop-filter',
from: 'initial', // lacuna is 0
to: 'sepia(1)'
}, [
{at: -1, expect: 'sepia(0)'}, // Negative values are not allowed.
{at: 0, expect: 'sepia(0)'},
{at: 0.5, expect: 'sepia(0.5)'},
{at: 1, expect: 'sepia(1)'},
{at: 1.5, expect: 'sepia(1)'} // Should clamp values to 1.
]);
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment