third_party/WebKit/LayoutTests/compositing/3d-corners.html

   1 <html>
   2 <head>
   3   <style type="text/css" media="screen">
   4     .container {
   5       position: relative;
   6       height: 100px;
   7       width: 500px;
   8       margin: 50px 100px;
   9       border: 1px solid blue;
  10       -webkit-perspective: 10;
  11     }
  12     .parent {
  13       -webkit-transform-style: preserve-3d;
  14       transform:translateY(0.1%);
  15     }
  16     #div1
  17     {
  18       height:500px;
  19       background-color:green;
  20       -webkit-transform-origin: center top;
  21       transform:rotate3d(1,0,0,-45deg);
  22     }
  23     #div2
  24     {
  25       height:500px;
  26       background-color:green;
  27       -webkit-transform-origin: center top;
  28       transform:rotate3d(1,0,0,-150deg);
  29     }
  30     #div3
  31     {
  32       height:500px;
  33       background-color:green;
  34       -webkit-transform-origin: center top;
  35       transform:rotate3d(1,0,0,-167deg);
  36     }
  37   </style>
  38   <script type="text/javascript" charset="utf-8">
  39     if (window.testRunner)
  40       testRunner.dumpAsTextWithPixelResults();
  41   </script>
  42 </head>
  43 <body style="overflow:hidden">
  44   <div class="container">
  45     <div class="parent">
  46       <div id="div1"></div>
  47     </div>
  48   </div>
  49   <div class="container">
  50     <div class="parent">
  51       <div id="div2"></div>
  52     </div>
  53   </div>
  54   <div class="container">
  55     <div class="parent">
  56       <div id="div3"></div>
  57     </div>
  58   </div>
  59 </body>
  60 </html>