LayoutTests/fast/writing-mode/border-styles-vertical-lr.html

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