grid-alignment-style-changes-005.html (2378B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Changing 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/#align-self-property"> 8 <link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position"> 9 <meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left 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: 100px / 50px 50px 50px; 16 background: grey; 17 align-items: baseline; 18 font-family: Ahem; 19 line-height: 1; 20 } 21 #item1 { 22 font-size: 20px; 23 background: blue; 24 } 25 #item2 { 26 font-size: 40px; 27 background: green; 28 } 29 #item3 { 30 font-size: 30px; 31 background: red; 32 } 33 </style> 34 <script src="/resources/testharness.js"></script> 35 <script src="/resources/testharnessreport.js"></script> 36 <script src="/resources/check-layout-th.js"></script> 37 <script src="support/style-change.js"></script> 38 <script> 39 setup({ explicit_done: true }); 40 function runTest() { 41 let before = { 42 item1: {"data-offset-y": 16 }, 43 item2: {"data-offset-y": 0 }, 44 item3: {"data-offset-y": 8 } 45 } 46 47 let after = { 48 item1: {"data-offset-y": 8 }, 49 item2: {"data-offset-y": 60 }, 50 item3: {"data-offset-y": 0 } 51 } 52 53 evaluateStyleChangeMultiple("before", before); 54 item2.style.alignSelf = "end"; 55 evaluateStyleChangeMultiple("after", after); 56 done(); 57 } 58 </script> 59 <body onload="document.fonts.ready.then(() => { runTest(); })"> 60 <div id="container"> 61 <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div> 62 <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div> 63 <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div> 64 </div> 65 <div id="log"></div> 66 </body>