<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>