Import the css-display-3 css tests.
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-display-3 / display-contents-dynamic-flex-001-none.html
1 <!DOCTYPE html>
2 <meta charset="utf-8">
3 <title>CSS Display 3: Display contents reattachment works well in a flex container</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="match" href="display-contents-flex-001-ref.html">
7 <script src="support/util.js"></script>
8 <style>
9 .flex {
10   display: flex;
11 }
12 .inline {
13   display: inline;
14 }
15 .contents {
16   display: contents;
17   border: 1px solid red;
18 }
19 </style>
20 <p>Test passes if you see the word "PASS", with a "0" under the first "S", and no red</p>
21 <div class="flex">
22 P
23   <div class="contents">
24     <div>A</div>
25   </div>
26   <div class="contents">
27     <div class="inline">S<div>0</div></div>
28   </div>
29   <div class="contents">
30     S
31   </div>
32 </div>
33 <script>
34 window.onload = function() {
35   eachDisplayContentsElementIn(document, window,
36       function(e) { e.style.display = 'none'; },
37       function(e) { e.style.display = ''; })
38 }
39 </script>