forked from mirrors/gecko-dev
f700b74073
Automatic update from web-platform-tests Stop re-absolutization of out of flow insets for getComputedStyle() When we `getComputedStyle()` of an inset property of an out-of-flow element, if the value is 'auto', percent or calc, we currently redo the absolutization from the ComputedStyle. This is error-prone, has known failures in WPT, and makes it impossible to work with anchor positioning (and especially position fallback). As we have already absolutized these values during layout, this patch simply caches them on LayoutResult to be passed to getComputedStyle(). To minimize memory overhead, this patch makes NGLayoutResult to unconditionally store the resolved insets (+8 bytes per box), plus creating RareData if the box's offset in container doesn't match the resolved insets. Fixed: 867616 Fixed: 1423493 Fixed: 1451020 Change-Id: Ib31f17304179d5e5b91c9d91c3e97386b904d0a2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4583533 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Cr-Commit-Position: refs/heads/main@{#1162636} -- wpt-commits: 1f802e3c6e578f60e06dfd41cdcce51c915b4bc9 wpt-pr: 40370
224 lines
7.8 KiB
HTML
224 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<meta name="assert"
|
|
content="This test checks the output of Cubic Bézier functions" />
|
|
<title>Tests for the output of Cubic Bézier timing functions</title>
|
|
<link rel="help"
|
|
href="https://drafts.csswg.org/css-easing/#cubic-bezier-timing-functions">
|
|
<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';
|
|
|
|
// Precision of major rendering engines' layout systems.
|
|
const epsilon = 0.02;
|
|
|
|
function assert_style_left_at(animation, time, easingFunction) {
|
|
animation.currentTime = time;
|
|
var portion = time / animation.effect.getTiming()['duration'];
|
|
assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
|
|
easingFunction(portion) * 100,
|
|
epsilon,
|
|
'The left of the animation should be approximately ' +
|
|
easingFunction(portion) * 100 + ' at ' + time + 'ms');
|
|
}
|
|
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
target.style.position = 'absolute';
|
|
var anim = target.animate(
|
|
// http://cubic-bezier.com/#.5,1,.5,0
|
|
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
|
|
{ left: '100px' } ],
|
|
{ duration: 1000,
|
|
fill: 'forwards',
|
|
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
|
var keyframeEasing = function(x) {
|
|
assert_greater_than_equal(x, 0.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
assert_less_than_equal(x, 1.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
return cubicBezier(0.5, 1, 0.5, 0)(x);
|
|
}
|
|
var keyframeEasingExtrapolated = function(x) {
|
|
assert_greater_than(x, 1.0,
|
|
'This function should be called in (1.0, infinity) range');
|
|
// p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x)
|
|
return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0);
|
|
}
|
|
var effectEasing = function(x) {
|
|
return cubicBezier(0, 1.5, 1, 1.5)(x);
|
|
}
|
|
|
|
// The effect-easing produces values greater than 1 in (0.23368794, 1)
|
|
assert_style_left_at(anim, 0, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 230, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 240, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
// Near the extreme point of the effect-easing function
|
|
assert_style_left_at(anim, 700, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 990, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 1000, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
}, 'cubic-bezier easing with input progress greater than 1');
|
|
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
target.style.position = 'absolute';
|
|
var anim = target.animate(
|
|
// http://cubic-bezier.com/#0,1.5,1,1.5
|
|
[ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' },
|
|
{ left: '100px' } ],
|
|
{ duration: 1000,
|
|
fill: 'forwards',
|
|
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
|
var easing = function(x) {
|
|
assert_greater_than_equal(x, 0.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
assert_less_than_equal(x, 1.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
return cubicBezier(0, 1.5, 1, 1.5)(x);
|
|
}
|
|
var easingExtrapolated = function(x) {
|
|
assert_greater_than(x, 1.0,
|
|
'This function should be called in negative range');
|
|
// For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the
|
|
// endpoint (x = 1.0) is infinity so we should just return 1.0.
|
|
return 1.0;
|
|
}
|
|
|
|
// The effect-easing produces values greater than 1 in (0.23368794, 1)
|
|
assert_style_left_at(anim, 0, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
assert_style_left_at(anim, 230, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
assert_style_left_at(anim, 240, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
// Near the extreme point of the effect-easing function
|
|
assert_style_left_at(anim, 700, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
assert_style_left_at(anim, 990, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
assert_style_left_at(anim, 1000, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
}, 'cubic-bezier easing with input progress greater than 1 and where the ' +
|
|
'tangent on the upper boundary is infinity');
|
|
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
target.style.position = 'absolute';
|
|
var anim = target.animate(
|
|
// http://cubic-bezier.com/#.5,1,.5,0
|
|
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
|
|
{ left: '100px' } ],
|
|
{ duration: 1000,
|
|
fill: 'forwards',
|
|
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
|
var keyframeEasing = function(x) {
|
|
assert_greater_than_equal(x, 0.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
assert_less_than_equal(x, 1.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
return cubicBezier(0.5, 1, 0.5, 0)(x);
|
|
}
|
|
var keyframeEasingExtrapolated = function(x) {
|
|
assert_less_than(x, 0.0,
|
|
'This function should be called in negative range');
|
|
// p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x)
|
|
return (1 / 0.5) * x;
|
|
}
|
|
var effectEasing = function(x) {
|
|
return cubicBezier(0, -0.5, 1, -0.5)(x);
|
|
}
|
|
|
|
// The effect-easing produces negative values in (0, 0.766312060)
|
|
assert_style_left_at(anim, 0, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 10, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
// Near the extreme point of the effect-easing function
|
|
assert_style_left_at(anim, 300, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 750, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 770, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 1000, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
}, 'cubic-bezier easing with input progress less than 0');
|
|
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
target.style.position = 'absolute';
|
|
var anim = target.animate(
|
|
// http://cubic-bezier.com/#0,-0.5,1,-0.5
|
|
[ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' },
|
|
{ left: '100px' } ],
|
|
{ duration: 1000,
|
|
fill: 'forwards',
|
|
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
|
var easing = function(x) {
|
|
assert_greater_than_equal(x, 0.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
assert_less_than_equal(x, 1.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
return cubicBezier(0, -0.5, 1, -0.5)(x);
|
|
}
|
|
var easingExtrapolated = function(x) {
|
|
assert_less_than(x, 0.0,
|
|
'This function should be called in negative range');
|
|
// For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the
|
|
// endpoint (x = 0.0) is infinity so we should just return 0.0.
|
|
return 0.0;
|
|
}
|
|
|
|
// The effect-easing produces negative values in (0, 0.766312060)
|
|
assert_style_left_at(anim, 0, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
assert_style_left_at(anim, 10, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
// Near the extreme point of the effect-easing function
|
|
assert_style_left_at(anim, 300, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
assert_style_left_at(anim, 750, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
assert_style_left_at(anim, 770, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
assert_style_left_at(anim, 1000, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
}, 'cubic-bezier easing with input progress less than 0 and where the ' +
|
|
'tangent on the lower boundary is infinity');
|
|
|
|
</script>
|
|
</body>
|