layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml@deefc01c0e14
layout/reftests/flexbox/flexbox-dyn-insertAroundSpan-3.xhtml
Thu, 15 Jan 2015 21:03:48 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:03:48 +0100
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
- permissions
- -rw-r--r--
Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)
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 & spans) 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 {
18 font-size: 10px;
19 }
21 span.inserted {
22 background: teal; /* To make inserted span elements stand out. */
23 }
25 div.flexbox {
26 border: 1px dashed blue;
27 width: 300px;
28 display: flex;
29 justify-content: space-around;
30 margin-bottom: 1px;
31 white-space: pre;
32 }
33 </style>
34 <script>
35 function insertNodeAtPosnInElem(aNodeToInsert, aPosn, aParentId) {
36 var parent = document.getElementById(aParentId);
37 var insertBeforeTarget = parent.firstChild;
38 for (var i = 0; i < aPosn; i++) {
39 insertBeforeTarget = insertBeforeTarget.nextSibling;
40 }
41 parent.insertBefore(aNodeToInsert, insertBeforeTarget);
42 }
44 function createSpanElem() {
45 var span = document.createElement("span");
46 span.setAttribute("class", "inserted");
47 span.appendChild(document.createTextNode("[NewSpan]"));
48 return span;
49 }
51 function tweak() {
52 // Inserting span, on either side of existing content
53 // --------------------------------------------------
54 insertNodeAtPosnInElem(createSpanElem(), 0, "f0");
55 insertNodeAtPosnInElem(createSpanElem(), 1, "f1");
57 // Inserting span and whitespace, before existing content
58 // ------------------------------------------------------
59 insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f2");
60 insertNodeAtPosnInElem(createSpanElem(), 0, "f2");
62 insertNodeAtPosnInElem(createSpanElem(), 0, "f3");
63 insertNodeAtPosnInElem(document.createTextNode(" "), 0, "f3");
65 // Inserting span and whitespace, after existing content
66 // -----------------------------------------------------
67 insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f4");
68 insertNodeAtPosnInElem(createSpanElem(), 1, "f4");
70 insertNodeAtPosnInElem(createSpanElem(), 1, "f5");
71 insertNodeAtPosnInElem(document.createTextNode(" "), 1, "f5");
73 // Inserting span and text, before existing content
74 // ------------------------------------------------
75 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f6");
76 insertNodeAtPosnInElem(createSpanElem(), 0, "f6");
78 insertNodeAtPosnInElem(createSpanElem(), 0, "f7");
79 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 0, "f7");
81 // Inserting span and text, after existing content
82 // -----------------------------------------------
83 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f8");
84 insertNodeAtPosnInElem(createSpanElem(), 1, "f8");
86 insertNodeAtPosnInElem(createSpanElem(), 1, "f9");
87 insertNodeAtPosnInElem(document.createTextNode("[NewText]"), 1, "f9");
89 document.documentElement.removeAttribute("class");
90 }
92 window.addEventListener("MozReftestInvalidate", tweak, false);
93 </script>
94 </head>
95 <body>
96 <div class="flexbox" id="f0"><span>[OldText]</span></div>
97 <div class="flexbox" id="f1"><span>[OldText]</span></div>
98 <div class="flexbox" id="f2"><span>[OldText]</span></div>
99 <div class="flexbox" id="f3"><span>[OldText]</span></div>
100 <div class="flexbox" id="f4"><span>[OldText]</span></div>
101 <div class="flexbox" id="f5"><span>[OldText]</span></div>
102 <div class="flexbox" id="f6"><span>[OldText]</span></div>
103 <div class="flexbox" id="f7"><span>[OldText]</span></div>
104 <div class="flexbox" id="f8"><span>[OldText]</span></div>
105 <div class="flexbox" id="f9"><span>[OldText]</span></div>
106 </body>
107 </html>
