[CSS Shapes] Support the shape-image-threshold property
authorhmuller@adobe.com <hmuller@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Oct 2013 20:04:50 +0000 (20:04 +0000)
committerhmuller@adobe.com <hmuller@adobe.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 3 Oct 2013 20:04:50 +0000 (20:04 +0000)
https://bugs.webkit.org/show_bug.cgi?id=122254

Reviewed by Andreas Kling.

Source/WebCore:

Replace the hardwired 0 Shape::createShape() threshold parameter with the style's
shapeImageThreshold() value (which has been clamped to [0,1]).

Tests: fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001.html
       fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002.html

* rendering/shapes/ShapeInfo.cpp:
(WebCore::::computedShape):

LayoutTests:

Verify that a shape-outside image whose pixels' alpha channels are all above shape-image-threshold causes
layout to skirt the shape, and similarly that an image whose pixels' alpha channels are all below the threshold
has no effect on the layout.

* fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@156852 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001-expected.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002-expected.html [new file with mode: 0644]
LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/shapes/ShapeInfo.cpp

index 689e850..ad10d20 100644 (file)
@@ -1,5 +1,21 @@
 2013-10-03  Hans Muller  <hmuller@adobe.com>
 
+        [CSS Shapes] Support the shape-image-threshold property
+        https://bugs.webkit.org/show_bug.cgi?id=122254
+
+        Reviewed by Andreas Kling.
+
+        Verify that a shape-outside image whose pixels' alpha channels are all above shape-image-threshold causes
+        layout to skirt the shape, and similarly that an image whose pixels' alpha channels are all below the threshold
+        has no effect on the layout.
+
+        * fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002.html: Added.
+
+2013-10-03  Hans Muller  <hmuller@adobe.com>
+
         [CSS Shapes] Revise the CSS property parsing tests
         https://bugs.webkit.org/show_bug.cgi?id=122251
 
diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001-expected.html
new file mode 100644 (file)
index 0000000..6409e9a
--- /dev/null
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #image-shape {
+        float: left;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='50px'><rect x='0' y='0' width='100' height='50' fill='rgba(0,0,100, 0.5)'/></svg>");
+        background-repeat: no-repeat;
+        width: 120px; 
+        height: 50px; 
+    }
+</style>
+</head>
+<body>
+  <p>The green "Hello World" should appear to the right of the blue rectangle.</p>
+  <div style="color: green">
+      <div id="image-shape"></div>
+      Hello World
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001.html
new file mode 100644 (file)
index 0000000..e37376f
--- /dev/null
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #image-shape {
+        float: left;
+        -webkit-shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120px' height='50px'><rect x='0' y='0' width='120' height='50' fill='rgba(0,0,100, 0.5)'/></svg>");
+        -webkit-shape-image-threshold: 0.4;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='50px'><rect x='0' y='0' width='100' height='50' fill='rgba(0,0,100, 0.5)'/></svg>");
+        background-repeat: no-repeat;
+        width: 100px; 
+        height: 50px; 
+    }
+</style>
+</head>
+<body>
+  <p>The green "Hello World" should appear to the right of the blue rectangle.</p>
+  <div style="color: green">
+      <div id="image-shape"></div>
+      Hello World
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002-expected.html
new file mode 100644 (file)
index 0000000..35b5d44
--- /dev/null
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #image-shape {
+        float: left;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='50px'><rect x='0' y='0' width='100' height='50' fill='rgba(0,0,100, 0.3)'/></svg>");
+        background-repeat: no-repeat;
+        width: 100px; 
+        height: 50px; 
+    }
+</style>
+</head>
+<body>
+  <p>The green "Hello World" should appear on top of the blue rectangle.</p>
+  <div style="color: green">
+      <div id="image-shape">Hello World</div>
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002.html
new file mode 100644 (file)
index 0000000..53b6797
--- /dev/null
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    #image-shape {
+        float: left;
+        -webkit-shape-outside: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='50px'><rect x='0' y='0' width='100' height='50' fill='rgba(0,0,100, 0.3)'/></svg>");
+        -webkit-shape-image-threshold: 0.4;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='50px'><rect x='0' y='0' width='100' height='50' fill='rgba(0,0,100, 0.3)'/></svg>");
+        background-repeat: no-repeat;
+        width: 100px; 
+        height: 50px; 
+    }
+</style>
+</head>
+<body>
+  <p>The green "Hello World" should appear on top of the blue rectangle.</p>
+  <div style="color: green">
+      <div id="image-shape"></div>
+      Hello World
+  </div>
+</body>
+</html>
index a91433a..1fe78bd 100644 (file)
@@ -1,3 +1,19 @@
+2013-10-03  Hans Muller  <hmuller@adobe.com>
+
+        [CSS Shapes] Support the shape-image-threshold property
+        https://bugs.webkit.org/show_bug.cgi?id=122254
+
+        Reviewed by Andreas Kling.
+
+        Replace the hardwired 0 Shape::createShape() threshold parameter with the style's
+        shapeImageThreshold() value (which has been clamped to [0,1]).
+
+        Tests: fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-001.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-image-threshold-002.html
+
+        * rendering/shapes/ShapeInfo.cpp:
+        (WebCore::::computedShape):
+
 2013-10-03  Mihai Maerean  <mmaerean@adobe.com>
 
         [CSS Regions] Follow-up code style change after bug #121828 All regions have layers
index 2a14b8a..c77cd1c 100644 (file)
@@ -48,6 +48,7 @@ const Shape* ShapeInfo<RenderType>::computedShape() const
     WritingMode writingMode = m_renderer->style()->writingMode();
     Length margin = m_renderer->style()->shapeMargin();
     Length padding = m_renderer->style()->shapePadding();
+    float shapeImageThreshold = m_renderer->style()->shapeImageThreshold();
     const ShapeValue* shapeValue = this->shapeValue();
     ASSERT(shapeValue);
 
@@ -58,7 +59,7 @@ const Shape* ShapeInfo<RenderType>::computedShape() const
         break;
     case ShapeValue::Image:
         ASSERT(shapeValue->image());
-        m_shape = Shape::createShape(shapeValue->image(), 0, m_shapeLogicalSize, writingMode, margin, padding);
+        m_shape = Shape::createShape(shapeValue->image(), shapeImageThreshold, m_shapeLogicalSize, writingMode, margin, padding);
         break;
     default:
         ASSERT_NOT_REACHED();