src/third_party/WebKit/LayoutTests/fast/regions/cssom/webkit-named-flow-event-region-in-flexbox-no-overset-change.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     #article {
   9         -webkit-flow-into: article;
  10         border: 10px solid black;
  11     }
  12     #region_1, #region_2 {
  13         -webkit-flow-from: no_article;
  14         overflow: hidden;
  15         display: inline-block;
  16         vertical-align: top;
  17         margin: 10px;
  18         height: 190px;
  19         width: 200px;
  20         border: 1px solid red;
  21         padding: 5px;
  22         -webkit-flex-grow: 1;
  23         -webkit-flex-basis: 100%;
  24     }
  25     #region_2 {
  26         -webkit-flex-basis: 30%;
  27     }
  28     .content {
  29         background-color: green;
  30         border: 3px dashed blue;
  31         margin: 5px;
  32     }
  33     #part1 {
  34         height: 140px;
  35     }
  36     #part2 {
  37         height: 160px;
  38     }
  39     #flexbox {
  40         border: 2px solid green;
  41         margin: 5px;
  42     }
  43 </style>
  44 </head>
  45 <body>
  46     <div id="article">
  47         <div>
  48             <div id="part1" class="content"></div>
  49             <div id="part2" class="content"></div>
  50         </div>
  51     </div>
  52
  53     <div id="flexbox">
  54         <div id="region_1"></div>
  55         <div id="region_2"></div>
  56     </div>
  57
  58     <script>
  59         description("Tests the regionOversetChange event for regions inside flexboxes");
  60
  61         if (window.testRunner) {
  62             testRunner.dumpAsText();
  63             testRunner.waitUntilDone();
  64         }
  65         window.jsTestIsAsync = true;
  66         function flowContent(flowName) {
  67             var region = document.getElementById("region_1");
  68             region.style.webkitFlowFrom = flowName;
  69             region = document.getElementById("region_2");
  70             region.style.webkitFlowFrom = flowName;
  71         }
  72
  73         var eventFiredCount = 0;
  74         function finishTest() {
  75             shouldBe("eventFiredCount", "1");
  76             finishJSTest();
  77         }
  78
  79         function enableFlexbox() {
  80             debug("Engaging flexbox...")
  81             document.getElementById("flexbox").style.display = "-webkit-flex";
  82
  83             // Wait and make sure no other events arrive.
  84             setTimeout("finishTest()", 200);
  85         }
  86
  87         function regionOversetChanged(event) {
  88             ++eventFiredCount;
  89             shouldBeEqualToString("event.target.name", "article");
  90
  91             // Activate the flexbox.
  92             if (eventFiredCount == 1) {
  93                 if (window.testRunner)
  94                     enableFlexbox();
  95                 else
  96                     setTimeout("enableFlexbox()", 1000);
  97
  98                 return;
  99             }
 100         }
 101
 102         function startTest() {
 103             var flowThread = getFlowByName("article");
 104             flowThread.addEventListener("webkitregionoversetchange", regionOversetChanged);
 105
 106             debug("Flowing content into regions...");
 107             flowContent("article");
 108         }
 109
 110         window.addEventListener("load", startTest);
 111     </script>
 112 </body>
 113 </html>