alignment-001-print.html (1327B)
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-text-alignment"> 4 <meta name="assert" content="Test default vertical and horizontal alignment for all 16 margin boxes"> 5 <link rel="match" href="alignment-001-print-ref.html"> 6 <style> 7 @page { 8 font-family:monospace; 9 font-size: 0.7em; 10 11 /* This results in a page border box size that's divisible by 3, so that the 12 three boxes at a page edge get the exact same size. */ 13 size: 550px 400px; 14 15 margin: 50px; 16 color: blue; 17 18 @top-left-corner { content: "A"; } 19 @top-left { content: "B"; } 20 @top-center { content: "C"; } 21 @top-right { content: "D"; } 22 @top-right-corner { content: "E"; } 23 @right-top { content: "F"; } 24 @right-middle { content: "G"; } 25 @right-bottom { content: "H"; } 26 @bottom-right-corner { content: "I"; } 27 @bottom-right { content: "J"; } 28 @bottom-center { content: "K"; } 29 @bottom-left { content: "L"; } 30 @bottom-left-corner { content: "M"; } 31 @left-bottom { content: "N"; } 32 @left-middle { content: "O"; } 33 @left-top { content: "P"; } 34 } 35 </style> 36 <div> 37 Small blue letters from A to P should be seen in a clockwise manner, starting 38 with A in the top left corner. 39 </div>