innerHTML text added rolls past bottom TABLE boundary

RESOLVED WORKSFORME

Status

()

Core
Layout: Tables
RESOLVED WORKSFORME
14 years ago
14 years ago

People

(Reporter: Tom Ekberg, Unassigned)

Tracking

Trunk
x86
Windows XP
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 1 obsolete attachment)

(Reporter)

Description

14 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113

Load the following page and follow the instructions. It explains what
steps to follow to reproduce this problem and details the incorrect
result.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<TITLE>innerHTML test</TITLE>
</HEAD>
<SCRIPT>
//-------------------------------------------------------------------------
/**
 * Replace all occurrances of one substring with another.
 * This version was rewritten slightly from utility.TextUtil.replace.
 *
 * @param  source  search through this string.
 *
 * @param  search  look for this string.
 *
 * @param  replacement  replace with this string.
 *
 * @return
 *   String - look through source and change all occurrances of search to
     * replacement.
 */
//-------------------------------------------------------------------------
function replace(source, search, replacement) {
    var searchLength;
    var i;

    searchLength = search.length;
    for(i=source.indexOf(search); i >= 0;
        i=source.indexOf(search, i+replacement.length)) {
        if (i+searchLength == source.length) {
            // At end of source.
            source = source.substring(0, i) + replacement;
        }
        else if (i == 0) {
            // At beginning of source.
            source = replacement + source.substring(searchLength);
        }
        else {
            // Somewhere in the middle.
            source = source.substring(0,i) + replacement +
source.substring(i+searchLength);
        }
    }
    return source;
}


//-----------------------------------------------------------------------------
/**
 * Add a new Level/Group for this user. This only updates the web page. One
 * must press the "Submit" button to make this persistent.
 */
//-----------------------------------------------------------------------------
function newLevelGroup() {
    var form = document.user;
    var i;

    if (form.groupName.value == "") {
        alert("Please specify a group name.");
        form.groupName.focus();
    }
    else {
        var levelNames = form.levelNames.value.split(",");
        var groupNames = form.groupNames.value.split(",");
        var newLevelName =
form.levelName.options[form.levelName.selectedIndex].value;
        var newGroupName = form.groupName.value;
        var found = false;

        // Make sure the new group isn't already there.
        for(i=0; i<groupNames.length; i++) {
            if (newGroupName == groupNames[i]) {
                found = true;
                break;
            }
        }
        if (found) {
            alert("You are already a member of group '" + newGroupName + "'." +
                "\nPlease specify a different group name.");
            form.groupName.focus();
        }
        else {
            levelNames[levelNames.length] = newLevelName;
            groupNames[groupNames.length] = newGroupName;
            updateLevelGroup(levelNames, groupNames);
        }
    }
}


//-----------------------------------------------------------------------------
/**
 * Update the FORM and the HTML to reflect the new level/group settings.
 *
 * @param  levelNames  array of level names.
 *
 * @param  groupNames  array of group names.
 */
//-----------------------------------------------------------------------------
function updateLevelGroup(levelNames, groupNames) {
    var form = document.user;
    var i;

    form.levelNames.value = levelNames.join(",");
    form.groupNames.value = groupNames.join(",");

    // Update the page to show the new level/group.
    var newButton = (levelNames.length <= 1)
                ? ""
                : "<TD> <INPUT TYPE=BUTTON VALUE='Delete'
ONCLICK='deleteLevelGroup(%i%)'> </TD>";
    var plural = groupNames.length == 1
                ? ""
                : "s";

    var html = "<TABLE>";
    for(i=0; i<levelNames.length; i++) {
        html += "<TR>" +
                    "<TD>" +levelNames[i] + "</TD>" +
                    "<TD>" +groupNames[i] + "</TD>" +
                    replace(newButton, "%i%", ""+i) +
                    "</TR>";
    }
    html += "</TABLE>";
    document.getElementById('levelsGroups').innerHTML = html;
    document.getElementById('levelsGroupsLabel').innerHTML =
                'Level' + plural + '/Group' + plural + ':';
}


//-----------------------------------------------------------------------------
/**
 * Delete the identified level/group entry.
 *
 * @param  index  the index to remove. The first one is numbered 0.
 */
//-----------------------------------------------------------------------------
function deleteLevelGroup(index) {
    var form = document.user;
    var levelNames = form.levelNames.value.split(",");
    var groupNames = form.groupNames.value.split(",");
    var i;

    for(i=index+1; i<levelNames.length; i++) {
        levelNames[i-1] = levelNames[i];
        groupNames[i-1] = groupNames[i];
    }
    levelNames.length--;
    groupNames.length--;
    updateLevelGroup(levelNames, groupNames);
}
</SCRIPT>
<BODY>
<H1>innerHTML test</H1>
<P>
The following illustrates a problem which is probably related to innerHTML. The
following allows one to add new Level/Group items to a table. Adding the first
items works fine. Adding the second item causes problems - see below.
<P>
A varient without the nested TABLE produces similar results - also broken.
This code works as expected (i.e. correctly) for Internet Explorer.
<P>
To reproduce the innerHTML problem, follow these steps:
<OL>
  <LI>Enter a value other than Test in the TEXT box to the left of the
  "New" button.</LI>
  <LI>Click on the "New" button</LI>
  <LI>Enter another value other than Test, or what you entered in step 1.</LI>
  <LI>Click on the "New" button</LI>
</OL>
<P>
The result is:
<UL>
  <LI>The text in the TEXT box is moved below the TABLE.</LI>
  <LI>The border around the TEXT box is gone.</LI>
  <LI>The SELECT list and "New" button are also gone.</LI>
  <LI>The bottom edge of the right column of the TABLE is gone.
</LI>
</UL>
<P>
Clicking one of the "Delete" buttons causes the table contents to become
correct again.
<P>
<FORM NAME="user">
<INPUT TYPE=HIDDEN NAME="levelNames" VALUE="Super">
<INPUT TYPE=HIDDEN NAME="groupNames" VALUE="Test">
<TABLE BORDER=1>
  <TR>
    <TD VALIGN=TOP>
      <font class='caption'>
        <DIV ID='levelsGroupsLabel'>
    Level/Group
        </DIV>
      </font>
    </TD>
    <TD>
      <DIV ID='levelsGroups'>
        <TABLE>
          <TR>
            <TD> Super </TD>
            <TD> Test </TD>
          </TR>
        </TABLE>
      </DIV>
      <BR>
      <SELECT NAME="levelName">
        <OPTION VALUE='Super' SELECTED>Super
        <OPTION VALUE='Admin'>Admin
        <OPTION VALUE='Normal'>Normal
        <OPTION VALUE='Reader'>Reader
      </SELECT>
      <INPUT TYPE=TEXT NAME="groupName" SIZE=5 MAXLENGTH=100>
      <INPUT TYPE=BUTTON VALUE="New" ONCLICK="newLevelGroup()">
    </TD>
  </TR>
</TABLE>
</FORM>
</BODY>
</HTML>


Reproducible: Always
Steps to Reproduce:
1. These steps are in the HTML file in the details section.
2.
3.

Actual Results:  
This is described in the HTML file in the details section.

Expected Results:  
The TABLE should expand its height to contain the new cell contents.

Comment 1

14 years ago
Created attachment 147314 [details]
reporters testcase as attachment

WFM, current trunk, Linux.
Created attachment 147327 [details]
Same testcase, without JS error
Over to table layout; I'm seeing this with a build from a few days back, and I'm
not sure anything landed since then that would fix it, but leaving unconfirmed
till someone with a build from today can check.
Assignee: general → nobody
Component: DOM: HTML → Layout: Tables
QA Contact: ian → core.layout.tables

Comment 4

14 years ago
I see this with 2004042909 winxp

Comment 5

14 years ago
WFM Firefox 20040503/Win2k3
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.