layout/reftests/flexbox/flexbox-float-1d.xhtml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0/
   5 -->
   6 <!--
   7      This test is like flexbox-float-1b.xhtml, but with the float-styled
   8      element dynamically inserted.
   9 -->
  10 <html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
  11   <head>
  12     <script>
  13       function generateFloat(aFloatDirection) {
  14         var newElem = document.createElement("div");
  15         newElem.setAttribute("style", "float: " + aFloatDirection);
  16         newElem.innerHTML = aFloatDirection == "left" ? "[[[" : "]]]";
  17         return newElem;
  18       }
  19
  20       function tweak() {
  21         var containerList = document.getElementsByClassName("flexbox");
  22         for (var i = 0; i &lt; containerList.length; i++) {
  23           var container = containerList[i];
  24           var newElem = generateFloat(container.getAttribute("floatValToUse"));
  25
  26           var nodeToInsertBefore;
  27           var insertPosn = container.getAttribute("insertPosn");
  28           if (insertPosn == "begin") {
  29             nodeToInsertBefore = container.firstChild;
  30           } else if (insertPosn == "mid") {
  31             nodeToInsertBefore = container.firstChild.nextSibling;
  32           } else if (insertPosn == "end") {
  33             nodeToInsertBefore = null;
  34           }
  35
  36           container.insertBefore(newElem, nodeToInsertBefore);
  37         }
  38
  39         document.documentElement.removeAttribute("class");
  40       }
  41
  42       window.addEventListener("MozReftestInvalidate", tweak, false);
  43     </script>
  44     <style>
  45       div.flexbox {
  46         display: flex;
  47         width: 400px;
  48         margin-bottom: 2px;
  49         font-family: sans-serif;
  50         background: lightgreen;
  51         justify-content: space-around;
  52       }
  53     </style>
  54   </head>
  55   <body>
  56     <div class="flexbox" floatValToUse="left" insertPosn="mid">
  57       aaa<span>bbb</span>
  58     </div>
  59     <div class="flexbox" floatValToUse="right" insertPosn="mid">
  60       aaa<span>bbb</span>
  61     </div>
  62     <div class="flexbox" floatValToUse="left" insertPosn="end">
  63       aaa
  64     </div>
  65     <div class="flexbox" floatValToUse="right" insertPosn="end">
  66       aaa
  67     </div>
  68     <div class="flexbox" floatValToUse="left" insertPosn="begin">
  69       bbb
  70     </div>
  71     <div class="flexbox" floatValToUse="right" insertPosn="begin">
  72       bbb
  73     </div>
  74   </body>
  75 </html>