block-002-wm-vrl-ref.html (1362B)
1 <!DOCTYPE html> 2 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 3 <meta name="flags" content="paged"> 4 <html> 5 <style> 6 @page { 7 size: 5in 3in; 8 margin: 0.5in; 9 } 10 11 html,body { 12 color:black; background-color:white; font:20px/1 monospace; padding:0; margin:0; 13 writing-mode: vertical-rl; 14 } 15 html { margin-block-start: 80vw; } 16 * { box-sizing: border-box; } 17 18 .b { 19 inline-size: 50vh; 20 border: 5px solid black; 21 border-block-start-color: blue; 22 border-inline-start-color: lime; 23 margin-inline-start: 20px; 24 } 25 .b1 { 26 block-size: 20vw; 27 border-block-end-style: none; 28 } 29 30 .b2 { 31 block-size: 100vw; 32 border-block-start-style: none; 33 border-block-end-style: none; 34 } 35 36 .b3 { 37 block-size: 10vw; 38 border-block-start-style: none; 39 } 40 41 .b > div { 42 inline-size: 50vh; 43 block-size: 100vw; 44 border: 5px solid grey; 45 margin-inline-start: 20px; 46 } 47 .b1 > div { 48 border-block-end-style: none; 49 margin-block-start: -5px; 50 } 51 .b2 > div { 52 border-block-start-style: none; 53 border-block-end-style: none; 54 } 55 .b3 > div { 56 block-size: 30vw; 57 border-block-start-style: none; 58 } 59 60 .after { 61 inline-size: 60vh; 62 block-size: 30vw; 63 margin-block-start: 5vw; 64 border: 5px solid blue; 65 } 66 </style> 67 <body> 68 <div class="b b1"><div></div></div> 69 <div class="b b2"><div></div></div> 70 <div class="b b3"><div></div></div> 71 <div class="after"></div> 72 </body> 73 </html>