third_party/WebKit/LayoutTests/css3/motion-path/motion-offset.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-offset: 0;
   9 }
  10 #div3 {
  11     motion-offset: 100px;
  12 }
  13 #div4 {
  14     motion-offset: -200px;
  15 }
  16 #div5 {
  17     motion-offset: 50%;
  18 }
  19 #div6 {
  20     motion-offset: inherit;
  21 }
  22 </style>
  23 </head>
  24 <body>
  25 <div id="div1"></div>
  26 <div id="div2"></div>
  27 <div id="div3"></div>
  28 <div id="div4"></div>
  29 <div id="div5">
  30     <div id="div6"></div>
  31     <div id="div7"></div>
  32 </div>
  33 <span id="span1" style="motion-offset: 25%"></span>
  34 <script>
  35 "use strict";
  36
  37 test(function() {
  38     assert_equals(getComputedStyle(div1, null).motionOffset, '0px');
  39 }, 'motion-offset default is 0px');
  40
  41 test(function() {
  42     assert_equals(getComputedStyle(div2, null).motionOffset, '0px');
  43 }, 'motion-offset 0 is 0px');
  44
  45 test(function() {
  46     assert_equals(getComputedStyle(div3, null).motionOffset, '100px');
  47 }, 'motion-offset can be positive');
  48
  49 test(function() {
  50     assert_equals(getComputedStyle(div4, null).motionOffset, '-200px');
  51 }, 'motion-offset allows negative values');
  52
  53 test(function() {
  54     assert_equals(getComputedStyle(div5, null).motionOffset, '50%');
  55 }, 'motion-offset can be a percentage');
  56
  57 test(function() {
  58     assert_equals(getComputedStyle(div6, null).motionOffset, '50%');
  59 }, 'motion-offset can be explicitly inherited');
  60
  61 test(function() {
  62     assert_equals(getComputedStyle(div7, null).motionOffset, '0px');
  63 }, 'motion-offset is not inherited by default');
  64
  65 test(function() {
  66     assert_equals(span1.style.motionOffset, '25%');
  67 }, 'motion-offset style can be set inline');
  68
  69 </script>
  70 </body>
  71 </html>