chromium/third_party/blink/web_tests/fast/css-generated-content/table-parts-before-and-after.html

<script src="../../resources/ahem.js"></script>
<style>
    body {
        font-family: Ahem;
        font-size: 40px;
        -webkit-font-smoothing: none;
    }

    div::before {
        content: "1";
    }

    div.table-before::before {
        display: table;
    }

    div.row-group-before::before {
        display: table-row-group;
    }

    div.row-before::before {
        display: table-row;
    }

    div::after {
        content: "333";
        display: table-cell;
    }
</style>
<div class="table-before">22</div>
<div id="target-1" class="table-before">22</div>
<div class="row-group-before">22</div>
<div id="target-2" class="row-group-before">22</div>
<div class="row-before">22</div>
<div id="target-3" class="row-before">22</div>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
runAfterLayoutAndPaint(function() {
    document.getElementById("target-1").style.color = "blue";
    document.getElementById("target-2").style.color = "blue";
    document.getElementById("target-3").style.color = "blue";
}, true);
</script>