| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | |
| 3 <head> | |
| 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | 2 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 5 <style> | 3 <style> |
| 6 .resultsDiv { | 4 .resultsDiv { |
| 7 position: absolute; | 5 position: absolute; |
| 8 top: 0px; | 6 top: 0px; |
| 9 left: 0px; | 7 left: 0px; |
| 10 -moz-column-width: 13em; | 8 -moz-column-width: 13em; |
| 11 -moz-column-gap: 5em; | 9 -moz-column-gap: 5em; |
| 12 -webkit-columns:1 1px; /* Make as many (overflowing) columns as necessary, b
ut keep them as narrow as possible */ | 10 -webkit-columns:1 1px; /* Make as many (overflowing) columns as necessary, b
ut keep them as narrow as possible */ |
| 13 -webkit-column-gap: 5em; | 11 -webkit-column-gap: 5em; |
| 14 columns:1 1px; | 12 columns:1 1px; |
| 15 column-gap: 5em; | 13 column-gap: 5em; |
| 16 column-fill: auto; | 14 column-fill: auto; |
| 17 height: 400px; | 15 height: 400px; |
| 18 } | 16 } |
| 19 </style> | 17 </style> |
| 20 </head> | |
| 21 <body> | |
| 22 <div>This table shows unicode-bidi: isolate behavior (in red) with display: inli
ne-block behavior overlapping in green. You should see no red in this test! Be
havior between these two methods should be identical for non-wrapping strings, a
ssuming unicode-bidi: isolate is implemented and functioning correctly.</div> | 18 <div>This table shows unicode-bidi: isolate behavior (in red) with display: inli
ne-block behavior overlapping in green. You should see no red in this test! Be
havior between these two methods should be identical for non-wrapping strings, a
ssuming unicode-bidi: isolate is implemented and functioning correctly.</div> |
| 23 | 19 |
| 24 <div id="resultsContainer" style="position: relative"> | 20 <div id="resultsContainer" style="position: relative"> |
| 25 <div id="actual" style="color: red" class="resultsDiv"></div> | 21 <div id="actual" style="color: red" class="resultsDiv"></div> |
| 26 <div id="expected" style="color: green;" class="resultsDiv"></div> | 22 <div id="expected" style="color: green;" class="resultsDiv"></div> |
| 27 </div> | 23 </div> |
| 28 | 24 |
| 29 <script> | 25 <script> |
| 30 var seed = 0; | 26 var seed = 0; |
| 31 | 27 |
| 32 var neutrals = ['"', ")", "("]; | 28 var neutrals = ['"', ")", "("]; |
| 33 var strongRTLs = ['ש', 'נ', 'ב', 'ג', 'ק', 'כ', 'ע']; | 29 var strongRTLs = ['ש', 'נ', 'ב', 'ג', 'ק', 'כ', 'ע']; |
| 34 var strongLTRs = ['a', 'b', 'c', 'd', 'e', 'f', 'g']; | 30 var strongLTRs = ['a', 'b', 'c', 'd', 'e', 'f', 'g']; |
| 35 var neutral = function() { return neutrals[seed++ % neutrals.length]; } | 31 var neutral = function() { return neutrals[seed++ % neutrals.length]; } |
| 36 var strongRTL = function() { return strongRTLs[seed++ % strongRTLs.length]; } | 32 var strongRTL = function() { return strongRTLs[seed++ % strongRTLs.length]; } |
| 37 var strongLTR = function() { return strongLTRs[seed++ % strongLTRs.length]; } | 33 var strongLTR = function() { return strongLTRs[seed++ % strongLTRs.length]; } |
| 38 var charClassExamples = [neutral, strongRTL, strongLTR]; | 34 var charClassExamples = [neutral, strongRTL, strongLTR]; |
| 39 var possibleDirs = ['ltr', 'rtl']; | 35 var possibleDirs = ['ltr', 'rtl']; |
| 40 | 36 |
| 41 var testStyle = "unicode-bidi: -webkit-isolate"; | |
| 42 var controlStyle = "display: inline-block"; | 37 var controlStyle = "display: inline-block"; |
| 43 | 38 |
| 44 for (outerDirIndex in possibleDirs) { | 39 for (outerDirIndex in possibleDirs) { |
| 45 var outerDir = possibleDirs[outerDirIndex]; | 40 var outerDir = possibleDirs[outerDirIndex]; |
| 46 for (beforeSpanIndex in charClassExamples) { | 41 for (beforeSpanIndex in charClassExamples) { |
| 47 var beforeSpan = charClassExamples[beforeSpanIndex]; | 42 var beforeSpan = charClassExamples[beforeSpanIndex]; |
| 48 for (spanDirIndex in possibleDirs) { | 43 for (spanDirIndex in possibleDirs) { |
| 49 var spanDir = possibleDirs[spanDirIndex]; | 44 var spanDir = possibleDirs[spanDirIndex]; |
| 50 for (inSpanIndex in charClassExamples) { | 45 for (inSpanIndex in charClassExamples) { |
| 51 var inSpan = charClassExamples[inSpanIndex]; | 46 var inSpan = charClassExamples[inSpanIndex]; |
| 52 for (afterSpanIndex in charClassExamples) { | 47 for (afterSpanIndex in charClassExamples) { |
| 53 var afterSpan = charClassExamples[afterSpanIndex]; | 48 var afterSpan = charClassExamples[afterSpanIndex]; |
| 54 function caseWithStyle(spanStyle) { | 49 function caseWithStyle(spanStyle) { |
| 55 seed = 0; | 50 seed = 0; |
| 56 var outerDiv = document.createElement("div"); | 51 var outerDiv = document.createElement("div"); |
| 57 outerDiv.dir = outerDir; | 52 outerDiv.dir = outerDir; |
| 58 outerDiv.appendChild(document.createTextNode(beforeSpan(
))); | 53 outerDiv.appendChild(document.createTextNode(beforeSpan(
))); |
| 59 var span = document.createElement("span"); | 54 var span = document.createElement("span"); |
| 60 span.dir = spanDir; | 55 span.dir = spanDir; |
| 61 span.setAttribute("style", spanStyle) | 56 span.setAttribute("style", spanStyle) |
| 62 span.appendChild(document.createTextNode(inSpan())); | 57 span.appendChild(document.createTextNode(inSpan())); |
| 63 outerDiv.appendChild(span); | 58 outerDiv.appendChild(span); |
| 64 outerDiv.appendChild(document.createTextNode(afterSpan()
)); | 59 outerDiv.appendChild(document.createTextNode(afterSpan()
)); |
| 65 return outerDiv; | 60 return outerDiv; |
| 66 } | 61 } |
| 67 expected.appendChild(caseWithStyle(controlStyle)); | 62 expected.appendChild(caseWithStyle(controlStyle)); |
| 68 actual.appendChild(caseWithStyle(testStyle)); | 63 actual.appendChild(caseWithStyle(controlStyle)); |
| 69 } | 64 } |
| 70 } | 65 } |
| 71 } | 66 } |
| 72 } | 67 } |
| 73 } | 68 } |
| 74 | 69 |
| 75 </script> | 70 </script> |
| 76 </table> | 71 </table> |
| 77 </body> | |
| 78 </html> | |
| OLD | NEW |