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> |