Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / clip / overflow-border-radius-composited.html
blob0e427f666e52f2bd2a1b48295097d0a3a5fafcd3
1 <head>
2 <style>
3 .outer {
4 border: 10px solid black;
5 border-radius: 100px;
6 overflow: hidden;
7 width: 200px;
8 height: 100px;
9 margin: 10px;
10 display: inline-block
12 .inner {
13 background: #808080;
14 width: 100%;
15 height: 100%;
16 color: #FFFFFF;
17 transform: rotate(45deg) translateZ(0);
19 </style>
20 </head>
21 <body>
22 The white text and grey backgrounds should all clip to the border-radius.
23 <br>
25 <!-- static container -->
26 <div class="outer" style="position: static;">
27 <div class="inner" style="position: static;">
28 static &gt; static
29 </div>
30 </div>
32 <div class="outer" style="position: static;">
33 <div class="inner" style="position: relative;">
34 static &gt; relative
35 </div>
36 </div>
38 <!-- relative container -->
39 <div class="outer" style="position: relative;">
40 <div class="inner" style="position: static;">
41 relative &gt; static
42 </div>
43 </div>
45 <div class="outer" style="position: relative;">
46 <div class="inner" style="position: relative;">
47 relative &gt; relative
48 </div>
49 </div>
50 <br>
51 <div class="outer" style="position: relative;">
52 <div class="inner" style="position: absolute;">
53 relative &gt; absolute
54 </div>
55 </div>