Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(182)

Side by Side Diff: LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-large-radius.html

Issue 195793009: [CSS Shapes] inset does not properly clamp large corner radii (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Remove the explicit inline Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-large-radius-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <style> 3 <style>
4 .container { 4 .container {
5 font: 20px/1 Ahem, sans-serif; 5 font: 20px/1 Ahem, sans-serif;
6 width: 500px; 6 width: 500px;
7 height: 200px; 7 height: 200px;
8 border: 1px solid black; 8 border: 1px solid black;
9 } 9 }
10 10
11 .rounded-rect { 11 .rounded-rect {
12 width: 320px; 12 width: 320px;
13 height: 160px; 13 height: 160px;
14 border: 1px solid blue; 14 background-color: blue;
15 border-top-left-radius: 60px 40px; 15 border-radius: 200px;
16 -webkit-shape-outside: inset(0px 0px 0px 0px round 60px 0 0 0 / 40px); 16 shape-outside: inset(0px round 200px);
17 } 17 }
18 </style> 18 </style>
19 19
20 <body> 20 <body>
21 <div class="container" style="text-align: right"> 21 <div class="container" style="text-align: right">
22 X<br/> 22 X<br/>
23 <div style="float: right" class="rounded-rect"></div> 23 <div style="float: right" class="rounded-rect"></div>
24 X<br/> 24 X<br/>
25 X<br/> 25 X<br/>
26 X<br/> 26 X<br/>
27 X<br/> 27 X<br/>
28 X<br/> 28 X<br/>
29 X<br/> 29 X<br/>
30 X<br/> 30 X<br/>
31 X<br/>
31 X 32 X
32 </div> 33 </div>
33 34
34 <p>Requires Ahem font. There is a 0px size inset applied on the right float with 60px/40px top left radius.<br> 35 <p>Requires Ahem font. There is a 0px size inset applied on the right float with 200px radius.<br>
35 The black squares should trace the left side of the rounded rectangle's blue out line.</p> 36 The black squares should trace the left side of the rounded rectangle's blue out line.</p>
36 <p>Issue <a href="https://code.google.com/p/chromium/issues/detail?id=338523">33 8523</a>: [CSS Shapes] Support inset for shape-outside</p> 37 <p>Bug <a href="https://code.google.com/p/chromium/issues/detail?id=351775">3517 75</a>: [CSS Shapes] inset does not properly clamp large corner radii</p>
37 38
38 </body> 39 </body>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-large-radius-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698