<!DOCTYPE html>
<html>
    <head>
        <style>
            .table
            {
                border: 20px solid black;
                color: green;
                display: table;
                font: 10px/1em Ahem;
                height: 4em;
                overflow: hidden;
                table-layout: fixed;
                width: 5em;
                border-collapse: collapse;
            }
            .row
            {
                display: table-row;
            }
            .tbody
            {
                display: table-row-group;
            }
            .cell
            {
                display: table-cell;
                white-space: nowrap;
            }
            .span2
            {
                color: blue;
            }
            .layer
            {
                opacity: 0.9;
            }
            .self-painting-layer
            {
                -webkit-mask:-webkit-gradient(linear, left top, left bottom, from(#E7E7E7), to(#CFCFCF));
            }


        </style>
    </head>
    <body>
        <!-- webkit.org/b/18305:  The blue bar should intrude halfway into the right-hand border. This tests that overflow:hidden on a table
             still allows overflowing content to spill onto the cell's half of a collapsed border.-->
        <div class="table">
            <div class="tbody">
              <div class="row">
                <div class="cell"><span class="span2">XXXXXXX</span></div>
              </div>
            </div>
        </div>
        <div class="table">
            <div class="tbody">
              <div class="row">
                <div class="cell self-painting-layer"><span class="span2">XXXXXXX</span></div>
              </div>
            </div>
        </div>
        <div class="table">
            <div class="tbody">
              <div class="row">
                <div class="cell layer"><span class="span2">XXXXXXX</span></div>
              </div>
            </div>
        </div>
        <div class="table">
            <div class="tbody">
              <div class="row">
                <div class="cell"><span class="span2 self-painting-layer">XXXXXXX</span></div>
              </div>
            </div>
        </div>
        <div class="table">
            <div class="tbody">
              <div class="row">
                <div class="cell"><span class="span2 layer">XXXXXXX</span></div>
              </div>
            </div>
        </div>
        <div class="table">
            <div class="tbody">
              <div class="row">
                <div class="cell self-painting-layer"><span class="span2 layer">XXXXXXX</span></div>
              </div>
            </div>
        </div>
        <div class="table">
            <div class="tbody">
              <div class="row">
                <div class="cell self-painting-layer"><span class="span2 self-painting-layer">XXXXXXX</span></div>
              </div>
            </div>
        </div>
        <div class="table">
            <div class="tbody">
              <div class="row">
                <div class="cell layer"><span class="span2 self-painting-layer">XXXXXXX</span></div>
              </div>
            </div>
        </div>
        <div class="table">
            <div class="tbody">
              <div class="row">
                <div class="cell layer"><span class="span2 layer">XXXXXXX</span></div>
              </div>
            </div>
        </div>
    </body>
</html>
