mirror of
https://github.com/servo/servo.git
synced 2025-08-08 06:55:31 +01:00
Update web-platform-tests to revision dc5cbf088edcdb266541d4e5a76149a2c6e716a0
This commit is contained in:
Ms2ger
parent
1d40075f03
commit
079092dfea
2381 changed files with 90360 additions and 17722 deletions
|
|
@ -5,7 +5,6 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<link rel="stylesheet" href="/resources/testharness.css">
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,569 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Tests for animation types</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#animation-types">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<style>
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
var gCSSProperties = {
|
||||
"align-content": {
|
||||
// https://drafts.csswg.org/css-align/#propdef-align-content
|
||||
tests: [
|
||||
discrete("flex-start", "flex-end")
|
||||
]
|
||||
},
|
||||
"align-items": {
|
||||
// https://drafts.csswg.org/css-align/#propdef-align-items
|
||||
tests: [
|
||||
discrete("flex-start", "flex-end")
|
||||
]
|
||||
},
|
||||
"align-self": {
|
||||
// https://drafts.csswg.org/css-align/#propdef-align-self
|
||||
tests: [
|
||||
discrete("flex-start", "flex-end")
|
||||
]
|
||||
},
|
||||
"clip-rule": {
|
||||
// https://drafts.fxtf.org/css-masking-1/#propdef-clip-rule
|
||||
tests: [
|
||||
discrete("evenodd", "nonzero")
|
||||
]
|
||||
},
|
||||
"color-interpolation": {
|
||||
// https://svgwg.org/svg2-draft/painting.html#ColorInterpolationProperty
|
||||
tests: [
|
||||
discrete("linearRGB", "auto")
|
||||
]
|
||||
},
|
||||
"color-interpolation-filters": {
|
||||
// https://drafts.fxtf.org/filters-1/#propdef-color-interpolation-filters
|
||||
tests: [
|
||||
discrete("sRGB", "linearRGB")
|
||||
]
|
||||
},
|
||||
"dominant-baseline": {
|
||||
// https://drafts.csswg.org/css-inline/#propdef-dominant-baseline
|
||||
tests: [
|
||||
discrete("ideographic", "alphabetic")
|
||||
]
|
||||
},
|
||||
"fill-rule": {
|
||||
// https://svgwg.org/svg2-draft/painting.html#FillRuleProperty
|
||||
tests: [
|
||||
discrete("evenodd", "nonzero")
|
||||
]
|
||||
},
|
||||
"flex-basis": {
|
||||
// https://drafts.csswg.org/css-flexbox/#propdef-flex-basis
|
||||
tests: [
|
||||
lengthPercentageOrCalc(),
|
||||
discrete("auto", "10px")
|
||||
]
|
||||
},
|
||||
"flex-direction": {
|
||||
// https://drafts.csswg.org/css-flexbox/#propdef-flex-direction
|
||||
tests: [
|
||||
discrete("row", "row-reverse")
|
||||
]
|
||||
},
|
||||
"flex-grow": {
|
||||
// https://drafts.csswg.org/css-flexbox/#flex-grow-property
|
||||
tests: [
|
||||
positiveNumber()
|
||||
]
|
||||
},
|
||||
"flex-shrink": {
|
||||
// https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink
|
||||
tests: [
|
||||
positiveNumber()
|
||||
]
|
||||
},
|
||||
"flex-wrap": {
|
||||
// https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap
|
||||
tests: [
|
||||
discrete("nowrap", "wrap")
|
||||
]
|
||||
},
|
||||
"font-style": {
|
||||
// https://drafts.csswg.org/css-fonts/#propdef-font-style
|
||||
tests: [
|
||||
discrete("italic", "oblique")
|
||||
]
|
||||
},
|
||||
"image-rendering": {
|
||||
// https://drafts.csswg.org/css-images/#propdef-image-rendering
|
||||
tests: [
|
||||
discrete("optimizeQuality", "pixelated")
|
||||
]
|
||||
},
|
||||
"justify-content": {
|
||||
// https://drafts.csswg.org/css-align/#propdef-justify-content
|
||||
tests: [
|
||||
discrete("baseline", "last-baseline")
|
||||
]
|
||||
},
|
||||
"justify-items": {
|
||||
// https://drafts.csswg.org/css-align/#propdef-justify-items
|
||||
tests: [
|
||||
discrete("baseline", "last-baseline")
|
||||
]
|
||||
},
|
||||
"justify-self": {
|
||||
// https://drafts.csswg.org/css-align/#propdef-justify-self
|
||||
tests: [
|
||||
discrete("baseline", "last-baseline")
|
||||
]
|
||||
},
|
||||
"mask-type": {
|
||||
// https://drafts.fxtf.org/css-masking-1/#propdef-mask-type
|
||||
tests: [
|
||||
discrete("alpha", "luminance")
|
||||
]
|
||||
},
|
||||
"order": {
|
||||
// https://drafts.csswg.org/css-flexbox/#propdef-order
|
||||
tests: [
|
||||
integer()
|
||||
]
|
||||
},
|
||||
"pointer-events": {
|
||||
// https://svgwg.org/svg2-draft/interact.html#PointerEventsProperty
|
||||
tests: [
|
||||
discrete("fill", "none")
|
||||
]
|
||||
},
|
||||
"ruby-align": {
|
||||
// https://drafts.csswg.org/css-ruby-1/#propdef-ruby-align
|
||||
tests: [
|
||||
discrete("start", "center")
|
||||
]
|
||||
},
|
||||
"ruby-position": {
|
||||
// https://drafts.csswg.org/css-ruby-1/#propdef-ruby-position
|
||||
tests: [
|
||||
discrete("under", "over")
|
||||
],
|
||||
tagName: "ruby"
|
||||
},
|
||||
"shape-rendering": {
|
||||
// https://svgwg.org/svg2-draft/painting.html#ShapeRenderingProperty
|
||||
tests: [
|
||||
discrete("optimizeSpeed", "crispEdges")
|
||||
]
|
||||
},
|
||||
"stroke-linecap": {
|
||||
// https://svgwg.org/svg2-draft/painting.html#StrokeLinecapProperty
|
||||
tests: [
|
||||
discrete("round", "square")
|
||||
]
|
||||
},
|
||||
"stroke-linejoin": {
|
||||
// https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty
|
||||
tests: [
|
||||
discrete("round", "miter")
|
||||
],
|
||||
tagName: "rect"
|
||||
},
|
||||
"text-anchor": {
|
||||
// https://svgwg.org/svg2-draft/text.html#TextAnchorProperty
|
||||
tests: [
|
||||
discrete("middle", "end")
|
||||
]
|
||||
},
|
||||
"text-combine-upright": {
|
||||
// https://drafts.csswg.org/css-writing-modes-3/#propdef-text-combine-upright
|
||||
tests: [
|
||||
discrete("all", "digits")
|
||||
]
|
||||
},
|
||||
"text-decoration-line": {
|
||||
// https://drafts.csswg.org/css-text-decor-3/#propdef-text-decoration-line
|
||||
tests: [
|
||||
discrete("underline", "overline")
|
||||
]
|
||||
},
|
||||
"text-orientation": {
|
||||
// https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation
|
||||
tests: [
|
||||
discrete("upright", "sideways")
|
||||
]
|
||||
},
|
||||
"text-rendering": {
|
||||
// https://svgwg.org/svg2-draft/painting.html#TextRenderingProperty
|
||||
tests: [
|
||||
discrete("optimizeSpeed", "optimizeLegibility")
|
||||
]
|
||||
},
|
||||
"vector-effect": {
|
||||
// https://svgwg.org/svg2-draft/coords.html#VectorEffectProperty
|
||||
tests: [
|
||||
discrete("none", "non-scaling-stroke")
|
||||
]
|
||||
},
|
||||
"visibility": {
|
||||
// https://drafts.csswg.org/css2/visufx.html#propdef-visibility
|
||||
tests: [
|
||||
visibility()
|
||||
]
|
||||
},
|
||||
"word-break": {
|
||||
// https://drafts.csswg.org/css-text-3/#propdef-word-break
|
||||
tests: [
|
||||
discrete("keep-all", "break-all")
|
||||
]
|
||||
},
|
||||
"writing-mode": {
|
||||
// https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode
|
||||
tests: [
|
||||
discrete("vertical-rl", "sideways-rl")
|
||||
]
|
||||
},
|
||||
}
|
||||
|
||||
for (var property in gCSSProperties) {
|
||||
if (!isSupported(property)) {
|
||||
continue;
|
||||
}
|
||||
var testData = gCSSProperties[property];
|
||||
testData.tests.forEach(function(testFunction) {
|
||||
testFunction(property, testData);
|
||||
});
|
||||
}
|
||||
|
||||
function discrete(from, to) {
|
||||
return function(property, options) {
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = [from, to];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: from.toLowerCase() },
|
||||
{ time: 499, expected: from.toLowerCase() },
|
||||
{ time: 500, expected: to.toLowerCase() },
|
||||
{ time: 1000, expected: to.toLowerCase() }]);
|
||||
}, property + " uses discrete animation when animating between '"
|
||||
+ from + "' and '" + to + "' with linear easing");
|
||||
|
||||
test(function(t) {
|
||||
// Easing: http://cubic-bezier.com/#.68,0,1,.01
|
||||
// With this curve, we don't reach the 50% point until about 95% of
|
||||
// the time has expired.
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = [from, to];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both",
|
||||
easing: "cubic-bezier(0.68,0,1,0.01)" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: from.toLowerCase() },
|
||||
{ time: 940, expected: from.toLowerCase() },
|
||||
{ time: 960, expected: to.toLowerCase() }]);
|
||||
}, property + " uses discrete animation when animating between '"
|
||||
+ from + "' and '" + to + "' with effect easing");
|
||||
|
||||
test(function(t) {
|
||||
// Easing: http://cubic-bezier.com/#.68,0,1,.01
|
||||
// With this curve, we don't reach the 50% point until about 95% of
|
||||
// the time has expired.
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = [from, to];
|
||||
keyframes.easing = "cubic-bezier(0.68,0,1,0.01)";
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: from.toLowerCase() },
|
||||
{ time: 940, expected: from.toLowerCase() },
|
||||
{ time: 960, expected: to.toLowerCase() }]);
|
||||
}, property + " uses discrete animation when animating between '"
|
||||
+ from + "' and '" + to + "' with keyframe easing");
|
||||
}
|
||||
}
|
||||
|
||||
function length() {
|
||||
return function(property, options) {
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["10px", "50px"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "10px" },
|
||||
{ time: 500, expected: "30px" },
|
||||
{ time: 1000, expected: "50px" }]);
|
||||
}, property + " supports animating as a length");
|
||||
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["1rem", "5rem"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "10px" },
|
||||
{ time: 500, expected: "30px" },
|
||||
{ time: 1000, expected: "50px" }]);
|
||||
}, property + " supports animating as a length of rem");
|
||||
}
|
||||
}
|
||||
|
||||
function percentage() {
|
||||
return function(property, options) {
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["10%", "50%"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "10%" },
|
||||
{ time: 500, expected: "30%" },
|
||||
{ time: 1000, expected: "50%" }]);
|
||||
}, property + " supports animating as a percentage");
|
||||
}
|
||||
}
|
||||
|
||||
function integer() {
|
||||
return function(property, options) {
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = [-2, 2];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "-2" },
|
||||
{ time: 500, expected: "0" },
|
||||
{ time: 1000, expected: "2" }]);
|
||||
}, property + " supports animating as an integer");
|
||||
}
|
||||
}
|
||||
|
||||
function positiveNumber() {
|
||||
return function(property, options) {
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = [1.1, 1.5];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "1.1" },
|
||||
{ time: 500, expected: "1.3" },
|
||||
{ time: 1000, expected: "1.5" }]);
|
||||
}, property + " supports animating as a positive number");
|
||||
}
|
||||
}
|
||||
|
||||
function lengthPercentageOrCalc() {
|
||||
return function(property, options) {
|
||||
length()(property, options);
|
||||
percentage()(property, options);
|
||||
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["10px", "20%"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "10px" },
|
||||
{ time: 500, expected: "calc(5px + 10%)" },
|
||||
{ time: 1000, expected: "20%" }]);
|
||||
}, property + " supports animating as combination units 'px' and '%'");
|
||||
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["10%", "2em"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "10%" },
|
||||
{ time: 500, expected: "calc(10px + 5%)" },
|
||||
{ time: 1000, expected: "20px" }]);
|
||||
}, property + " supports animating as combination units '%' and 'em'");
|
||||
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["1em", "2rem"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "10px" },
|
||||
{ time: 500, expected: "15px" },
|
||||
{ time: 1000, expected: "20px" }]);
|
||||
}, property + " supports animating as combination units 'em' and 'rem'");
|
||||
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["10px", "calc(1em + 20%)"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "10px" },
|
||||
{ time: 500, expected: "calc(10px + 10%)" },
|
||||
{ time: 1000, expected: "calc(10px + 20%)" }]);
|
||||
}, property + " supports animating as combination units 'px' and 'calc'");
|
||||
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["calc(10px + 10%)", "calc(1em + 1rem + 20%)"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0,
|
||||
expected: "calc(10px + 10%)" },
|
||||
{ time: 500,
|
||||
expected: "calc(15px + 15%)" },
|
||||
{ time: 1000,
|
||||
expected: "calc(20px + 20%)" }]);
|
||||
}, property + " supports animating as a calc");
|
||||
}
|
||||
}
|
||||
|
||||
function visibility() {
|
||||
return function(property, options) {
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["visible", "hidden"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "visible" },
|
||||
{ time: 999, expected: "visible" },
|
||||
{ time: 1000, expected: "hidden" }]);
|
||||
}, property + " uses visibility animation when animating "
|
||||
+ "from 'visible' to 'hidden'");
|
||||
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["hidden", "visible"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "hidden" },
|
||||
{ time: 1, expected: "visible" },
|
||||
{ time: 1000, expected: "visible" }]);
|
||||
}, property + " uses visibility animation when animating "
|
||||
+ "from 'hidden' to 'visible'");
|
||||
|
||||
test(function(t) {
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["hidden", "collapse"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation = target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "hidden" },
|
||||
{ time: 499, expected: "hidden" },
|
||||
{ time: 500, expected: "collapse" },
|
||||
{ time: 1000, expected: "collapse" }]);
|
||||
}, property + " uses visibility animation when animating "
|
||||
+ "from 'hidden' to 'collapse'");
|
||||
|
||||
test(function(t) {
|
||||
// Easing: http://cubic-bezier.com/#.68,-.55,.26,1.55
|
||||
// With this curve, the value is less than 0 till about 34%
|
||||
// also more than 1 since about 63%
|
||||
var idlName = propertyToIDL(property);
|
||||
var keyframes = {};
|
||||
keyframes[idlName] = ["visible", "hidden"];
|
||||
var target = createElement(t, options.tagName);
|
||||
var animation =
|
||||
target.animate(keyframes,
|
||||
{ duration: 1000, fill: "both",
|
||||
easing: "cubic-bezier(0.68, -0.55, 0.26, 1.55)" });
|
||||
testAnimationSamples(animation, idlName,
|
||||
[{ time: 0, expected: "visible" },
|
||||
{ time: 1, expected: "visible" },
|
||||
{ time: 330, expected: "visible" },
|
||||
{ time: 340, expected: "visible" },
|
||||
{ time: 620, expected: "visible" },
|
||||
{ time: 630, expected: "hidden" },
|
||||
{ time: 1000, expected: "hidden" }]);
|
||||
}, property + " uses visibility animation when animating "
|
||||
+ "from 'visible' to 'hidden' with easeInOutBack easing");
|
||||
}
|
||||
}
|
||||
|
||||
function testAnimationSamples(animation, idlName, testSamples) {
|
||||
var target = animation.effect.target;
|
||||
testSamples.forEach(function(testSample) {
|
||||
animation.currentTime = testSample.time;
|
||||
assert_equals(getComputedStyle(target)[idlName], testSample.expected,
|
||||
"The value should be " + testSample.expected +
|
||||
" at " + testSample.time + "ms");
|
||||
});
|
||||
}
|
||||
|
||||
function isSupported(property) {
|
||||
var testKeyframe = new TestKeyframe(propertyToIDL(property));
|
||||
try {
|
||||
// Since TestKeyframe returns 'undefined' for |property|,
|
||||
// the KeyframeEffect constructor will throw
|
||||
// if the string "undefined" is not a valid value for the property.
|
||||
new KeyframeEffect(null, testKeyframe);
|
||||
} catch(e) {}
|
||||
return testKeyframe.propAccessCount !== 0;
|
||||
}
|
||||
|
||||
function TestKeyframe(testProp) {
|
||||
var _propAccessCount = 0;
|
||||
|
||||
Object.defineProperty(this, testProp, {
|
||||
get: function() { _propAccessCount++; },
|
||||
enumerable: true
|
||||
});
|
||||
|
||||
Object.defineProperty(this, 'propAccessCount', {
|
||||
get: function() { return _propAccessCount; }
|
||||
});
|
||||
}
|
||||
|
||||
function propertyToIDL(property) {
|
||||
// https://w3c.github.io/web-animations/#animation-property-name-to-idl-attribute-name
|
||||
if (property === "float") {
|
||||
return "cssFloat";
|
||||
}
|
||||
return property.replace(/-[a-z]/gi,
|
||||
function (str) {
|
||||
return str.substr(1).toUpperCase(); });
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -5,7 +5,6 @@
|
|||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<link rel="stylesheet" href="/resources/testharness.css">
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
|
|
@ -82,5 +81,23 @@ promise_test(function(t) {
|
|||
});
|
||||
}, 'Effect values reflect changes to font-size from reparenting');
|
||||
|
||||
test(function(t) {
|
||||
var divA = createDiv(t);
|
||||
divA.style.fontSize = '10px';
|
||||
|
||||
var divB = createDiv(t);
|
||||
divB.style.fontSize = '20px';
|
||||
|
||||
var animation = divA.animate([ { marginLeft: '10em' },
|
||||
{ marginLeft: '20em' } ], 1000);
|
||||
animation.currentTime = 500;
|
||||
assert_equals(getComputedStyle(divA).marginLeft, '150px',
|
||||
'Effect value before updating target element');
|
||||
|
||||
animation.effect.target = divB;
|
||||
assert_equals(getComputedStyle(divB).marginLeft, '300px',
|
||||
'Effect value after updating target element');
|
||||
}, 'Effect values reflect changes to target element');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue