src/third_party/WebKit/LayoutTests/transforms/3d/general/perspective-units.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>Perpsective Units</title>
   8   <style type="text/css" media="screen">
   9       .container {
  10           display: inline-block;
  11           height: 150px;
  12           width: 200px;
  13           margin: 10px 20px;
  14           border: 1px solid black;
  15           -webkit-perspective-origin: left top;
  16       }
  17
  18       .content {
  19           height: 100%;
  20           width: 100%;
  21           background-color: blue;
  22           transform: rotateX(45deg);
  23       }
  24   </style>
  25 </head>
  26 <body>
  27
  28   <p>-webkit-perspective should take units. All four should look qualitatively similar.</p>
  29   <div class="container" style="-webkit-perspective: 400">
  30       <div class="content">
  31       </div>
  32   </div>
  33
  34   <div class="container" style="-webkit-perspective: 400px">
  35       <div class="content">
  36       </div>
  37   </div>
  38
  39   <div class="container" style="-webkit-perspective: 300pt">
  40       <div class="content">
  41       </div>
  42   </div>
  43
  44   <br>
  45
  46   <div class="container" style="zoom: 2; -webkit-perspective: 400px">
  47       <div class="content">
  48       </div>
  49   </div>
  50
  51 </body>
  52 </html>