third_party/WebKit/LayoutTests/transforms/2d/transform-2d.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>2D Transform Tests</title>
   8   <style type="text/css" media="screen">
   9     .container {
  10       height: 100px;
  11       width: 200px;
  12       margin: 30px;
  13       outline: 1px solid black;
  14     }
  15     .box {
  16       height: 100%;
  17       width: 100%;
  18       background-color: green;
  19       transform: rotate(90deg);
  20     }
  21     #results {
  22       margin-top: 100px;
  23     }
  24   </style>
  25   <script src="resources/transform-test-utils.js" type="text/javascript" charset="utf-8"></script>
  26   <script type="text/javascript" charset="utf-8">
  27     if (window.testRunner) {
  28       testRunner.dumpAsText();
  29       testRunner.waitUntilDone();
  30     }
  31
  32     var gTests = [
  33       // nothing
  34       { 'transform' : 'none', 'result' : 'none' },
  35       { 'transform' : '', 'result' : 'matrix(5.96046e-08, 1, -1, 5.96046e-08, 0, 0)' }, // this cancels the style - revert back to box
  36       { 'transform' : 'inherit', 'result' : 'none' }, // parent element doesn't have transform
  37
  38       // translate
  39       { 'transform' : 'translate(80px, 90px)',  'result' : 'matrix(1, 0, 0, 1, 80, 90)' },
  40       { 'transform' : 'translate(100%, 3em)',   'result' : 'matrix(1, 0, 0, 1, 200, 48)' },  // depends on font size
  41       { 'transform' : 'translate(50px)',        'result' : 'matrix(1, 0, 0, 1, 50, 0)' },
  42       { 'transform' : 'translatex(-20px)',      'result' : 'matrix(1, 0, 0, 1, -20, 0)' },
  43       { 'transform' : 'translateX(-20px)',      'result' : 'matrix(1, 0, 0, 1, -20, 0)' },
  44       { 'transform' : 'translatey(23px)',       'result' : 'matrix(1, 0, 0, 1, 0, 23)' },
  45       { 'transform' : 'translateY(-3em)',       'result' : 'matrix(1, 0, 0, 1, 0, -48)' },  // depends on font size
  46
  47       // scale
  48       { 'transform' : 'scale(1.2)',             'result' : 'matrix(1.2, 0, 0, 1.2, 0, 0)' },
  49       { 'transform' : 'scalex(1.5)',            'result' : 'matrix(1.5, 0, 0, 1, 0, 0)' },
  50       { 'transform' : 'scaleX(1.5)',            'result' : 'matrix(1.5, 0, 0, 1, 0, 0)' },
  51       { 'transform' : 'scaley(1.5)',            'result' : 'matrix(1, 0, 0, 1.5, 0, 0)' },
  52       { 'transform' : 'scaleY(1.5)',            'result' : 'matrix(1, 0, 0, 1.5, 0, 0)' },
  53       { 'transform' : 'scale(1.2, 0.8)',        'result' : 'matrix(1.2, 0, 0, 0.8, 0, 0)' },
  54       { 'transform' : 'scale(-1.2, -0.8)',      'result' : 'matrix(-1.2, -0, -0, -0.8, 0, 0)' },
  55
  56       // skew
  57       { 'transform' : 'skew(-0.7rad, 20deg)',   'result' : 'matrix(1, 0.36397, -0.842288, 1, 0, 0)' },
  58       { 'transform' : 'skew(12grad)',           'result' : 'matrix(1, 0, 0.19076, 1, 0, 0)' },
  59       { 'transform' : 'skewx(12grad)',          'result' : 'matrix(1, 0, 0.19076, 1, 0, 0)' },
  60       { 'transform' : 'skewX(12grad)',          'result' : 'matrix(1, 0, 0.19076, 1, 0, 0)' },
  61       { 'transform' : 'skewy(-12grad)',         'result' : 'matrix(1, -0.19076, 0, 1, 0, 0)' },
  62       { 'transform' : 'skewY(-12grad)',         'result' : 'matrix(1, -0.19076, 0, 1, 0, 0)' },
  63       { 'transform' : 'skewx(0.1turn)',         'result' : 'matrix(1, 0, 0.726543, 1, 0, 0)' },
  64
  65       // rotate
  66       { 'transform' : 'rotate(45deg)',          'result' : 'matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)' },
  67       { 'transform' : 'rotate(90deg)',          'result' : 'matrix(-4.37114e-08, 1, -1, -4.37114e-08, 0, 0)' },
  68       { 'transform' : 'rotate(-90deg)',         'result' : 'matrix(-4.37114e-08, -1, 1, -4.37114e-08, 0, 0)' },
  69       { 'transform' : 'rotate(180deg)',         'result' : 'matrix(-1, -8.74228e-08, 8.74228e-08, -1, 0, 0)' },
  70       { 'transform' : 'rotate(1.2rad)',         'result' : 'matrix(0.362358, 0.932039, -0.932039, 0.362358, 0, 0)' },
  71       { 'transform' : 'rotate(0.25turn)',       'result' : 'matrix(-4.37114e-08, 1, -1, -4.37114e-08, 0, 0)' },
  72       { 'transform' : 'rotate(0.5turn)',        'result' : 'matrix(-1, -8.74228e-08, 8.74228e-08, -1, 0, 0)' },
  73       { 'transform' : 'rotate(1.5turn)',        'result' : 'matrix(-1, -8.74228e-08, 8.74228e-08, -1, 0, 0)' },
  74
  75       // matrix
  76       { 'transform' : 'matrix(1, 0, 0, 1, 0, 0)', 'result' : 'matrix(1, 0, 0, 1, 0, 0)' },
  77       { 'transform' : 'matrix(1, -0.19076, 0, 1, 0, 0)', 'result' : 'matrix(1, -0.19076, 0, 1, 0, 0)' },
  78       { 'transform' : 'matrix(0.2, 0.3, 0.4, 1.1, 1.2, 1.3)', 'result' : 'matrix(0.2, 0.3, 0.4, 1.1, 1.2, 1.3)' },
  79
  80       // invalid syntax
  81       { 'transform' : ',rotate(12deg)', 'result' : 'none' }, // has comma
  82       { 'transform' : 'rotate(12deg),', 'result' : 'none' }, // has comma
  83       { 'transform' : 'rotate(12deg) +', 'result' : 'none' }, // has plus
  84       { 'transform' : '(translate(50, 20))', 'result' : 'none' }, // bad syntax
  85       { 'transform' : 'eggs(10)', 'result' : 'none' }, // invalid function
  86
  87       // invalid translate
  88       { 'transform' : 'translate(50, 20)', 'result' : 'none' }, // missing units
  89       { 'transform' : 'translate()', 'result' : 'none' }, // no arguments
  90       { 'transform' : 'translate(10px, 20px, 30px)', 'result' : 'none' }, // too many arguments
  91       { 'transform' : 'translate(10px, 20px, 30px, 40px)', 'result' : 'none' }, // too many arguments
  92       { 'transform' : 'translate(10smidgens)', 'result' : 'none' }, // invalid units
  93       { 'transform' : 'translate(10px, 10smidgens)', 'result' : 'none' }, // invalid units
  94       { 'transform' : 'translateX(10px, 20px)', 'result' : 'none' }, // too many arguments
  95       { 'transform' : 'translateX(10px, 20px, 30px)', 'result' : 'none' }, // too many arguments
  96       { 'transform' : 'translateX(10smidgens)', 'result' : 'none' }, // invalid units
  97       { 'transform' : 'translateX(10px, 10smidgens)', 'result' : 'none' }, // invalid units
  98       { 'transform' : 'translateY(10px, 20px)', 'result' : 'none' }, // too many arguments
  99       { 'transform' : 'translateY(10px, 20px, 30px)', 'result' : 'none' }, // too many arguments
 100       { 'transform' : 'translateY(10smidgens)', 'result' : 'none' }, // invalid units
 101       { 'transform' : 'translateY(10px, 10smidgens)', 'result' : 'none' }, // invalid units
 102
 103       // invalid scale
 104       { 'transform' : 'scale(2px, 2px)', 'result' : 'none' }, // has units
 105       { 'transform' : 'scale(2, 2px)', 'result' : 'none' }, // has units
 106       { 'transform' : 'scale()', 'result' : 'none' }, // no arguments
 107       { 'transform' : 'scale(1, 2, 3)', 'result' : 'none' }, // too many arguments
 108       { 'transform' : 'scale(2smidgens)', 'result' : 'none' }, // invalid units
 109       { 'transform' : 'scale(2, 2smidgens)', 'result' : 'none' }, // invalid units
 110
 111       // invalid rotate
 112       { 'transform' : 'rotate(10)', 'result' : 'none' }, // no units
 113       { 'transform' : 'rotate()', 'result' : 'none' }, // no arguments
 114       { 'transform' : 'rotate(10deg, 20deg)', 'result' : 'none' }, // too many arguments
 115       { 'transform' : 'rotate(2turns)', 'result' : 'none' }, // invalid units -- 'turn' not 'turns'
 116       { 'transform' : 'rotate(2spins)', 'result' : 'none' }, // invalid units
 117       { 'transform' : 'rotate(2, 2spins)', 'result' : 'none' }, // invalid units
 118
 119       // invalid skew
 120       { 'transform' : 'skew(10)', 'result' : 'none' }, // no units
 121       { 'transform' : 'skew()', 'result' : 'none' }, // no arguments
 122       { 'transform' : 'skew(10deg, 20deg, 30deg)', 'result' : 'none' }, // too many arguments
 123       { 'transform' : 'skew(2bits)', 'result' : 'none' }, // invalid units
 124       { 'transform' : 'skew(2, 2bits)', 'result' : 'none' }, // invalid units
 125       { 'transform' : 'skewX(10)', 'result' : 'none' }, // no units
 126       { 'transform' : 'skewX()', 'result' : 'none' }, // no arguments
 127       { 'transform' : 'skewX(10deg, 20deg)', 'result' : 'none' }, // too many arguments
 128       { 'transform' : 'skewX(2bits)', 'result' : 'none' }, // invalid units
 129       { 'transform' : 'skewY(10)', 'result' : 'none' }, // no units
 130       { 'transform' : 'skewY()', 'result' : 'none' }, // no arguments
 131       { 'transform' : 'skewY(10deg, 20deg)', 'result' : 'none' }, // too many arguments
 132       { 'transform' : 'skewY(2bits)', 'result' : 'none' }, // invalid units
 133
 134       // invalid matrix
 135       { 'transform' : 'matrix()', 'result' : 'none' }, // no arguments
 136       { 'transform' : 'matrix(2, 0, 0, 2)', 'result' : 'none' }, // not enough arguments
 137       { 'transform' : 'matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20, 666)', 'result' : 'none' }, // too many arguments
 138       { 'transform' : 'matrix(1, 0, 0, 1, 20px, 50px)', 'result' : 'none' } // has units
 139
 140     ];
 141
 142     function runTests()
 143     {
 144       testTransforms();
 145
 146       if (window.testRunner)
 147         testRunner.notifyDone();
 148     }
 149   </script>
 150 </head>
 151 <body onload="runTests()">
 152
 153   <div class="container">
 154     <div id="test-box" class="box"></div>
 155   </div>
 156
 157   <div id="results">
 158   </div>
 159 </body>
 160 </html>