flexbox-writing-mode-016-ref.html (3638B)
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 <title>CSS Reftest Reference</title> 9 <meta charset="utf-8"> 10 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 11 <style> 12 .container { 13 display: block; 14 border: 2px solid purple; 15 margin: 3px; 16 /* This red should't be visible, because each container should shrinkwrap 17 its sole child (and the child should cover up this background). */ 18 background: red; 19 /* Float the containers, to test in "rows", with 1 row per writing-mode. */ 20 float: left; 21 } 22 br { clear: both; } 23 24 .container > * { 25 width: 10px; 26 height: 10px; 27 background: teal; 28 border: 1px solid yellow; 29 } 30 .container > * > * { 31 background: pink; 32 height: 4px; 33 width: 4px; 34 border: 1px solid black; 35 } 36 37 .pad_top { padding-top: 3px; } 38 .pad_right { padding-right: 4px; } 39 .pad_bottom { padding-bottom: 5px; } 40 .pad_left { padding-left: 6px; } 41 42 .hl { writing-mode: horizontal-tb; direction: ltr; } 43 .hr { writing-mode: horizontal-tb; direction: rtl; } 44 .vl { writing-mode: vertical-lr; direction: ltr; } 45 .vr { writing-mode: vertical-rl; direction: ltr; } 46 .vl_rtl { writing-mode: vertical-lr; direction: rtl; } 47 .vr_rtl { writing-mode: vertical-rl; direction: rtl; } 48 </style> 49 </head> 50 <body> 51 <!-- Here, we test padding on each side of a flex item, across 6 different 52 writing-mode combinations (writing-mode X direction). --> 53 <div class="container hl"> 54 <div class="pad_top"><div></div></div> 55 </div> 56 <div class="container hl"> 57 <div class="pad_right"><div></div></div> 58 </div> 59 <div class="container hl"> 60 <div class="pad_bottom"><div></div></div> 61 </div> 62 <div class="container hl"> 63 <div class="pad_left"><div></div></div> 64 </div> 65 <br> 66 67 <div class="container hr"> 68 <div class="pad_top"><div></div></div> 69 </div> 70 <div class="container hr"> 71 <div class="pad_right"><div></div></div> 72 </div> 73 <div class="container hr"> 74 <div class="pad_bottom"><div></div></div> 75 </div> 76 <div class="container hr"> 77 <div class="pad_left"><div></div></div> 78 </div> 79 <br> 80 81 <div class="container vl"> 82 <div class="pad_top"><div></div></div> 83 </div> 84 <div class="container vl"> 85 <div class="pad_right"><div></div></div> 86 </div> 87 <div class="container vl"> 88 <div class="pad_bottom"><div></div></div> 89 </div> 90 <div class="container vl"> 91 <div class="pad_left"><div></div></div> 92 </div> 93 <br> 94 95 <div class="container vr"> 96 <div class="pad_top"><div></div></div> 97 </div> 98 <div class="container vr"> 99 <div class="pad_right"><div></div></div> 100 </div> 101 <div class="container vr"> 102 <div class="pad_bottom"><div></div></div> 103 </div> 104 <div class="container vr"> 105 <div class="pad_left"><div></div></div> 106 </div> 107 <br> 108 109 <div class="container vl_rtl"> 110 <div class="pad_top"><div></div></div> 111 </div> 112 <div class="container vl_rtl"> 113 <div class="pad_right"><div></div></div> 114 </div> 115 <div class="container vl_rtl"> 116 <div class="pad_bottom"><div></div></div> 117 </div> 118 <div class="container vl_rtl"> 119 <div class="pad_left"><div></div></div> 120 </div> 121 <br> 122 123 <div class="container vr_rtl"> 124 <div class="pad_top"><div></div></div> 125 </div> 126 <div class="container vr_rtl"> 127 <div class="pad_right"><div></div></div> 128 </div> 129 <div class="container vr_rtl"> 130 <div class="pad_bottom"><div></div></div> 131 </div> 132 <div class="container vr_rtl"> 133 <div class="pad_left"><div></div></div> 134 </div> 135 </body> 136 </html>