table-caption-bottom-outside-1-dyn.html 850 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!DOCTYPE html>
  2. <html class="reftest-wait">
  3. <head>
  4. <style type="text/css">
  5. #block1, #block2 {
  6. height: 20px;
  7. background-color: green;
  8. }
  9. #block1 {
  10. margin-bottom: 10px;
  11. }
  12. #block2 {
  13. margin-top: 10px;
  14. }
  15. #table {
  16. display: table;
  17. }
  18. #caption {
  19. display: table-cell;
  20. caption-side: bottom-outside;
  21. height: 20px;
  22. margin: 20px 0;
  23. background-color: blue;
  24. }
  25. #cell {
  26. display: table-cell;
  27. width: 100px;
  28. height: 20px;
  29. background-color: orange;
  30. }
  31. </style>
  32. <script type="text/javascript">
  33. function test() {
  34. document.getElementById('caption').style.display = 'table-caption';
  35. document.documentElement.removeAttribute('class');
  36. }
  37. document.addEventListener('MozReftestInvalidate', test, false);
  38. </script>
  39. </head>
  40. <body>
  41. <div id="block1"></div>
  42. <div id="table">
  43. <div id="caption"></div>
  44. <div id="cell"></div>
  45. </div>
  46. <div id="block2"></div>
  47. </body>
  48. </html>