Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(82)

Unified Diff: PerformanceTests/Layout/Shapes/resources/MultipleShapes.css

Issue 231943002: [CSS Shapes] Add regions like performance test (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rename to MultipleShapes Created 6 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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%; }

Powered by Google App Engine
This is Rietveld 408576698