LayoutTests/accessibility/transformed-bounds.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <script src="../resources/js-test-pre.js"></script>
   5
   6     <style>
   7
   8         .pills .button {
   9             display:inline-block;
  10         }
  11
  12         .ipad .top-section {
  13             text-align:center
  14         }
  15
  16         .pills {
  17             display:inline-block;
  18             margin:0 auto 10px;
  19             padding:0 15px;
  20             min-width:292px
  21         }
  22
  23         .pills div {
  24             display:inline-block;
  25         }
  26
  27         .swoosh-overlay .contents .row .item:not(.software) .card-container {
  28             -webkit-transform-origin-x:315px
  29         }
  30
  31         .swoosh-overlay .contents .row .item .card-container {
  32             -webkit-transform-style:preserve-3d;
  33             position:absolute
  34         }
  35
  36         .swoosh-overlay .item .card-back {
  37             position:absolute;
  38             width:630px;
  39             height:630px;
  40             -webkit-backface-visibility:hidden;
  41             -webkit-transform:rotatey(180deg)
  42         }
  43     </style>
  44 </head>
  45
  46 <body class="ipad portrait">
  47
  48 <div class="swoosh-overlay portrait">
  49     <div class="contents">
  50         <div class="row">
  51             <div class="item album" aria-hidden="false" style="-webkit-transform-origin: 0px 0px; -webkit-transform: translate3d(69px, 140px, 0px) scale(1, 1); opacity: 0.9999; -webkit-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out;">
  52                 <div class="card-container" style="-webkit-transform: rotateY(180deg);">
  53                     <div role="dialog" class="card-back">
  54                         <div>
  55                             <div class="product-overlay">
  56                                 <div class="top-section">
  57                                     <div class="pills" role="tablist" num-pills="4" aria-hidden="false" style="background-position: -160px 100%;">
  58                                         <div role="tab" aria-selected="true" tabindex="0" id="tab">
  59                                             <span class="button selected" ><span class="label">Test</span></span>
  60                                         </div>
  61                                     </div>
  62                                 </div>
  63                             </div>
  64                         </div>
  65                     </div>
  66                 </div>
  67             </div>
  68         </div>
  69     </div>
  70   </div>
  71 </div>
  72
  73 <p id="description"></p>
  74 <div id="console"></div>
  75
  76 <script>
  77
  78     description("This tests that if a view is in a transformed layer, the bounds will not be offset by the origin of the transformed layer.");
  79
  80     if (window.accessibilityController) {
  81         var tab = accessibilityController.accessibleElementById("tab");
  82         shouldBeTrue("tab.width < 40");
  83         shouldBeTrue("tab.height < 30");
  84     }
  85
  86 </script>
  87
  88 <script src="../resources/js-test-post.js"></script>
  89
  90 </div>
  91 </body>
  92 </html>