| <!DOCTYPE html> |
| <html> |
| <head> |
| <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; |
| -webkit-column-fill: auto; |
| columns:1 1px; |
| column-gap: 5em; |
| column-fill: auto; |
| height: 400px; |
| } |
| </style> |
| </head> |
| <body> |
| <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 testStyle = "unicode-bidi: -webkit-isolate"; |
| 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(testStyle)); |
| } |
| } |
| } |
| } |
| } |
| |
| </script> |
| </table> |
| </body> |
| </html> |
