align-self-static-position-002.html (2754B)
1 <!DOCTYPE html> 2 <title>Align-self applies to OOF elements of block 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-002-ref.html"> 9 <style> 10 .block { 11 display: block; 12 width: 75%; 13 height: 50%; 14 border: 5px dotted blue; 15 } 16 17 .container { 18 border: 1px solid; 19 position: relative; 20 width: 100px; 21 height: 100px; 22 display: inline-block; 23 margin-left: 50px; 24 margin-bottom: 50px; 25 } 26 27 .abs { 28 width: 50px; 29 height: 50px; 30 position: absolute; 31 background: purple; 32 } 33 34 .static-positioned-inline { 35 left: auto; 36 right: auto; 37 } 38 39 .static-positioned-block { 40 top: auto; 41 bottom: auto; 42 } 43 44 .positioned-inline { 45 left: 0; 46 right: 0; 47 } 48 49 .positioned-block { 50 top: 0; 51 bottom: 0; 52 } 53 54 .center { 55 justify-self: center; 56 align-self: center; 57 } 58 59 .end { 60 justify-self: end; 61 align-self: end; 62 } 63 64 .start { 65 justify-self: start; 66 align-self: start; 67 } 68 69 .vertRL { 70 writing-mode: vertical-rl; 71 } 72 73 .vertLR { 74 writing-mode: vertical-lr; 75 } 76 </style> 77 <!-- start aligned --> 78 <div class="container vertRL"><div class="block"> 79 <div class="abs static-positioned-inline static-positioned-block start"></div> 80 </div></div> 81 <div class="container vertLR"><div class="block"> 82 <div class="abs static-positioned-inline positioned-block start"></div> 83 </div></div> 84 <div class="container vertRL"><div class="block"> 85 <div class="abs positioned-inline static-positioned-block start"></div> 86 </div></div> 87 <br> 88 <!-- end aligned --> 89 <div class="container vertLR"><div class="block"> 90 <div class="abs static-positioned-inline static-positioned-block end"></div> 91 </div></div> 92 <div class="container vertRL"><div class="block"> 93 <div class="abs static-positioned-inline positioned-block end"></div> 94 </div></div> 95 <div class="container vertLR"><div class="block"> 96 <div class="abs positioned-inline static-positioned-block end"></div> 97 </div></div> 98 <br> 99 <!-- center aligned --> 100 <div class="container vertRL"><div class="block"> 101 <div class="abs static-positioned-inline static-positioned-block center"></div> 102 </div></div> 103 <div class="container vertLR"><div class="block"> 104 <div class="abs static-positioned-inline positioned-block center"></div> 105 </div></div> 106 <div class="container vertRL"><div class="block"> 107 <div class="abs positioned-inline static-positioned-block center"></div> 108 </div></div> 109 <br>