paint-order-001-print.html (3553B)
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/#painting"> 4 <meta name="assert" content="Test default vertical and horizontal alignment for all 16 margin boxes"> 5 <link rel="match" href="paint-order-001-print-ref.html"> 6 <style> 7 :root { 8 print-color-adjust: exact; 9 } 10 @page { 11 margin: 100px; 12 size: 500px 400px; 13 @top-left-corner { 14 border: solid thin; 15 margin-left: 20px; 16 text-align: center; 17 vertical-align: middle; 18 content: "FAIL"; 19 background: pink; 20 } 21 @top-left { 22 border: solid thin; 23 margin: 5px -4em; 24 text-align: right; 25 vertical-align: middle; 26 content: "FAIL"; 27 background: hotpink; 28 } 29 @top-center { 30 border: solid thin; 31 margin: 10px 0; 32 width: 5em; 33 text-align: right; 34 vertical-align: middle; 35 content: "FAIL"; 36 background: cyan; 37 } 38 @top-right { 39 border: solid thin; 40 margin: 15px -4em; 41 text-align: right; 42 vertical-align: middle; 43 content: "FAIL"; 44 background: yellow; 45 } 46 @top-right-corner { 47 border: solid thin; 48 margin-top: 20px; 49 text-align: center; 50 vertical-align: bottom; 51 content: "FAIL"; 52 background: pink; 53 } 54 @right-top { 55 border: solid thin; 56 margin: -4em 5px; 57 text-align: center; 58 vertical-align: bottom; 59 content: "FAIL"; 60 background: hotpink; 61 } 62 @right-middle { 63 border: solid thin; 64 margin: 0 10px; 65 height: 5em; 66 text-align: center; 67 vertical-align: bottom; 68 content: "FAIL"; 69 background: cyan; 70 } 71 @right-bottom { 72 border: solid thin; 73 margin: -4em 15px; 74 text-align: left; 75 vertical-align: bottom; 76 content: "FAIL"; 77 background: yellow; 78 } 79 @bottom-right-corner { 80 border: solid thin; 81 margin-right: 20px; 82 text-align: left; 83 vertical-align: center; 84 content: "FAIL"; 85 background: pink; 86 } 87 @bottom-right { 88 border: solid thin; 89 margin: 5px -4em; 90 text-align: left; 91 vertical-align: middle; 92 content: "FAIL"; 93 background: hotpink; 94 } 95 @bottom-center { 96 border: solid thin; 97 width: 5em; 98 margin: 10px 0; 99 text-align: left; 100 vertical-align: middle; 101 content: "FAIL"; 102 background: cyan; 103 } 104 @bottom-left { 105 border: solid thin; 106 margin: 15px -4em; 107 text-align: left; 108 vertical-align: top; 109 content: "FAIL"; 110 background: yellow; 111 } 112 @bottom-left-corner { 113 border: solid thin; 114 margin-bottom: 20px; 115 vertical-align: top; 116 text-align: center; 117 content: "FAIL"; 118 background: pink; 119 } 120 @left-bottom { 121 border: solid thin; 122 margin: -4em 5px; 123 text-align: center; 124 vertical-align: top; 125 content: "FAIL"; 126 background: hotpink; 127 } 128 @left-middle { 129 border: solid thin; 130 margin: 0 10px; 131 height: 5em; 132 text-align: center; 133 vertical-align: top; 134 content: "FAIL"; 135 background: cyan; 136 } 137 @left-top { 138 border: solid thin; 139 margin: -4em 15px; 140 content: ""; 141 background: yellow; 142 } 143 } 144 </style> 145 Default margin box paint order should start with top-left-corner, then go 146 clockwise. Hotpink boxes should be on top of pink ones. Cyan on top of 147 hotpink. Yellow on top of cyan. No text ("FAIL") should be seen in the margin 148 boxes.