LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default.html

   1 <!DOCTYPE html>
   2 <style>
   3 .flex-container {
   4     display: flex;
   5     height:100px;
   6     width:200px;
   7     background-color:pink;
   8     flex-wrap: wrap;
   9 }
  10 .flex-item1 {
  11     width: 100%;
  12     background-color:blue;
  13     border:1px solid;
  14     border-color:red;
  15 }
  16 .flex-item2 {
  17     width: 100%;
  18     background-color:blue;
  19 }
  20 </style>
  21 <script src="../../resources/check-layout.js"></script>
  22 <body>
  23 <p>'Test for BUG=647694 - align-content "stretch" is not applied by default when grid is disabled.'</p>
  24 <script>
  25 function runTest(gridEnabled)
  26 {
  27     if (window.internals)
  28         window.internals.setCSSGridLayoutEnabled(gridEnabled);
  29
  30     var flexContainer = document.createElement("div");
  31     if (gridEnabled)
  32         flexContainer.className += "gridEnabled flex-container";
  33     else
  34         flexContainer.className += "gridDisabled flex-container";
  35     document.body.appendChild(flexContainer);
  36
  37     var flexItem1 = document.createElement("div");
  38     flexItem1.id = "flexItem1";
  39     flexItem1.className += "flex-item1";
  40     flexItem1.setAttribute("data-expected-height", "51");
  41     flexContainer.appendChild(flexItem1);
  42
  43     var flexItem2 = document.createElement("div");
  44     flexItem2.id = "flexItem2";
  45     flexItem2.className += "flex-item2";
  46     flexItem2.setAttribute("data-expected-height", "49");
  47     flexContainer.appendChild(flexItem2);
  48
  49     var br = document.createElement("br");
  50     document.body.appendChild(br);
  51
  52     flexContainer.style.alignContent = "initial";
  53
  54     if (gridEnabled)
  55         checkLayout('.gridEnabled');
  56     else
  57         checkLayout('.gridDisabled');
  58 }
  59
  60 runTest(false);
  61 runTest(true);
  62 </script>
  63 </body>