Make color-filter affect caret-color
[WebKit-https.git] / LayoutTests / css3 / flexbox / style-change.html
1 <!DOCTYPE html>
2 <html>
3 <style>
4 body {
5     margin: 0;
6 }
7 .flexbox {
8     display: flex;
9     background-color: #aaa;
10     position: relative;
11 }
12
13 .flexbox > :nth-child(1) {
14     background-color: blue;
15 }
16 .flexbox > :nth-child(2) {
17     background-color: green;
18 }
19
20 .absolute {
21   position: absolute;
22   width: 50px;
23   height: 50px;
24   background-color: yellow !important;
25 }
26 </style>
27 <script src="../../resources/testharness.js"></script>
28 <script src="../../resources/testharnessreport.js"></script>
29 <script src="../../resources/check-layout-th.js"></script>
30 <body>
31 <div id=log></div>
32
33 <p>This test verifies that changing order, align-content, align-items, align-self, or justify-content will relayout.</p>
34
35 <div id="flexbox" class="flexbox" style="width: 300px; height: 300px;">
36   <div id="a" style="flex: 0 0 auto; width: 100px; height: 100px;"></div>
37   <div id="b" style="flex: 0 0 auto; width: 100px; height: 100px;"></div>
38 </div>
39 <script>
40
41 var flexbox = document.getElementById("flexbox");
42 var aDiv = document.getElementById("a");
43 var bDiv = document.getElementById("b");
44
45 function checkValues(aXOffset, aYOffset, bXOffset, bYOffset)
46 {
47     aDiv.setAttribute("data-offset-x", aXOffset);
48     aDiv.setAttribute("data-offset-y", aYOffset);
49     bDiv.setAttribute("data-offset-x", bXOffset);
50     bDiv.setAttribute("data-offset-y", bYOffset);
51     checkLayout('.flexbox');
52 }
53
54 checkValues(0, 0, 100, 0);
55
56 flexbox.style.justifyContent = "flex-end";
57 checkValues(100, 0, 200, 0);
58
59 flexbox.style.alignItems = "flex-end";
60 checkValues(100, 200, 200, 200);
61
62 bDiv.style.order = -1;
63 checkValues(200, 200, 100, 200);
64
65 aDiv.style.alignSelf = "flex-start";
66 checkValues(200, 0, 100, 200);
67
68 flexbox.style.width = "100px";
69 flexbox.style.flexWrap = "wrap";
70 flexbox.style.alignContent = "flex-end";
71 checkValues(0, 200, 0, 100);
72
73 </script>
74
75 </body>
76 </html>