stacking-context-transform-win-in-delay-on-main-thread.html 666 B

1234567891011121314151617181920212223242526272829303132
  1. <!DOCTYPE html>
  2. <title>
  3. Transform animation winning over another transform animation in delay phase
  4. on the main-thread creates a stacking context
  5. </title>
  6. <style>
  7. span {
  8. height: 100px;
  9. width: 100px;
  10. position: fixed;
  11. background: green;
  12. top: 50px;
  13. }
  14. @keyframes TransformNone {
  15. from, to { transform: none; }
  16. }
  17. @keyframes Transform100px {
  18. from, to { transform: translateX(100px); }
  19. }
  20. // For preventing running on the compositor.
  21. @keyframes Width {
  22. from, to { width: 100px; }
  23. }
  24. #test {
  25. width: 100px; height: 100px;
  26. background: blue;
  27. animation: Transform100px 100s 100s, TransformNone 100s, Width 100s;
  28. }
  29. </style>
  30. <span></span>
  31. <div id="test"></div>