Index: PerformanceTests/Layout/Shapes/resources/MultipleShapes.css |
diff --git a/PerformanceTests/Layout/Shapes/resources/MultipleShapes.css b/PerformanceTests/Layout/Shapes/resources/MultipleShapes.css |
new file mode 100644 |
index 0000000000000000000000000000000000000000..c6fdbda761d1ceb96391311926fe6374907e5ea9 |
--- /dev/null |
+++ b/PerformanceTests/Layout/Shapes/resources/MultipleShapes.css |
@@ -0,0 +1,82 @@ |
+html, body { |
+ padding: 0; |
+ margin: 0; |
+ text-align: justify; |
+ font-family: Palatino, Georgia, serif; |
+ font-size: 10px; |
+ -webkit-hyphens: auto; |
+ text-align: justify; |
+ line-height: 1.2em; |
+} |
+ |
+.shape { |
+ width: 100px; |
+ height: 100px; |
+} |
+ |
+#circleShape { |
+ float: left; |
+ shape-outside: circle(closest-side at center); |
+ margin: 2px; |
+ -webkit-clip-path: circle(closest-side at center); |
+ background-color: green; |
+} |
+ |
+#imageShape { |
+ float: left; |
+ background: url("shape.gif") no-repeat; |
+ shape-outside: url("shape.gif"); |
+ shape-margin: 2px; |
+ width: 200px; |
+ height: 200px; |
+} |
+ |
+#insetShape { |
+ float: right; |
+ shape-outside: inset(5px); |
+ -webkit-clip-path: inset(5px); |
+ shape-margin: 4px; |
+ background-color: red; |
+ border: 1px solid black; |
+} |
+ |
+#roundedInsetShape { |
+ float: right; |
+ shape-outside: inset(5px round 64px 32px 16px 36px); |
+ -webkit-clip-path: inset(5px round 64px 32px 16px 36px); |
+ shape-margin: 4px; |
+ background-color: lightblue; |
+ opacity: 0.4; |
+ border: 1px solid black; |
+} |
+ |
+#triangleLeft { |
+ float: left; |
+ shape-outside: polygon(0 0, 100% 50%, 0 100%); |
+ -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%); |
+ shape-margin: 4px; |
+ background-color: yellow; |
+ opacity: 0.4; |
+} |
+ |
+#triangleRight { |
+ float: right; |
+ shape-outside: polygon(100% 0, 0 50%, 100% 100%); |
+ -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%); |
+ shape-margin: 4px; |
+ background-color: orange; |
+} |
+ |
+#selfIntersectingStar { |
+ float: left; |
+ shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%); |
+ -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%); |
+ shape-margin: 4px; |
+ background-color: blue; |
+ width: 100px; |
+ height: 200px; |
+} |
+ |
+#region1 { width: 40%; } |
+#region2 { width: 22%; } |
+#region3 { width: 22%; } |