| [email protected] | 922143f | 2015-03-26 23:20:58 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 3 | <style> |
| 4 | .resultsDiv { |
| 5 | position: absolute; |
| 6 | top: 0px; |
| 7 | left: 0px; |
| 8 | -moz-column-width: 13em; |
| 9 | -moz-column-gap: 5em; |
| 10 | -webkit-columns:1 1px; /* Make as many (overflowing) columns as necessary, but keep them as narrow as possible */ |
| 11 | -webkit-column-gap: 5em; |
| 12 | columns:1 1px; |
| 13 | column-gap: 5em; |
| 14 | column-fill: auto; |
| 15 | height: 400px; |
| 16 | } |
| 17 | </style> |
| 18 | <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> |
| 19 | |
| 20 | <div id="resultsContainer" style="position: relative"> |
| 21 | <div id="actual" style="color: red" class="resultsDiv"></div> |
| 22 | <div id="expected" style="color: green;" class="resultsDiv"></div> |
| 23 | </div> |
| 24 | |
| 25 | <script> |
| 26 | var seed = 0; |
| 27 | |
| 28 | var neutrals = ['"', ")", "("]; |
| 29 | var strongRTLs = ['ש', 'נ', 'ב', 'ג', 'ק', 'כ', 'ע']; |
| 30 | var strongLTRs = ['a', 'b', 'c', 'd', 'e', 'f', 'g']; |
| 31 | var neutral = function() { return neutrals[seed++ % neutrals.length]; } |
| 32 | var strongRTL = function() { return strongRTLs[seed++ % strongRTLs.length]; } |
| 33 | var strongLTR = function() { return strongLTRs[seed++ % strongLTRs.length]; } |
| 34 | var charClassExamples = [neutral, strongRTL, strongLTR]; |
| 35 | var possibleDirs = ['ltr', 'rtl']; |
| 36 | |
| 37 | var controlStyle = "display: inline-block"; |
| 38 | |
| 39 | for (outerDirIndex in possibleDirs) { |
| 40 | var outerDir = possibleDirs[outerDirIndex]; |
| 41 | for (beforeSpanIndex in charClassExamples) { |
| 42 | var beforeSpan = charClassExamples[beforeSpanIndex]; |
| 43 | for (spanDirIndex in possibleDirs) { |
| 44 | var spanDir = possibleDirs[spanDirIndex]; |
| 45 | for (inSpanIndex in charClassExamples) { |
| 46 | var inSpan = charClassExamples[inSpanIndex]; |
| 47 | for (afterSpanIndex in charClassExamples) { |
| 48 | var afterSpan = charClassExamples[afterSpanIndex]; |
| 49 | function caseWithStyle(spanStyle) { |
| 50 | seed = 0; |
| 51 | var outerDiv = document.createElement("div"); |
| 52 | outerDiv.dir = outerDir; |
| 53 | outerDiv.appendChild(document.createTextNode(beforeSpan())); |
| 54 | var span = document.createElement("span"); |
| 55 | span.dir = spanDir; |
| 56 | span.setAttribute("style", spanStyle) |
| 57 | span.appendChild(document.createTextNode(inSpan())); |
| 58 | outerDiv.appendChild(span); |
| 59 | outerDiv.appendChild(document.createTextNode(afterSpan())); |
| 60 | return outerDiv; |
| 61 | } |
| 62 | expected.appendChild(caseWithStyle(controlStyle)); |
| 63 | actual.appendChild(caseWithStyle(controlStyle)); |
| 64 | } |
| 65 | } |
| 66 | } |
| 67 | } |
| 68 | } |
| 69 | |
| 70 | </script> |
| 71 | </table> |
