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