1144501-1-block-end-margin-orthogonal-size-ref.html (1185B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Bug 1144501 testcase</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 .outer { 8 width: 300px; 9 height: 100px; 10 border: 1px solid silver; 11 margin: 8px 0; 12 display: inline-block; 13 vertical-align: top; 14 } 15 p { 16 margin: 0; 17 background: #eee; 18 } 19 .hr { 20 background-color: green; 21 border: transparent none 0px; 22 height: 10px; 23 margin: 0px; 24 width: 100%; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="outer"> 30 <p style="margin-top:20px"> 31 There should be a horizontal green bar the full width of the div. 32 </p> 33 <div class="hr"></div> 34 </div> 35 <div class="outer"> 36 <p style="margin-right:20px"> 37 There should be a horizontal green bar the full width of the div. 38 </p> 39 <div class="hr"></div> 40 </div> 41 <br> 42 <div class="outer"> 43 <p style="margin-bottom:20px"> 44 There should be a horizontal green bar the full width of the div. 45 </p> 46 <div class="hr"></div> 47 </div> 48 <div class="outer"> 49 <p style="margin-left:20px"> 50 There should be a horizontal green bar the full width of the div. 51 </p> 52 <div class="hr"></div> 53 </div> 54 </body> 55 </html>