| 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..b6a34d004910f6dfba87f978dae9532cfb3e1c69
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-stacked.html
|
| @@ -0,0 +1,55 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| + <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;
|
| + 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>
|
|
|
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