src/third_party/WebKit/LayoutTests/fast/regions/cssom/get-region-flow-ranges-horiz-bt.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="../../../resources/js-test.js"></script>
   6 <script src="../resources/helper.js"></script>
   7 <style>
   8     html { -webkit-writing-mode: horizontal-bt; }
   9     body { font-family: monospace; }
  10     #wrapper { font-size: 30px; }
  11     .border { border: 1px solid red; }
  12     #article { background-color: lightblue; height: 135px; padding: 10px;}
  13     #box1 { background-color: lightgreen; height: 110px; padding: 10px;}
  14     #box2 { background-color: orange; height: 10px; padding: 5px;}
  15     #region1 { -webkit-flow-from: flow1; width: 250px; height: 70px; left: 20px; top: 250px;}
  16     #region2 { -webkit-flow-from: flow1; width: 250px; height: 60px; left: 20px; top: 300px;}
  17     #region3 { -webkit-flow-from: flow1; width: 250px; height: 60px; left: 20px; top: 350px;}
  18 </style>
  19 </head>
  20 <body>
  21   <div id="description"></div>
  22   <div id="wrapper"><div id="article"><div id="box1"><div id="box2"></div></div></div></div>
  23   <div id="region1" class="border"></div>
  24   <div id="region2" class="border"></div>
  25   <div id="region3" class="border"></div>
  26   <div id="console"></div>
  27 <script>
  28     if (window.layoutTestController)
  29         layoutTestController.dumpAsText();
  30
  31     description("[CSSRegions] Test for Region::getRegionFlowRanges for horizontal-bt mode");
  32     var region1 = document.getElementById("region1");
  33     var region2 = document.getElementById("region2");
  34     var region3 = document.getElementById("region3");
  35
  36     debug("Empty regions");
  37     var range1 = region1.webkitGetRegionFlowRanges();
  38     shouldEvaluateTo("range1.length", 0);
  39     var range2 = region2.webkitGetRegionFlowRanges();
  40     shouldEvaluateTo("range2.length", 0);
  41     var range3 = region3.webkitGetRegionFlowRanges();
  42     shouldEvaluateTo("range3.length", 0);
  43
  44     debug("Flow article");
  45     var article = document.getElementById("article");
  46     article.style.webkitFlowInto = "flow1";
  47     range1 = region1.webkitGetRegionFlowRanges();
  48     shouldEvaluateTo("range1.length", 1);
  49     compareArrays(getRangeAt(range1, 0), ["wrapper", 0, "box1", 1]);
  50     range2 = region2.webkitGetRegionFlowRanges();
  51     shouldEvaluateTo("range2.length", 1);
  52     compareArrays(getRangeAt(range2, 0), ["box1", 1, "box1", 1]);
  53     range3 = region3.webkitGetRegionFlowRanges();
  54     shouldEvaluateTo("range3.length", 1);
  55     compareArrays(getRangeAt(range3, 0), ["box1", 1, "wrapper", 1]);
  56
  57     debug("Add text node to region2 (creates anonymous block)");
  58     var textNode = document.createTextNode("Text node.");
  59     document.getElementById("box1").appendChild(textNode);
  60     range1 = region1.webkitGetRegionFlowRanges();
  61     shouldEvaluateTo("range1.length", 1);
  62     compareArrays(getRangeAt(range1, 0), ["wrapper", 0, "box1", 1]);
  63     range2 = region2.webkitGetRegionFlowRanges();
  64     shouldEvaluateTo("range2.length", 1);
  65     compareArrays(getRangeAt(range2, 0), ["box1", 1, "box1", 2]);
  66     range3 = region3.webkitGetRegionFlowRanges();
  67     shouldEvaluateTo("range3.length", 1);
  68     compareArrays(getRangeAt(range3, 0),  ["box1", 2, "wrapper", 1]);
  69
  70     debug("Increase font size");
  71     var wrapper = document.getElementById("wrapper");
  72     wrapper.style.fontSize = "40px";
  73     range1 = region1.webkitGetRegionFlowRanges();
  74     shouldEvaluateTo("range1.length", 1);
  75     compareArrays(getRangeAt(range1, 0), ["wrapper", 0, "box1", 1]);
  76     range2 = region2.webkitGetRegionFlowRanges();
  77     shouldEvaluateTo("range2.length", 1);
  78     compareArrays(getRangeAt(range2, 0), ["box1", 1, "#text", 4]);
  79     range3 = region3.webkitGetRegionFlowRanges();
  80     shouldEvaluateTo("range3.length", 1);
  81     compareArrays(getRangeAt(range3, 0), ["#text", 5, "wrapper", 1]);
  82
  83     debug("Make child a content node, so it will move from region1 to region3");
  84     var box2 = document.getElementById('box2');
  85     box2.style.webkitFlowInto = "flow1";
  86     range1 = region1.webkitGetRegionFlowRanges();
  87     shouldEvaluateTo("range1.length", 2);
  88     compareArrays(getRangeAt(range1, 0), ["wrapper", 0, "box1", 0]);
  89     compareArrays(getRangeAt(range1, 1), ["box1", 1, "#text", 4]);
  90     range2 = region2.webkitGetRegionFlowRanges();
  91     shouldEvaluateTo("range2.length", 1);
  92     compareArrays(getRangeAt(range2, 0), ["#text", 5, "box1", 2]);
  93     range3 = region3.webkitGetRegionFlowRanges();
  94     shouldEvaluateTo("range3.length", 1);
  95     compareArrays(getRangeAt(range3, 0), ["box1", 0, "box1", 1]);
  96
  97 function hideRegionsAndFlows() {
  98     document.getElementById("region1").style.visibility = "hidden";
  99     document.getElementById("region2").style.visibility = "hidden";
 100     document.getElementById("region3").style.visibility = "hidden";
 101 }
 102
 103     hideRegionsAndFlows();
 104 </script>
 105 </body>
 106 </html>