box-sizing-minmax-height.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!DOCTYPE HTML>
  2. <html><head>
  3. <title>min-/max-height testcase for bug 308801</title>
  4. <style type="text/css">
  5. html,body {
  6. color:black; background-color:white; font-size:16px; padding:0; margin:0;
  7. }
  8. div {
  9. margin:0;
  10. padding:0;
  11. }
  12. .min { min-height:37px; }
  13. .max { max-height:37px; }
  14. .hidden { overflow:hidden; }
  15. .box {
  16. box-sizing: border-box;
  17. }
  18. .test1 {
  19. border:1px solid black;
  20. }
  21. .test2 {
  22. padding:3px;
  23. background:black;
  24. }
  25. .test3 {
  26. border:8px solid black;
  27. padding:5px;
  28. }
  29. p { height:43px; margin:0; padding:0; }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="box min test1"></div>
  34. <br><div class="box min test2"></div>
  35. <br><div class="box min test3"></div>
  36. <br><div class="box max test1"><p></div>
  37. <br><div class="box max test2"><p></div>
  38. <br><div class="box max test3"><p></div>
  39. <br><!-- overflow:hidden -->
  40. <div class="hidden box min test1"></div>
  41. <br><div class="hidden box min test2"></div>
  42. <br><div class="hidden box min test3"></div>
  43. <br><div class="hidden box max test1"><p></div>
  44. <br><div class="hidden box max test2"><p></div>
  45. <br><div class="hidden box max test3"><p></div>
  46. </body>
  47. </html>