12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Interrupted Transitions on Transform Test</title>
- <style type="text/css" media="screen">
- #container {
- width: 400px;
- height: 400px;
- margin: 20px;
- border: 1px solid black;
- perspective: 800px;
- }
- #tester {
- width: 300px;
- height: 300px;
- margin: 50px;
- background-color: blue;
- transition: transform 3s linear;
- transform: rotateX(65deg) translateZ(75px) rotateZ(0deg);
- transform-style: preserve-3d;
- }
- #pos1 {
- position:absolute;
- width: 300px;
- height: 300px;
- margin: 50px;
- border: 2px solid #F00;
- transform: rotateX(65deg) translateZ(75px) rotateZ(118deg);
- transform-style: preserve-3d;
- }
- #pos2 {
- position:absolute;
- width: 300px;
- height: 300px;
- margin: 50px;
- border: 2px solid #0F0;
- transform: rotateX(65deg) translateZ(75px) rotateZ(80deg);
- transform-style: preserve-3d;
- }
- </style>
- <script type="text/javascript" charset="utf-8">
- function setAngle(index)
- {
- var tester = document.getElementById('tester');
- tester.style.transform = "rotateX(65deg) translateZ(75px) rotateZ(" + index + "deg)";
- }
-
- function runTest()
- {
- window.setTimeout(function() {
- setAngle(240);
- }, 0);
- window.setTimeout(function() {
- setAngle(80);
- }, 1500);
- }
- window.addEventListener('load', runTest, false);
- </script>
- </head>
- <body>
- In this test you should see a blue diamond spinning in the clockwise direction. After 1.5 seconds it should stop
- close to the red outlne and then spin counterclockwise. After 3 more seconds it should stop close to the
- position of the green outline.
- (see: <a href="https://bugs.webkit.org/show_bug.cgi?id=26162">https://bugs.webkit.org/show_bug.cgi?id=26162)</a>
- <div id="container">
- <div id="pos1">
- </div>
- <div id="pos2">
- </div>
- <div id="tester">
- </div>
- </div>
- </body>
- </html>
|