<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.resultsDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    -moz-column-width: 13em;
    -moz-column-gap: 5em;
    -webkit-columns:1 1px; /* Make as many (overflowing) columns as necessary, but keep them as narrow as possible */
    -webkit-column-gap: 5em;
    columns:1 1px;
    column-gap: 5em;
    column-fill: auto;
    height: 400px;
}
</style>
<div>This table shows unicode-bidi: isolate behavior (in red) with display: inline-block behavior overlapping in green.  You should see no red in this test!  Behavior between these two methods should be identical for non-wrapping strings, assuming unicode-bidi: isolate is implemented and functioning correctly.</div>

<div id="resultsContainer" style="position: relative">
<div id="actual" style="color: red" class="resultsDiv"></div>
<div id="expected" style="color: green;" class="resultsDiv"></div>
</div>

<script>
var seed = 0;

var neutrals = ['"', ")", "("];
var strongRTLs = ['ש', 'נ', 'ב', 'ג', 'ק', 'כ', 'ע'];
var strongLTRs = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
var neutral = function() { return neutrals[seed++ % neutrals.length]; }
var strongRTL = function() { return strongRTLs[seed++ % strongRTLs.length]; }
var strongLTR = function() { return strongLTRs[seed++ % strongLTRs.length]; }
var charClassExamples = [neutral, strongRTL, strongLTR];
var possibleDirs = ['ltr', 'rtl'];

var controlStyle = "display: inline-block";

for (outerDirIndex in possibleDirs) {
    var outerDir = possibleDirs[outerDirIndex];
    for (beforeSpanIndex in charClassExamples) {
        var beforeSpan = charClassExamples[beforeSpanIndex];
        for (spanDirIndex in possibleDirs) {
            var spanDir = possibleDirs[spanDirIndex];
            for (inSpanIndex in charClassExamples) {
                var inSpan = charClassExamples[inSpanIndex];
                for (afterSpanIndex in charClassExamples) {
                    var afterSpan = charClassExamples[afterSpanIndex];
                    function caseWithStyle(spanStyle) {
                        seed = 0;
                        var outerDiv = document.createElement("div");
                        outerDiv.dir = outerDir;
                        outerDiv.appendChild(document.createTextNode(beforeSpan()));
                        var span = document.createElement("span");
                        span.dir = spanDir;
                        span.setAttribute("style", spanStyle)
                        span.appendChild(document.createTextNode(inSpan()));
                        outerDiv.appendChild(span);
                        outerDiv.appendChild(document.createTextNode(afterSpan()));
                        return outerDiv;
                    }
                    expected.appendChild(caseWithStyle(controlStyle));
                    actual.appendChild(caseWithStyle(controlStyle));
                }
            }
        }
    }
}

</script>
</table>