third_party/WebKit/LayoutTests/fast/writing-mode/border-styles-vertical-rl.html

   1 <style>
   2   body {
   3     -webkit-writing-mode: vertical-rl;
   4     -webkit-text-orientation: sideways-right;
   5   }
   6     div > div {
   7       display: inline-block;
   8     }
   9     span {
  10       -webkit-padding-start: 15px; -webkit-padding-end:15px;
  11       font-size: 48pt;
  12       background-color: #DDD;
  13       line-height: 2em;
  14       border-width: 20px;
  15       border-color: gray;
  16     }
  17
  18     .sharp, .rounded {
  19       margin: 20px;
  20     }
  21     .rounded span {
  22       border-radius: 50%;
  23     }
  24   </style>
  25   <body>
  26
  27     <div class="sharp">
  28       <div>
  29         <span style="border-style: solid;">
  30           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  31       </div>
  32       <div>
  33         <span style="border-style: groove;">
  34           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  35       </div>
  36       <div>
  37         <span style="border-style: ridge;">
  38           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  39       </div>
  40       <div>
  41         <span style="border-style: outset;">
  42           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  43       </div>
  44       <div>
  45         <span style="border-style: inset;">
  46           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  47       </div>
  48       <div>
  49         <span style="border-style: double;">
  50           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  51       </div>
  52     </div>
  53
  54     <div class="rounded">
  55       <div>
  56         <span style="border-style: solid;">
  57           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  58       </div>
  59       <div>
  60         <span style="border-style: groove;">
  61           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  62       </div>
  63       <div>
  64         <span style="border-style: ridge;">
  65           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  66       </div>
  67       <div>
  68         <span style="border-style: outset;">
  69           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  70       </div>
  71       <div>
  72         <span style="border-style: inset;">
  73           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  74       </div>
  75       <div>
  76         <span style="border-style: double;">
  77           &nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;</span>
  78       </div>
  79     </div>
  80   </div>