third_party/WebKit/LayoutTests/fast/text/international/bdi-neutral-wrapped.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>HTML Test: BDI: neutral when wrapped</title>
   6     <link rel="reference" href="bdi-neutral-wrapped-ref.html">
   7     <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com">
   8     <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com">
   9     <link rel="help" href="http://dev.w3.org/html5/spec/Overview.html#the-bdi-element">
  10     <meta name="assert" content="
  11       'For the purposes of applying the bidirectional algorithm to the paragraph-level
  12       container that a bdi element finds itself within, the bdi element must be treated
  13       like a U+FFFC OBJECT REPLACEMENT CHARACTER.'
  14
  15       Obviously, this should hold even if the BDI's content is wrapped over more than one line.
  16       A single character (U+FFFC or otherwise) obviously never gets wrapped over more than one
  17       line, but we still expect the part of the content preceding the BDI, if any, that is
  18       displayed on the same line as some part of the BDI to be ordered the same as it would be
  19       if that part of the BDI were replaced with U+FFFC. Similarly, we expect the part of the
  20       content following the BDI, if any, that is displayed on the same line as some part of the
  21       BDI to be ordered the same as it would be if that part of the BDI were replaced with U+FFFC.
  22
  23       In the test below, the content surrounding the BDI forms a single directional run (despite
  24       the containing element and the BDI both having the opposite direction, because the BDI is
  25       treated as a neutral). Thus, on the line containing the first part of the BDI, the BDI's
  26       content appears after the content preceding it, and on the line containing the last part of
  27       the BDI, the BDI content appears before the content following it, where both 'before' and
  28       'after' are defined relative to the surrounding content's direction. And, of course, the line
  29       containing just BDI content should be ordered in the BDI's direction.">
  30     <style>
  31       body{
  32         font-size:2em;
  33       }
  34       .box {
  35         border: medium solid gray;
  36         width: 400px;
  37         margin: 20px;
  38       }
  39     </style>
  40   </head>
  41   <body>
  42     The two boxes below should look exactly the same.
  43     <!-- Key to entities used below:
  44       &#x05D0; ... &#x05D5; - The first six Hebrew letters (strongly RTL).
  45       &#x202D; - The LRO (left-to-right-override) formatting character.
  46       &#x202C; - The PDF (pop directional formatting) formatting character; closes LRO. -->
  47     <div class="box">
  48       <div dir="ltr">
  49         &#x05D0; &gt;
  50         <bdi>b &gt;&gt;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  51           c</bdi>
  52         &gt; &#x05D3;...
  53       </div>
  54       <div dir="rtl">
  55         a &gt;
  56         <bdi>&#x05D1; &gt;&gt;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  57           &#x05D2;</bdi>
  58         &gt; d...
  59       </div>
  60     </div>
  61     <div class="box">
  62       <div dir="ltr">&#x202D;b &lt; &#x05D0;&#x202C;<br/>&#x202D;&gt;&gt;&gt;&#x202C;<br/>&#x202D;&#x05D3; &lt; c...&#x202C;</div>
  63       <div dir="rtl">&#x202D;a &gt; &#x05D1;&#x202C;<br/>&#x202D;&lt;&lt;&lt;&#x202C;<br/>&#x202D;...&#x05D2; &gt; d&#x202C;</div>
  64     </div>
  65   </body>
  66 </html>