margin-auto-on-block-box.html (3297B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: Resolution of margin-left or margin-right set to auto on a non-replaced block box</title> 4 <link rel="match" href="margin-auto-on-block-box-ref.html"> 5 <link rel="help" href="https://drafts.csswg.org/css2/#blockwidth"> 6 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 7 <meta name="assert" content=" 8 margin-left:auto shouldn't resolve to a negative amount (assuming direction:ltr). 9 margin-right:auto may resolve to a negative amount when there is over-constraintment."> 10 11 <style> 12 .wrapper { 13 width: 100px; 14 margin-left: 250px; 15 } 16 .test { 17 width: 50px; 18 height: 5px; 19 background: black; 20 margin: auto; 21 } 22 .test.big { 23 width: 200px; 24 } 25 </style> 26 27 <div class="wrapper"> 28 <div class="test"></div> 29 <div class="test big"></div> 30 31 <div class="test" style="margin-left: -125px"></div> 32 <div class="test" style="margin-left: -100px"></div> 33 <div class="test" style="margin-left: -75px"></div> 34 <div class="test" style="margin-left: -50px"></div> 35 <div class="test" style="margin-left: -25px"></div> 36 <div class="test" style="margin-left: 0"></div> 37 <div class="test" style="margin-left: 25px"></div> 38 <div class="test" style="margin-left: 50px"></div> 39 <div class="test" style="margin-left: 75px"></div> 40 <div class="test" style="margin-left: 100px"></div> 41 <div class="test" style="margin-left: 125px"></div> 42 43 <div class="test big" style="margin-left: -250px"></div> 44 <div class="test big" style="margin-left: -200px"></div> 45 <div class="test big" style="margin-left: -150px"></div> 46 <div class="test big" style="margin-left: -100px"></div> 47 <div class="test big" style="margin-left: -50px"></div> 48 <div class="test big" style="margin-left: 0"></div> 49 <div class="test big" style="margin-left: 50px"></div> 50 <div class="test big" style="margin-left: 100px"></div> 51 <div class="test big" style="margin-left: 150px"></div> 52 <div class="test big" style="margin-left: 200px"></div> 53 <div class="test big" style="margin-left: 250px"></div> 54 55 <div class="test" style="margin-right: -125px"></div> 56 <div class="test" style="margin-right: -100px"></div> 57 <div class="test" style="margin-right: -75px"></div> 58 <div class="test" style="margin-right: -50px"></div> 59 <div class="test" style="margin-right: -25px"></div> 60 <div class="test" style="margin-right: 0"></div> 61 <div class="test" style="margin-right: 25px"></div> 62 <div class="test" style="margin-right: 50px"></div> 63 <div class="test" style="margin-right: 75px"></div> 64 <div class="test" style="margin-right: 100px"></div> 65 <div class="test" style="margin-right: 125px"></div> 66 67 <div class="test big" style="margin-right: -250px"></div> 68 <div class="test big" style="margin-right: -200px"></div> 69 <div class="test big" style="margin-right: -150px"></div> 70 <div class="test big" style="margin-right: -100px"></div> 71 <div class="test big" style="margin-right: -50px"></div> 72 <div class="test big" style="margin-right: 0"></div> 73 <div class="test big" style="margin-right: 50px"></div> 74 <div class="test big" style="margin-right: 100px"></div> 75 <div class="test big" style="margin-right: 150px"></div> 76 <div class="test big" style="margin-right: 200px"></div> 77 <div class="test big" style="margin-right: 250px"></div> 78 </div>