mirror of
https://github.com/servo/servo.git
synced 2025-07-25 08:10:21 +01:00
Fix interpolation of CalcLengthOrPercentage (fixes #12765)
This commit is contained in:
parent
2c7d1ddfa1
commit
fc58cc01f4
3 changed files with 57 additions and 2 deletions
|
@ -326,9 +326,25 @@ impl Interpolate for CSSParserColor {
|
||||||
impl Interpolate for CalcLengthOrPercentage {
|
impl Interpolate for CalcLengthOrPercentage {
|
||||||
#[inline]
|
#[inline]
|
||||||
fn interpolate(&self, other: &Self, time: f64) -> Result<Self, ()> {
|
fn interpolate(&self, other: &Self, time: f64) -> Result<Self, ()> {
|
||||||
|
fn interpolate_half<T>(this: Option<T>,
|
||||||
|
other: Option<T>,
|
||||||
|
time: f64)
|
||||||
|
-> Result<Option<T>, ()>
|
||||||
|
where T: Default + Interpolate
|
||||||
|
{
|
||||||
|
match (this, other) {
|
||||||
|
(None, None) => Ok(None),
|
||||||
|
(this, other) => {
|
||||||
|
let this = this.unwrap_or(T::default());
|
||||||
|
let other = other.unwrap_or(T::default());
|
||||||
|
this.interpolate(&other, time).map(Some)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Ok(CalcLengthOrPercentage {
|
Ok(CalcLengthOrPercentage {
|
||||||
length: self.length.interpolate(&other.length, time).ok().and_then(|x|x),
|
length: try!(interpolate_half(self.length, other.length, time)),
|
||||||
percentage: self.percentage.interpolate(&other.percentage, time).ok().and_then(|x|x),
|
percentage: try!(interpolate_half(self.percentage, other.percentage, time)),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6168,6 +6168,12 @@
|
||||||
"url": "/_mozilla/css/animations/basic-transition.html"
|
"url": "/_mozilla/css/animations/basic-transition.html"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"css/animations/mixed-units.html": [
|
||||||
|
{
|
||||||
|
"path": "css/animations/mixed-units.html",
|
||||||
|
"url": "/_mozilla/css/animations/mixed-units.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
"css/animations/transition-raf.html": [
|
"css/animations/transition-raf.html": [
|
||||||
{
|
{
|
||||||
"path": "css/animations/transition-raf.html",
|
"path": "css/animations/transition-raf.html",
|
||||||
|
|
33
tests/wpt/mozilla/tests/css/animations/mixed-units.html
Normal file
33
tests/wpt/mozilla/tests/css/animations/mixed-units.html
Normal file
|
@ -0,0 +1,33 @@
|
||||||
|
<!doctype html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Animation test: mixed units.</title>
|
||||||
|
<style>
|
||||||
|
.animatable {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: red;
|
||||||
|
animation: foo 1s infinite linear;
|
||||||
|
}
|
||||||
|
@keyframes foo {
|
||||||
|
from { width: 0%; }
|
||||||
|
to { width: 500px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
<div class="animatable"></div>
|
||||||
|
<script>
|
||||||
|
var div = document.querySelector('.animatable');
|
||||||
|
async_test(function(t) {
|
||||||
|
window.addEventListener('load', function() {
|
||||||
|
var test = new window.TestBinding();
|
||||||
|
test.advanceClock(500);
|
||||||
|
assert_equals(getComputedStyle(div).getPropertyValue('width'), '250px');
|
||||||
|
test.advanceClock(500);
|
||||||
|
assert_equals(getComputedStyle(div).getPropertyValue('width'), '500px');
|
||||||
|
test.advanceClock(500);
|
||||||
|
assert_equals(getComputedStyle(div).getPropertyValue('width'), '250px');
|
||||||
|
t.done();
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
Loading…
Add table
Add a link
Reference in a new issue