Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(22)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/animations/interpolation/background-position-origin-interpolation.html

Issue 1265873002: Add test coverage for interpolations using CSS wide keywords and neutral keyframes (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebased Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/animations/interpolation/background-position-interpolation.html ('k') | LayoutTests/animations/interpolation/background-position-origin-interpolation-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/animations/interpolation/background-position-origin-interpolation.html
diff --git a/LayoutTests/animations/interpolation/background-position-origin-interpolation.html b/LayoutTests/animations/interpolation/background-position-origin-interpolation.html
index 93ecc8656b890a23d7a52419c15b2f3463d71a2f..de91281b65264ea11026e7f0be5f017a5861a95c 100644
--- a/LayoutTests/animations/interpolation/background-position-origin-interpolation.html
+++ b/LayoutTests/animations/interpolation/background-position-origin-interpolation.html
@@ -1,143 +1,197 @@
<!doctype html>
<meta charset="utf-8">
<style>
+.parent {
+ background-position: 80px 80px;
+}
.target {
- border: 3px solid skyblue;
- width: 100px;
- height: 100px;
- background-image: linear-gradient(to right, green, green);
- background-size: 20px 20px;
- background-repeat: no-repeat;
- display: inline-block;
+ border: 3px solid skyblue;
+ width: 100px;
+ height: 100px;
+ background-image: linear-gradient(to right, green, green);
+ background-size: 20px 20px;
+ background-repeat: no-repeat;
+ background-position: 10px 10px;
+ display: inline-block;
}
.actual {
- background-image: linear-gradient(to right, red, red);
+ background-image: linear-gradient(to right, red, red);
}
.expected {
- margin-left: -106px;
+ margin-left: -106px;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<script>
+// neutral
+assertInterpolation({
+ property: 'background-position',
+ from: '',
+ to: 'left 20px top 20px',
+}, [
+ {at: 0, is: '10px 10px'},
+ {at: 0.25, is: '12.5px 12.5px'},
+ {at: 0.5, is: '15px 15px'},
+ {at: 0.75, is: '17.5px 17.5px'},
+ {at: 1, is: '20px 20px'},
+]);
+
+// initial
+assertInterpolation({
+ property: 'background-position',
+ from: 'initial',
+ to: 'left 20px top 20px',
+}, [
+ {at: 0, is: '0% 0%'},
+ {at: 0.25, is: '5px 5px'},
+ {at: 0.5, is: '10px 10px'},
+ {at: 0.75, is: '15px 15px'},
+ {at: 1, is: '20px 20px'},
+]);
+
+// inherit
+assertInterpolation({
+ property: 'background-position',
+ from: 'inherit',
+ to: 'left 20px top 20px',
+}, [
+ {at: 0, is: '80px 80px'},
+ {at: 0.25, is: '65px 65px'},
+ {at: 0.5, is: '50px 50px'},
+ {at: 0.75, is: '35px 35px'},
+ {at: 1, is: '20px 20px'},
+]);
+
+// unset
+assertInterpolation({
+ property: 'background-position',
+ from: 'unset',
+ to: 'left 20px top 20px',
+}, [
+ {at: 0, is: '0% 0%'},
+ {at: 0.25, is: '5px 5px'},
+ {at: 0.5, is: '10px 10px'},
+ {at: 0.75, is: '15px 15px'},
+ {at: 1, is: '20px 20px'},
+]);
// left-top
assertInterpolation({
- property: 'background-position',
- from: 'center center',
- to: 'left 20px top 20px',
+ property: 'background-position',
+ from: 'center center',
+ to: 'left 20px top 20px',
}, [
- {at: 0, is: '50% 50%'},
- {at: 0.25, is: 'calc(37.5% + 5px) calc(37.5% + 5px)'},
- {at: 0.50, is: 'calc(25% + 10px) calc(25% + 10px)'},
- {at: 0.75, is: 'calc(12.5% + 15px) calc(12.5% + 15px)'},
- {at: 1, is: '20px 20px'},
+ {at: 0, is: '50% 50%'},
+ {at: 0.25, is: 'calc(5px + 37.5%) calc(5px + 37.5%)'},
+ {at: 0.5, is: 'calc(10px + 25%) calc(10px + 25%)'},
+ {at: 0.75, is: 'calc(15px + 12.5%) calc(15px + 12.5%)'},
+ {at: 1, is: '20px 20px'},
]);
// center-top
assertInterpolation({
- property: 'background-position',
- from: 'center center',
- to: 'center top 20px',
+ property: 'background-position',
+ from: 'center center',
+ to: 'center top 20px',
}, [
- {at: 0, is: '50% 50%'},
- {at: 0.25, is: '50% calc(37.5% + 5px)'},
- {at: 0.50, is: '50% calc(25% + 10px)'},
- {at: 0.75, is: '50% calc(12.5% + 15px)'},
- {at: 1, is: '50% 20px'},
+ {at: 0, is: 'left 50% top 50%'},
+ {at: 0.25, is: 'left 50% top calc(5px + 37.5%)'},
+ {at: 0.5, is: 'left 50% top calc(10px + 25%)'},
+ {at: 0.75, is: 'left 50% top calc(15px + 12.5%)'},
+ {at: 1, is: 'left 50% top 20px'},
]);
// right-top
assertInterpolation({
- property: 'background-position',
- from: 'center center',
- to: 'right 20px top 20px',
+ property: 'background-position',
+ from: 'center center',
+ to: 'right 20px top 20px',
}, [
- {at: 0, is: '50% 50%'},
- {at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) calc(37.5% + 5px)'},
- {at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) calc(25% + 10px)'},
- {at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) calc(12.5% + 15px)'},
- {at: 1, is: 'calc(100% - 20px) 20px'},
+ {at: 0, is: '50% 50%'},
+ {at: 0.25, is: 'calc(-5px + 62.5%) calc(5px + 37.5%)'},
+ {at: 0.5, is: 'calc(-10px + 75%) calc(10px + 25%)'},
+ {at: 0.75, is: 'calc(-15px + 87.5%) calc(15px + 12.5%)'},
+ {at: 1, is: 'calc(-20px + 100%) 20px'},
]);
// left-center
assertInterpolation({
- property: 'background-position',
- from: 'center center',
- to: 'left 20px center',
+ property: 'background-position',
+ from: 'center center',
+ to: 'left 20px center',
}, [
- {at: 0, is: '50% 50%'},
- {at: 0.25, is: 'calc(37.5% + 5px) 50%'},
- {at: 0.50, is: 'calc(25% + 10px) 50%'},
- {at: 0.75, is: 'calc(12.5% + 15px) 50%'},
- {at: 1, is: '20px 50%'},
+ {at: 0, is: 'left 50% top 50%'},
+ {at: 0.25, is: 'left calc(5px + 37.5%) top 50%'},
+ {at: 0.5, is: 'left calc(10px + 25%) top 50%'},
+ {at: 0.75, is: 'left calc(15px + 12.5%) top 50%'},
+ {at: 1, is: 'left 20px top 50%'},
]);
// center-center
assertInterpolation({
- property: 'background-position',
- from: 'center center',
- to: 'center center',
+ property: 'background-position',
+ from: 'center center',
+ to: 'center center',
}, [
- {at: 0, is: '50% 50%'},
- {at: 0.25, is: '50% 50%'},
- {at: 0.50, is: '50% 50%'},
- {at: 0.75, is: '50% 50%'},
- {at: 1, is: '50% 50%'}
+ {at: 0, is: '50% 50%'},
+ {at: 0.25, is: '50% 50%'},
+ {at: 0.5, is: '50% 50%'},
+ {at: 0.75, is: '50% 50%'},
+ {at: 1, is: '50% 50%'},
]);
// right-center
assertInterpolation({
- property: 'background-position',
- from: 'center center',
- to: 'right 20px center',
+ property: 'background-position',
+ from: 'center center',
+ to: 'right 20px center',
}, [
- {at: 0, is: '50% 50%'},
- {at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) 50%'},
- {at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) 50%'},
- {at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) 50%'},
- {at: 1, is: 'calc(100% - 20px) 50%'},
+ {at: 0, is: 'left 50% top 50%'},
+ {at: 0.25, is: 'left calc(-5px + 62.5%) top 50%'},
+ {at: 0.5, is: 'left calc(-10px + 75%) top 50%'},
+ {at: 0.75, is: 'left calc(-15px + 87.5%) top 50%'},
+ {at: 1, is: 'left calc(-20px + 100%) top 50%'},
]);
// left-bottom
assertInterpolation({
- property: 'background-position',
- from: 'center center',
- to: 'left 20px bottom 20px',
+ property: 'background-position',
+ from: 'center center',
+ to: 'left 20px bottom 20px',
}, [
- {at: 0, is: '50% 50%'},
- {at: 0.25, is: 'calc(37.5% + 5px) calc(37.5% + ((100% - 20px) * 0.25))'},
- {at: 0.50, is: 'calc(25% + 10px) calc(25% + ((100% - 20px) * 0.5))'},
- {at: 0.75, is: 'calc(12.5% + 15px) calc(12.5% + ((100% - 20px) * 0.75))'},
- {at: 1, is: '20px calc(100% - 20px)'},
+ {at: 0, is: '50% 50%'},
+ {at: 0.25, is: 'calc(5px + 37.5%) calc(-5px + 62.5%)'},
+ {at: 0.5, is: 'calc(10px + 25%) calc(-10px + 75%)'},
+ {at: 0.75, is: 'calc(15px + 12.5%) calc(-15px + 87.5%)'},
+ {at: 1, is: '20px calc(-20px + 100%)'},
]);
// center-bottom
assertInterpolation({
- property: 'background-position',
- from: 'center center',
- to: 'center bottom 20px',
+ property: 'background-position',
+ from: 'center center',
+ to: 'center bottom 20px',
}, [
- {at: 0, is: '50% 50%'},
- {at: 0.25, is: '50% calc(37.5% + ((100% - 20px) * 0.25))'},
- {at: 0.50, is: '50% calc(25% + ((100% - 20px) * 0.5))'},
- {at: 0.75, is: '50% calc(12.5% + ((100% - 20px) * 0.75))'},
- {at: 1, is: '50% calc(100% - 20px)'},
+ {at: 0, is: 'left 50% top 50%'},
+ {at: 0.25, is: 'left 50% top calc(-5px + 62.5%)'},
+ {at: 0.5, is: 'left 50% top calc(-10px + 75%)'},
+ {at: 0.75, is: 'left 50% top calc(-15px + 87.5%)'},
+ {at: 1, is: 'left 50% top calc(-20px + 100%)'},
]);
// right-bottom
assertInterpolation({
- property: 'background-position',
- from: 'center center',
- to: 'right 20px bottom 20px',
+ property: 'background-position',
+ from: 'center center',
+ to: 'right 20px bottom 20px',
}, [
- {at: 0, is: '50% 50%'},
- {at: 0.25, is: 'calc(37.5% + ((100% - 20px) * 0.25)) calc(37.5% + ((100% - 20px) * 0.25))'},
- {at: 0.50, is: 'calc(25% + ((100% - 20px) * 0.5)) calc(25% + ((100% - 20px) * 0.5))'},
- {at: 0.75, is: 'calc(12.5% + ((100% - 20px) * 0.75)) calc(12.5% + ((100% - 20px) * 0.75))'},
- {at: 1, is: 'calc(100% - 20px) calc(100% - 20px)'},
+ {at: 0, is: '50% 50%'},
+ {at: 0.25, is: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'},
+ {at: 0.5, is: 'calc(-10px + 75%) calc(-10px + 75%)'},
+ {at: 0.75, is: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'},
+ {at: 1, is: 'calc(-20px + 100%) calc(-20px + 100%)'},
]);
-
</script>
</body>
« no previous file with comments | « LayoutTests/animations/interpolation/background-position-interpolation.html ('k') | LayoutTests/animations/interpolation/background-position-origin-interpolation-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698