mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
62 lines
1.8 KiB
HTML
62 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>move after transition</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-transitions/#transition-property-property">
|
|
<style>
|
|
#container {
|
|
position: relative;
|
|
width: 400px;
|
|
height: 100px;
|
|
border: 1px solid black;
|
|
}
|
|
#box {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: green;
|
|
transform-style: preserve-3d;
|
|
transition: transform 300ms linear;
|
|
transform: translateX(0);
|
|
}
|
|
#container.moved #box {
|
|
transform: translateX(300px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="box"></div>
|
|
</div>
|
|
</body>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/css-transitions/support/helper.js"></script>
|
|
<script type="text/javascript">
|
|
promise_test(async t => {
|
|
const container = document.getElementById('container');
|
|
const box = document.getElementById('box');
|
|
|
|
await waitForAnimationFrames(2);
|
|
|
|
container.classList.add('moved');
|
|
const animations = document.getAnimations();
|
|
assert_equals(animations.length, 1);
|
|
assert_equals(getComputedStyle(box).transform,
|
|
"matrix(1, 0, 0, 1, 0, 0)");
|
|
|
|
animations[0].finish();
|
|
assert_equals(getComputedStyle(box).transform,
|
|
"matrix(1, 0, 0, 1, 300, 0)");
|
|
|
|
// Verify that we do not create a second transform transition.
|
|
box.style.transitionProperty = 'none';
|
|
box.style.transform = 'translateX(150px)';
|
|
|
|
assert_equals(box.getAnimations().length, 0);
|
|
assert_equals(getComputedStyle(box).transform,
|
|
"matrix(1, 0, 0, 1, 150, 0)");
|
|
}, 'Move after transition.');
|
|
</script>
|
|
</html>
|