third_party/WebKit/LayoutTests/css3/motion-path/motion.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/testharness.js"></script>
   5 <script src="../../resources/testharnessreport.js"></script>
   6 <style>
   7 #div2 {
   8     motion: none 50% auto 400grad;
   9 }
  10 #div3 {
  11     motion: path('M 10 20 h 30 v 150') 0rad 70px;
  12 }
  13 #div4 {
  14     motion: 10px 90deg reverse none;
  15 }
  16 </style>
  17 </head>
  18 <body>
  19 <div id="div1"></div>
  20 <div id="div2"></div>
  21 <div id="div3"></div>
  22 <div id="div4"></div>
  23 <span id="span1" style="motion: path('M 1 2 V 3') 4px 5deg"></span>
  24 <script>
  25 "use strict";
  26
  27 test(function() {
  28     assert_equals(getComputedStyle(div1, null).motionPath, 'none');
  29     assert_equals(getComputedStyle(div1, null).motionOffset, '0px');
  30     assert_equals(getComputedStyle(div1, null).motionRotation, 'auto 0deg');
  31     assert_equals(getComputedStyle(div1, null).motion, 'none 0px auto 0deg');
  32     assert_equals(getComputedStyle(div1, null).transform, 'none');
  33 }, 'motion default is none 0px auto 0deg');
  34
  35 test(function() {
  36     assert_equals(getComputedStyle(div2, null).motionPath, 'none');
  37     assert_equals(getComputedStyle(div2, null).motionOffset, '50%');
  38     assert_equals(getComputedStyle(div2, null).motionRotation, 'auto 360deg');
  39     assert_equals(getComputedStyle(div2, null).motion, 'none 50% auto 360deg');
  40     assert_equals(getComputedStyle(div2, null).transform, 'none');
  41 }, 'motion supports various angle units');
  42
  43 test(function() {
  44     assert_equals(getComputedStyle(div3, null).motionPath, "path('M 10 20 h 30 v 150')");
  45     assert_equals(getComputedStyle(div3, null).motionOffset, '70px');
  46     assert_equals(getComputedStyle(div3, null).motionRotation, '0deg');
  47     assert_equals(getComputedStyle(div3, null).motion, "path('M 10 20 h 30 v 150') 70px 0deg");
  48     assert_equals(getComputedStyle(div3, null).transform, 'matrix(1, 0, 0, 1, 0, 0)');
  49 }, 'motion supports SVG path data');
  50
  51 test(function() {
  52     assert_equals(getComputedStyle(div4, null).motionPath, 'none');
  53     assert_equals(getComputedStyle(div4, null).motionOffset, '10px');
  54     assert_equals(getComputedStyle(div4, null).motionRotation, 'auto 270deg');
  55     assert_equals(getComputedStyle(div4, null).motion, 'none 10px auto 270deg');
  56     assert_equals(getComputedStyle(div4, null).transform, 'none');
  57 }, 'motion property data can be supplied in any order');
  58
  59 test(function() {
  60     assert_equals(span1.style.motionPath, "path('M 1 2 V 3')");
  61     assert_equals(span1.style.motionOffset, '4px');
  62     assert_equals(span1.style.motionRotation, '5deg');
  63     assert_equals(span1.style.motion, "path('M 1 2 V 3') 4px 5deg");
  64     assert_equals(span1.style.transform, '');
  65 }, 'motion style can be set inline');
  66
  67 </script>
  68 </body>
  69 </html>