| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| #div2 { |
| motion: none 50% auto 400grad; |
| } |
| #div3 { |
| motion: path('M 10 20 h 30 v 150') 0rad 70px; |
| } |
| #div4 { |
| motion: 10px 90deg reverse none; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="div1"></div> |
| <div id="div2"></div> |
| <div id="div3"></div> |
| <div id="div4"></div> |
| <span id="span1" style="motion: path('M 1 2 V 3') 4px 5deg"></span> |
| <script> |
| "use strict"; |
| |
| test(function() { |
| assert_equals(getComputedStyle(div1, null).motionPath, 'none'); |
| assert_equals(getComputedStyle(div1, null).motionOffset, '0px'); |
| assert_equals(getComputedStyle(div1, null).motionRotation, 'auto 0deg'); |
| assert_equals(getComputedStyle(div1, null).motion, 'none 0px auto 0deg'); |
| assert_equals(getComputedStyle(div1, null).transform, 'none'); |
| }, 'motion default is none 0px auto 0deg'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(div2, null).motionPath, 'none'); |
| assert_equals(getComputedStyle(div2, null).motionOffset, '50%'); |
| assert_equals(getComputedStyle(div2, null).motionRotation, 'auto 360deg'); |
| assert_equals(getComputedStyle(div2, null).motion, 'none 50% auto 360deg'); |
| assert_equals(getComputedStyle(div2, null).transform, 'none'); |
| }, 'motion supports various angle units'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(div3, null).motionPath, "path('M 10 20 h 30 v 150')"); |
| assert_equals(getComputedStyle(div3, null).motionOffset, '70px'); |
| assert_equals(getComputedStyle(div3, null).motionRotation, '0deg'); |
| assert_equals(getComputedStyle(div3, null).motion, "path('M 10 20 h 30 v 150') 70px 0deg"); |
| assert_equals(getComputedStyle(div3, null).transform, 'matrix(1, 0, 0, 1, 0, 0)'); |
| }, 'motion supports SVG path data'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(div4, null).motionPath, 'none'); |
| assert_equals(getComputedStyle(div4, null).motionOffset, '10px'); |
| assert_equals(getComputedStyle(div4, null).motionRotation, 'auto 270deg'); |
| assert_equals(getComputedStyle(div4, null).motion, 'none 10px auto 270deg'); |
| assert_equals(getComputedStyle(div4, null).transform, 'none'); |
| }, 'motion property data can be supplied in any order'); |
| |
| test(function() { |
| assert_equals(span1.style.motionPath, "path('M 1 2 V 3')"); |
| assert_equals(span1.style.motionOffset, '4px'); |
| assert_equals(span1.style.motionRotation, '5deg'); |
| assert_equals(span1.style.motion, "path('M 1 2 V 3') 4px 5deg"); |
| assert_equals(span1.style.transform, ''); |
| }, 'motion style can be set inline'); |
| |
| </script> |
| </body> |
| </html> |
