grid-alignment-style-changes-008.html (2485B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title> 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment"> 7 <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property"> 8 <link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position"> 9 <meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context."> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <style> 12 #container { 13 position: relative; 14 display: inline-grid; 15 grid: 50px 50px 50px / 100px; 16 background: grey; 17 justify-items: baseline; 18 font-family: Ahem; 19 text-orientation: sideways; 20 line-height: 1; 21 } 22 #container > div { writing-mode: vertical-lr; } 23 #item1 { 24 font-size: 20px; 25 background: blue; 26 } 27 #item2 { 28 font-size: 40px; 29 background: green; 30 justify-self: center; 31 } 32 #item3 { 33 font-size: 30px; 34 background: red; 35 } 36 </style> 37 <script src="/resources/testharness.js"></script> 38 <script src="/resources/testharnessreport.js"></script> 39 <script src="/resources/check-layout-th.js"></script> 40 <script src="support/style-change.js"></script> 41 <script> 42 setup({ explicit_done: true }); 43 function runTest() { 44 let before = { 45 item1: {"data-offset-x": 2 }, 46 item2: {"data-offset-x": 30 }, 47 item3: {"data-offset-x": 0 } 48 }; 49 50 let after = { 51 item1: {"data-offset-x": 4 }, 52 item2: {"data-offset-x": 0 }, 53 item3: {"data-offset-x": 2 } 54 }; 55 56 evaluateStyleChangeMultiple("before", before); 57 item2.style.justifySelf = "baseline"; 58 evaluateStyleChangeMultiple("after", after); 59 done(); 60 } 61 </script> 62 <body onload="document.fonts.ready.then(() => { runTest(); })"> 63 <div id="container"> 64 <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div> 65 <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div> 66 <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div> 67 </div> 68 <div id="log"></div> 69 </body>