Commit 17aa01ca authored by zoltan@webkit.org's avatar zoltan@webkit.org

[CSS Shapes][CSS Regions] Simplify shape-inside-on-multiple-regions-with-negative-shape-top.html

https://bugs.webkit.org/show_bug.cgi?id=123808

Reviewed by Mihnea Ovidenie.

Use a rectangle instead of a complex polygon in the test.

* fast/regions/shape-inside/shape-inside-on-multiple-regions-with-negative-shape-top-expected.html:
* fast/regions/shape-inside/shape-inside-on-multiple-regions-with-negative-shape-top.html:


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@159344 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 4d56f344
2013-11-15 Zoltan Horvath <zoltan@webkit.org>
[CSS Shapes][CSS Regions] Simplify shape-inside-on-multiple-regions-with-negative-shape-top.html
https://bugs.webkit.org/show_bug.cgi?id=123808
Reviewed by Mihnea Ovidenie.
Use a rectangle instead of a complex polygon in the test.
* fast/regions/shape-inside/shape-inside-on-multiple-regions-with-negative-shape-top-expected.html:
* fast/regions/shape-inside/shape-inside-on-multiple-regions-with-negative-shape-top.html:
2013-11-15 Michał Pakuła vel Rutka <m.pakula@samsung.com>
Unreviewed EFL gardening
......
......@@ -2,47 +2,36 @@
<html>
<head>
<style>
article { font: 10px Ahem, sans-serif; }
article { font: 20px/1 Ahem, sans-serif; }
.regions {
width: 260px;
height: 200px;
margin: 0px 20px 20px;
padding: 7px;
background-color: #b0dcff;
-webkit-shape-inside: polygon(20px -62px, 314px -62px, 314px 152px, 44px 152px);
height: 200px;
-webkit-shape-inside: rectangle(10px, -20px, 100%, 50%);
}
.overflow {
margin-top: -34px;
margin-top: -20px;
margin-left: 20px;
padding: 7px;
}
</style>
</head>
<body>
<article>
<div class="regions">
<p>
CSS Pseudo-elements is a new proposal by Adobe to the W3C that allows multiple "before" and "after" pseudo-elements to be generated by a single element.
In this example you can see how another region (the blue one) is added after the page is loaded and the CSSRegions object is
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 class="regions">
created.
<a href="http://example.org">This is a very long link!</a>
</p>
<p>
Multiple pseudo-elements cover use cases collected on css-tricks.com.
</p>
<p>
This is a prototype JavaScript implementation to give you a feel for how the code will look like and behave. Please keep in mind that
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 class="overflow">
this is just... . . .
X X X X X
</div>
</article>
<p style="margin-top: 30px">
We have two regions, a polygon shape with negative top coordinates is applied on the regions. The content should flow from the first shape to the second shape. The overflow should
be pushed down below the content box.
<p style="margin-top: 20px">
Requires Ahem font. We have two regions, a rectangle shape with negative top coordinate and 10px left offset is applied on the regions.
The content should flow from the first shape to the second shape. The overflow should be pushed down below the content box.
</p>
<p>Bug <a href="http://webkit.org/b/123103">123103</a>: [CSS Shapes][CSS Regions] Don't apply shape-inside when we have multiple auto-height regions and the height is not resolved</p>
<p>Bug <a href="http://webkit.org/b/123346">123346</a>: [CSS Shapes][CSS Regions] Don't apply shape-inside when we have multiple auto-height regions and the height is not resolved</p>
</body>
</html>
......@@ -3,19 +3,17 @@
<head>
<style>
#source {
font: 10px Ahem, sans-serif;
font: 20px/1 Ahem, sans-serif;
-webkit-flow-into: article;
}
.regions {
-webkit-flow-from: article;
width: 260px;
height: 200px;
margin: 0px 20px 20px;
padding: 7px;
background-color: #b0dcff;
-webkit-shape-inside: polygon(20px -62px, 314px -62px, 314px 152px, 44px 152px);
height: 200px;
-webkit-shape-inside: rectangle(10px, -20px, 100%, 50%);
}
</style>
</head>
<body>
......@@ -24,23 +22,13 @@
<div class="regions"></div>
</article>
<div id="source">
<p>
CSS Pseudo-elements is a new proposal by Adobe to the W3C that allows multiple "before" and "after" pseudo-elements to be generated by a single element.
In this example you can see how another region (the blue one) is added after the page is loaded and the CSSRegions object is created.
<a href="http://example.org">This is a very long link!</a>
</p>
<p>
Multiple pseudo-elements cover use cases collected on css-tricks.com.
</p>
<p>
This is a prototype JavaScript implementation to give you a feel for how the code will look like and behave. Please keep in mind that this is just... . . .
</p>
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>
<p style="margin-top: 40px;">
We have two regions, a polygon shape with negative top coordinates is applied on the regions. The content should flow from the first shape to the second shape. The overflow should
be pushed down below the content box.
Requires Ahem font. We have two regions, a rectangle shape with negative top coordinate and 10px left offset is applied on the regions.
The content should flow from the first shape to the second shape. The overflow should be pushed down below the content box.
</p>
<p>Bug <a href="http://webkit.org/b/123103">123103</a>: [CSS Shapes][CSS Regions] Don't apply shape-inside when we have multiple auto-height regions and the height is not resolved</p>
<p>Bug <a href="http://webkit.org/b/123346">123346</a>: [CSS Shapes][CSS Regions] Don't apply shape-inside when we have multiple auto-height regions and the height is not resolved</p>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment