third_party/WebKit/LayoutTests/transforms/3d/general/3dtransform-values.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     .container {
   7       height: 100px;
   8       width: 100px;
   9       margin: 30px;
  10       outline: 1px solid black;
  11     }
  12     .box {
  13       height: 100%;
  14       width: 100%;
  15       background-color: green;
  16     }
  17     #results {
  18       margin-top: 100px;
  19     }
  20   </style>
  21   <script src="../../2d/resources/transform-test-utils.js" type="text/javascript" charset="utf-8"></script>
  22   <script type="text/javascript">
  23     if (window.testRunner) {
  24       testRunner.dumpAsText();
  25       testRunner.waitUntilDone();
  26     }
  27
  28     var gTests = [
  29       { 'transform' : 'translate3d(0, 0, 10px)', 'result' : 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 10, 1)' },
  30       { 'transform' : 'translateZ(10px)', 'result' : 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 10, 1)' },
  31       { 'transform' : 'rotate3d(0, 1, 0, 180deg)', 'result' : 'matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1)' },
  32       { 'transform' : 'rotate3d(0, 0, 0, 180deg)', 'result' : 'matrix3d(1, 0, 0, 1, 0, 0)' },
  33       { 'transform' : 'translate3d(0, 0, 10px)', 'result' : 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 10, 1)' },
  34       { 'transform' : 'translate3d(0, 0, 10%)', 'result' : 'none' }, // percentage values not allowed in the z param
  35       { 'transform' : 'translate3d(0, 0, 10)', 'result' : 'none' }, // must have units for the z param
  36       { 'transform' : 'translateZ(10%)', 'result' : 'none' }, // percentage values not allowed in the z param
  37       { 'transform' : 'translateZ(10)', 'result' : 'none' }, // must have units
  38       { 'transform' : 'rotate3d(0, 1, 0, 180)', 'result' : 'none' }, // last value must be an angle
  39       { 'transform' : 'rotate3d(0, 1, 0, 180px)', 'result' : 'none' }, // last value must be an angle
  40       { 'transform' : 'rotate3d(0, 1, 0, 180px)', 'result' : 'none' }, // last value must be an angle
  41       { 'transform' : 'perspective(400)', 'result' : 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)' }, // legacy
  42       { 'transform' : 'perspective(400px)', 'result' : 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0025, 0, 0, 0, 1)' },
  43       { 'transform' : 'perspective(400em)', 'result' : 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00015625, 0, 0, 0, 1)' },
  44       { 'transform' : 'perspective(50%)', 'result' : 'none' },
  45       { 'transform' : 'perspective(-400)', 'result' : 'none' },
  46       { 'transform' : 'perspective(0)', 'result' : 'matrix(1, 0, 0, 1, 0, 0)' },
  47       { 'transform' : 'perspective(400deg)', 'result' : 'none' }, // unit must be length
  48       { 'transform' : 'perspective(banana)', 'result' : 'none' }, // unit must be length
  49     ];
  50
  51     function runTests()
  52     {
  53       testTransforms();
  54
  55       if (window.testRunner)
  56         testRunner.notifyDone();
  57     }
  58   </script>
  59 </head>
  60 <body onload="runTests()">
  61
  62   <div class="container">
  63     <div id="test-box" class="box"></div>
  64   </div>
  65
  66   <div id="results">
  67   </div>
  68 </body>
  69 </html>