Skip to content

GitLab

T
tangled
Commit 3ea8e0d9 authored by haozhe's avatar haozhe Committed by Commit Bot
Browse files
Options

Port z-index interpolation to wpt 

Firefox passed
Chrome failed. Bug filed: https://crbug.com/375982

Bug: 900581
Change-Id: I33488661e2938c3fae6bef27ea6672b77047de84
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1925347Reviewed-by: default avatarXida Chen <xidachen@chromium.org>
Commit-Queue: Hao Sheng <haozhes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#718319}
parent 685f78af
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 339 additions and 209 deletions
third_party/blink/web_tests/animations/interpolation/z-index-interpolation.html → third_party/blink/web_tests/external/wpt/css/css-transitions/animations/z-index-interpolation.html
View file @ 3ea8e0d9
<!DOCTYPE html>
<meta charset="UTF-8">
<title>z-index interpolation</title>
<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#z-index">
<meta name="assert" content="z-index supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
body {
margin-top: 20px;
......@@ -31,105 +39,92 @@ body {
background-color: green;
}
</style>
<script src="resources/interpolation-test.js"></script>
<body></body>
<script>
[-8, -5, -2, 1, 5, 10, 12].forEach(function(zIndex, i) {
var layerReference = document.createElement('div');
layerReference.classList.add('layer-reference');
layerReference.style.zIndex = zIndex;
layerReference.style.left = 7 + (i * 50) + 'px';
layerReference.textContent = 'Z=' + zIndex;
document.body.appendChild(layerReference);
});
assertInterpolation({
<script>
test_interpolation({
property: 'z-index',
from: neutralKeyframe,
to: '5',
}, [
{at: -0.3, is: '-4'},
{at: 0, is: '-2'},
{at: 0.3, is: '0'},
{at: 0.6, is: '2'},
{at: 1, is: '5'},
{at: 1.5, is: '9'},
{at: -0.3, expect: '-4'},
{at: 0, expect: '-2'},
{at: 0.3, expect: '0'},
{at: 0.6, expect: '2'},
{at: 1, expect: '5'},
{at: 1.5, expect: '9'},
]);
assertNoInterpolation({
test_no_interpolation({
property: 'z-index',
from: 'initial',
to: '5',
});
// We fail to inherit correctly due to style overadjustment: crbug.com/375982
assertInterpolation({
test_interpolation({
property: 'z-index',
from: 'inherit',
to: '5',
}, [
{at: -0.3, is: '18'},
{at: 0, is: '15'},
{at: 0.3, is: '12'},
{at: 0.6, is: '9'},
{at: 1, is: '5'},
{at: 1.5, is: '0'},
{at: -0.3, expect: '18'},
{at: 0, expect: '15'},
{at: 0.3, expect: '12'},
{at: 0.6, expect: '9'},
{at: 1, expect: '5'},
{at: 1.5, expect: '0'},
]);
assertNoInterpolation({
test_no_interpolation({
property: 'z-index',
from: 'unset',
to: '5',
});
assertInterpolation({
test_interpolation({
property: 'z-index',
from: '-5',
to: '5'
}, [
{at: -0.3, is: '-8'},
{at: 0, is: '-5'},
{at: 0.3, is: '-2'},
{at: 0.6, is: '1'},
{at: 1, is: '5'},
{at: 1.5, is: '10'},
{at: -0.3, expect: '-8'},
{at: 0, expect: '-5'},
{at: 0.3, expect: '-2'},
{at: 0.6, expect: '1'},
{at: 1, expect: '5'},
{at: 1.5, expect: '10'},
]);
assertInterpolation({
test_interpolation({
property: 'z-index',
from: '2',
to: '4'
}, [
{at: -0.3, is: '1'},
{at: 0, is: '2'},
{at: 0.3, is: '3'},
{at: 0.6, is: '3'},
{at: 1, is: '4'},
{at: 1.5, is: '5'},
{at: -0.3, expect: '1'},
{at: 0, expect: '2'},
{at: 0.3, expect: '3'},
{at: 0.6, expect: '3'},
{at: 1, expect: '4'},
{at: 1.5, expect: '5'},
]);
assertInterpolation({
test_interpolation({
property: 'z-index',
from: '-2',
to: '-4'
}, [
{at: -0.3, is: '-1'},
{at: 0, is: '-2'},
{at: 0.1, is: '-2'},
{at: 0.3, is: '-3'},
{at: 0.6, is: '-3'},
{at: 1, is: '-4'},
{at: 1.5, is: '-5'},
{at: -0.3, expect: '-1'},
{at: 0, expect: '-2'},
{at: 0.1, expect: '-2'},
{at: 0.3, expect: '-3'},
{at: 0.6, expect: '-3'},
{at: 1, expect: '-4'},
{at: 1.5, expect: '-5'},
]);
assertNoInterpolation({
test_no_interpolation({
property: 'z-index',
from: 'auto',
to: '10',
});
afterTest(function() {
if (window.testRunner) {
[].forEach.call(document.querySelectorAll('.layer-reference'), function(element) {
element.remove();
});
}
});
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment