| Index: LayoutTests/fast/shapes/shape-outside-floats/shape-outside-edge-case.html
|
| diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-edge-case.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-edge-case.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..7d549844be35e3ccbeb68f50ab824b5f979589fc
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-edge-case.html
|
| @@ -0,0 +1,43 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| +<style>
|
| + #content {
|
| + font: 50px/1 Ahem, sans-serif;
|
| + -webkit-font-smoothing: antialiased;
|
| + color: green;
|
| + width: 300px;
|
| + border: 1px solid black;
|
| + }
|
| + #right-shape {
|
| + float: right;
|
| + width: 50px;
|
| + height: 50px;
|
| + background-color: blue;
|
| + margin-left: 50px; /* effectively overridden by shape-outside */
|
| + shape-outside: content-box polygon(0 0, 50px 0, 50px 50px, 0 50px);
|
| + }
|
| + #left-shape {
|
| + float: left;
|
| + width: 50px;
|
| + height: 50px;
|
| + background-color: blue;
|
| + margin-right: 50px; /* effectively overridden by shape-outside */
|
| + shape-outside: content-box polygon(0 0, 50px 0, 50px 50px, 0 50px);
|
| + }
|
| +</style>
|
| +</head>
|
| +<body>
|
| + <p>The blue squares on the left and right should be surrounded by three green squares.</p>
|
| + <div id="content">
|
| + <div style="text-align: right">
|
| + X<br>
|
| + <div id="right-shape"></div>
|
| + X<br>X
|
| + </div>
|
| + X<br>
|
| + <div id="left-shape"></div>
|
| + X<br>X
|
| + </div>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 286813002:
[CSS Shapes] line height grows around polygon and incorrectly causes text to wrap to next line (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master