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

Side by Side Diff: LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-inset-rounded-large-radius-expected.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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 .container { 5 .container {
6 position: relative; 6 position: relative;
7 font: 20px/1 Ahem, sans-serif; 7 font: 20px/1 Ahem, sans-serif;
8 width: 500px; 8 width: 500px;
9 height: 200px; 9 height: 200px;
10 border: 1px solid black; 10 border: 1px solid black;
11 } 11 }
12 12
13 .rounded-rect { 13 .rounded-rect {
14 width: 320px; 14 width: 320px;
15 height: 160px; 15 height: 160px;
16 border-top-left-radius: 60px 40px; 16 border-radius: 80px;
17 border: 1px solid blue; 17 background-color: blue;
18 } 18 }
19 19
20 #right-rounded-rect-outline { 20 #right-rounded-rect-outline {
21 position: absolute; 21 position: absolute;
22 top: 20px; 22 top: 20px;
23 right: 0px; 23 right: 0px;
24 } 24 }
25 25
26 26
27 .right-rounded-rect-float-line { 27 .right-rounded-rect-float-line {
28 float: right; 28 float: right;
29 clear: right; 29 clear: right;
30 height: 20px; 30 height: 20px;
31 } 31 }
32 </style> 32 </style>
33 <body> 33 <body>
34 <div class="container" style="text-align: right"> 34 <div class="container" style="text-align: right">
35 X<br/> 35 X<br/>
36 <div id="right-rounded-rect-outline" class="rounded-rect"></div> 36 <div id="right-rounded-rect-outline" class="rounded-rect"></div>
37 <!-- generated right-rounded-rect-float-line divs will be inserted here --> 37 <!-- generated right-rounded-rect-float-line divs will be inserted here -->
38 X<br/> 38 X<br/>
39 X<br/> 39 X<br/>
40 X<br/> 40 X<br/>
41 X<br/> 41 X<br/>
42 X<br/> 42 X<br/>
43 X<br/> 43 X<br/>
44 X<br/> 44 X<br/>
45 X<br/>
45 X 46 X
46 </div> 47 </div>
47 <script src="../resources/rounded-rectangle.js"></script> 48 <script src="../resources/rounded-rectangle.js"></script>
48 <script src="../resources/subpixel-utils.js"></script> 49 <script src="../resources/subpixel-utils.js"></script>
49 <script> 50 <script>
50 genRightRoundedRectFloatShapeOutsideRefTest({ 51 genRightRoundedRectFloatShapeOutsideRefTest({
51 roundedRect: {x: 0, y: 20, width: 322, height: 160, rx: 60, ry: 40}, 52 roundedRect: {x: 0, y: 20, width: 320, height: 160, rx: 80, ry: 80},
52 containerWidth: 500, 53 containerWidth: 500,
53 containerHeight: 200, 54 containerHeight: 200,
54 lineHeight: 20, 55 lineHeight: 20,
55 floatElementClassSuffix: "rounded-rect-float-line", 56 floatElementClassSuffix: "rounded-rect-float-line",
56 insertElementIdSuffix: "rounded-rect-outline", 57 insertElementIdSuffix: "rounded-rect-outline",
57 corner: "upper"
58 }); 58 });
59 </script> 59 </script>
60 60
61 <p>Requires Ahem font. There is a 0px size inset applied on the right float with 60px/40px top left radius.<br> 61 <p>Requires Ahem font. There is a 0px size inset applied on the right float with 200px radius.<br>
62 The black squares should trace the left side of the rounded rectangle's blue out line.</p> 62 The black squares should trace the left side of the rounded rectangle's blue out line.</p>
63 <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> 63 <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>
64 64
65 </body> 65 </body>
66 </html> 66 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698