<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> |