third_party/WebKit/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-boxes-styles.css

   1 .container {
   2     width: 70px;
   3     height: 70px;
   4     color: green;
   5     background-color: red;
   6     font: 10px/1 Ahem, sans-serif;
   7     margin: 10px;
   8     overflow: hidden;
   9 }
  10
  11 .container-expected {
  12     width: 70px;
  13     height: 70px;
  14     background-color: green;
  15     margin: 10px;
  16 }
  17
  18 .container::before {
  19     display: block;
  20     background-color: green;
  21     float: left;
  22     width: 10px;
  23     height: 10px;
  24     padding: 10px;
  25     border: 10px solid transparent;
  26     margin: 10px;
  27     color: transparent;
  28     content: ' ';
  29 }
  30
  31 /* various box model boxes */
  32 .content-box::before {
  33     shape-outside: content-box;
  34     background-clip: content-box;
  35 }
  36 .content-box::after {
  37     content: 'xxxxxxx xxxxxxx xxxxxxx xxxxxx xxxxxxx xxxxxxx xxxxxxx';
  38 }
  39
  40 .padding-box::before {
  41     shape-outside: padding-box;
  42     background-clip: padding-box;
  43 }
  44 .padding-box::after {
  45     content: 'xxxxxxx xxxxxxx xxxxx xxxxx xxxxx xxxxxxx xxxxxxx';
  46 }
  47
  48 .border-box::before {
  49     shape-outside: border-box;
  50     background-clip: border-box;
  51 }
  52 .border-box::after {
  53     content: 'xxxxxxx xxxx xxxx xxxx xxxx xxxx xxxxxxx';
  54 }
  55
  56 .margin-box::before {
  57     shape-outside: margin-box;
  58 }
  59 /* simulate background-clip: margin-box; */
  60 .margin-box {
  61     background: -webkit-linear-gradient(green, green);
  62 }
  63 .margin-box::after {
  64     content: 'xxx xxx xxx xxx xxx xxx xxx';
  65 }
  66
  67 /* writing mode adjustments */
  68 .horizontal-tb {
  69     -webkit-writing-mode: horizontal-tb;
  70     background-size: 50% 100%;
  71 }
  72 .horizontal-tb::before {
  73     margin-left: -20px;
  74 }
  75
  76 .vertical-lr {
  77     -webkit-writing-mode: vertical-lr;
  78     background-size: 100% 50%;
  79 }
  80 .vertical-lr::before {
  81     margin-top: -20px;
  82 }
  83
  84 .vertical-rl {
  85     -webkit-writing-mode: vertical-rl;
  86     background-size: 100% 50%;
  87 }
  88 .vertical-rl::before {
  89     margin-top: -20px;
  90 }