Chromium Code Reviews Chromium Code Reviews
Issue 195793009:
[CSS Shapes] inset does not properly clamp large corner radii (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| OLD | NEW |
|---|---|
| 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="http://webkit.org/b/129726">129726</a>: [CSS Shapes] inset does not properly clamp large corner radii</p> |
|
Bem Jones-Bey (adobe)
2014/03/12 17:16:47
You should update this to be a chromium bug link (
| |
| 64 | 64 |
| 65 </body> | 65 </body> |
| 66 </html> | 66 </html> |
| OLD | NEW |
