src/third_party/WebKit/LayoutTests/fast/regions/cssom/element-region-overset-state.html

   1 <html>
   2 <head>
   3 <script src="../../../resources/js-test.js"></script>
   4 <style>
   5 #article {
   6     -webkit-flow-into: article;
   7     border: 2px solid black;
   8 }
   9 #region_1, #region_2, #region_3 {
  10     -webkit-flow-from: no_article;
  11     overflow:visible;
  12     display:inline-block;
  13     vertical-align:top;
  14     margin:10px;
  15 }
  16 .block {
  17    display:block;
  18 }
  19 #region_1 { height:110px; width:200px; }
  20 #region_2 { height:110px; width:200px; }
  21 #region_3 { height:110px; width:200px; }
  22 </style>
  23 </head>
  24 <body>
  25 <div id="description" class="block"></div>
  26 <div id="article">
  27     <div>
  28         <div id="content" style="height: 216px; background-color: green;"></div>
  29     </div>
  30 </div>
  31
  32 <div id="region_1"></div>
  33 <div id="region_2"></div>
  34 <div id="region_3"></div>
  35
  36 <div id="console" class="block"></div>
  37
  38 <script>
  39     description("Tests Element.webkitRegionOverset attribute")
  40     if (window.testRunner) {
  41         testRunner.dumpAsText();
  42     }
  43     function regionOverset(id) {
  44         var e = document.getElementById(id);
  45         return e.webkitRegionOverset;
  46     }
  47     function flowContent(flowName) {
  48         var r = document.getElementById("region_1");
  49         r.style.webkitFlowFrom = flowName;
  50         r = document.getElementById("region_2");
  51         r.style.webkitFlowFrom = flowName;
  52         r = document.getElementById("region_3");
  53         r.style.webkitFlowFrom = flowName;
  54     }
  55     function addVisualOverflow() {
  56         var c = document.getElementById("article");
  57         c.style.webkitBoxShadow="0px 30px lime";
  58     }
  59     function addMoreContent() {
  60         var c = document.getElementById("content");
  61         c.style.height = 326;
  62     }
  63
  64     function test() {
  65         shouldBeEqualToString("regionOverset('region_1')", "empty");
  66         shouldBeEqualToString("regionOverset('region_2')", "empty");
  67         shouldBeEqualToString("regionOverset('region_3')", "empty");
  68
  69         debug("Flow content");
  70         flowContent("article");
  71
  72         shouldBeEqualToString("regionOverset('region_1')", "fit");
  73         shouldBeEqualToString("regionOverset('region_2')", "fit");
  74         shouldBeEqualToString("regionOverset('region_3')", "empty");
  75
  76         debug("Add more content");
  77         addMoreContent();
  78
  79         shouldBeEqualToString("regionOverset('region_1')", "fit");
  80         shouldBeEqualToString("regionOverset('region_2')", "fit");
  81         shouldBeEqualToString("regionOverset('region_3')", "fit");
  82
  83         debug("Add visual overflow");
  84         addVisualOverflow();
  85
  86         shouldBeEqualToString("regionOverset('region_1')", "fit");
  87         shouldBeEqualToString("regionOverset('region_2')", "fit");
  88         shouldBeEqualToString("regionOverset('region_3')", "overset");
  89
  90         debug("Empty content");
  91         flowContent("no_article");
  92
  93         shouldBeEqualToString("regionOverset('region_1')", "empty");
  94         shouldBeEqualToString("regionOverset('region_2')", "empty");
  95         shouldBeEqualToString("regionOverset('region_3')", "empty");
  96     }
  97     test();
  98 </script>
  99 </body>
 100 </html>