[CSS Shapes] Port shape-inside on regions and shape's content overflo…

…w from WebKit This change covers a set of smaller fixes that were landed in WebKit regarding to shape-inside on regions and content overflow from shape-inside. Merged revisions: - #1 http://trac.webkit.org/changeset/148975 - #2 http://trac.webkit.org/changeset/149857 - #3 http://trac.webkit.org/changeset/150027 - #4 http://trac.webkit.org/changeset/150375 - #5 http://trac.webkit.org/changeset/150478 - #6 http://trac.webkit.org/changeset/151570 - #7 http://trac.webkit.org/changeset/151652 - #8 http://trac.webkit.org/changeset/151703 - #9 http://trac.webkit.org/changeset/152772 - #10 http://trac.webkit.org/changeset/152904 - #11 http://trac.webkit.org/changeset/152906 - #12 http://trac.webkit.org/changeset/152925 - #13 http://trac.webkit.org/changeset/153053 [email protected] BUG=262269 Review URL: https://chromiumcodereview.appspot.com/19865002 git-svn-id: svn://svn.chromium.org/blink/trunk@155098 bbb929c8-8fbe-4397-9dbb-9b2b20218538
yoavweiss · Jul 29, 2013 · 9d3c595 · 9d3c595
1 parent b4e6592
commit 9d3c595
Show file tree

Hide file tree

Showing 55 changed files with 1,975 additions and 247 deletions.
diff --git a/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions-expected.html b/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions-expected.html
@@ -1,10 +1,6 @@
 <!DOCTYPE html>
 <html>
 <head>
-<script>
-    if (window.internals)
-        window.internals.settings.setCSSExclusionsEnabled(true);
-</script>
 <style>
     .region {
         font: 14px Ahem, sans-serif;
@@ -17,18 +13,24 @@
     }
     #region_with_shape_inside {
         border: 1px solid black;
-        -webkit-shape-inside: rectangle(50px, 0px, 200px, 150px);
+        overflow: hidden;
         background-color: orange;
     }
+    #placeholder {
+        float: left;
+        width: 50px;
+        height: 300px;
+    }
 </style>
 </head>
 <body>
 
 <div class="region">
-      <p>Despite the passage of time, Major Quilan still suffers grief and bereavement from the death of his wife, killed during the Chelgrian civil war that resulted from the Culture's interference. <p>Quilan is offered the chance to avenge the lost Chelgrians who died in the civil war and is inducted into a plot  to strike back
+      <p>Despite the passage of time, Major Quilan still suffers grief and bereavement from the death of his wife, killed during the Chelgrian civil war that resulted from the Culture's interference. <p>Quilan is offered the chance to avenge the lost Chelgrians who died in the civil war and is inducted into a plot to strike back at the Culture.</p>
 </div>
 <div id="region_with_shape_inside" class="region">
-at the Culture.</p>As part of the plot, his <p>"soulkeeper"</p> (a device normally used to store its owner's personality upon their death) is equipped with both the mind of a long-dead Chelgrian general and a device...
+    <div id="placeholder"></div>
+    <p>As part of the plot, his <p>"soulkeeper"</p> (a device normally used to store its owner's personality upon their death) is equipped with both the mind of a long-dead Chelgrian general and a device...
 </div>
 
 <p>Requires Ahem font. The content - what contains multiple nested paragraphs - flows into multiple regions, a shape-inside property is applied only on the second region. <br/>

diff --git a/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions.html b/LayoutTests/fast/regions/shape-inside/shape-inside-on-additional-regions.html
@@ -21,7 +21,8 @@
     }
     #region_with_shape_inside {
         border: 1px solid black;
-        -webkit-shape-inside: rectangle(50px, 0px, 200px, 150px);
+        -webkit-shape-inside: rectangle(50px, 0px, 250px, 300px);
+        overflow: hidden;
         background-color: orange;
     }
 </style>

diff --git a/...tTests/fast/regions/shape-inside/shape-inside-on-first-region-block-content-expected.html b/...tTests/fast/regions/shape-inside/shape-inside-on-first-region-block-content-expected.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    .region {
+        font: 20px Ahem, sans-serif;
+        float: left;
+        margin-right: 10px;
+        width: 300px;
+        height: 300px;
+        background-color: yellow;
+        overflow: hidden;
+        border: 1px solid black;
+    }
+    #shape_inside { background-color: orange; }
+    #placeholder {
+        float: left;
+        width: 50px;
+        height: 300px;
+    }
+</style>
+</head>
+<body>
+
+<div id="shape_inside" class="region">
+    <div id="placeholder"></div>
+    <p>Despite the passage</p> of time, Major Quilan still suffers grief and bereavement from the death of his wife, killed during the Chelgrian
+</div>
+<div class="region" style="float: none;">
+    civil war that resulted from the Culture's interference.
+    <p>Quilan is offered the chance to avenge the lost Chelgrians who died in the civil war and is inducted into a plot to strike back at
+</div>
+
+<p>Requires Ahem font. The block content - contains multiple nested blocks - flows into two regions, a 250x300px rectangle shape-inside property with 50px left offset is applied to the first (orange) region. The content should have a 50px left offset in the orange rectangle and should flow into the second rectangle without any offset.<br/>
+<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>
diff --git a/LayoutTests/fast/regions/shape-inside/shape-inside-on-first-region-block-content.html b/LayoutTests/fast/regions/shape-inside/shape-inside-on-first-region-block-content.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+    if (window.internals)
+        window.internals.settings.setCSSExclusionsEnabled(true);
+</script>
+<style>
+    #content {
+        font: 20px Ahem, sans-serif;
+        -webkit-flow-into: flow;
+    }
+    .region {
+        float: left;
+        margin-right: 10px;
+        width: 300px;
+        height: 300px;
+        background-color: yellow;
+        overflow: hidden;
+        border: 1px solid black;
+        -webkit-flow-from: flow;
+    }
+    #shape_inside {
+        -webkit-shape-inside: rectangle(50px, 0px, 250px, 300px);
+        background-color: orange;
+    }
+</style>
+</head>
+<body>
+
+<div id="shape_inside" class="region"></div>
+<div class="region" style="float: none;"></div>
+
+<div id="content">
+    <p>Despite the passage</p> of time, Major Quilan still suffers grief and bereavement from the death of his wife, killed during the Chelgrian civil war that resulted from the Culture's interference.
+         <p>Quilan is offered the chance to avenge the lost Chelgrians who died in the civil war and is inducted into a plot to strike back at the Culture.</p>
+         <p>As part of the plot, his
+            <p>"soulkeeper"</p>
+            (a device normally used to store its owner's personality upon their death) is equipped with both the mind of a long-dead Chelgrian general and a device that can transport wormholes connected to weapons caches. Quilan is then sent to Masaq' Orbital, ostensibly to persuade Mahrai Ziller to return to his native Chel but is in reality on a suicide mission to destroy the Orbital's Hub Mind. To protect him from detection at Masaq', Quilan's memory is selectively blanked until he reaches his target.
+         </p>
+    </p>
+</div>
+
+<p>Requires Ahem font. The block content - contains multiple nested blocks - flows into two regions, a 250x300px rectangle shape-inside property with 50px left offset is applied to the first (orange) region. The content should have a 50px left offset in the orange rectangle and should flow into the second rectangle without any offset.<br/>
+<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>
diff --git a/...Tests/fast/regions/shape-inside/shape-inside-on-first-region-inline-content-expected.html b/...Tests/fast/regions/shape-inside/shape-inside-on-first-region-inline-content-expected.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    .region {
+        font: 20px Ahem, sans-serif;
+        float: left;
+        margin-right: 10px;
+        width: 300px;
+        height: 300px;
+        background-color: yellow;
+        overflow: hidden;
+        border: 1px solid blue;
+    }
+    #shape_inside { background-color: orange; }
+    #placeholder {
+        float: left;
+        width: 50px;
+        height: 300px;
+    }
+</style>
+</head>
+<body>
+
+<div id="shape_inside" class="region">
+    <div id="placeholder"></div>
+    Despite the passage of time, Major Quilan still suffers grief and bereavement from the death of his wife, killed during the Chelgrian civil war that resulted
+</div>
+
+<div class="region" style="float: none">
+    from the Culture's interference. Quilan is offered the chance to avenge the lost Chelgrians who died in the civil war and is inducted into a plot to strike back at the Culture. As part of the
+</div>
+
+<p>Requires Ahem font. The inline content flows into two regions, a 250x300px rectangle shape-inside property with 50px left offset is applied to the first (orange) region. The content should have a 50px left offset in the orange rectangle and should flow into second rectangle without any offset.<br/>
+<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>
diff --git a/LayoutTests/fast/regions/shape-inside/shape-inside-on-first-region-inline-content.html b/LayoutTests/fast/regions/shape-inside/shape-inside-on-first-region-inline-content.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+    if (window.internals)
+        window.internals.settings.setCSSExclusionsEnabled(true);
+</script>
+<style>
+    #content {
+        font: 20px Ahem, sans-serif;
+        -webkit-flow-into: flow;
+    }
+    .region {
+        float: left;
+        margin-right: 10px;
+        width: 300px;
+        height: 300px;
+        background-color: yellow;
+        overflow: hidden;
+        border: 1px solid blue;
+        -webkit-flow-from: flow;
+    }
+    #shape_inside {
+        -webkit-shape-inside: rectangle(50px, 0px, 250px, 300px);
+        background-color: orange;
+    }
+</style>
+</head>
+<body>
+
+<div id="shape_inside" class="region"></div>
+<div class="region" style="float: none"></div>
+
+<div id="content">
+    Despite the passage of time, Major Quilan still suffers grief and bereavement from the death of his wife, killed during the Chelgrian civil war that resulted from the Culture's
+    interference. Quilan is offered the chance to avenge the lost Chelgrians who died in the civil war and is inducted into a plot to strike back at the Culture. As part of the plot,
+    his "soulkeeper" (a device normally used to store its owner's personality upon their death) is equipped with both the mind of a long-dead Chelgrian general and a devicethat can
+    transport wormholes connected to weapons caches. Quilan is then sent to Masaq' Orbital, ostensibly to persuade Mahrai Ziller to return to his native Chel but is in reality on a
+    suicide mission to destroy the Orbital's Hub Mind. To protect him from detection at Masaq', Quilan's memory is selectively blanked until he reaches his target.
+</div>
+
+<p>Requires Ahem font. The inline content flows into two regions, a 250x300px rectangle shape-inside property with 50px left offset is applied to the first (orange) region. The content should have a 50px left offset in the orange rectangle and should flow into second rectangle without any offset.<br/>
+<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>
diff --git a/...nside/shape-inside-on-regions-block-content-basic-overflow-shape-top-offset-expected.html b/...nside/shape-inside-on-regions-block-content-basic-overflow-shape-top-offset-expected.html
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <style>
+        #rectangle {
+            font: 20px Ahem, sans-serif;
+            -webkit-font-smoothing: none;
+            line-height: 20px;
+            width: 200px;
+            height: 200px;
+            border: 2px solid green;
+        }
+        #border {
+            position: relative;
+            top: 48px;
+            left: 48px;
+            width: 100px;
+            height: 100px;
+            border: 2px solid blue;
+        }
+        #overflow { margin-top: 96px;}
+    </style>
+</head>
+<body>
+    <div id="rectangle">
+        <div id="border">X X<p> X<p> X</p></p></div>
+        <div id="overflow"><p>X X X X X X X X X X X X X X X X X X X</p></div>
+    </div>
+    <p style="margin-top: 100px;">Requires Ahem font. The shape-inside on the region is illustrated by the blue rectangle. The content should wrap inside the the blue rectangle, the overflow should start on the left under the content box.</p>
+    <p>Bug <a href="http://webkit.org/b/116252">116252</a> [CSS Regions][CSS Exclusions] shape-inside on regions should respect positioned shapes and overflow</p>
+</body>
+</html>
diff --git a/...s/shape-inside/shape-inside-on-regions-block-content-basic-overflow-shape-top-offset.html b/...s/shape-inside/shape-inside-on-regions-block-content-basic-overflow-shape-top-offset.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <script>
+        if (window.internals)
+            window.internals.settings.setCSSExclusionsEnabled(true);
+    </script>
+    <style>
+        #rectangle {
+            font: 20px Ahem, sans-serif;
+            line-height: 20px;
+            -webkit-flow-into: flow;
+            -webkit-font-smoothing: none;
+        }
+        #region {
+            -webkit-flow-from: flow;
+            width: 200px;
+            height: 200px;
+            -webkit-shape-inside: rectangle(50px, 50px, 100px, 100px);
+            border: 2px solid green;
+        }
+        #border {
+            position: absolute;
+            top: 58px;
+            left: 58px;
+            width: 100px;
+            height: 100px;
+            border: 2px solid blue;
+        }
+    </style>
+</head>
+<body>
+    <div id="rectangle">
+       X X<p> X<p> X</p></p><p>X X X X X X X X X X X X X X X X X X X</p>
+    </div>
+
+    <div id="page">
+        <div id="border"></div>
+        <div id="region"></div>
+    </div>
+    <p style="margin-top: 100px;">Requires Ahem font. The shape-inside on the region is illustrated by the blue rectangle. The content should wrap inside the the blue rectangle, the overflow should start on the left under the content box.</p>
+    <p>Bug <a href="http://webkit.org/b/116252">116252</a> [CSS Regions][CSS Exclusions] shape-inside on regions should respect positioned shapes and overflow</p>
+</body>
+</html>
diff --git a/...-inside-on-regions-block-content-overflow-bottom-positioned-multiple-shapes-expected.html b/...-inside-on-regions-block-content-overflow-bottom-positioned-multiple-shapes-expected.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <style>
+        #page {
+            font: 20px Ahem, sans-serif;
+            line-height: 20px;
+            -webkit-font-smoothing: none;
+        }
+        .region {
+            width: 200px;
+            height: 200px;
+            border: 2px solid green;
+            padding: 10px;
+        }
+        #region2 { margin-top: 10px; }
+        #border1 {
+            position: absolute;
+            top: 118px;
+            left: 68px;
+            width: 100px;
+            height: 100px;
+            border: 2px solid blue;
+        }
+        #border2 {
+            position: absolute;
+            top: 352px;
+            left: 43px;
+            width: 140px;
+            height: 100px;
+            border: 2px solid blue;
+        }
+        #overflow {
+            width: 200px;
+            margin-left: 12px;
+            margin-top: -12px;
+        }
+    </style>
+</head>
+<body>
+    <div id="page">
+        <div id="border1">X X <p>X X X X X<p></div>
+        <div id="region1" class="region"></div>
+        <div id="border2">X<p>X X X X</p><p>X X X X</p></div>
+        <div id="region2" class="region"></div>
+        <div id="overflow">X X X X X X X</div>
+    </div>
+    <p style="margin-top: 22px;">Requires Ahem font. There are two regions (10px padding is applied to the regions) with two ractangle shape-insides, the shape-insides are smaller and have top and left offsets inside the content box. The rectangular shapes boundaries are represented by the blue rectangles. The block content should flow inside the blue ractangles, the overflow should be pushed down below the last region's content box, which means the overflow should start just below the last regions's shape, 10px above the green border box.</p>
+    <p>Bug <a href="http://webkit.org/b/117599">117599</a>[CSS Shapes][CSS Regions] Respect bottom positioned shapes and content adjustment inside shapes</p>
+</body>
+</html>