layout/reftests/selection/writing-mode.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8" />
   5     <title>writing-mode</title>
   6     <style>
   7       p {
   8         display: inline-block;
   9         margin: 10px;
  10       }
  11       .line-through {
  12         text-decoration: line-through wavy rgba(0, 0, 0, 0.3);
  13       }
  14       ::-moz-selection {
  15         background-color: white;
  16         color: black;
  17       }
  18       .wm-vertical-lr {
  19         writing-mode: vertical-lr;
  20         display: inline-block;
  21       }
  22       .wm-vertical-rl {
  23         writing-mode: vertical-rl;
  24       }
  25       .wm-sideways-lr {
  26         writing-mode: sideways-lr;
  27       }
  28       .wm-sideways-rl {
  29         writing-mode: sideways-rl;
  30       }
  31     </style>
  32     <script type="text/javascript" charset="utf-8">
  33       function select() {
  34         window.getSelection().removeAllRanges();
  35         var elems = document.getElementsByTagName('p');
  36         for (var i = 0; i < elems.length; ++i) {
  37           var range = document.createRange();
  38           range.setStart(elems[i].firstChild, 2);
  39           range.setEnd(elems[i].firstChild, 9);
  40           window.getSelection().addRange(range);
  41         }
  42       }
  43     </script>
  44   </head>
  45   <body onload="select()">
  46     <p lang="zh" dir="ltr" class="wm-vertical-lr line-through">你好世界！Hello World!</p>
  47     <p lang="zh" dir="ltr" class="wm-vertical-rl line-through">你好世界！Hello World!</p>
  48     <p lang="zh" dir="ltr" class="wm-sideways-lr line-through">你好世界！Hello World!</p>
  49     <p lang="zh" dir="ltr" class="wm-sideways-rl line-through">你好世界！Hello World!</p>
  50     <br/>
  51     <p lang="zh" dir="rtl" class="wm-vertical-lr line-through">你好世界！Hello World!</p>
  52     <p lang="zh" dir="rtl" class="wm-vertical-rl line-through">你好世界！Hello World!</p>
  53     <p lang="zh" dir="rtl" class="wm-sideways-lr line-through">你好世界！Hello World!</p>
  54     <p lang="zh" dir="rtl" class="wm-sideways-rl line-through">你好世界！Hello World!</p>
  55   </body>
  56 </html>