| Index: LayoutTests/fast/shapes/shape-inside/shape-inside-bottom-edge.html
|
| diff --git a/LayoutTests/fast/shapes/shape-inside/shape-inside-bottom-edge.html b/LayoutTests/fast/shapes/shape-inside/shape-inside-bottom-edge.html
|
| index 5c80425ba22525cab95ef61411f9451325813166..e2632280709f7cb0e79b1c21414d7d6c2c24c62f 100644
|
| --- a/LayoutTests/fast/shapes/shape-inside/shape-inside-bottom-edge.html
|
| +++ b/LayoutTests/fast/shapes/shape-inside/shape-inside-bottom-edge.html
|
| @@ -6,52 +6,69 @@
|
| window.internals.settings.setCSSExclusionsEnabled(true);
|
| </script>
|
| <style>
|
| -.shape-inside {
|
| - position: absolute;
|
| - left: 0px;
|
| - width: 600px;
|
| - height: 200px;
|
| - -webkit-shape-inside: rectangle(50px, 50px, 400px, 100px);
|
| -}
|
| -
|
| -.shape-background {
|
| - position: absolute;
|
| - left: 50px;
|
| - width: 400px;
|
| +.box {
|
| + width: 450px;
|
| height: 100px;
|
| - background-color: green;
|
| + line-height: 20px;
|
| + outline: 2px solid green;
|
| }
|
|
|
| -#shape-background-no-overlap {
|
| - top: 50px;
|
| +.rectangle {
|
| + -webkit-shape-inside: rectangle(25px, 25px, 400px, 50px);
|
| }
|
|
|
| -#shape-inside-no-overlap {
|
| - top: 0px;
|
| -}
|
| -#shape-inside-no-overlap::before, #shape-inside-overlap::before {
|
| - display: block;
|
| - height: 150px;
|
| - content: ' ';
|
| -}
|
| -#shape-inside-overlap::before {
|
| - height: 149.9px;
|
| +.rounded-rectangle {
|
| + width: 100px;
|
| + height: 100px;
|
| + -webkit-shape-inside: rectangle(0, 0, 100%, 100%, 25%, 25%);
|
| }
|
| -#shape-background-overlap {
|
| - top: 250px;
|
| +
|
| +.smaller-rounded-rectangle {
|
| + width: 100px;
|
| + height: 100px;
|
| + -webkit-shape-inside: rectangle(0, 0, 75%, 75%, 25%, 25%);
|
| }
|
|
|
| -#shape-inside-overlap {
|
| - top: 200px;
|
| +.details {
|
| + padding-top: 15px;
|
| + font-style: italic;
|
| }
|
| </style>
|
| </head>
|
|
|
| <body>
|
| - <div id="shape-background-no-overlap" class="shape-background"></div>
|
| - <div id="shape-inside-no-overlap" class="shape-inside">This text should appear below and to the left of the green rectangle.</div>
|
| + <div class="box rectangle">
|
| + <p style="padding-top: 55px;">Content1</p>
|
| + </div>
|
| +<p class="details">There is a 400x50px shape-inside rectangle inside the green box.<br/>The Content1 text line's bottom equals to the shape-inside's rectangle bottom boundary, so it should fit in the shape-inside.</p>
|
| +<hr>
|
| +
|
| +<div class="box rectangle">
|
| + <p style="padding-top: 60px;">Content2</p>
|
| +</div>
|
| +<p class="details">There is a 400x50px shape-inside rectangle inside the green box.<br/>The Content2 text line overlaps with the shape-inside's rectangle bottom boundary, so the Content2 should be pushed below the content box.</p>
|
| +<hr>
|
| +
|
| +<div class="box rectangle">
|
| + <p style="padding-top: 76px;">Content3</p>
|
| +</div>
|
| +<p class="details">There is a 400x50px shape-inside rectangle inside the green box.<br/>The Content3 text line starts after the shape-inside's rectangle bottom boundary, so the Content3 should be pushed below the content box.</p>
|
| +<hr>
|
| +
|
| +<div class="box rounded-rectangle">
|
| + <p style="padding-top: 90px;">Content4</p>
|
| +</div>
|
| +<p class="details">There is a 100x100px shape-inside rounded rectangle inside the green box.<br/>The shape top and bottom boundaries match with the content box boundaries, the overflow should start on the left, below the green content box.</p>
|
| +<hr>
|
| +
|
| +<div class="box smaller-rounded-rectangle">
|
| + <p style="padding-top: 60px;">Content5</p>
|
| +</div>
|
| +<p class="details">There is a 75x75px shape-inside rounded rectangle inside the green 100x100px box.<br/>The forth line should overflow, the overflow should start on the left, below the green content box.</p>
|
| +<hr>
|
|
|
| - <div id="shape-background-overlap" class="shape-background"></div>
|
| - <div id="shape-inside-overlap" class="shape-inside">This text should directly appear below the green rectangle.</div>
|
| +<p>Based on a recent change on the <a href="http://dev.w3.org/csswg/css-exclusions/#shape-inside-property">exclusions specification</a>. The 'shape-inside' property adds an exclusion area to the element's wrapping context.
|
| +This modifies the normal rectangular shape of the content area to a possibly non-rectangular wrapping area. The exclusion area added is defined by subtracting the shape from the element's content area.</p>
|
| +<p>Bug <a href="http://webkit.org/b/114526 ">114526</a>: [CSS Exclusions] shape-inside overflow should be pushed to the outside of the content box</p>
|
| </body>
|
| </html>
|
|
|
Chromium Code Reviews
Issue 19865002:
[CSS Shapes] Port shape-inside on regions and shape's content overflow from WebKit (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master