Chromium Code Reviews Chromium Code Reviews
Issue 13909006:
Merge patch for stacked floats with shape-outside from WebKit (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-stacked.html |
| diff --git a/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-stacked.html b/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-stacked.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..b0dc238f3dafb9a22fa9dedf947effac0f06f969 |
| --- /dev/null |
| +++ b/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-stacked.html |
| @@ -0,0 +1,59 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| + <script> |
| + if (window.internals) |
| + window.internals.settings.setCSSExclusionsEnabled(true); |
|
Julien - ping for review
2013/05/29 17:14:49
Do we need this? CSS runtime features are enabled
|
| + </script> |
| + <style> |
| + .container { |
| + width: 300px; |
| + height: 100px; |
| + font: 50px/1 Ahem, sans-serif; |
| + background-color: red; |
| + margin-bottom: 100px; |
| + overflow: hidden; |
| + } |
| + .float-left { |
| + position: relative; |
| + width: 100px; |
| + height: 100px; |
|
Julien - ping for review
2013/05/29 17:14:49
I would have expected these 2 properties to not be
|
| + float: left; |
| + background-color: green; |
| + } |
| + .triangle-left { |
| + -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%); |
| + } |
| + .float-right { |
| + position: relative; |
| + width: 100px; |
| + height: 100px; |
| + float: right; |
| + background-color: green; |
| + } |
| + .triangle-right { |
| + -webkit-shape-outside: polygon(100% 0, 100% 100%, 0% 100%); |
| + } |
| + .circle { |
| + -webkit-shape-outside: circle(50%, 100%, 50%); |
| + } |
| + </style> |
| +</head> |
| +<body> |
| + <h1>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=110372">110372</a> - [CSS Exclusions] Properly position multiple stacked floats with non rectangular shape outside</h1> |
| + <h2>You should see a single green rectange. There should be no red.</h2> |
| + <div class="container"> |
| + <div class="float-left triangle-left"></div> |
| + <div class="float-right triangle-right"></div> |
| + X<br/> |
| + <div class="float-left circle"></div> |
| + </div> |
| + <h2>You should see a single green rectange. There should be no red.</h2> |
| + <div style="text-align: right" class="container"> |
| + <div class="float-right triangle-right"></div> |
| + <div class="float-left triangle-left"></div> |
| + X<br/> |
| + <div class="float-right circle"></div> |
| + </div> |
| +</body> |
| +</html> |
