orthogonal-writing-mode-006.html (1702B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <title>CSS Grid Test: Subgridded item sizing with mixed writing modes</title> 10 <link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> 11 <link rel="help" href="https://drafts.csswg.org/css-grid-2"> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 13 <link rel="match" href="orthogonal-writing-mode-006-ref.html"> 14 <style> 15 body { 16 background: white; 17 color: black; 18 display: grid; 19 font: 20px/1 Ahem; 20 place-items: start; 21 padding: 0; 22 margin: 0; 23 } 24 .grid { 25 background: cyan; 26 display: grid; 27 padding: 5px; 28 } 29 .grid > .grid { 30 background: pink; 31 grid-template: subgrid / subgrid; 32 } 33 .h { writing-mode: horizontal-tb; } 34 .v { writing-mode: vertical-rl; } 35 </style> 36 </head> 37 <body> 38 <div class="grid h"> 39 <div class="grid h"> 40 <div class="h">1234</div> 41 </div> 42 </div> 43 <div class="grid h"> 44 <div class="grid h"> 45 <div class="v">1234</div> 46 </div> 47 </div> 48 <div class="grid h"> 49 <div class="grid v"> 50 <div class="h">1234</div> 51 </div> 52 </div> 53 <div class="grid h"> 54 <div class="grid v"> 55 <div class="v">1234</div> 56 </div> 57 </div> 58 <div class="grid v"> 59 <div class="grid h"> 60 <div class="h">1234</div> 61 </div> 62 </div> 63 <div class="grid v"> 64 <div class="grid h"> 65 <div class="v">1234</div> 66 </div> 67 </div> 68 <div class="grid v"> 69 <div class="grid v"> 70 <div class="h">1234</div> 71 </div> 72 </div> 73 <div class="grid v"> 74 <div class="grid v"> 75 <div class="v">1234</div> 76 </div> 77 </div> 78 </body> 79 </html>