Merge "[WK2] Revert patch / set a limit of layer count and atlas size." into 2.0_beta
[framework/web/webkit-efl.git] / 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