single-line-cells-repeating-thead-break-inside-on-thead-only.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <script src="../resources/text-based-repaint.js"></script>
  3. <style>
  4. table {
  5. border-collapse: collapse;
  6. }
  7. td, th {
  8. background-color: #ddd;
  9. border: 1px solid black;
  10. }
  11. thead {
  12. break-inside: avoid;
  13. }
  14. </style>
  15. <p>crbug.com/24826: A table header group repeats on each page and forces a strut on the rows to achieve it, even when the rows themselves do not force a strut with break-inside:avoid.</p>
  16. <div style="-webkit-columns:3; line-height: 20px; column-fill: auto; height:190px; background-color: yellow;">
  17. <table>
  18. <thead>
  19. <tr>
  20. <th id="target">Col 1</th>
  21. <th>Col 2</th>
  22. </tr>
  23. </thead>
  24. <tbody>
  25. <tr><td>Te</td><td>xt</td></tr>
  26. <tr><td>Te</td><td>xt</td></tr>
  27. <tr><td>Te</td><td>xt</td></tr>
  28. <tr><td>Te</td><td>xt</td></tr>
  29. <tr><td>Te</td><td>xt</td></tr>
  30. <tr><td>Te</td><td>xt</td></tr>
  31. <tr><td>Te</td><td>xt</td></tr>
  32. <tr><td>Te</td><td>xt</td></tr>
  33. <tr><td>Te</td><td>xt</td></tr>
  34. <tr><td>Te</td><td>xt</td></tr>
  35. <tr><td>Te</td><td>xt</td></tr>
  36. <tr><td>Te</td><td>xt</td></tr>
  37. <tr><td>Te</td><td>xt</td></tr>
  38. <tr><td>Te</td><td>xt</td></tr>
  39. <tr><td>Te</td><td>xt</td></tr>
  40. <tr><td>Te</td><td>xt</td></tr>
  41. <tr><td>Te</td><td>xt</td></tr>
  42. <tr><td>Te</td><td>xt</td></tr>
  43. <tr><td>Te</td><td>xt</td></tr>
  44. <tr><td>Te</td><td>xt</td></tr>
  45. <tr><td>Te</td><td>xt</td></tr>
  46. <tr><td>Te</td><td>xt</td></tr>
  47. <tr><td>Te</td><td>xt</td></tr>
  48. </tbody>
  49. </table>
  50. </div>
  51. <script>
  52. onload = runRepaintAndPixelTest;
  53. function repaintTest()
  54. {
  55. target.style.color = 'red';
  56. }
  57. </script>