dynamic-apply-after-for-inline.html

<!doctype html>
<html>
<head>
<style>
ul {
  display:inline;
}
ul.closed * {
  display:none;
}
ul::before {
  content: 'before';
}
ul::after {
  content: 'after';
}
</style>
<script>
function toggle(ul) {
    if (ul.className !== 'closed') {
        ul.className = 'closed';
    } else {
        ul.className = '';
    }
    document.body.offsetLeft;
}

function runTest() {
    var button = document.getElementById("toggle");
    var ul = document.querySelectorAll('ul')[0];
    toggle(ul);
    toggle(ul);
    toggle(ul);
    toggle(ul);
    toggle(ul);
    toggle(ul);
    toggle(ul);
    toggle(ul);
}
</script>
</head>
<body onload="runTest()">
<!-- [bug 93170] http://bugs.webkit.org/show_bug.cgi?id=91370 -->
<!-- Dynamically apply / not apply :after to inline elements. -->
<!-- If test passes, only 1 'before' and 1 'after' are shown. -->
  <ul><li>1</li><li>2</li><li>3</li></ul>
</body>
</html>

chromium/third_party/blink/web_tests/fast/css-generated-content/dynamic-apply-after-for-inline.html