src/third_party/WebKit/LayoutTests/fast/regions/cssom/get-region-flow-ranges-writing-modes-tb-rl-lr.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script src="../resources/helper.js"></script>
   6 <style>
   7     body { font-family: monospace; }
   8     #wrapper { font-size: 30px; }
   9     .border { border: 1px solid red; }
  10     #box1 { -webkit-flow-into: flow; background-color: green; }
  11     #box11 { background-color: lightgreen; height: 30px; margin-top: 70px;}
  12     #region1 { -webkit-flow-from: flow; width: 400px; height: 200px;  }
  13     #region2 { -webkit-flow-from: flow; width: 400px; height: 200px;  }
  14     #region3 { -webkit-flow-from: flow; width: 400px; height: 200px;  }
  15     #box2 { -webkit-writing-mode: vertical-rl; background-color: grey; height: 150px; width: 400px;}
  16     #box22 { height: 30px; width: 30px; background-color: white; }
  17     #box3 { -webkit-writing-mode: vertical-lr; background-color: lightblue; width: 400px; height: 150px;}
  18     #box4 { -webkit-writing-mode: horizontal-bt; background-color: yellow; height: 60px; width: 60px; position: absolute; top: 20px; left: 20px;}
  19 </style>
  20 </head>
  21 <body>
  22     <div id="description"></div>
  23     <!--div id="wrapper"><div id="box1"><div id="box11"></div><div id="box2">Vert RL</div><div id="box3">Vert LR</div><div id="box4">Horizontal BT</div></div-->
  24
  25     <div id="wrapper"><div id="box1"><div id="box11"></div><div id="box2">Vertical RL<div id="box22">X</div></div><div id="box3">Vertical LR<div id="box4">Y</div></div></div></div>
  26     <div id="region1" class="border"></div>
  27     <div id="region2" class="border"></div>
  28     <div id="region3" class="border"></div>
  29 <script>
  30     if (window.layoutTestController)
  31         layoutTestController.dumpAsText();
  32
  33     debug("[CSSRegions] Test for Region::getRegionFlowRanges for mixed vertical modes");
  34     region1 = document.getElementById("region1");
  35     region2 = document.getElementById("region2");
  36     region3 = document.getElementById("region3");
  37     range1 = region1.webkitGetRegionFlowRanges();
  38     shouldEvaluateTo("range1.length", 2);
  39     compareArrays(getRangeAt(range1, 0), ["wrapper", 0, "box1", 1]);
  40     compareArrays(getRangeAt(range1, 1), ["box3", 1, "box3", 2]);
  41     range2 = region2.webkitGetRegionFlowRanges();
  42     shouldEvaluateTo("range2.length", 1);
  43     compareArrays(getRangeAt(range2, 0), ["box1", 1, "box1", 2]);
  44     range3 = region3.webkitGetRegionFlowRanges();
  45     shouldEvaluateTo("range3.length", 1);
  46     compareArrays(getRangeAt(range3, 0), ["box1", 2, "box3", 1]);
  47
  48 function hideRegionsAndFlows() {
  49     document.getElementById("region1").style.visibility = "hidden";
  50     document.getElementById("region2").style.visibility = "hidden";
  51     document.getElementById("region3").style.visibility = "hidden";
  52 }
  53     hideRegionsAndFlows();
  54 </script>
  55 </body>
  56 </html>