third_party/WebKit/LayoutTests/css3/motion-path/motion-path.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-path: none;
   9 }
  10 #div3 {
  11     motion-path: path('M 20 20 H 80 V 30 H 20 L 20 20');
  12 }
  13 #div4 {
  14     motion-path: inherit;
  15 }
  16 </style>
  17 </head>
  18 <body>
  19 <div id="div1"></div>
  20 <div id="div2"></div>
  21 <div id="div3">
  22     <div id="div4"></div>
  23     <div id="div5"></div>
  24 </div>
  25 <span id="span1" style="motion-path: path('M 1 2 V 3')"></span>
  26 <script>
  27 "use strict";
  28
  29 test(function() {
  30     assert_equals(getComputedStyle(div1, null).motionPath, 'none');
  31 }, 'motion-path default is none');
  32
  33 test(function() {
  34     assert_equals(getComputedStyle(div2, null).motionPath, 'none');
  35 }, 'motion-path can be explicitly none');
  36
  37 test(function() {
  38     assert_equals(getComputedStyle(div3, null).motionPath, "path('M 20 20 H 80 V 30 H 20 L 20 20')");
  39 }, 'motion-path can be an SVG Path data string');
  40
  41 test(function() {
  42     assert_equals(getComputedStyle(div4, null).motionPath, "path('M 20 20 H 80 V 30 H 20 L 20 20')");
  43 }, 'motion-path can be explicitly inherited');
  44
  45 test(function() {
  46     assert_equals(getComputedStyle(div5, null).motionPath, 'none');
  47 }, 'motion-path is not inherited by default');
  48
  49 test(function() {
  50     assert_equals(span1.style.motionPath, "path('M 1 2 V 3')");
  51 }, 'motion-path style can be set inline');
  52
  53 </script>
  54 </body>
  55 </html>