| Index: LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-stacked-expected.html
|
| diff --git a/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-stacked-expected.html b/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-stacked-expected.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..c82e47ca3138916aa05f1b3cc1bdbbe8c7eacaa4
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-stacked-expected.html
|
| @@ -0,0 +1,106 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| + <style>
|
| + .container {
|
| + width: 500px;
|
| + font: 40px/1 Ahem, sans-serif;
|
| + }
|
| + .left {
|
| + position: relative;
|
| + float: left;
|
| + clear: left;
|
| + height: 40px;
|
| + }
|
| + .triangle-left:before {
|
| + display: block;
|
| + position: absolute;
|
| + content: ' ';
|
| + z-index: -1;
|
| + top: 0px;
|
| + left: 0px;
|
| + width: 0; height: 0;
|
| + background-color: transparent;
|
| + border-top: 100px solid transparent;
|
| + border-left: 100px solid rgba(0, 0, 255, 0.5);
|
| + }
|
| + .triangle-left2:before {
|
| + display: block;
|
| + position: absolute;
|
| + content: ' ';
|
| + z-index: -1;
|
| + top: 0px;
|
| + left: 100px;
|
| + width: 0; height: 0;
|
| + background-color: transparent;
|
| + border-top: 100px solid transparent;
|
| + border-left: 100px solid rgba(0, 0, 255, 0.5);
|
| + }
|
| + .right {
|
| + position: relative;
|
| + float: right;
|
| + clear: right;
|
| + height: 40px;
|
| + }
|
| + .triangle-right:before {
|
| + display: block;
|
| + position: absolute;
|
| + content: ' ';
|
| + z-index: -1;
|
| + top: 0px;
|
| + right: 0px;
|
| + width: 0; height: 0;
|
| + background-color: transparent;
|
| + border-top: 100px solid transparent;
|
| + border-right: 100px solid rgba(0, 0, 255, 0.5);
|
| + }
|
| + .triangle-right2:before {
|
| + display: block;
|
| + position: absolute;
|
| + content: ' ';
|
| + z-index: -1;
|
| + top: 0px;
|
| + right: 100px;
|
| + width: 0; height: 0;
|
| + background-color: transparent;
|
| + border-top: 100px solid transparent;
|
| + border-right: 100px solid rgba(0, 0, 255, 0.5);
|
| + }
|
| + </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>There should be two trianges on the left, and one on the right. None of
|
| + the triangles shoud overlap, and the black boxes should wrap around the triangles on the left.</h2>
|
| + <div class="container">
|
| + <div style="width:40px;" class="left triangle-left"></div>
|
| + X X X X
|
| + <div style="height: 100px; width: 100px;" class="right triangle-left"></div>
|
| + <div style="width:80px;" class="left"></div>
|
| + X X X X
|
| + <div style="width:140px;" class="left triangle-left2"></div>
|
| + <div style="width:180px;" class="left"></div>
|
| + <div style="width:200px;" class="left"></div>
|
| + X X X X
|
| + X X X X
|
| + X X X X
|
| + X X X X X X
|
| + </div>
|
| + <h2>There should be two trianges on the right, and one on the left. None of
|
| + the triangles shoud overlap, and the black boxes should wrap around the triangles on the right.</h2>
|
| + <div style="text-align: right" class="container">
|
| + <div style="width:40px;" class="right triangle-right"></div>
|
| + X X X X
|
| + <div style="height: 100px; width: 100px;" class="left triangle-right"></div>
|
| + <div style="width:80px;" class="right"></div>
|
| + X X X X
|
| + <div style="width:140px;" class="right triangle-right2"></div>
|
| + <div style="width:180px;" class="right"></div>
|
| + <div style="width:200px;" class="right"></div>
|
| + X X X X
|
| + X X X X
|
| + X X X X
|
| + X X X X X X
|
| + </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