Import the css-display-3 css tests.
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-display-3 / display-contents-alignment-002.html
1 <!DOCTYPE html>
2 <meta charset="utf-8">
3 <title>CSS Test: grid container justify-items is used for grid item regardless of intermediate display: contents ancestors</title>
4 <link rel="author" title="Emilio Cobos Ãlvarez" href="mailto:ecobos@igalia.com">
5 <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-contents">
6 <link rel="help" href="https://drafts.csswg.org/css-align/#justify-items-property">
7 <link rel="match" href="display-contents-alignment-002-ref.html">
8 <style>
9   .container {
10     display: grid;
11     width: 300px;
12     height: 300px;
13     justify-items: center;
14     border: 2px solid purple;
15   }
16   .contents {
17     display: contents;
18     justify-items: start;
19   }
20   .contents > div {
21     width: 100px;
22     height: 100px;
23     background: blue;
24     justify-self: auto;
25   }
26 </style>
27 <p>Test passes if there's a blue square horizontally centered inside the box.</p>
28 <div class="container">
29   <div class="contents">
30     <div></div>
31   </div>
32 </div>