src/third_party/WebKit/LayoutTests/fast/regions/cssom/offsetLeft-offsetTop-in-region-float-vert-rl.html

   1 <html style="-webkit-writing-mode: vertical-rl;">
   2 <head>
   3         <style type="text/css">
   4                 /* Make sure the console and the description don't interfere with the rest of the layout. */
   5                 #description {
   6                         position: absolute;
   7                         left: 0px;
   8                 }
   9
  10                 #console {
  11                         position: absolute;
  12                         left: 100px;
  13                 }
  14
  15                 #divMain1 {
  16                         -webkit-flow-into: flow1;
  17                         border: 2px solid blue;
  18                         width: 160px;
  19                         margin: 10px;
  20                         padding: 5px;
  21                 }
  22
  23                 #divMain2 {
  24                         border: 2px solid blue;
  25                         width: 135px;
  26                         margin: 5px;
  27                         -webkit-flow-into: flow2;
  28                 }
  29
  30                 .divText {
  31                         border: 1px solid green;
  32                         color: green;
  33                         font-size: 14px;
  34                         padding: 5px;
  35                 }
  36
  37                 #divText1 {
  38                         width: 60px;
  39                         height: 240px;
  40                         margin: 10px;
  41                         padding-left: 5px;
  42                         float: right;
  43                 }
  44
  45                 #divText2 {
  46                         width: 60px;
  47                         height: 190px;
  48                         float: left;
  49                         margin: 10px;
  50                 }
  51
  52                 #region1 {
  53                         -webkit-flow-from: flow1;
  54                         border: 1px solid red;
  55                         position: absolute;
  56                         top: 78px;
  57                         left: 608px;
  58                         height: 400px;
  59                         width: 190px;
  60                 }
  61
  62                 #region2 {
  63                         -webkit-flow-from: flow2;
  64                         border: 1px solid red;
  65                         position: absolute;
  66                         left: 338px;
  67                         top: 182px;
  68                         width: 150px;
  69                         height: 400px;
  70                 }
  71
  72                 .grid {
  73                         position: absolute;
  74                         top: 650px;
  75                         width: 100px;
  76                         height: 100px;
  77                         border-right: 1px solid blue;
  78                         text-align: right;
  79                         font-size: 14px;
  80                         color: blue;
  81                 }
  82
  83                 .vgrid {
  84                         position: absolute;
  85                         left: 900px;
  86                         width: 100px;
  87                         height: 100px;
  88                         border-bottom: 1px solid blue;
  89                         text-align: bottom;
  90                         font-size: 14px;
  91                         color: blue;
  92                 }
  93
  94                 #grid1 {
  95                         left: 0px;
  96                 }
  97                 #grid2 {
  98                         left: 100px;
  99                 }
 100                 #grid3 {
 101                         left: 200px;
 102                 }
 103                 #grid4 {
 104                         left: 300px;
 105                 }
 106                 #grid5 {
 107                         left: 400px;
 108                 }
 109                 #grid6 {
 110                         left: 500px;
 111                 }
 112                 #grid7 {
 113                         left: 600px;
 114                 }
 115
 116                 #vgrid1 {
 117                         top: 0px;
 118                 }
 119                 #vgrid2 {
 120                         top: 100px;
 121                 }
 122                 #vgrid3 {
 123                         top: 200px;
 124                 }
 125                 #vgrid4 {
 126                         top: 300px;
 127                 }
 128                 #vgrid5 {
 129                         top: 400px;
 130                 }
 131                 #vgrid6 {
 132                         top: 500px;
 133                 }
 134                 #vgrid7 {
 135                         top: 600px;
 136                 }
 137                 #vgrid8 {
 138                         top: 700px;
 139                         border: none;
 140                 }
 141         </style>
 142
 143         <script src="../../../resources/js-test.js"></script>
 144 </head>
 145
 146 <body id="body">
 147
 148         <div id="divMain1">
 149                 <div class="divText" id="divText1"><b>divText1</b></div>
 150                 <span class="mySpan" style="color: blue;">This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div.</span>
 151         </div>
 152
 153         <div id="divMain2">
 154                 <div class="divText" id="divText2"><b>divText2</b></div>
 155                 <span class="mySpan" style="color: blue;">This text should flow around the green div. This text should flow around the green div. This text should flow around the green div. This text should flow around the green div.</span>
 156         </div>
 157
 158         <div class="region" id="region1"></div>
 159         <div class="region" id="region2"></div>
 160
 161         <div id="grid1" class="grid">100px</div>
 162         <div id="grid2" class="grid">200px</div>
 163         <div id="grid3" class="grid">300px</div>
 164         <div id="grid4" class="grid">400px</div>
 165         <div id="grid5" class="grid">500px</div>
 166         <div id="grid6" class="grid">600px</div>
 167         <div id="grid7" class="grid">700px</div>
 168
 169         <div id="vgrid1" class="vgrid"></div>
 170         <div id="vgrid2" class="vgrid">100px</div>
 171         <div id="vgrid3" class="vgrid">200px</div>
 172         <div id="vgrid4" class="vgrid">300px</div>
 173         <div id="vgrid5" class="vgrid">400px</div>
 174         <div id="vgrid6" class="vgrid">500px</div>
 175         <div id="vgrid7" class="vgrid">600px</div>
 176         <div id="vgrid8" class="vgrid">700px</div>
 177
 178         <script>
 179                 description("Test offsetLeft and offsetTop in a named flow with floats in vertical-rl mode.")
 180
 181                 shouldBe("divText1.offsetParent", "document.body");
 182                 shouldBe("divText1.offsetLeft", "700");
 183                 shouldBe("divText1.offsetTop", "200");
 184
 185                 shouldBe("divText2.offsetParent", "document.body");
 186                 shouldBe("divText2.offsetLeft", "400");
 187                 shouldBe("divText2.offsetTop", "200");
 188
 189                 if (window.testRunner) {
 190                         var allGraphicElements = document.querySelectorAll(".region, .divText, .grid, .vgrid, .mySpan");
 191                         for (var i=0; i<allGraphicElements.length; i++)
 192                                 allGraphicElements[i].style.display = "none";
 193                 }
 194
 195         </script>
 196 </body>
 197 </html>