| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../resources/helpers.js"></script> |
| <style> |
| #a { |
| height: 600px; |
| left: 0px; |
| perspective: 800; |
| position: absolute; |
| top: 0px; |
| width: 800px; |
| } |
| #b1 { |
| animation-duration: 2s; |
| animation-iteration-count: infinite; |
| animation-name: b1; |
| animation-timing-function: linear; |
| background-color: #282; |
| height: 200px; |
| left: 300px; |
| position: absolute; |
| top: 80px; |
| transform-origin: center center 200px; |
| width: 200px; |
| } |
| @keyframes b1 { |
| from { transform: rotateY(0deg); } |
| 5% { transform: rotateY(90deg); } |
| 20% { transform: rotateY(90deg); } |
| 50% { transform: rotateY(180deg); } |
| 75% { transform: rotateY(270deg); } |
| to { transform: rotateY(360deg); } |
| } |
| #b2 { |
| animation-duration: 2s; |
| animation-iteration-count: infinite; |
| animation-name: b2; |
| animation-timing-function: linear; |
| background-color: #282; |
| height: 200px; |
| left: 300px; |
| position: absolute; |
| top: 320px; |
| width: 200px; |
| } |
| @keyframes b2 { |
| from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) } |
| 5% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) } |
| 20% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) } |
| 50% { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) } |
| 75% { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) } |
| to { transform: translateZ(200px) rotateY(360deg) translateZ(-200px) } |
| } |
| </style> |
| <div id="a"> |
| <div id="b1"> </div> |
| <div style="transform:translateZ(-200px); transform-style:preserve-3d;"> |
| <div id="b2"> </div> |
| </div> |
| </div> |
| <script> |
| 'use strict'; |
| |
| test(function() { |
| const epsilon = 0.0001; |
| |
| b1.style.animationDelay = '-0.25s'; |
| const expectedB1 = 'matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1)'; |
| assert_true(matricesApproxEqual(getComputedStyle(b1).transform, expectedB1, epsilon), 'b1'); |
| |
| b2.style.animationDelay = '-0.25s'; |
| const expectedB2 = 'matrix3d(0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 0, -200, 0, 200, 1)'; |
| assert_true(matricesApproxEqual(getComputedStyle(b2).transform, expectedB2, epsilon), 'b2'); |
| }, "3D transform functions compose"); |
| </script> |
