1144501-1b-block-end-margin-orthogonal-size.html (1216B)
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 writing-mode: vertical-rl; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="outer"> 31 <p style="margin-top:20px"> 32 There should be a horizontal green bar the full width of the div. 33 </p> 34 <div class="hr"></div> 35 </div> 36 <div class="outer"> 37 <p style="margin-right:20px"> 38 There should be a horizontal green bar the full width of the div. 39 </p> 40 <div class="hr"></div> 41 </div> 42 <br> 43 <div class="outer"> 44 <p style="margin-bottom:20px"> 45 There should be a horizontal green bar the full width of the div. 46 </p> 47 <div class="hr"></div> 48 </div> 49 <div class="outer"> 50 <p style="margin-left:20px"> 51 There should be a horizontal green bar the full width of the div. 52 </p> 53 <div class="hr"></div> 54 </div> 55 </body> 56 </html>