chromium/src/third_party/blink/web_tests/fast/shapes/shape-outside-floats/shape-outside-boxes-styles.css

.container {
    width: 70px;
    height: 70px;
    color: green;
    background-color: red;
    font: 10px/1 Ahem, sans-serif;
    margin: 10px;
    overflow: hidden;
}

.container-expected {
    width: 70px;
    height: 70px;
    background-color: green;
    margin: 10px;
}

.container::before {
    display: block;
    background-color: green;
    float: left;
    width: 10px;
    height: 10px;
    padding: 10px;
    border: 10px solid transparent;
    margin: 10px;
    color: transparent;
    content: ' ';
}

/* various box model boxes */
.content-box::before {
    shape-outside: content-box;
    background-clip: content-box;
}
.content-box::after {
    content: 'xxxxxxx xxxxxxx xxxxxxx xxxxxx xxxxxxx xxxxxxx xxxxxxx';
}

.padding-box::before {
    shape-outside: padding-box;
    background-clip: padding-box;
}
.padding-box::after {
    content: 'xxxxxxx xxxxxxx xxxxx xxxxx xxxxx xxxxxxx xxxxxxx';
}

.border-box::before {
    shape-outside: border-box;
    background-clip: border-box;
}
.border-box::after {
    content: 'xxxxxxx xxxx xxxx xxxx xxxx xxxx xxxxxxx';
}

.margin-box::before {
    shape-outside: margin-box;
}
/* simulate background-clip: margin-box; */
.margin-box {
    background: -webkit-linear-gradient(green, green);
}
.margin-box::after {
    content: 'xxx xxx xxx xxx xxx xxx xxx';
}

/* writing mode adjustments */
.horizontal-tb {
    -webkit-writing-mode: horizontal-tb;
    background-size: 50% 100%;
}
.horizontal-tb::before {
    margin-left: -20px;
}

.vertical-lr {
    -webkit-writing-mode: vertical-lr;
    background-size: 100% 50%;
}
.vertical-lr::before {
    margin-top: -20px;
}

.vertical-rl {
    -webkit-writing-mode: vertical-rl;
    background-size: 100% 50%;
}
.vertical-rl::before {
    margin-top: -20px;
}