Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(87)

Unified Diff: LayoutTests/fast/regions/shape-inside/shape-inside-on-regions-inline-content.html

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
Patch Set: [CSS Shapes] Port shape-inside on regions and shape's content overflow from WebKit Created 7 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>

Powered by Google App Engine
This is Rietveld 408576698