third_party/WebKit/LayoutTests/css3/motion-path/motion-rotation.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-rotation: auto;
   9 }
  10 #div3 {
  11     motion-rotation: reverse;
  12 }
  13 #div4 {
  14     motion-rotation: 180deg;
  15 }
  16 #div5 {
  17     motion-rotation: 0rad;
  18 }
  19 #div6 {
  20     motion-rotation: -400grad auto;
  21 }
  22 #div7 {
  23     motion-rotation: 2turn reverse;
  24 }
  25 #div8 {
  26     motion-rotation: reverse 30deg;
  27 }
  28 #div9 {
  29     motion-rotation: inherit;
  30 }
  31 </style>
  32 </head>
  33 <body>
  34 <div id="div1"></div>
  35 <div id="div2"></div>
  36 <div id="div3"></div>
  37 <div id="div4"></div>
  38 <div id="div5"></div>
  39 <div id="div6"></div>
  40 <div id="div7"></div>
  41 <div id="div8">
  42     <div id="div9"></div>
  43     <div id="div10"></div>
  44 </div>
  45 <span id="span1" style="motion-rotation: auto -45deg"></span>
  46
  47 <script>
  48 "use strict";
  49
  50 test(function() {
  51     assert_equals(getComputedStyle(div1, null).motionRotation, 'auto 0deg');
  52 }, 'motion-rotation default is auto');
  53
  54 test(function() {
  55     assert_equals(getComputedStyle(div2, null).motionRotation, 'auto 0deg');
  56 }, 'motion-rotation auto expands to auto 0deg');
  57
  58 test(function() {
  59     assert_equals(getComputedStyle(div3, null).motionRotation, 'auto 180deg');
  60 }, 'motion-rotation reverse expands to auto 180deg');
  61
  62 test(function() {
  63     assert_equals(getComputedStyle(div4, null).motionRotation, '180deg');
  64 }, 'motion-rotation can be a fixed angle');
  65
  66 test(function() {
  67     assert_equals(getComputedStyle(div5, null).motionRotation, '0deg');
  68 }, 'motion-rotation angles are converted to degrees');
  69
  70 test(function() {
  71     assert_equals(getComputedStyle(div6, null).motionRotation, 'auto -360deg');
  72 }, 'motion-rotation can be supplied with angle before auto');
  73
  74 test(function() {
  75     assert_equals(getComputedStyle(div7, null).motionRotation, 'auto 900deg');
  76 }, 'motion-rotation can be supplied with angle before reverse');
  77
  78 test(function() {
  79     assert_equals(getComputedStyle(div8, null).motionRotation, 'auto 210deg');
  80 }, 'motion-rotation is unaffected by child elements');
  81
  82 test(function() {
  83     assert_equals(getComputedStyle(div9, null).motionRotation, 'auto 210deg');
  84 }, 'motion-rotation can be explicitly inherited');
  85
  86 test(function() {
  87     assert_equals(getComputedStyle(div10, null).motionRotation, 'auto 0deg');
  88 }, 'motion-rotation is not inherited by default');
  89
  90 test(function() {
  91     assert_equals(span1.style.motionRotation, 'auto -45deg');
  92 }, 'motion-rotation style can be set inline');
  93
  94 </script>
  95 </body>
  96 </html>