зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1286151 - Part 5: Test. r=hiro
MozReview-Commit-ID: wORyuqtfj --HG-- extra : rebase_source : d0e002c44ca54215f51129fdaf1ec93fa129ecab
This commit is contained in:
Boris Chiou
Родитель
23b961ef60
Коммит
eecc8c9ff7
|
|
@ -38739,6 +38739,12 @@
|
|||
"url": "/uievents/order-of-events/focus-events/focus-automated-blink-webkit.html"
|
||||
}
|
||||
],
|
||||
"web-animations/animation-model/animation-types/spacing-keyframes-filters.html": [
|
||||
{
|
||||
"path": "web-animations/animation-model/animation-types/spacing-keyframes-filters.html",
|
||||
"url": "/web-animations/animation-model/animation-types/spacing-keyframes-filters.html"
|
||||
}
|
||||
],
|
||||
"web-animations/animation-model/animation-types/spacing-keyframes-shapes.html": [
|
||||
{
|
||||
"path": "web-animations/animation-model/animation-types/spacing-keyframes-shapes.html",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,210 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Keyframe spacing tests on filters</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#spacing-keyframes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
// Help function for testing the computed offsets by the distance array.
|
||||
function assert_animation_offsets(anim, dist) {
|
||||
const frames = anim.effect.getKeyframes();
|
||||
const cumDist = dist.reduce( (prev, curr) => {
|
||||
prev.push(prev.length == 0 ? curr : curr + prev[prev.length - 1]);
|
||||
return prev;
|
||||
}, []);
|
||||
|
||||
const total = cumDist[cumDist.length - 1];
|
||||
for (var i = 0; i < frames.length; ++i) {
|
||||
assert_equals(frames[i].computedOffset, cumDist[i] / total,
|
||||
'computedOffset of frame ' + i);
|
||||
}
|
||||
}
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'blur(1px)'},
|
||||
{ filter: 'none' }, // The default value is 0px.
|
||||
{ filter: 'blur(10px)' },
|
||||
{ filter: 'blur(8px)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
var dist = [ 0, 1, 10, (10 - 8) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on blur' );
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'brightness(50%)'},
|
||||
{ filter: 'none' }, // The default value is 1.
|
||||
{ filter: 'brightness(2)' },
|
||||
{ filter: 'brightness(175%)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on brightness' );
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'contrast(50%)'},
|
||||
{ filter: 'none' }, // The default value is 1.
|
||||
{ filter: 'contrast(2)' },
|
||||
{ filter: 'contrast(175%)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on contrast' );
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'drop-shadow(10px 10px 10px blue)'},
|
||||
{ filter: 'none' },
|
||||
// none filter: 'drop-shadow(0, 0, 0, rgba(0, 0, 0, 0))'
|
||||
{ filter: 'drop-shadow(5px 5px 1px black)' },
|
||||
{ filter: 'drop-shadow(20px 20px yellow)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
// Blue: rgba(0, 0, 255, 1.0) = rgba( 0%, 0%, 100%, 100%).
|
||||
// Black: rgba(0, 0, 0, 1.0) = rgba( 0%, 0%, 0%, 100%).
|
||||
// Yellow: rgba(255, 255, 0, 1.0) = rgba(100%, 100%, 0%, 100%).
|
||||
var dist = [ 0,
|
||||
Math.sqrt(10 * 10 + 10 * 10 + 10 * 10 + (1 * 1 + 1 * 1)),
|
||||
Math.sqrt(5 * 5 + 5 * 5 + 1 * 1 + (1 * 1)),
|
||||
Math.sqrt(15 * 15 + 15 * 15 + 1 * 1 + (1 * 1 + 1 * 1)) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on drop-shadow' );
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'drop-shadow(10px 10px 10px)'},
|
||||
{ filter: 'drop-shadow(0 0)' },
|
||||
{ filter: 'drop-shadow(5px 5px 1px black)' },
|
||||
{ filter: 'drop-shadow(20px 20px yellow)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
// Black: rgba(0, 0, 0, 1.0) = rgba( 0%, 0%, 0%, 100%).
|
||||
// Yellow: rgba(255, 255, 0, 1.0) = rgba(100%, 100%, 0%, 100%).
|
||||
var dist = [ 0,
|
||||
Math.sqrt(10 * 10 + 10 * 10 + 10 * 10),
|
||||
0, // The distance is zero because the 2nd frame uses no-color.
|
||||
Math.sqrt(15 * 15 + 15 * 15 + 1 * 1 + (1 * 1 + 1 * 1)) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test getting zero distance when computing distance between ' +
|
||||
'color and no-color on drop-shadow');
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'grayscale(50%)'},
|
||||
{ filter: 'none' }, // The default value is 0.
|
||||
// Values of grayscale over 100% are clamped to 1.
|
||||
{ filter: 'grayscale(2)' },
|
||||
{ filter: 'grayscale(75%)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on grayscale' );
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'hue-rotate(180deg)'},
|
||||
{ filter: 'none' }, // The default value is 0deg.
|
||||
{ filter: 'hue-rotate(720deg)' },
|
||||
{ filter: 'hue-rotate(-180deg)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
var dist = [ 0, 180, 720, 720 + 180 ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on hue-rotate' );
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'invert(50%)'},
|
||||
{ filter: 'none' }, // The default value is 0.
|
||||
// Values of invert over 100% are clamped to 1.
|
||||
{ filter: 'invert(2)' },
|
||||
{ filter: 'invert(75%)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on invert' );
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'opacity(50%)'},
|
||||
{ filter: 'none' }, // The default value is 1.
|
||||
// Values of opacity over 100% are clamped to 1.
|
||||
{ filter: 'opacity(2)' },
|
||||
{ filter: 'opacity(75%)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
var dist = [ 0, (1 - 0.5), (1 - 1), (1.0 - 0.75) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on opacity' );
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'saturate(50%)'},
|
||||
{ filter: 'none' }, // The default value is 1.
|
||||
{ filter: 'saturate(2)' },
|
||||
{ filter: 'saturate(175%)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on saturate' );
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'sepia(50%)'},
|
||||
{ filter: 'none' }, // The default value is 0.
|
||||
// Values of sepia over 100% are clamped to 1.
|
||||
{ filter: 'sepia(2)' },
|
||||
{ filter: 'sepia(75%)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on sepia' );
|
||||
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'grayscale(50%) opacity(100%) blur(5px)' },
|
||||
{ filter: 'none' },
|
||||
// none filter: 'grayscale(0) opacity(1) blur(0px)'
|
||||
{ filter: 'grayscale(100%) opacity(50%) blur(1px)' },
|
||||
{ filter: 'grayscale(75%) opacity(50%)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
var dist = [ 0,
|
||||
Math.sqrt(0.5 * 0.5 + 5 * 5),
|
||||
Math.sqrt(1 * 1 + 0.5 * 0.5 + 1 * 1),
|
||||
Math.sqrt(0.25 * 0.25 + 1 * 1) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on filter function lists' );
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { filter: 'grayscale(50%) opacity(100%)' },
|
||||
{ filter: 'opacity(10%) grayscale(50%)' },
|
||||
{ filter: 'grayscale(100%) opacity(50%) blur(1px)' },
|
||||
{ filter: 'grayscale(75%) opacity(50%)' } ],
|
||||
{ spacing: 'paced(filter)' });
|
||||
|
||||
var dist = [ 0,
|
||||
0,
|
||||
0,
|
||||
Math.sqrt(0.25 * 0.25 + 1 * 1) ];
|
||||
assert_animation_offsets(anim, dist);
|
||||
}, 'Test spacing on filter function lists' );
|
||||
|
||||
</script>
|
||||
</body>
|
||||
Загрузка…
Ссылка в новой задаче