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