grid-alignment-style-changes-002.html (2209B)
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 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 <style> 11 #container { 12 position: relative; 13 display: inline-grid; 14 grid: 100px / 50px 50px 50px; 15 background: grey; 16 align-items: baseline; 17 } 18 #item1 { 19 height: 20px; 20 background: blue; 21 } 22 #item2 { 23 height: 50px; 24 background: green; 25 align-self: center; 26 } 27 #item3 { 28 height: 30px; 29 background: red; 30 } 31 </style> 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script src="/resources/check-layout-th.js"></script> 35 <script src="support/style-change.js"></script> 36 <script> 37 function runTest() { 38 let before = { 39 item1: {"data-offset-y": 10 }, 40 item2: {"data-offset-y": 25 }, 41 item3: {"data-offset-y": 0 } 42 }; 43 44 let after = { 45 item1: {"data-offset-y": 30 }, 46 item2: {"data-offset-y": 0 }, 47 item3: {"data-offset-y": 20 } 48 }; 49 50 evaluateStyleChangeMultiple("before", before); 51 item2.style.alignSelf = "baseline"; 52 evaluateStyleChangeMultiple("after", after); 53 done(); 54 } 55 </script> 56 <body onload="runTest()"> 57 <div id="container"> 58 <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div> 59 <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div> 60 <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div> 61 </div> 62 <div id="log"></div> 63 </body>