Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / shapes / shape-outside-floats / shape-outside-floats-inset-rounded-bottom-left.html
blob67282822c7b978366d57b825a58c17302d565dc8
1 <!DOCTYPE html>
2 <html>
3 <style>
4 .container {
5 font: 20px/1 Ahem, sans-serif;
6 width: 500px;
7 height: 200px;
8 border: 1px solid black;
11 .rounded-rect {
12 width: 320px;
13 height: 160px;
14 border: 1px solid blue;
15 border-bottom-left-radius: 60px 40px;
16 -webkit-shape-outside: inset(0px 0px 0px 0px round 0 0 0 60px / 0 0 0 40px);
18 </style>
20 <script src="../../../resources/ahem.js"></script>
21 <body>
22 <div class="container" style="text-align: right">
23 X<br/>
24 <div style="float: right" class="rounded-rect"></div>
25 X<br/>
26 X<br/>
27 X<br/>
28 X<br/>
29 X<br/>
30 X<br/>
31 X<br/>
33 </div>
35 <p>Requires Ahem font. There is a 0px size inset applied on the right float with 60px/40px bottom left radius.<br>
36 The black squares should trace the left side of the rounded rectangle's blue outline.</p>
37 <p>Issue <a href="https://code.google.com/p/chromium/issues/detail?id=338523">338523</a>: [CSS Shapes] Support inset for shape-outside</p>
39 </body>