layout/base/tests/test_maxLineBoxWidth.html@6474c204b198
layout/base/tests/test_maxLineBoxWidth.html
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 <!DOCTYPE HTML>
2 <html>
3 <!--
4 https://bugzilla.mozilla.org/show_bug.cgi?id=780258
5 -->
6 <head>
7 <meta charset="utf-8">
8 <title>Test for Bug 780258</title>
9 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
10 <script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
12 <style>
13 p {
14 margin-bottom: 30px;
15 }
17 .leftPadd {
18 padding-left: 100px;
19 }
21 #container {
22 width: 200px;
23 }
25 #box {
26 position: absolute;
27 height: 600px;
28 width: 200px;
29 border: 1px solid blue;
30 }
32 #constrained {
33 display: none;
34 border: 1px solid red;
35 height: 200px;
36 width: 300px;
37 }
38 </style>
39 </head>
40 <body>
41 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=780258">Mozilla Bug 780258</a>
42 <p id="display"></p>
44 <div id="content" style="display: none">
45 <div id="box"> </div>
46 <div id="container">
47 <p>All of this text should be completely contained
48 within the blue box.
49 <p>I once knew a man, showed me the sleight of hand.
50 In the blink of an eye he danced across the strings.
51 He played a song I've never heard; poignant and absurd;
52 To this day, it leaves me wondering.
53 <p>Don't let tomorrow find you wishin'.
54 Boy, you've got a mission.
55 Shake it, rattle, and roll.
56 Now, just use your intuition.
57 You'll get less competition
58 from the clock up on the wall.
59 <p>You are what you are.
60 You dream what you dream.
61 Play on your blue guitar for me.
62 </div>
63 <div id="constrained">
64 <p>This text should not apply the max line box width, since it exists within a constrained height block. This is used for limiting the reflow-on-zoom feature for constrained height blocks, since otherwise they could overflow into an element later in the document, or potentially have their text cut off vertically.
65 </div>
66 </div>
67 <pre id="test">
68 <script type="application/javascript">
69 /** Test for Bug 780258 and Bug 803211 **/
71 var gNarrowerContentSnap;
72 var gWideContentSnap;
73 var gFirstBlankSnap;
74 var gUnchangedContentSnap;
75 var gIncorrectContentSnap;
76 var gCorrectContentSnap;
78 function setupFirstTest() {
79 gFirstBlankSnap = snapshotWindow(window);
81 // Display our content.
82 document.getElementById('content').style.display = 'block';
84 // Take a snapshot.
85 gUnchangedContentSnap = snapshotWindow(window);
86 }
88 function performFirstTest() {
89 setupFirstTest();
90 // Verify this isn't the same as the blank snapshot.
91 var result = compareSnapshots(gFirstBlankSnap, gUnchangedContentSnap, false);
92 ok(result[0], "content should appear different than blank page");
94 // Set container width to 350px.
95 document.getElementById('container').style.width = '350px';
97 // Take a snapshot.
98 gIncorrectContentSnap = snapshotWindow(window);
100 // Verify this is NOT the same as the first content snapshot.
101 result = compareSnapshots(gUnchangedContentSnap, gIncorrectContentSnap, false);
102 ok(result[0], "unchanged content should be different than changed content");
104 // Run the max line box width change.
105 SpecialPowers.setMaxLineBoxWidth(window, 200);
107 // Take snapshot.
108 gCorrectContentSnap = snapshotWindow(window);
110 // Compare snapshots.
111 result = compareSnapshots(gUnchangedContentSnap, gCorrectContentSnap, true);
112 ok(result[0], "unchanged content should be the same as corrected content");
113 }
115 function setupSecondTest() {
116 var elements = document.getElementById("container").getElementsByTagName("p");
117 for (var i = 0; i < elements.length; i++) {
118 elements[i].setAttribute("class", "leftPadd");
119 }
121 document.getElementById("box").style.paddingLeft = "100px";
123 document.getElementById("container").style.width = "300px";
124 }
126 // Another test to verify that the max line box width is
127 // actually forcing the WIDTH of the line boxes, and not
128 // the absolute right edge to be set
129 function performSecondTest() {
130 setupSecondTest();
131 SpecialPowers.setMaxLineBoxWidth(window, 2000);
133 // Take a snapshot with a max line box width of 200px;
134 gWideContentSnap = snapshotWindow(window);
136 SpecialPowers.setMaxLineBoxWidth(window, 200);
138 // Take a snapshot with the new max line box width
139 gNarrowerContentSnap = snapshotWindow(window);
141 // Compare snapshots.
142 result = compareSnapshots(gNarrowerContentSnap, gWideContentSnap, true);
143 ok(result[0], "content with a max line box width of 2000px and content with" +
144 " a max line box width of 200px should be the same with a 100px left padding");
145 }
147 function setupThirdTest() {
148 document.getElementById('container').style.display = 'none';
149 document.getElementById('box').style.display = 'none';
150 document.getElementById('constrained').style.display = 'block';
151 }
153 function performThirdTest() {
154 setupThirdTest();
156 // Take a snapshot of what the content looks like before.
157 gCorrectContentSnap = snapshotWindow(window);
159 // Apply a max line box width.
160 SpecialPowers.setMaxLineBoxWidth(window, 200);
162 // Take another snapshot.
163 gNarrowerContentSnap = snapshotWindow(window);
165 // Verify the max line box width change hasn't changed anything.
166 result = compareSnapshots(gNarrowerContentSnap, gCorrectContentSnap, true);
167 ok(result[0], "constrained height elements should not be subjected to max line box width adjustments");
168 }
170 SimpleTest.waitForExplicitFinish();
172 // The first test verifies that the max line box width
173 // actually causes a change in page layout.
174 performFirstTest();
176 // The second test verifies that the max line box width
177 // is actually measuring width, and not position of
178 // the left/right edges of the line box.
179 performSecondTest();
181 // The third test verifies that the max line box width
182 // does not have any effect on constrained height elements.
183 performThirdTest();
185 // Finish the test.
186 SimpleTest.finish();
188 </script>
189 </pre>
190 </body>
191 </html>
