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