third_party/WebKit/LayoutTests/css3/unicode-bidi-isolate-basic.html

   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 testStyle = "unicode-bidi: -webkit-isolate";
  38 var controlStyle = "display: inline-block";
  39
  40 for (outerDirIndex in possibleDirs) {
  41     var outerDir = possibleDirs[outerDirIndex];
  42     for (beforeSpanIndex in charClassExamples) {
  43         var beforeSpan = charClassExamples[beforeSpanIndex];
  44         for (spanDirIndex in possibleDirs) {
  45             var spanDir = possibleDirs[spanDirIndex];
  46             for (inSpanIndex in charClassExamples) {
  47                 var inSpan = charClassExamples[inSpanIndex];
  48                 for (afterSpanIndex in charClassExamples) {
  49                     var afterSpan = charClassExamples[afterSpanIndex];
  50                     function caseWithStyle(spanStyle) {
  51                         seed = 0;
  52                         var outerDiv = document.createElement("div");
  53                         outerDiv.dir = outerDir;
  54                         outerDiv.appendChild(document.createTextNode(beforeSpan()));
  55                         var span = document.createElement("span");
  56                         span.dir = spanDir;
  57                         span.setAttribute("style", spanStyle)
  58                         span.appendChild(document.createTextNode(inSpan()));
  59                         outerDiv.appendChild(span);
  60                         outerDiv.appendChild(document.createTextNode(afterSpan()));
  61                         return outerDiv;
  62                     }
  63                     expected.appendChild(caseWithStyle(controlStyle));
  64                     actual.appendChild(caseWithStyle(testStyle));
  65                 }
  66             }
  67         }
  68     }
  69 }
  70
  71 </script>
  72 </table>