fieldset.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. <!DOCTYPE HTML>
  2. <html><head>
  3. <meta charset="utf-8">
  4. <title>Testcase for bug 485149</title>
  5. <style type="text/css">
  6. html,body {
  7. color:black; background-color:white; font-size:16px; padding:0; margin:0;
  8. }
  9. body {padding:20px;}
  10. fieldset {
  11. overflow:hidden;
  12. background:yellow;
  13. box-shadow:0 0 5px 5px #cccccc;
  14. border:1px solid #000000;
  15. border-radius:7px;
  16. width:200px;
  17. height:50px;
  18. margin-left:5px;
  19. margin-right:2px;
  20. padding:10px;
  21. }
  22. legend { height:16px; }
  23. p { height:40px; margin:0; }
  24. #mask1 {
  25. position:absolute;
  26. left:0;
  27. top:0;
  28. background:black;
  29. z-index:1;
  30. width:150px;
  31. height:700px;
  32. }
  33. #mask2 {
  34. position:absolute;
  35. left:170px;
  36. top:330px;
  37. background:black;
  38. z-index:1;
  39. width:150px;
  40. height:300px;
  41. }
  42. #mask3 {
  43. position:absolute;
  44. left:0;
  45. top:380px;
  46. background:black;
  47. z-index:1;
  48. width:300px;
  49. height:300px;
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <fieldset><legend>Legend</legend>
  55. 1
  56. </fieldset>
  57. <p></p>
  58. <fieldset style="position:relative;"><legend>Legend</legend>
  59. 2
  60. </fieldset>
  61. <p></p>
  62. <fieldset>
  63. 3
  64. </fieldset>
  65. <p></p>
  66. <fieldset><legend style="width:150px;"></legend>
  67. 4
  68. </fieldset>
  69. <div id="mask1"></div>
  70. <div id="mask2"></div>
  71. <div id="mask3"></div>
  72. </body>
  73. </html>