ManualTests/qt/tap-highlighting-overflow-hidden.html

   1 <html>
   2 <head>
   3 <style type="text/css">
   4
   5     div {
   6         position: absolute;
   7         border: solid;
   8         width: 100px;
   9         height: 100px;
  10     }
  11
  12     div.clipping {
  13         color: red;
  14         overflow: hidden;
  15     }
  16
  17     div.noClipping {
  18         color: green;
  19         overflow: visible;
  20         left: 10px;
  21         top: 50px;
  22     }
  23
  24     div.noTransform {
  25         left: 150px;
  26         top: 50px;
  27     }
  28
  29     div.withTransform {
  30         left: 300px;
  31         top: 50px;
  32         -webkit-transform: rotate(20deg);
  33     }
  34
  35     div.outer {
  36         left: 450px;
  37         top: 50px;
  38         -webkit-transform: rotate(-20deg);
  39     }
  40
  41     div.inner {
  42         left: 20px;
  43         top: 10px;
  44     }
  45
  46     iframe {
  47         border: solid;
  48         position: absolute;
  49         width: 100px;
  50         height: 100px;
  51         left: 200px;
  52         top: 300px;
  53     }
  54 </style>
  55 </head>
  56
  57 <body>
  58 Click on the links. Highlight should be clipped at the red border, while it should overflow on the green.<br>
  59 <div class="noClipping">
  60     <a href="#">Div with overflow visible. Lorem ipsum dolor sit amet, consectetur adipisicing...</a>
  61 </div>
  62 <div class="clipping noTransform">
  63     <a href="#">Div with overflow hidden without transform. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
  64 </div>
  65 <div class="clipping withTransform">
  66     <a href="#">Div with overflow hidden with transform. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
  67 </div>
  68 <br>
  69
  70 <div class="clipping outer">
  71 <div class="clipping inner">
  72     <a href="#">Nested divs with overflow hidden with transform. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
  73 </div>
  74 </div>
  75 <br>
  76 <iframe src="data:text/html,
  77     <style> div.overflowHiddenNoTransformi { color: red; border: solid; overflow: hidden; left: 150px; top: 100px; width: 100px; height: 100px; }</style>
  78     <body>
  79       Inside an iframe.
  80   <div class='overflowHiddenNoTransformi'>
  81     <a href='#'>Div with overflow hidden without transform. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
  82   </div>
  83     </body>
  84     "></iframe>
  85 </body>
  86 </html>
  87