grid-align-baseline-vertical.html (7015B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: grid align baseline vertical</title> 4 <link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#intro-baselines"> 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> 7 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> 8 <meta name="assert" content="This test checks that baseline alignment works correctly for align-self properties in vertical-rl and -lr writing modes"> 9 <meta name="flags" content="ahem"> 10 <link rel="stylesheet" href="/fonts/ahem.css"> 11 <link rel="stylesheet" href="/css/support/grid.css"> 12 <link rel="stylesheet" href="/css/support/alignment.css"> 13 14 <style> 15 16 .grid { 17 height: 600px; 18 grid-auto-columns: 1fr; 19 margin-bottom: 20px; 20 position: relative; 21 text-orientation: sideways; 22 font: 20px/1 Ahem; 23 } 24 25 .grid :nth-child(1) { background-color: brown; } 26 .grid :nth-child(2) { background-color: green; } 27 .grid :nth-child(3) { background-color: red; } 28 .grid :nth-child(4) { background-color: yellow; } 29 .grid :nth-child(5) { background-color: purple; } 30 .grid :nth-child(6) { background-color: orange; } 31 .grid :nth-child(7) { background-color: lime; } 32 .grid :nth-child(8) { background-color: lightblue; } 33 .grid :nth-child(9) { background-color: darkred; } 34 .grid :nth-child(10) { background-color: gold; } 35 .grid :nth-child(11) { background-color: salmon; } 36 37 .firstRowThirdColumn { 38 grid-row: 1; 39 grid-column: 3; 40 } 41 .firstRowFourthColumn { 42 grid-row: 1; 43 grid-column: 4; 44 } 45 .firstRowFifthColumn { 46 grid-row: 1; 47 grid-column: 5; 48 } 49 .grid > div { 50 min-width: 0px; 51 } 52 </style> 53 54 <script src="/resources/testharness.js"></script> 55 <script src="/resources/testharnessreport.js"></script> 56 <script src="/resources/check-layout-th.js"></script> 57 <script type="text/javascript"> setup({ explicit_done: true }); </script> 58 59 <body onload="document.fonts.ready.then(() => { runTests(); })"> 60 61 <div class="grid" style="writing-mode: vertical-rl"> 62 <div data-expected-width="20" data-offset-x="70" class="firstRowFirstColumn alignSelfBaseline" style="width: 20px;"></div> 63 <div data-expected-width="10" data-offset-x="70" class="firstRowSecondColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 10px;"></div> 64 <div data-expected-width="10" data-offset-x="70" class="firstRowThirdColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 0;"></div> 65 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div> 66 </div> 67 68 <div class="grid" style="writing-mode: vertical-rl"> 69 <div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div> 70 <div id="baseline2" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px;"></div> 71 <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> 72 <div id="baseline3" data-expected-width="50" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> 73 <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div> 74 </div> 75 76 <div class="grid" style="writing-mode: vertical-rl"> 77 <div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div> 78 <div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="width: 50px;"></div> 79 <div data-expected-width="50" data-offset-x="50" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> 80 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div> 81 </div> 82 83 <div class="grid" style="writing-mode: vertical-lr"> 84 <div id="baseline6" data-offset-x="13" class="firstRowFirstColumn alignSelfBaseline">ahem</div> 85 <div id="baseline7" data-offset-x="13" class="firstRowSecondColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px;"></div> 86 <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> 87 <div data-expected-width="50" data-offset-x="0" class="firstRowFourthColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> 88 <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="width: 100px;"></div> 89 </div> 90 91 <div class="grid" style="writing-mode: vertical-lr"> 92 <div id="baseline8" class="firstRowFirstColumn alignSelfBaseline">ahem</div> 93 <div id="baseline9" class="firstRowSecondColumn alignSelfBaseline"><br><img src="/css/support/1x1-lime.png" style="width: 50px;"></div> 94 <div data-expected-width="50" data-offset-x="0" class="firstRowThirdColumn alignSelfBaseline"><img src="/css/support/1x1-lime.png" style="width: 50px; vertical-align: middle;"></div> 95 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div> 96 </div> 97 98 <div id="log"></div> 99 100 </body> 101 102 <script> 103 104 function runTests() { 105 var baseline1 = document.getElementById("baseline1"); 106 var baseline2 = document.getElementById("baseline2"); 107 var baseline3 = document.getElementById("baseline3"); 108 var baseline4 = document.getElementById("baseline4"); 109 var baseline5 = document.getElementById("baseline5"); 110 var baseline6 = document.getElementById("baseline6"); 111 var baseline7 = document.getElementById("baseline7"); 112 var baseline8 = document.getElementById("baseline8"); 113 var baseline9 = document.getElementById("baseline9"); 114 115 checkLayout('.grid', false); 116 117 test(() => {assert_equals(baseline1.offsetLeft, baseline2.offsetLeft, "baseline1 and baseline2 should have the same baseline;")}, "Additional Check 1"); 118 test(() => {assert_greater_than(baseline3.offsetLeft + baseline3.offsetWidth, 75, "baseline3 should be above the center align-itemsed item;")}, "Additional Check 2"); 119 test(() => {assert_equals(baseline4.offsetLeft + baseline4.offsetWidth, baseline5.offsetLeft + baseline5.offsetWidth, "baseline4 and baseline5 should be right aligned with each other;")}, "Additional Check 3"); 120 test(() => {assert_less_than(baseline4.offsetLeft + baseline4.offsetWidth, 100, "baseline4 and baseline5 should be below the dominant baseline;")}, "Additional Check 4"); 121 test(() => {assert_equals(baseline6.offsetLeft, baseline7.offsetLeft, "baseline6 and baseline7 should have the same baseline;")}, "Additional Check 5"); 122 test(() => {assert_equals(baseline8.offsetLeft, baseline9.offsetLeft, "baseline8 and baseline9 should be left aligned with each other;")}, "Additional Check 6"); 123 124 done(); 125 }; 126 127 </script> 128 129 </body>