| Index: third_party/WebKit/LayoutTests/animations/svg-attribute-interpolation/svg-calc-interpolation.html
|
| diff --git a/third_party/WebKit/LayoutTests/animations/svg-attribute-interpolation/svg-calc-interpolation.html b/third_party/WebKit/LayoutTests/animations/svg-attribute-interpolation/svg-calc-interpolation.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..2db968d7a6ab2f2341907f30bf8431d20f9413f0
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/animations/svg-attribute-interpolation/svg-calc-interpolation.html
|
| @@ -0,0 +1,91 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<body>
|
| +<template id="target-template">
|
| +<svg width="50" height="50">
|
| +<ellipse class="target" cx="40" cy="30" rx="20" ry="30" />
|
| +</svg>
|
| +</template>
|
| +<script src="resources/interpolation-test.js"></script>
|
| +<script>
|
| +'use strict';
|
| +assertAttributeInterpolation({
|
| + property: 'cx',
|
| + from: 'calc(50% - 25px)',
|
| + to: 'calc(100% - 10px)'
|
| +}, [
|
| + {at: -0.25, is: '-10px'},
|
| + {at: 0, is: '0px'},
|
| + {at: 0.25, is: '10px'},
|
| + {at: 0.5, is: '20px'},
|
| + {at: 0.75, is: '30px'},
|
| + {at: 1, is: '40px'},
|
| + {at: 1.25, is: '50px'}
|
| +]);
|
| +assertAttributeInterpolation({
|
| + property: 'cy',
|
| + from: '0%',
|
| + to: '100px'
|
| +}, [
|
| + {at: -0.25, is: 'calc(0% + -25px)'},
|
| + {at: 0, is: '0%'},
|
| + {at: 0.25, is: 'calc(0% + 25px)'},
|
| + {at: 0.5, is: 'calc(0% + 50px)'},
|
| + {at: 0.75, is: 'calc(0% + 75px)'},
|
| + {at: 1, is: '100px'},
|
| + {at: 1.25, is: 'calc(0% + 125px)'}
|
| +]);
|
| +assertAttributeInterpolation({
|
| + property: 'cy',
|
| + from: '0%',
|
| + to: '100'
|
| +}, [
|
| + {at: -0.25, is: 'calc(0% + -25)'},
|
| + {at: 0, is: '0%'},
|
| + {at: 0.25, is: 'calc(0% + 25)'},
|
| + {at: 0.5, is: 'calc(0% + 50)'},
|
| + {at: 0.75, is: 'calc(0% + 75)'},
|
| + {at: 1, is: '100px'},
|
| + {at: 1.25, is: 'calc(0% + 125)'}
|
| +]);
|
| +assertAttributeInterpolation({
|
| + property: 'cy',
|
| + from: '10%',
|
| + to: 'calc(10% + 100px)'
|
| +}, [
|
| + {at: -0.25, is: 'calc(10% + -25px)'},
|
| + {at: 0, is: '10%'},
|
| + {at: 0.25, is: 'calc(10% + 25px)'},
|
| + {at: 0.5, is: 'calc(10% + 50px)'},
|
| + {at: 0.75, is: 'calc(10% + 75px)'},
|
| + {at: 1, is: 'calc(10% + 100px)'},
|
| + {at: 1.25, is: 'calc(10% + 125px)'}
|
| +]);
|
| +assertAttributeInterpolation({
|
| + property: 'cy',
|
| + from: 'calc(50% - 25px)',
|
| + to: 'calc(100% - 10px)'
|
| +}, [
|
| + {at: -0.25, is: 'calc(((50% - 25px) * 1.25) + ((100% - 10px) * -0.25))'},
|
| + {at: 0, is: 'calc(50% - 25px)'},
|
| + {at: 0.25, is: 'calc(((50% - 25px) * 0.75) + ((100% - 10px) * 0.25))'},
|
| + {at: 0.5, is: 'calc(((50% - 25px) * 0.5) + ((100% - 10px) * 0.5))'},
|
| + {at: 0.75, is: 'calc(((50% - 25px) * 0.25) + ((100% - 10px) * 0.75))'},
|
| + {at: 1, is: 'calc(100% - 10px)'},
|
| + {at: 1.25, is: 'calc(((50% - 25px) * -0.25) + ((100% - 10px) * 1.25))'}
|
| +]);
|
| +assertAttributeInterpolation({
|
| + property: 'cy',
|
| + from: 'calc(10mm + 0in)',
|
| + to: 'calc(10mm + 100in)'
|
| +}, [
|
| + {at: -0.25, is: 'calc(10mm + -25in)'},
|
| + {at: 0, is: '10mm'},
|
| + {at: 0.25, is: 'calc(10mm + 25in)'},
|
| + {at: 0.5, is: 'calc(10mm + 50in)'},
|
| + {at: 0.75, is: 'calc(10mm + 75in)'},
|
| + {at: 1, is: 'calc(10mm + 100in)'},
|
| + {at: 1.25, is: 'calc(10mm + 125in)'}
|
| +]);
|
| +</script>
|
| +</body>
|
|
|
Chromium Code Reviews
Issue 2097383002:
Added support of calc() for SVGLength (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master