align-self-static-position-004.html (2949B)
1 <!DOCTYPE html> 2 <title>Align-self applies to OOF elements of inline elements when statically positioned with different writing modes.</title> 3 <link rel="author" title="Alison Maher" href="mailto:almaher@microsoft.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-auto"> 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-auto"> 6 <link rel="help" href="https://drafts.csswg.org/css-position-3/#abspos-alignment"> 7 <link rel="help" href="https://issues.chromium.org/issues/409806799"> 8 <link rel="match" href="align-self-static-position-004-ref.html"> 9 <link rel="stylesheet" href="/fonts/ahem.css"> 10 <style> 11 .inline { 12 display: inline; 13 color: transparent; 14 font: 10px Ahem; 15 line-height: 25px; 16 } 17 18 .container { 19 border: 1px solid; 20 position: relative; 21 width: 100px; 22 height: 100px; 23 display: inline-block; 24 margin-left: 50px; 25 margin-bottom: 50px; 26 } 27 28 .abs { 29 width: 50px; 30 height: 50px; 31 position: absolute; 32 background: purple; 33 } 34 35 .static-positioned-inline { 36 left: auto; 37 right: auto; 38 } 39 40 .static-positioned-block { 41 top: auto; 42 bottom: auto; 43 } 44 45 .positioned-inline { 46 left: 0; 47 right: 0; 48 } 49 50 .positioned-block { 51 top: 0; 52 bottom: 0; 53 } 54 55 .center { 56 justify-self: center; 57 align-self: center; 58 } 59 60 .end { 61 justify-self: end; 62 align-self: end; 63 } 64 65 .start { 66 justify-self: start; 67 align-self: start; 68 } 69 70 .vertRL { 71 writing-mode: vertical-rl; 72 } 73 74 .vertLR { 75 writing-mode: vertical-lr; 76 } 77 </style> 78 <!-- start aligned --> 79 <div class="container vertRL"><div class="inline">text 80 <div class="abs static-positioned-inline static-positioned-block start"></div> 81 <br>text 82 </div></div> 83 <div class="container vertLR"><div class="inline">text 84 <div class="abs static-positioned-inline positioned-block start"></div> 85 <br>text 86 </div></div> 87 <div class="container vertRL"><div class="inline">text 88 <div class="abs positioned-inline static-positioned-block start"></div> 89 <br>text 90 </div></div> 91 <br> 92 <!-- end aligned --> 93 <div class="container vertLR"><div class="inline">text 94 <div class="abs static-positioned-inline static-positioned-block end"></div> 95 <br>text 96 </div></div> 97 <div class="container vertRL"><div class="inline">text 98 <div class="abs static-positioned-inline positioned-block end"></div> 99 <br>text 100 </div></div> 101 <div class="container vertLR"><div class="inline">text 102 <div class="abs positioned-inline static-positioned-block end"></div> 103 <br>text 104 </div></div> 105 <br> 106 <!-- center aligned --> 107 <div class="container vertRL"><div class="inline">text 108 <div class="abs static-positioned-inline static-positioned-block center"></div> 109 <br>text 110 </div></div> 111 <div class="container vertLR"><div class="inline">text 112 <div class="abs static-positioned-inline positioned-block center"></div> 113 <br>text 114 </div></div> 115 <div class="container vertRL"><div class="inline">text 116 <div class="abs positioned-inline static-positioned-block center"></div> 117 <br>text 118 </div></div>