Skip to main content

Browse the archive

Raw File
test_maxLineBoxWidth.html 
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=780258
-->
<head>
  <meta charset="utf-8">
  <title>Test for Bug 780258</title>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
  <style>
  p {
    margin-bottom: 30px;
  }

  .leftPadd {
    padding-left: 100px;
  }

  #container {
    width: 200px;
  }

  #box {
    position: absolute;
    height: 600px;
    width: 200px;
    border: 1px solid blue;
  }

  #constrained {
    display: none;
    border: 1px solid red;
    height: 200px;
    width: 300px;
  }
  </style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=780258">Mozilla Bug 780258</a>
<p id="display"></p>

<div id="content" style="display: none">
  <div id="box">&nbsp;</div>
  <div id="container">
    <p>All of this text should be completely contained
       within the blue box.
    <p>I once knew a man, showed me the sleight of hand.
       In the blink of an eye he danced across the strings.
       He played a song I've never heard; poignant and absurd;
       To this day, it leaves me wondering.
    <p>Don't let tomorrow find you wishin'.
       Boy, you've got a mission.
       Shake it, rattle, and roll.
       Now, just use your intuition.
       You'll get less competition
       from the clock up on the wall.
    <p>You are what you are.
       You dream what you dream.
       Play on your blue guitar for me.
  </div>
  <div id="constrained">
    <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.
  </div>
</div>
<pre id="test">
<script type="application/javascript">
/** Test for Bug 780258 and Bug 803211 **/

var gNarrowerContentSnap;
var gWideContentSnap;
var gFirstBlankSnap;
var gUnchangedContentSnap;
var gIncorrectContentSnap;
var gCorrectContentSnap;

function setupFirstTest() {
  gFirstBlankSnap = snapshotWindow(window);

  // Display our content.
  document.getElementById('content').style.display = 'block';

  // Take a snapshot.
  gUnchangedContentSnap = snapshotWindow(window);
}

function performFirstTest() {
  setupFirstTest();
  // Verify this isn't the same as the blank snapshot.
  var result = compareSnapshots(gFirstBlankSnap, gUnchangedContentSnap, false);
  ok(result[0], "content should appear different than blank page");

  // Set container width to 350px.
  document.getElementById('container').style.width = '350px';

  // Take a snapshot.
  gIncorrectContentSnap = snapshotWindow(window);

  // Verify this is NOT the same as the first content snapshot.
  result = compareSnapshots(gUnchangedContentSnap, gIncorrectContentSnap, false);
  ok(result[0], "unchanged content should be different than changed content");

  // Run the max line box width change.
  SpecialPowers.setMaxLineBoxWidth(window, 200);

  // Take snapshot.
  gCorrectContentSnap = snapshotWindow(window);

  // Compare snapshots.
  result = compareSnapshots(gUnchangedContentSnap, gCorrectContentSnap, true);
  ok(result[0], "unchanged content should be the same as corrected content");
}

function setupSecondTest() {
  var elements = document.getElementById("container").getElementsByTagName("p");
  for (var i = 0; i < elements.length; i++) {
    elements[i].setAttribute("class", "leftPadd");
  }

  document.getElementById("box").style.paddingLeft = "100px";

  document.getElementById("container").style.width = "300px";
}

// Another test to verify that the max line box width is
// actually forcing the WIDTH of the line boxes, and not
// the absolute right edge to be set
function performSecondTest() {
  setupSecondTest();
  SpecialPowers.setMaxLineBoxWidth(window, 2000);

  // Take a snapshot with a max line box width of 200px;
  gWideContentSnap = snapshotWindow(window);

  SpecialPowers.setMaxLineBoxWidth(window, 200);

  // Take a snapshot with the new max line box width
  gNarrowerContentSnap = snapshotWindow(window);

  // Compare snapshots.
  result = compareSnapshots(gNarrowerContentSnap, gWideContentSnap, true);
  ok(result[0], "content with a max line box width of 2000px and content with" +
     " a max line box width of 200px should be the same with a 100px left padding");
}

function setupThirdTest() {
  document.getElementById('container').style.display = 'none';
  document.getElementById('box').style.display = 'none';
  document.getElementById('constrained').style.display = 'block';
}

function performThirdTest() {
  setupThirdTest();

  // Take a snapshot of what the content looks like before.
  gCorrectContentSnap = snapshotWindow(window);

  // Apply a max line box width.
  SpecialPowers.setMaxLineBoxWidth(window, 200);

  // Take another snapshot.
  gNarrowerContentSnap = snapshotWindow(window);

  // Verify the max line box width change hasn't changed anything.
  result = compareSnapshots(gNarrowerContentSnap, gCorrectContentSnap, true);
  ok(result[0], "constrained height elements should not be subjected to max line box width adjustments"); 
}

SimpleTest.waitForExplicitFinish();

// The first test verifies that the max line box width
// actually causes a change in page layout.
performFirstTest();

// The second test verifies that the max line box width
// is actually measuring width, and not position of
// the left/right edges of the line box.
performSecondTest();

// The third test verifies that the max line box width
// does not have any effect on constrained height elements.
performThirdTest();

// Finish the test.
SimpleTest.finish();

</script>
</pre>
</body>
</html>
back to top