<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<!-- ***** BEGIN LICENSE BLOCK *****
   - Version: MPL 1.1/GPL 2.0/LGPL 2.1
   -
   - The contents of this file are subject to the Mozilla Public License Version
   - 1.1 (the "License"); you may not use this file except in compliance with
   - the License. You may obtain a copy of the License at
   - http://www.mozilla.org/MPL/
   -
   - Software distributed under the License is distributed on an "AS IS" basis,
   - WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
   - for the specific language governing rights and limitations under the
   - License.
   -
   - The Original Code is a layout regression testcase .
   -
   - The Initial Developer of the Original Code is
   - bmlk@gmx.de.
   - Portions created by the Initial Developer are Copyright (C) 2003   
   - the Initial Developer. All Rights Reserved.
   -
   - Contributor(s):
   -
   - Alternatively, the contents of this file may be used under the terms of
   - either the GNU General Public License Version 2 or later (the "GPL"), or
   - the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
   - in which case the provisions of the GPL or the LGPL are applicable instead
   - of those above. If you wish to allow use of your version of this file only
   - under the terms of either the GPL or the LGPL, and not to allow others to
   - use your version of this file under the terms of the MPL, indicate your
   - decision by deleting the provisions above and replace them with the notice
   - and other provisions required by the LGPL or the GPL. If you do not delete
   - the provisions above, a recipient may use your version of this file under
   - the terms of any one of the MPL, the GPL or the LGPL.
   -
   - ***** END LICENSE BLOCK ***** -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>testscase for table overflow handling  dirty reflow due to row group removal</title>
<style type="text/css">
td {padding:20px;
background-color:yellow}
table { 
  width:200px;
  border-spacing:0px;
  background-color:blue
}
#spacer {
height:100px;
}
#outer { 
   width:50px;
   height:50px;
   background-color:green;
}
#inner { 
   width:400px;
   height:300px;
   background:red;
}
#target {
  vertical-align:bottom;
}
caption {caption-side:right;
background-color:orange;
height:200px}
</style>
<script type="text/javascript">
function domfunc(){
var table= document.getElementById("t1");
var rowgroup= document.getElementById("remove");
 table.removeChild(rowgroup);
}
</script>

</head>

<body  onload="domfunc()">
<table id="t1">
<caption id="c1">
cap
</caption>
<tbody id="remove">
<tr>
<td style="height:100px">foo</td><td> bar<br>baz</td></tr>
</tbody>
<tbody>
 <tr>
  <td id="spacer">foo</td>
  <td id="target"><div id="outer"><div id="inner">d</div></div></td>
 </tr>
</tbody>
</table>

</body>

</html>