src/third_party/WebKit/PerformanceTests/Layout/Shapes/resources/MultipleShapes.css

   1 html, body {
   2     padding: 0;
   3     margin: 0;
   4     text-align: justify;
   5     font-family: Palatino, Georgia, serif;
   6     font-size: 10px;
   7     -webkit-hyphens: auto;
   8     text-align: justify;
   9     line-height: 1.2em;
  10 }
  11
  12 .shape {
  13     width: 100px;
  14     height: 100px;
  15 }
  16
  17 #circleShape {
  18     float: left;
  19     shape-outside: circle(closest-side at center);
  20     margin: 2px;
  21     -webkit-clip-path: circle(closest-side at center);
  22     background-color: green;
  23 }
  24
  25 #imageShape {
  26     float: left;
  27     background: url("shape.gif") no-repeat;
  28     shape-outside: url("shape.gif");
  29     shape-margin: 2px;
  30     width: 200px;
  31     height: 200px;
  32 }
  33
  34 #insetShape {
  35     float: right;
  36     shape-outside: inset(5px);
  37     -webkit-clip-path: inset(5px);
  38     shape-margin: 4px;
  39     background-color: red;
  40     border: 1px solid black;
  41 }
  42
  43 #roundedInsetShape {
  44     float: right;
  45     shape-outside: inset(5px round 64px 32px 16px 36px);
  46     -webkit-clip-path: inset(5px round 64px 32px 16px 36px);
  47     shape-margin: 4px;
  48     background-color: lightblue;
  49     opacity: 0.4;
  50     border: 1px solid black;
  51 }
  52
  53 #triangleLeft {
  54     float: left;
  55     shape-outside: polygon(0 0, 100% 50%, 0 100%);
  56     -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
  57     shape-margin: 4px;
  58     background-color: yellow;
  59     opacity: 0.4;
  60 }
  61
  62 #triangleRight {
  63     float: right;
  64     shape-outside: polygon(100% 0, 0 50%, 100% 100%);
  65     -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
  66     shape-margin: 4px;
  67     background-color: orange;
  68 }
  69
  70 #selfIntersectingStar {
  71     float: left;
  72     shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
  73     -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
  74     shape-margin: 4px;
  75     background-color: blue;
  76     width: 100px;
  77     height: 200px;
  78 }
  79
  80 #region1 { width: 40%; }
  81 #region2 { width: 22%; }
  82 #region3 { width: 22%; }