layout/reftests/flexbox/flexbox-dyn-insertAroundDiv-1.xhtml

Wed, 31 Dec 2014 06:55:50 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:55:50 +0100
changeset 2
7e26c7da4463
permissions
-rw-r--r--

Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2

     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 verifies that we reconstruct frames as necessary, after content
     8      (including whitespace & text) is dynamically inserted as a child of a
     9      flexbox.  (Note that in cases where we know the whitespace is going to be
    10      dropped, we don't bother reconstructing frames. This test is to be sure we
    11      aren't overzealous with that optimization.)
    12 -->
    13 <html xmlns="http://www.w3.org/1999/xhtml"
    14       class="reftest-wait">
    15   <head>
    16     <style>
    17       body { font-size: 10px; }
    19       div.flexbox {
    20         border: 1px dashed blue;
    21         width: 300px;
    22         display: flex;
    23         justify-content: space-around;
    24         margin-bottom: 1px;
    25         white-space: pre;
    26       }
    27     </style>
    28     <script>
    29       function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
    30         var parent = document.getElementById(aParentId);
    31         var insertBeforeTarget = parent.firstChild;
    32         for (var i = 0; i &lt; aPosn; i++) {
    33           insertBeforeTarget = insertBeforeTarget.nextSibling;
    34         }
    35         parent.insertBefore(aNodeToInsert, insertBeforeTarget);
    36       }
    38       function tweak() {
    39         // Just inserting whitespace
    40         // -------------------------
    41         insertNodeAtPosnInElem(document.createTextNode("  "), 0, "f0");
    42         insertNodeAtPosnInElem(document.createTextNode("  "), 1, "f1");
    44         // Inserting text or text with whitespace
    45         // --------------------------------------
    46         insertNodeAtPosnInElem(document.createTextNode("[NewText]"),   0, "f2");
    47         insertNodeAtPosnInElem(document.createTextNode("[NewText]  "), 0, "f3");
    48         insertNodeAtPosnInElem(document.createTextNode("  [NewText]"), 0, "f4");
    49         insertNodeAtPosnInElem(document.createTextNode("[NewText]"),   1, "f5");
    50         insertNodeAtPosnInElem(document.createTextNode("[NewText]  "), 1, "f6");
    51         insertNodeAtPosnInElem(document.createTextNode("  [NewText]"), 1, "f7");
    53         // Same as the whitespace cases immediately above, but now with separate
    54         // text nodes for the whitespace vs. the text
    55         insertNodeAtPosnInElem(document.createTextNode("  "),        0, "f8");
    56         insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f8");
    58         insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f9");
    59         insertNodeAtPosnInElem(document.createTextNode("  "),        0, "f9");
    61         insertNodeAtPosnInElem(document.createTextNode("  "),        1, "f10");
    62         insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f10");
    64         insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f11");
    65         insertNodeAtPosnInElem(document.createTextNode("  "),        1, "f11");
    67         document.documentElement.removeAttribute("class");
    68       }
    70       window.addEventListener("MozReftestInvalidate", tweak, false);
    71     </script>
    72   </head>
    73   <body>
    74     <div class="flexbox" id="f0"><div>[OldText]</div></div>
    75     <div class="flexbox" id="f1"><div>[OldText]</div></div>
    76     <div class="flexbox" id="f2"><div>[OldText]</div></div>
    77     <div class="flexbox" id="f3"><div>[OldText]</div></div>
    78     <div class="flexbox" id="f4"><div>[OldText]</div></div>
    79     <div class="flexbox" id="f5"><div>[OldText]</div></div>
    80     <div class="flexbox" id="f6"><div>[OldText]</div></div>
    81     <div class="flexbox" id="f7"><div>[OldText]</div></div>
    82     <div class="flexbox" id="f8"><div>[OldText]</div></div>
    83     <div class="flexbox" id="f9"><div>[OldText]</div></div>
    84     <div class="flexbox" id="f10"><div>[OldText]</div></div>
    85     <div class="flexbox" id="f11"><div>[OldText]</div></div>
    86   </body>
    87 </html>

mercurial