| OLD | NEW | 
 | (Empty) | 
|   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     body { font-family: monospace } |  | 
|   9     .content { -webkit-flow-into: flow } |  | 
|  10     .region {  -webkit-flow-from: flow} |  | 
|  11     #region, #region2, #region3 { width: 250px; height: 50px; } |  | 
|  12 </style> |  | 
|  13 </head> |  | 
|  14 <body> |  | 
|  15 <div id="article" class="content"> |  | 
|  16 <p>Content inside article</p> |  | 
|  17 </div> |  | 
|  18 <script> |  | 
|  19     description("Test for 90608: [CSSRegions]Implement NamedFlow::firstEmptyRegi
    onIndex attribute."); |  | 
|  20  |  | 
|  21     if (window.testRunner) |  | 
|  22         testRunner.dumpAsText(); |  | 
|  23  |  | 
|  24     // Named flow does not have any regions yet |  | 
|  25     var namedFlow = getFlowByName("flow"); |  | 
|  26  |  | 
|  27     // FirstEmptyRegionIndex should be -1 for an empty named flow |  | 
|  28     shouldBe("namedFlow.firstEmptyRegionIndex", "-1"); |  | 
|  29  |  | 
|  30     // Add a region to take the content, firstEmptyRegionIndex should still be -
    1. |  | 
|  31     var region = document.createElement("div"); |  | 
|  32     document.body.appendChild(region); |  | 
|  33     region.id = "region"; |  | 
|  34     region.className = "region"; |  | 
|  35  |  | 
|  36     // FirstEmptyRegions should be -1, since there are no empty regions |  | 
|  37     shouldBe("namedFlow.firstEmptyRegionIndex", "-1"); |  | 
|  38  |  | 
|  39     // Add another region, firstEmptyRegionIndex should be 1 since content only 
    flows within the first region. |  | 
|  40     var region2 = document.createElement("div"); |  | 
|  41     document.body.appendChild(region2); |  | 
|  42     region2.id = "region2"; |  | 
|  43     region2.className = "region"; |  | 
|  44  |  | 
|  45     // FirstEmptyRegionIndex should be 1 |  | 
|  46     shouldBe("namedFlow.firstEmptyRegionIndex", "1"); |  | 
|  47  |  | 
|  48     // Add content until some is flowed inside second region |  | 
|  49     while (region2.webkitRegionOverset == "empty") { |  | 
|  50         var p = document.createElement("p"); |  | 
|  51         p.appendChild(document.createTextNode("Content inside article")); |  | 
|  52         document.getElementById("article").appendChild(p); |  | 
|  53     } |  | 
|  54     // Add the third region, firstEmptyRegionIndex should be 2. |  | 
|  55     var region3 = document.createElement("div"); |  | 
|  56     document.body.appendChild(region3); |  | 
|  57     region3.id = "region3"; |  | 
|  58     region3.className = "region"; |  | 
|  59  |  | 
|  60     // FirstEmptyRegionIndex should be 2 since the content fits in the first two
     regions. |  | 
|  61     shouldBe("namedFlow.firstEmptyRegionIndex", "2"); |  | 
|  62  |  | 
|  63     // Remove the first region from the flow, firstEmptyRegionIndex should be -1
    . |  | 
|  64     region.className = ""; |  | 
|  65  |  | 
|  66     // Overset should be true since the content does not fit the regions |  | 
|  67     shouldBe("namedFlow.firstEmptyRegionIndex", "-1"); |  | 
|  68  |  | 
|  69     // Remove the content from the flow, firstEmptyRegionIndex should be 0. |  | 
|  70     document.getElementById("article").className = ""; |  | 
|  71  |  | 
|  72     // FirstEmptyRegionIndex should be 0, since there is no more content. |  | 
|  73     shouldBe("namedFlow.firstEmptyRegionIndex", "0"); |  | 
|  74  |  | 
|  75     // Remove all the regions from the flow |  | 
|  76     region2.className = region3.className = ""; |  | 
|  77  |  | 
|  78     // FirstEmptyRegionIndex should be -1, since there are no more regions in th
    e named flow. |  | 
|  79     shouldBe("namedFlow.firstEmptyRegionIndex", "-1"); |  | 
|  80  |  | 
|  81     document.getElementById("article").style.display = "none"; |  | 
|  82     region.style.display = "none"; |  | 
|  83     region2.style.display = "none"; |  | 
|  84     region3.style.display = "none"; |  | 
|  85 </script> |  | 
|  86 </body> |  | 
|  87 </html> |  | 
| OLD | NEW |