| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Animation composite order</title> |
| <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-composite-order"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="support/testcommon.js"></script> |
| <style> |
| @keyframes margin50 { |
| from { |
| margin-left: 50px; |
| } |
| to { |
| margin-left: 50px; |
| } |
| } |
| @keyframes margin100 { |
| from { |
| margin-left: 100px; |
| } |
| to { |
| margin-left: 100px; |
| } |
| } |
| </style> |
| <div id="log"</div> |
| <script> |
| 'use strict'; |
| |
| promise_test(async t => { |
| const div = addDiv(t); |
| div.style.animation = 'margin100 100s'; |
| assert_equals(getComputedStyle(div).marginLeft, '100px'); |
| div.style.animation = 'margin50 100s, margin100 100s'; |
| // The margin should be unaffected by margin50 since it is named earlier |
| // in the animation list. |
| assert_equals(getComputedStyle(div).marginLeft, '100px'); |
| }, "Animations are composited by their order in the animation-name property."); |
| </script> |
