1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/base/tests/test_maxLineBoxWidth.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,191 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=780258
1.8 +-->
1.9 +<head>
1.10 + <meta charset="utf-8">
1.11 + <title>Test for Bug 780258</title>
1.12 + <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
1.13 + <script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
1.14 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
1.15 + <style>
1.16 + p {
1.17 + margin-bottom: 30px;
1.18 + }
1.19 +
1.20 + .leftPadd {
1.21 + padding-left: 100px;
1.22 + }
1.23 +
1.24 + #container {
1.25 + width: 200px;
1.26 + }
1.27 +
1.28 + #box {
1.29 + position: absolute;
1.30 + height: 600px;
1.31 + width: 200px;
1.32 + border: 1px solid blue;
1.33 + }
1.34 +
1.35 + #constrained {
1.36 + display: none;
1.37 + border: 1px solid red;
1.38 + height: 200px;
1.39 + width: 300px;
1.40 + }
1.41 + </style>
1.42 +</head>
1.43 +<body>
1.44 +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=780258">Mozilla Bug 780258</a>
1.45 +<p id="display"></p>
1.46 +
1.47 +<div id="content" style="display: none">
1.48 + <div id="box"> </div>
1.49 + <div id="container">
1.50 + <p>All of this text should be completely contained
1.51 + within the blue box.
1.52 + <p>I once knew a man, showed me the sleight of hand.
1.53 + In the blink of an eye he danced across the strings.
1.54 + He played a song I've never heard; poignant and absurd;
1.55 + To this day, it leaves me wondering.
1.56 + <p>Don't let tomorrow find you wishin'.
1.57 + Boy, you've got a mission.
1.58 + Shake it, rattle, and roll.
1.59 + Now, just use your intuition.
1.60 + You'll get less competition
1.61 + from the clock up on the wall.
1.62 + <p>You are what you are.
1.63 + You dream what you dream.
1.64 + Play on your blue guitar for me.
1.65 + </div>
1.66 + <div id="constrained">
1.67 + <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.
1.68 + </div>
1.69 +</div>
1.70 +<pre id="test">
1.71 +<script type="application/javascript">
1.72 +/** Test for Bug 780258 and Bug 803211 **/
1.73 +
1.74 +var gNarrowerContentSnap;
1.75 +var gWideContentSnap;
1.76 +var gFirstBlankSnap;
1.77 +var gUnchangedContentSnap;
1.78 +var gIncorrectContentSnap;
1.79 +var gCorrectContentSnap;
1.80 +
1.81 +function setupFirstTest() {
1.82 + gFirstBlankSnap = snapshotWindow(window);
1.83 +
1.84 + // Display our content.
1.85 + document.getElementById('content').style.display = 'block';
1.86 +
1.87 + // Take a snapshot.
1.88 + gUnchangedContentSnap = snapshotWindow(window);
1.89 +}
1.90 +
1.91 +function performFirstTest() {
1.92 + setupFirstTest();
1.93 + // Verify this isn't the same as the blank snapshot.
1.94 + var result = compareSnapshots(gFirstBlankSnap, gUnchangedContentSnap, false);
1.95 + ok(result[0], "content should appear different than blank page");
1.96 +
1.97 + // Set container width to 350px.
1.98 + document.getElementById('container').style.width = '350px';
1.99 +
1.100 + // Take a snapshot.
1.101 + gIncorrectContentSnap = snapshotWindow(window);
1.102 +
1.103 + // Verify this is NOT the same as the first content snapshot.
1.104 + result = compareSnapshots(gUnchangedContentSnap, gIncorrectContentSnap, false);
1.105 + ok(result[0], "unchanged content should be different than changed content");
1.106 +
1.107 + // Run the max line box width change.
1.108 + SpecialPowers.setMaxLineBoxWidth(window, 200);
1.109 +
1.110 + // Take snapshot.
1.111 + gCorrectContentSnap = snapshotWindow(window);
1.112 +
1.113 + // Compare snapshots.
1.114 + result = compareSnapshots(gUnchangedContentSnap, gCorrectContentSnap, true);
1.115 + ok(result[0], "unchanged content should be the same as corrected content");
1.116 +}
1.117 +
1.118 +function setupSecondTest() {
1.119 + var elements = document.getElementById("container").getElementsByTagName("p");
1.120 + for (var i = 0; i < elements.length; i++) {
1.121 + elements[i].setAttribute("class", "leftPadd");
1.122 + }
1.123 +
1.124 + document.getElementById("box").style.paddingLeft = "100px";
1.125 +
1.126 + document.getElementById("container").style.width = "300px";
1.127 +}
1.128 +
1.129 +// Another test to verify that the max line box width is
1.130 +// actually forcing the WIDTH of the line boxes, and not
1.131 +// the absolute right edge to be set
1.132 +function performSecondTest() {
1.133 + setupSecondTest();
1.134 + SpecialPowers.setMaxLineBoxWidth(window, 2000);
1.135 +
1.136 + // Take a snapshot with a max line box width of 200px;
1.137 + gWideContentSnap = snapshotWindow(window);
1.138 +
1.139 + SpecialPowers.setMaxLineBoxWidth(window, 200);
1.140 +
1.141 + // Take a snapshot with the new max line box width
1.142 + gNarrowerContentSnap = snapshotWindow(window);
1.143 +
1.144 + // Compare snapshots.
1.145 + result = compareSnapshots(gNarrowerContentSnap, gWideContentSnap, true);
1.146 + ok(result[0], "content with a max line box width of 2000px and content with" +
1.147 + " a max line box width of 200px should be the same with a 100px left padding");
1.148 +}
1.149 +
1.150 +function setupThirdTest() {
1.151 + document.getElementById('container').style.display = 'none';
1.152 + document.getElementById('box').style.display = 'none';
1.153 + document.getElementById('constrained').style.display = 'block';
1.154 +}
1.155 +
1.156 +function performThirdTest() {
1.157 + setupThirdTest();
1.158 +
1.159 + // Take a snapshot of what the content looks like before.
1.160 + gCorrectContentSnap = snapshotWindow(window);
1.161 +
1.162 + // Apply a max line box width.
1.163 + SpecialPowers.setMaxLineBoxWidth(window, 200);
1.164 +
1.165 + // Take another snapshot.
1.166 + gNarrowerContentSnap = snapshotWindow(window);
1.167 +
1.168 + // Verify the max line box width change hasn't changed anything.
1.169 + result = compareSnapshots(gNarrowerContentSnap, gCorrectContentSnap, true);
1.170 + ok(result[0], "constrained height elements should not be subjected to max line box width adjustments");
1.171 +}
1.172 +
1.173 +SimpleTest.waitForExplicitFinish();
1.174 +
1.175 +// The first test verifies that the max line box width
1.176 +// actually causes a change in page layout.
1.177 +performFirstTest();
1.178 +
1.179 +// The second test verifies that the max line box width
1.180 +// is actually measuring width, and not position of
1.181 +// the left/right edges of the line box.
1.182 +performSecondTest();
1.183 +
1.184 +// The third test verifies that the max line box width
1.185 +// does not have any effect on constrained height elements.
1.186 +performThirdTest();
1.187 +
1.188 +// Finish the test.
1.189 +SimpleTest.finish();
1.190 +
1.191 +</script>
1.192 +</pre>
1.193 +</body>
1.194 +</html>
