fieldset-overflow.html (1646B)
1 <!DOCTYPE HTML> 2 <title>fieldset overflow</title> 3 <link rel=match href=fieldset-overflow-ref.html> 4 <style> 5 fieldset, legend { 6 border: 1em solid; 7 margin: 0; 8 padding: 0; 9 background: lime 10 } 11 #f1 { 12 overflow: auto; 13 height: 2em; 14 } 15 legend { 16 height: 1em; 17 width: 5em; 18 } 19 div { 20 background: red; 21 height: 2em; 22 } 23 24 #f2 { 25 border: none; 26 padding: 50px; 27 max-height: 50px; 28 overflow: scroll; 29 } 30 31 #f3 { 32 width: 20em; 33 max-height: 250px; 34 padding: 7px; 35 overflow: auto; 36 box-sizing: border-box; 37 border-color: transparent; 38 background: transparent; 39 } 40 41 #f3 legend { 42 height: 40px; 43 border: none; 44 color: transparent; 45 background: transparent; 46 } 47 </style> 48 <p>There should be no red.</p> 49 <fieldset id="f1"> 50 <legend></legend> 51 <div></div> 52 <div id=last></div> 53 </fieldset> 54 55 <!-- crbug.com/1247733 --> 56 <fieldset id="f2"> 57 <div style="height:200px; background:blue"></div> 58 </fieldset> 59 <script> 60 document.getElementById('last').scrollIntoView(); 61 </script> 62 63 <!-- crbug.com/1282408 --> 64 <fieldset id="f3"> 65 <legend>Legend</legend> 66 <p> 67 The quick brown fox jumps over the lazy dog. 68 The quick brown fox jumps over the lazy dog. 69 The quick brown fox jumps over the lazy dog. 70 The quick brown fox jumps over the lazy dog. 71 The quick brown fox jumps over the lazy dog. 72 The quick brown fox jumps over the lazy dog. 73 The quick brown fox jumps over the lazy dog. 74 The quick brown fox jumps over the lazy dog. 75 The quick brown fox jumps over the lazy dog. 76 The quick brown fox jumps over the lazy dog. 77 The quick brown fox jumps over the lazy dog. 78 The quick brown fox jumps over the lazy dog. 79 The quick brown fox jumps over the lazy dog. 80 </p> 81 </fieldset>