Index: LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content.html |
diff --git a/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions.html b/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content.html |
similarity index 57% |
copy from LayoutTests/fast/regions/shape-inside/shape-inside-on-regions.html |
copy to LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content.html |
index 53c26b5aacfdd16db325c7d3e33e6c3e15b5b196..1f2554b673e9c36515e5a00d412267df66cdef18 100644 |
--- a/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions.html |
+++ b/LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content.html |
@@ -7,7 +7,8 @@ |
</script> |
<style> |
#rectangle { |
- font: 16px Ahem, sans-serif; |
+ font: 20px Ahem, sans-serif; |
+ -webkit-font-smoothing: none; |
-webkit-flow-into: rectangle; |
} |
@@ -16,38 +17,38 @@ |
#region1 { |
width: 180px; |
height: 100px; |
+ border: 1px solid green; |
-webkit-shape-inside: rectangle(0, 0, 130px, 100px); |
margin-top: 10px; |
} |
#region2 { |
width: 300px; |
- height: 145px; |
+ height: 150px; |
+ border: 1px solid green; |
-webkit-shape-inside: rectangle(0, 0, 220px, 150px); |
margin-top: 60px; |
} |
#region3 { |
width: 300px; |
height: 50px; |
+ border: 1px solid green; |
margin-top: 60px; |
} |
</style> |
</head> |
<body> |
<div id="rectangle"> |
- X X X X X |
- <p>X X</p> |
- <p style="color: green">X X X X X X</p> |
- <p style="color: orange">X X X X</p> |
- <p>X X X X X X X X<p style="color: yellow">X X X X X X X X X X</p> X X</p> |
- <div style="color: red"> X X X X X X X X X</div> |
- </div> |
+ X X X X X X X X X X X X X X X X X X X X X X X X |
+ X X X X X X X X X X X X X X X X X X X X X X X X |
+ X X X X X X X X X X X X X X X X X X X X X X X X |
+ </div> |
<div id="page"> |
<div id="region1" class="region"></div> |
<div id="region2" class="region"></div> |
<div id="region3" class="region"></div> |
</div> |
<p>Requires Ahem font. Two different -shape-inside property are applied to the first and second region. The third region is a simple region without -shape-inside. |
- The rectangles should flow through the regions and the shape-insides should be applied to the first two regions.</p> |
- <p> Bug <a href="http://webkit.org/b/107880">107880</a>: Regions should respect shape-inside</p> |
+ The inline content should flow through the regions and the shape-insides should be applied to the first two regions thus the content should be only 130px wide in the first (original width: 180px) and only 220px wide in the second (original width: 300px) region.</p> |
+ <p>Bug <a href="http://webkit.org/b/115456">115456</a>: [CSS Regions][CSS Exclusions] Shape-inside on regions should respect region borders and paddings</p> |
</body> |
</html> |