overconstrained-001-print.html (2718B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-page-3/#margin-dimension"> 4 <meta name="assert" content="In an overconstrained situation, margins facing away from the page center are treated as auto, pushing the margin boxes towards to page area"> 5 <link rel="match" href="overconstrained-001-print-ref.html"> 6 <style> 7 @page { 8 margin: 100px; 9 size: 500px 400px; 10 border: solid blue; 11 @top-left-corner { 12 border: solid; 13 width: 25px; 14 height: 25px; 15 margin: 3px; 16 content: ""; 17 } 18 @top-left { 19 border: solid; 20 width: 25px; 21 height: 25px; 22 margin: 3px; 23 content: ""; 24 } 25 @top-center { 26 border: solid; 27 width: 25px; 28 height: 25px; 29 margin: 3px; 30 content: ""; 31 } 32 @top-right { 33 border: solid; 34 width: 25px; 35 height: 25px; 36 margin: 3px; 37 content: ""; 38 } 39 @top-right-corner { 40 border: solid; 41 width: 25px; 42 height: 25px; 43 margin: 3px; 44 content: ""; 45 } 46 @right-top { 47 border: solid; 48 width: 25px; 49 height: 25px; 50 margin: 3px; 51 content: ""; 52 } 53 @right-middle { 54 border: solid; 55 width: 25px; 56 height: 25px; 57 margin: 3px; 58 content: ""; 59 } 60 @right-bottom { 61 border: solid; 62 width: 25px; 63 height: 25px; 64 margin: 3px; 65 content: ""; 66 } 67 @bottom-right-corner { 68 border: solid; 69 width: 25px; 70 height: 25px; 71 margin: 3px; 72 content: ""; 73 } 74 @bottom-right { 75 border: solid; 76 width: 25px; 77 height: 25px; 78 margin: 3px; 79 content: ""; 80 } 81 @bottom-center { 82 border: solid; 83 width: 25px; 84 height: 25px; 85 margin: 3px; 86 content: ""; 87 } 88 @bottom-left { 89 border: solid; 90 width: 25px; 91 height: 25px; 92 margin: 3px; 93 content: ""; 94 } 95 @bottom-left-corner { 96 border: solid; 97 width: 25px; 98 height: 25px; 99 margin: 3px; 100 content: ""; 101 } 102 @left-bottom { 103 border: solid; 104 width: 25px; 105 height: 25px; 106 margin: 3px; 107 content: ""; 108 } 109 @left-middle { 110 border: solid; 111 width: 25px; 112 height: 25px; 113 margin: 3px; 114 content: ""; 115 } 116 @left-top { 117 border: solid; 118 width: 25px; 119 height: 25px; 120 margin: 3px; 121 content: ""; 122 } 123 } 124 </style> 125 There should be 16 margin boxes around this page area. Within their available 126 space, they should all be squares, and be aligned towards the center of the 127 page, with a tiny margin separating their border from the blue border.