Use -webkit-clip-path shapes to clip HTML elements
authorkrit@webkit.org <krit@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 5 Sep 2012 17:48:19 +0000 (17:48 +0000)
committerkrit@webkit.org <krit@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 5 Sep 2012 17:48:19 +0000 (17:48 +0000)
https://bugs.webkit.org/show_bug.cgi?id=95646

Reviewed by Dean Jackson.

Source/WebCore:

-webkit-clip-path creates a new layer for HTML elements now. The border,
background and content gets clipped by the clip path after any filter was
applied.

Tests: css3/masking/clip-path-circle-filter.html
       css3/masking/clip-path-circle-overflow.html
       css3/masking/clip-path-circle-overflow-hidden.html
       css3/masking/clip-path-circle-relative-overflow.html
       css3/masking/clip-path-circle.html
       css3/masking/clip-path-ellipse.html
       css3/masking/clip-path-polygon-evenodd.html
       css3/masking/clip-path-polygon-nonzero.html
       css3/masking/clip-path-polygon.html
       css3/masking/clip-path-rectangle.html

* rendering/RenderBox.h: Create new layer on clip-path.
* rendering/RenderBoxModelObject.h:
(WebCore::RenderBoxModelObject::requiresLayer): Create new layer on clip-path.
* rendering/RenderInline.h:
(WebCore::RenderInline::requiresLayer): Create new layer on clip-path.
* rendering/RenderLayer.cpp: Apply clip-path on context of object.
(WebCore::RenderLayer::paintLayerContents): Create new layer on clip-path.
* rendering/RenderObject.h:
(WebCore::RenderObject::hasClipPath): Indicates that renderer needs to be clipped by clip-path.
* rendering/RenderTableRow.h: Create new layer on clip-path.

LayoutTests:

Added new tests for the -webkit-clip-path property applied to HTML content.

* css3/masking/clip-path-circle-filter.html: Added.
* css3/masking/clip-path-circle-overflow.html: Added.
* css3/masking/clip-path-circle-relative-overflow.html: Added.
* css3/masking/clip-path-circle-overflow-hidden.html: Added.
* css3/masking/clip-path-circle.html: Added.
* css3/masking/clip-path-ellipse.html: Added.
* css3/masking/clip-path-polygon-evenodd.html: Added.
* css3/masking/clip-path-polygon-nonzero.html: Added.
* css3/masking/clip-path-polygon.html: Added.
* css3/masking/clip-path-rectangle.html: Added.
* platform/chromium/TestExpectations:
* platform/efl/TestExpectations:
* platform/gtk/TestExpectations:
* platform/mac/css3/masking/clip-path-circle-expected.png: Added.
* platform/mac/css3/masking/clip-path-circle-expected.txt: Added.
* platform/mac/css3/masking/clip-path-circle-filter-expected.png: Added.
* platform/mac/css3/masking/clip-path-circle-filter-expected.txt: Added.
* platform/mac/css3/masking/clip-path-circle-overflow-expected.png: Added.
* platform/mac/css3/masking/clip-path-circle-overflow-expected.txt: Added.
* platform/mac/css3/masking/clip-path-circle-overflow-hidden-expected.png: Added.
* platform/mac/css3/masking/clip-path-circle-overflow-hidden-expected.txt: Added.
* platform/mac/css3/masking/clip-path-circle-relative-overflow-expected.png: Added.
* platform/mac/css3/masking/clip-path-circle-relative-overflow-expected.txt: Added.
* platform/mac/css3/masking/clip-path-ellipse-expected.png: Added.
* platform/mac/css3/masking/clip-path-ellipse-expected.txt: Added.
* platform/mac/css3/masking/clip-path-polygon-evenodd-expected.png: Added.
* platform/mac/css3/masking/clip-path-polygon-evenodd-expected.txt: Added.
* platform/mac/css3/masking/clip-path-polygon-expected.png: Added.
* platform/mac/css3/masking/clip-path-polygon-expected.txt: Added.
* platform/mac/css3/masking/clip-path-polygon-nonzero-expected.png: Added.
* platform/mac/css3/masking/clip-path-polygon-nonzero-expected.txt: Added.
* platform/mac/css3/masking/clip-path-rectangle-expected.png: Added.
* platform/mac/css3/masking/clip-path-rectangle-expected.txt: Added.

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

41 files changed:
LayoutTests/ChangeLog
LayoutTests/css3/masking/clip-path-circle-filter.html [new file with mode: 0644]
LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html [new file with mode: 0644]
LayoutTests/css3/masking/clip-path-circle-overflow.html [new file with mode: 0644]
LayoutTests/css3/masking/clip-path-circle-relative-overflow.html [new file with mode: 0644]
LayoutTests/css3/masking/clip-path-circle.html [new file with mode: 0644]
LayoutTests/css3/masking/clip-path-ellipse.html [new file with mode: 0644]
LayoutTests/css3/masking/clip-path-polygon-evenodd.html [new file with mode: 0644]
LayoutTests/css3/masking/clip-path-polygon-nonzero.html [new file with mode: 0644]
LayoutTests/css3/masking/clip-path-polygon.html [new file with mode: 0644]
LayoutTests/css3/masking/clip-path-rectangle.html [new file with mode: 0644]
LayoutTests/platform/chromium/TestExpectations
LayoutTests/platform/efl/TestExpectations
LayoutTests/platform/gtk/TestExpectations
LayoutTests/platform/mac/css3/masking/clip-path-circle-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-circle-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-circle-filter-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-circle-filter-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-hidden-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-hidden-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-circle-relative-overflow-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-circle-relative-overflow-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-ellipse-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-ellipse-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-polygon-evenodd-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-polygon-evenodd-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-polygon-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-polygon-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-polygon-nonzero-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-polygon-nonzero-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-rectangle-expected.png [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-rectangle-expected.txt [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBox.h
Source/WebCore/rendering/RenderBoxModelObject.h
Source/WebCore/rendering/RenderInline.h
Source/WebCore/rendering/RenderLayer.cpp
Source/WebCore/rendering/RenderObject.h
Source/WebCore/rendering/RenderTableRow.h

index 58e2d29..3353205 100644 (file)
@@ -1,3 +1,46 @@
+2012-09-01  Dirk Schulze  <krit@webkit.org>
+
+        Use -webkit-clip-path shapes to clip HTML elements
+        https://bugs.webkit.org/show_bug.cgi?id=95646
+
+        Reviewed by Dean Jackson.
+
+        Added new tests for the -webkit-clip-path property applied to HTML content.
+
+        * css3/masking/clip-path-circle-filter.html: Added.
+        * css3/masking/clip-path-circle-overflow.html: Added.
+        * css3/masking/clip-path-circle-relative-overflow.html: Added.
+        * css3/masking/clip-path-circle-overflow-hidden.html: Added.
+        * css3/masking/clip-path-circle.html: Added.
+        * css3/masking/clip-path-ellipse.html: Added.
+        * css3/masking/clip-path-polygon-evenodd.html: Added.
+        * css3/masking/clip-path-polygon-nonzero.html: Added.
+        * css3/masking/clip-path-polygon.html: Added.
+        * css3/masking/clip-path-rectangle.html: Added.
+        * platform/chromium/TestExpectations:
+        * platform/efl/TestExpectations:
+        * platform/gtk/TestExpectations:
+        * platform/mac/css3/masking/clip-path-circle-expected.png: Added.
+        * platform/mac/css3/masking/clip-path-circle-expected.txt: Added.
+        * platform/mac/css3/masking/clip-path-circle-filter-expected.png: Added.
+        * platform/mac/css3/masking/clip-path-circle-filter-expected.txt: Added.
+        * platform/mac/css3/masking/clip-path-circle-overflow-expected.png: Added.
+        * platform/mac/css3/masking/clip-path-circle-overflow-expected.txt: Added.
+        * platform/mac/css3/masking/clip-path-circle-overflow-hidden-expected.png: Added.
+        * platform/mac/css3/masking/clip-path-circle-overflow-hidden-expected.txt: Added.
+        * platform/mac/css3/masking/clip-path-circle-relative-overflow-expected.png: Added.
+        * platform/mac/css3/masking/clip-path-circle-relative-overflow-expected.txt: Added.
+        * platform/mac/css3/masking/clip-path-ellipse-expected.png: Added.
+        * platform/mac/css3/masking/clip-path-ellipse-expected.txt: Added.
+        * platform/mac/css3/masking/clip-path-polygon-evenodd-expected.png: Added.
+        * platform/mac/css3/masking/clip-path-polygon-evenodd-expected.txt: Added.
+        * platform/mac/css3/masking/clip-path-polygon-expected.png: Added.
+        * platform/mac/css3/masking/clip-path-polygon-expected.txt: Added.
+        * platform/mac/css3/masking/clip-path-polygon-nonzero-expected.png: Added.
+        * platform/mac/css3/masking/clip-path-polygon-nonzero-expected.txt: Added.
+        * platform/mac/css3/masking/clip-path-rectangle-expected.png: Added.
+        * platform/mac/css3/masking/clip-path-rectangle-expected.txt: Added.
+
 2012-09-05  Vincent Scheib  <scheib@chromium.org>
 
         webkitPointerLockElement returns null when pointer lock request is pending.
diff --git a/LayoutTests/css3/masking/clip-path-circle-filter.html b/LayoutTests/css3/masking/clip-path-circle-filter.html
new file mode 100644 (file)
index 0000000..bf5f0c2
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+div {
+    width: 200px;
+    height: 200px;
+    background-color: green;
+    -webkit-filter: blur(5px);
+    -webkit-clip-path: circle(100px, 100px, 90px);
+}
+</style>
+</head>
+<body>
+<div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html b/LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html
new file mode 100644 (file)
index 0000000..c326af3
--- /dev/null
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <style>
+ .parent {
+       width: 200px;
+       height: 200px;
+       overflow: hidden;
+       -webkit-clip-path: circle(100px, 100px, 100px);
+ }
+ .child {
+       height: 400px;
+       width: 200px;
+       margin:0;
+       padding:0;
+       background-color: green;
+ }
+</style>
+</head>
+<body>
+<div class="parent">
+<div class="child"></div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css3/masking/clip-path-circle-overflow.html b/LayoutTests/css3/masking/clip-path-circle-overflow.html
new file mode 100644 (file)
index 0000000..43ec33e
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+div {
+    width: 200px;
+    height: 200px;
+    background-color: green;
+    border: 20px solid black;
+    -webkit-clip-path: circle(130px, 130px, 130px);
+}
+</style>
+</head>
+<body>
+<div><div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css3/masking/clip-path-circle-relative-overflow.html b/LayoutTests/css3/masking/clip-path-circle-relative-overflow.html
new file mode 100644 (file)
index 0000000..21dfeda
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+div {
+    width: 200px;
+    height: 200px;
+    background-color: green;
+    border: 20px solid black;
+    -webkit-clip-path: circle(50%, 50%, 50%);
+}
+</style>
+</head>
+<body>
+<div><div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css3/masking/clip-path-circle.html b/LayoutTests/css3/masking/clip-path-circle.html
new file mode 100644 (file)
index 0000000..16ce4fe
--- /dev/null
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+div {
+    width: 200px;
+    height: 200px;
+    background-color: green;
+    -webkit-clip-path: circle(100px, 100px, 100px);
+}
+</style>
+</head>
+<body>
+<div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css3/masking/clip-path-ellipse.html b/LayoutTests/css3/masking/clip-path-ellipse.html
new file mode 100644 (file)
index 0000000..eabb993
--- /dev/null
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+div {
+    width: 200px;
+    height: 200px;
+    background-color: green;
+    -webkit-clip-path: ellipse(100px, 100px, 100px, 75px);
+}
+</style>
+</head>
+<body>
+<div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css3/masking/clip-path-polygon-evenodd.html b/LayoutTests/css3/masking/clip-path-polygon-evenodd.html
new file mode 100644 (file)
index 0000000..2736bd0
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+div {
+    width: 200px;
+    height: 200px;
+
+    background-color: green;
+    -webkit-clip-path: polygon(evenodd, 10px 75px, 180px 180px, 100px 10px, 10px 180px, 180px 75px, 10px 75px);
+}
+</style>
+</head>
+<body>
+<div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css3/masking/clip-path-polygon-nonzero.html b/LayoutTests/css3/masking/clip-path-polygon-nonzero.html
new file mode 100644 (file)
index 0000000..aa1a4e8
--- /dev/null
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+div {
+    width: 200px;
+    height: 200px;
+    background-color: green;
+    -webkit-clip-path: polygon(nonzero, 10px 75px, 180px 180px, 100px 10px, 10px 180px, 180px 75px, 10px 75px);
+}
+</style>
+</head>
+<body>
+<div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css3/masking/clip-path-polygon.html b/LayoutTests/css3/masking/clip-path-polygon.html
new file mode 100644 (file)
index 0000000..ee333b0
--- /dev/null
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+div {
+    width: 200px;
+    height: 200px;
+    background-color: green;
+    -webkit-clip-path: polygon(10px 75px, 180px 180px, 100px 10px, 10px 180px, 180px 75px, 10px 75px);
+}
+</style>
+</head>
+<body>
+<div>
+</body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/css3/masking/clip-path-rectangle.html b/LayoutTests/css3/masking/clip-path-rectangle.html
new file mode 100644 (file)
index 0000000..df869dd
--- /dev/null
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+div {
+    width: 180px;
+    height: 180px;
+    background-color: green;
+    border: 10px solid black;
+    -webkit-clip-path: rectangle(0, 0, 200px, 200px, 100px, 100px);
+}
+</style>
+</head>
+<body>
+<div>
+</body>
+</html>
\ No newline at end of file
index 98e49d7..61ce393 100644 (file)
@@ -3576,6 +3576,18 @@ BUGWK80394 MAC WIN : fast/block/float/024.html = IMAGE+TEXT
 BUGWK80394 MAC WIN : fast/block/margin-collapse/025.html = TEXT
 BUGWK80394 MAC WIN : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
 
+// Following tests need baselines on Mac, Win and Linux  
+BUGWK95646 MAC WIN LINUX : css3/masking/clip-path-circle.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 MAC WIN LINUX : css3/masking/clip-path-ellipse.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 MAC WIN LINUX : css3/masking/clip-path-rectangle.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 MAC WIN LINUX : css3/masking/clip-path-polygon.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 MAC WIN LINUX : css3/masking/clip-path-polygon-evenodd.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 MAC WIN LINUX : css3/masking/clip-path-polygon-nonzero.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 MAC WIN LINUX : css3/masking/clip-path-circle-filter.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 MAC WIN LINUX : css3/masking/clip-path-circle-overflow.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 MAC WIN LINUX : css3/masking/clip-path-circle-relative-overflow.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 MAC WIN LINUX : css3/masking/clip-path-circle-overflow-hidden.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+
 // Does not yet support new web notifications TestRunner API
 BUGWK95506 SKIP : http/tests/notifications = PASS
 
index 87a3fca..14dafb1 100644 (file)
@@ -1079,6 +1079,18 @@ BUGWK80394 : fast/block/margin-collapse/block-inside-inline/025.html = TEXT
 // Started failing on JSC ports after r127202.
 BUGWK95530 : http/tests/security/inactive-document-with-empty-security-origin.html = TEXT
 
+// Following tests need baselines
+BUGWK95646 : css3/masking/clip-path-circle.html = MISSING 
+BUGWK95646 : css3/masking/clip-path-ellipse.html = MISSING 
+BUGWK95646 : css3/masking/clip-path-rectangle.html = MISSING 
+BUGWK95646 : css3/masking/clip-path-polygon.html = MISSING 
+BUGWK95646 : css3/masking/clip-path-polygon-evenodd.html = MISSING 
+BUGWK95646 : css3/masking/clip-path-polygon-nonzero.html = MISSING 
+BUGWK95646 : css3/masking/clip-path-circle-filter.html = MISSING 
+BUGWK95646 : css3/masking/clip-path-circle-overflow.html = MISSING 
+BUGWK95646 : css3/masking/clip-path-circle-relative-overflow.html = MISSING 
+BUGWK95646 : css3/masking/clip-path-circle-overflow-hidden.html = MISSING 
+
 // Fails after r127140.
 BUGWK95551 : fast/forms/datalist/input-appearance-range-with-datalist-rtl.html = IMAGE
 
index 522dbf3..df24263 100644 (file)
@@ -1300,6 +1300,18 @@ BUGWK95530 : http/tests/security/inactive-document-with-empty-security-origin.ht
 
 BUGWK95825 : accessibility/canvas-description-and-role.html = TEXT
 
+// Following tests need baselines
+BUGWK95646 : css3/masking/clip-path-circle.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 : css3/masking/clip-path-ellipse.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 : css3/masking/clip-path-rectangle.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 : css3/masking/clip-path-polygon.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 : css3/masking/clip-path-polygon-evenodd.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 : css3/masking/clip-path-polygon-nonzero.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 : css3/masking/clip-path-circle-filter.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 : css3/masking/clip-path-circle-overflow.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 : css3/masking/clip-path-circle-relative-overflow.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+BUGWK95646 : css3/masking/clip-path-circle-overflow-hidden.html = PASS IMAGE IMAGE+TEXT TEXT MISSING 
+
 //////////////////////////////////////////////////////////////////////////////////////////
 // End of Tests failing
 //////////////////////////////////////////////////////////////////////////////////////////
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-expected.png b/LayoutTests/platform/mac/css3/masking/clip-path-circle-expected.png
new file mode 100644 (file)
index 0000000..48b07b8
Binary files /dev/null and b/LayoutTests/platform/mac/css3/masking/clip-path-circle-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-expected.txt b/LayoutTests/platform/mac/css3/masking/clip-path-circle-expected.txt
new file mode 100644 (file)
index 0000000..5146ce4
--- /dev/null
@@ -0,0 +1,7 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x216
+  RenderBlock {HTML} at (0,0) size 800x216
+    RenderBody {BODY} at (8,8) size 784x200
+layer at (8,8) size 200x200
+  RenderBlock {DIV} at (0,0) size 200x200 [bgcolor=#008000]
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-filter-expected.png b/LayoutTests/platform/mac/css3/masking/clip-path-circle-filter-expected.png
new file mode 100644 (file)
index 0000000..599c33c
Binary files /dev/null and b/LayoutTests/platform/mac/css3/masking/clip-path-circle-filter-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-filter-expected.txt b/LayoutTests/platform/mac/css3/masking/clip-path-circle-filter-expected.txt
new file mode 100644 (file)
index 0000000..5146ce4
--- /dev/null
@@ -0,0 +1,7 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x216
+  RenderBlock {HTML} at (0,0) size 800x216
+    RenderBody {BODY} at (8,8) size 784x200
+layer at (8,8) size 200x200
+  RenderBlock {DIV} at (0,0) size 200x200 [bgcolor=#008000]
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-expected.png b/LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-expected.png
new file mode 100644 (file)
index 0000000..0037321
Binary files /dev/null and b/LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-expected.txt b/LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-expected.txt
new file mode 100644 (file)
index 0000000..7f7791e
--- /dev/null
@@ -0,0 +1,9 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x256
+  RenderBlock {HTML} at (0,0) size 800x256
+    RenderBody {BODY} at (8,8) size 784x240
+layer at (8,8) size 240x240
+  RenderBlock {DIV} at (0,0) size 240x240 [bgcolor=#008000] [border: (20px solid #000000)]
+layer at (28,28) size 240x240
+  RenderBlock {DIV} at (20,20) size 240x240 [border: (20px solid #000000)]
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-hidden-expected.png b/LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-hidden-expected.png
new file mode 100644 (file)
index 0000000..48b07b8
Binary files /dev/null and b/LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-hidden-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-hidden-expected.txt b/LayoutTests/platform/mac/css3/masking/clip-path-circle-overflow-hidden-expected.txt
new file mode 100644 (file)
index 0000000..f3bac43
--- /dev/null
@@ -0,0 +1,8 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x216
+  RenderBlock {HTML} at (0,0) size 800x216
+    RenderBody {BODY} at (8,8) size 784x200
+layer at (8,8) size 200x200 scrollHeight 400
+  RenderBlock {DIV} at (0,0) size 200x200
+    RenderBlock {DIV} at (0,0) size 200x400 [bgcolor=#008000]
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-relative-overflow-expected.png b/LayoutTests/platform/mac/css3/masking/clip-path-circle-relative-overflow-expected.png
new file mode 100644 (file)
index 0000000..a23a5e7
Binary files /dev/null and b/LayoutTests/platform/mac/css3/masking/clip-path-circle-relative-overflow-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-relative-overflow-expected.txt b/LayoutTests/platform/mac/css3/masking/clip-path-circle-relative-overflow-expected.txt
new file mode 100644 (file)
index 0000000..7f7791e
--- /dev/null
@@ -0,0 +1,9 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x256
+  RenderBlock {HTML} at (0,0) size 800x256
+    RenderBody {BODY} at (8,8) size 784x240
+layer at (8,8) size 240x240
+  RenderBlock {DIV} at (0,0) size 240x240 [bgcolor=#008000] [border: (20px solid #000000)]
+layer at (28,28) size 240x240
+  RenderBlock {DIV} at (20,20) size 240x240 [border: (20px solid #000000)]
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-ellipse-expected.png b/LayoutTests/platform/mac/css3/masking/clip-path-ellipse-expected.png
new file mode 100644 (file)
index 0000000..fb9a606
Binary files /dev/null and b/LayoutTests/platform/mac/css3/masking/clip-path-ellipse-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-ellipse-expected.txt b/LayoutTests/platform/mac/css3/masking/clip-path-ellipse-expected.txt
new file mode 100644 (file)
index 0000000..5146ce4
--- /dev/null
@@ -0,0 +1,7 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x216
+  RenderBlock {HTML} at (0,0) size 800x216
+    RenderBody {BODY} at (8,8) size 784x200
+layer at (8,8) size 200x200
+  RenderBlock {DIV} at (0,0) size 200x200 [bgcolor=#008000]
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-polygon-evenodd-expected.png b/LayoutTests/platform/mac/css3/masking/clip-path-polygon-evenodd-expected.png
new file mode 100644 (file)
index 0000000..4cb538c
Binary files /dev/null and b/LayoutTests/platform/mac/css3/masking/clip-path-polygon-evenodd-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-polygon-evenodd-expected.txt b/LayoutTests/platform/mac/css3/masking/clip-path-polygon-evenodd-expected.txt
new file mode 100644 (file)
index 0000000..5146ce4
--- /dev/null
@@ -0,0 +1,7 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x216
+  RenderBlock {HTML} at (0,0) size 800x216
+    RenderBody {BODY} at (8,8) size 784x200
+layer at (8,8) size 200x200
+  RenderBlock {DIV} at (0,0) size 200x200 [bgcolor=#008000]
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-polygon-expected.png b/LayoutTests/platform/mac/css3/masking/clip-path-polygon-expected.png
new file mode 100644 (file)
index 0000000..5b77f05
Binary files /dev/null and b/LayoutTests/platform/mac/css3/masking/clip-path-polygon-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-polygon-expected.txt b/LayoutTests/platform/mac/css3/masking/clip-path-polygon-expected.txt
new file mode 100644 (file)
index 0000000..5146ce4
--- /dev/null
@@ -0,0 +1,7 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x216
+  RenderBlock {HTML} at (0,0) size 800x216
+    RenderBody {BODY} at (8,8) size 784x200
+layer at (8,8) size 200x200
+  RenderBlock {DIV} at (0,0) size 200x200 [bgcolor=#008000]
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-polygon-nonzero-expected.png b/LayoutTests/platform/mac/css3/masking/clip-path-polygon-nonzero-expected.png
new file mode 100644 (file)
index 0000000..5b77f05
Binary files /dev/null and b/LayoutTests/platform/mac/css3/masking/clip-path-polygon-nonzero-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-polygon-nonzero-expected.txt b/LayoutTests/platform/mac/css3/masking/clip-path-polygon-nonzero-expected.txt
new file mode 100644 (file)
index 0000000..5146ce4
--- /dev/null
@@ -0,0 +1,7 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x216
+  RenderBlock {HTML} at (0,0) size 800x216
+    RenderBody {BODY} at (8,8) size 784x200
+layer at (8,8) size 200x200
+  RenderBlock {DIV} at (0,0) size 200x200 [bgcolor=#008000]
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-rectangle-expected.png b/LayoutTests/platform/mac/css3/masking/clip-path-rectangle-expected.png
new file mode 100644 (file)
index 0000000..25c9d06
Binary files /dev/null and b/LayoutTests/platform/mac/css3/masking/clip-path-rectangle-expected.png differ
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-rectangle-expected.txt b/LayoutTests/platform/mac/css3/masking/clip-path-rectangle-expected.txt
new file mode 100644 (file)
index 0000000..7b18c99
--- /dev/null
@@ -0,0 +1,7 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x216
+  RenderBlock {HTML} at (0,0) size 800x216
+    RenderBody {BODY} at (8,8) size 784x200
+layer at (8,8) size 200x200
+  RenderBlock {DIV} at (0,0) size 200x200 [bgcolor=#008000] [border: (10px solid #000000)]
index 4b6d027..46a7697 100644 (file)
@@ -1,3 +1,36 @@
+2012-09-01  Dirk Schulze  <krit@webkit.org>
+
+        Use -webkit-clip-path shapes to clip HTML elements
+        https://bugs.webkit.org/show_bug.cgi?id=95646
+
+        Reviewed by Dean Jackson.
+
+        -webkit-clip-path creates a new layer for HTML elements now. The border,
+        background and content gets clipped by the clip path after any filter was
+        applied.
+
+        Tests: css3/masking/clip-path-circle-filter.html
+               css3/masking/clip-path-circle-overflow.html
+               css3/masking/clip-path-circle-overflow-hidden.html
+               css3/masking/clip-path-circle-relative-overflow.html
+               css3/masking/clip-path-circle.html
+               css3/masking/clip-path-ellipse.html
+               css3/masking/clip-path-polygon-evenodd.html
+               css3/masking/clip-path-polygon-nonzero.html
+               css3/masking/clip-path-polygon.html
+               css3/masking/clip-path-rectangle.html
+
+        * rendering/RenderBox.h: Create new layer on clip-path.
+        * rendering/RenderBoxModelObject.h:
+        (WebCore::RenderBoxModelObject::requiresLayer): Create new layer on clip-path.
+        * rendering/RenderInline.h:
+        (WebCore::RenderInline::requiresLayer): Create new layer on clip-path.
+        * rendering/RenderLayer.cpp: Apply clip-path on context of object.
+        (WebCore::RenderLayer::paintLayerContents): Create new layer on clip-path.
+        * rendering/RenderObject.h:
+        (WebCore::RenderObject::hasClipPath): Indicates that renderer needs to be clipped by clip-path.
+        * rendering/RenderTableRow.h: Create new layer on clip-path.
+
 2012-09-05  Kangil Han  <kangil.han@samsung.com>
 
         [EFL] Use explicit constructor in RenderThemeEfl.
index 5b45ea4..8b78a6b 100644 (file)
@@ -44,7 +44,7 @@ public:
 
     // hasAutoZIndex only returns true if the element is positioned or a flex-item since
     // position:static elements that are not flex-items get their z-index coerced to auto.
-    virtual bool requiresLayer() const OVERRIDE { return isRoot() || isPositioned() || createsGroup() || hasOverflowClip() || hasTransform() || hasHiddenBackface() || hasReflection() || style()->specifiesColumns() || !style()->hasAutoZIndex(); }
+    virtual bool requiresLayer() const OVERRIDE { return isRoot() || isPositioned() || createsGroup() || hasClipPath() || hasOverflowClip() || hasTransform() || hasHiddenBackface() || hasReflection() || style()->specifiesColumns() || !style()->hasAutoZIndex(); }
 
     // Use this with caution! No type checking is done!
     RenderBox* firstChildBox() const;
index d676851..fa606ae 100644 (file)
@@ -87,7 +87,7 @@ public:
     bool hasSelfPaintingLayer() const;
     RenderLayer* layer() const { return m_layer; }
 
-    virtual bool requiresLayer() const { return isRoot() || isPositioned() || createsGroup() || hasTransform() || hasHiddenBackface() || hasReflection() || style()->specifiesColumns(); }
+    virtual bool requiresLayer() const { return isRoot() || isPositioned() || createsGroup() || hasClipPath() || hasTransform() || hasHiddenBackface() || hasReflection() || style()->specifiesColumns(); }
 
     // This will work on inlines to return the bounding box of all of the lines' border boxes.
     virtual IntRect borderBoundingBox() const = 0;
index 39ad1b3..4a5bb09 100644 (file)
@@ -124,7 +124,7 @@ private:
 
     virtual bool nodeAtPoint(const HitTestRequest&, HitTestResult&, const HitTestLocation& locationInContainer, const LayoutPoint& accumulatedOffset, HitTestAction) OVERRIDE;
 
-    virtual bool requiresLayer() const { return isInFlowPositioned() || createsGroup(); }
+    virtual bool requiresLayer() const { return isInFlowPositioned() || createsGroup() || hasClipPath(); }
 
     virtual LayoutUnit offsetLeft() const;
     virtual LayoutUnit offsetTop() const;
index da70d75..08facdd 100644 (file)
@@ -3123,6 +3123,18 @@ void RenderLayer::paintLayerContents(RenderLayer* rootLayer, GraphicsContext* co
     // Ensure our lists are up-to-date.
     updateLayerListsIfNeeded();
 
+    // Apply clip-path to context.
+    RenderStyle* style = renderer()->style();
+    if (renderer()->hasClipPath() && !context->paintingDisabled() && style) {
+        if (BasicShape* clipShape = style->clipPath()) {
+            // FIXME: Investigate if it is better to store and update a Path object in RenderStyle.
+            // https://bugs.webkit.org/show_bug.cgi?id=95619
+            Path clipPath;
+            clipShape->path(clipPath, calculateLayerBounds(this, rootLayer, 0));
+            transparencyLayerContext->clipPath(clipPath, clipShape->windRule());
+        }
+    }
+
 #if ENABLE(CSS_FILTERS)
     FilterEffectRendererHelper filterPainter(filterRenderer() && paintsWithFilters());
     if (filterPainter.haveFilterEffect() && !context->paintingDisabled()) {
@@ -4820,6 +4832,7 @@ bool RenderLayer::shouldBeNormalFlowOnly() const
                 || (renderer()->style()->specifiesColumns() && !isRootLayer()))
             && !renderer()->isPositioned()
             && !renderer()->hasTransform()
+            && !renderer()->hasClipPath()
 #if ENABLE(CSS_FILTERS)
             && !renderer()->hasFilter()
 #endif
index 22b8300..00035a3 100644 (file)
@@ -559,6 +559,7 @@ public:
 
     bool hasTransform() const { return m_bitfields.hasTransform(); }
     bool hasMask() const { return style() && style()->hasMask(); }
+    bool hasClipPath() const { return style() && style()->clipPath(); }
     bool hasHiddenBackface() const { return style() && style()->backfaceVisibility() == BackfaceVisibilityHidden; }
 
 #if ENABLE(CSS_FILTERS)
index ef3f94a..0136c58 100644 (file)
@@ -97,7 +97,7 @@ private:
     virtual LayoutRect clippedOverflowRectForRepaint(RenderBoxModelObject* repaintContainer) const;
     virtual bool nodeAtPoint(const HitTestRequest&, HitTestResult&, const HitTestLocation& locationInContainer, const LayoutPoint& accumulatedOffset, HitTestAction) OVERRIDE;
 
-    virtual bool requiresLayer() const OVERRIDE { return hasOverflowClip() || hasTransform() || hasHiddenBackface() || createsGroup(); }
+    virtual bool requiresLayer() const OVERRIDE { return hasOverflowClip() || hasTransform() || hasHiddenBackface() || hasClipPath() || createsGroup(); }
 
     virtual void paint(PaintInfo&, const LayoutPoint&);