Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(204)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/css3/flexbox/style-change.html

Issue 1088633002: Unprefix flexbox tests. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: whoops, a > went missing Created 5 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout.html ('k') | LayoutTests/css3/flexbox/true-centering.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <style> 3 <style>
4 body { 4 body {
5 margin: 0; 5 margin: 0;
6 } 6 }
7 .flexbox { 7 .flexbox {
8 display: -webkit-flex; 8 display: flex;
9 background-color: #aaa; 9 background-color: #aaa;
10 position: relative; 10 position: relative;
11 } 11 }
12 12
13 .flexbox > :nth-child(1) { 13 .flexbox > :nth-child(1) {
14 background-color: blue; 14 background-color: blue;
15 } 15 }
16 .flexbox > :nth-child(2) { 16 .flexbox > :nth-child(2) {
17 background-color: green; 17 background-color: green;
18 } 18 }
19 19
20 .absolute { 20 .absolute {
21 position: absolute; 21 position: absolute;
22 width: 50px; 22 width: 50px;
23 height: 50px; 23 height: 50px;
24 background-color: yellow !important; 24 background-color: yellow !important;
25 } 25 }
26 </style> 26 </style>
27 <script src="../../resources/check-layout.js"></script> 27 <script src="../../resources/check-layout.js"></script>
28 <body> 28 <body>
29 29
30 <p>This test verifies that changing order, align-content, align-items, align-sel f, or justify-content will relayout.</p> 30 <p>This test verifies that changing order, align-content, align-items, align-sel f, or justify-content will relayout.</p>
31 31
32 <div id="flexbox" class="flexbox" style="width: 300px; height: 300px;"> 32 <div id="flexbox" class="flexbox" style="width: 300px; height: 300px;">
33 <div id="a" style="-webkit-flex: 0 0 auto; width: 100px; height: 100px;"></div > 33 <div id="a" style="flex: 0 0 auto; width: 100px; height: 100px;"></div>
34 <div id="b" style="-webkit-flex: 0 0 auto; width: 100px; height: 100px;"></div > 34 <div id="b" style="flex: 0 0 auto; width: 100px; height: 100px;"></div>
35 </div> 35 </div>
36 <script> 36 <script>
37 37
38 var flexbox = document.getElementById("flexbox"); 38 var flexbox = document.getElementById("flexbox");
39 var aDiv = document.getElementById("a"); 39 var aDiv = document.getElementById("a");
40 var bDiv = document.getElementById("b"); 40 var bDiv = document.getElementById("b");
41 41
42 function checkValues(aXOffset, aYOffset, bXOffset, bYOffset) 42 function checkValues(aXOffset, aYOffset, bXOffset, bYOffset)
43 { 43 {
44 aDiv.setAttribute("data-offset-x", aXOffset); 44 aDiv.setAttribute("data-offset-x", aXOffset);
45 aDiv.setAttribute("data-offset-y", aYOffset); 45 aDiv.setAttribute("data-offset-y", aYOffset);
46 bDiv.setAttribute("data-offset-x", bXOffset); 46 bDiv.setAttribute("data-offset-x", bXOffset);
47 bDiv.setAttribute("data-offset-y", bYOffset); 47 bDiv.setAttribute("data-offset-y", bYOffset);
48 checkLayout('.flexbox'); 48 checkLayout('.flexbox');
49 } 49 }
50 50
51 checkValues(0, 0, 100, 0); 51 checkValues(0, 0, 100, 0);
52 52
53 flexbox.style.webkitJustifyContent = "flex-end"; 53 flexbox.style.justifyContent = "flex-end";
54 checkValues(100, 0, 200, 0); 54 checkValues(100, 0, 200, 0);
55 55
56 flexbox.style.webkitAlignItems = "flex-end"; 56 flexbox.style.alignItems = "flex-end";
57 checkValues(100, 200, 200, 200); 57 checkValues(100, 200, 200, 200);
58 58
59 bDiv.style.webkitOrder = -1; 59 bDiv.style.webkitOrder = -1;
60 checkValues(200, 200, 100, 200); 60 checkValues(200, 200, 100, 200);
61 61
62 aDiv.style.webkitAlignSelf = "flex-start"; 62 aDiv.style.alignSelf = "flex-start";
63 checkValues(200, 0, 100, 200); 63 checkValues(200, 0, 100, 200);
64 64
65 flexbox.style.width = "100px"; 65 flexbox.style.width = "100px";
66 flexbox.style.webkitFlexWrap = "wrap"; 66 flexbox.style.flexWrap = "wrap";
67 flexbox.style.webkitAlignContent = "flex-end"; 67 flexbox.style.alignContent = "flex-end";
68 checkValues(0, 200, 0, 100); 68 checkValues(0, 200, 0, 100);
69 69
70 </script> 70 </script>
71 71
72 </body> 72 </body>
73 </html> 73 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/stretched-child-shrink-on-relayout.html ('k') | LayoutTests/css3/flexbox/true-centering.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698