layout/reftests/margin-collapsing/block-sibling-2-dyn.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait">
   3 <head>
   4 <style type="text/css">
   5 #sibling1 {
   6  height: 20px;
   7  background-color: red;
   8  margin-bottom: 20px;
   9 }
  10 #sibling2 {
  11  display: none;
  12  height: 20px;
  13  background-color: blue;
  14  margin-top: 10px;
  15  margin-bottom: 10px;
  16  position: relative;
  17  top: 40px;
  18 }
  19 #sibling3 {
  20  height: 20px;
  21  background-color: green;
  22  margin-top: 20px;
  23  position: relative;
  24  top: -40px;
  25 }
  26 </style>
  27 <script type="text/javascript">
  28 function test() {
  29  document.getElementById('sibling2').style.display = 'block';
  30  document.documentElement.removeAttribute('class');
  31 }
  32 document.addEventListener('MozReftestInvalidate', test);
  33 </script>
  34 </head>
  35 <body>
  36 <div id="sibling1"></div>
  37 <div id="sibling2"></div>
  38 <div id="sibling3"></div>
  39 </body>
  40 </html>