45 lines
873 B
HTML
45 lines
873 B
HTML
|
<style type="text/css">
|
||
|
|
.container {
|
||
|
|
transition: -ms-transform 0.1s ease, transform 0.1s ease;
|
||
|
|
transform-origin: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container-transform {
|
||
|
|
transform: scale3d(1.3, 1.3, 1);
|
||
|
|
transform-origin: 0% 0%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
background-color: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type='text/javascript'>
|
||
|
|
|
||
|
|
if (window.testRunner) {
|
||
|
|
testRunner.dumpAsText();
|
||
|
|
testRunner.waitUntilDone();
|
||
|
|
}
|
||
|
|
|
||
|
|
function test() {
|
||
|
|
document.querySelector(".container").ontransitionend = (ev) => {
|
||
|
|
log.innerHTML += ev.propertyName +"<br>";
|
||
|
|
if (window.testRunner)
|
||
|
|
setTimeout(() => testRunner.notifyDone(), 0);
|
||
|
|
}
|
||
|
|
a.parentNode.classList.add('container-transform');
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<body onload="test()">
|
||
|
|
<div class="container">
|
||
|
|
<div id="a" class="box">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<br><br>
|
||
|
|
Transitioning properties:
|
||
|
|
<div id=log></div>
|