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

Side by Side Diff: LayoutTests/css3/flexbox/flexitem.html

Issue 15758002: Unprefix Flexbox (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: rebased Created 7 years, 6 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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <link href="resources/flexbox.css" rel="stylesheet">
3 <style> 4 <style>
4 .flexbox { 5 .flexbox {
5 width: 600px; 6 width: 600px;
6 display: -webkit-flex;
7 background-color: #aaa; 7 background-color: #aaa;
8 position: relative; 8 position: relative;
9 min-height: 10px; 9 min-height: 10px;
10 } 10 }
11 .flexbox > * { 11 .flexbox > * {
12 -webkit-flex: 1 0 0; 12 flex: 1 0 0;
13 margin: 0; 13 margin: 0;
14 border: 0; 14 border: 0;
15 padding: 0; 15 padding: 0;
16 font-size: 12px; 16 font-size: 12px;
17 min-width: 0; 17 min-width: 0;
18 } 18 }
19 .column {
20 -webkit-flex-direction: column;
21 }
22 </style> 19 </style>
23 <script src="../../resources/check-layout.js"></script> 20 <script src="../../resources/check-layout.js"></script>
24 <body onload="checkLayout('.flexbox')"> 21 <body onload="checkLayout('.flexbox')">
25 <div class="flexbox" style="height:200px"> 22 <div class="flexbox" style="height:200px">
26 <button data-expected-display="block" data-expected-width="100" data-expected- height="200">button</button> 23 <button data-expected-display="block" data-expected-width="100" data-expected- height="200">button</button>
27 <canvas data-expected-display="block" data-expected-width="100" data-expected- height="200">canvas</canvas> 24 <canvas data-expected-display="block" data-expected-width="100" data-expected- height="200">canvas</canvas>
28 <iframe data-expected-display="block" data-expected-width="100" data-expected- height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe> 25 <iframe data-expected-display="block" data-expected-width="100" data-expected- height="200" src="data:text/html,<body bgcolor=#fff>iframe</body>"></iframe>
29 <object data-expected-display="block" data-expected-width="100" data-expected- height="200">object</object> 26 <object data-expected-display="block" data-expected-width="100" data-expected- height="200">object</object>
30 <select data-expected-display="block" data-expected-width="100" data-expected- height="200"> 27 <select data-expected-display="block" data-expected-width="100" data-expected- height="200">
31 <option>select</option> 28 <option>select</option>
32 </select> 29 </select>
33 <textarea data-expected-display="block" data-expected-width="100" data-expecte d-height="200">textarea</textarea> 30 <textarea data-expected-display="block" data-expected-width="100" data-expecte d-height="200">textarea</textarea>
34 </div> 31 </div>
35 32
36 33
37 <div class="flexbox"> 34 <div class="flexbox">
38 <input data-expected-display="block" data-expected-width="75" type="checkbox" value="radio"></input> 35 <input data-expected-display="block" data-expected-width="75" type="checkbox" value="radio"></input>
39 <input data-expected-display="block" data-expected-width="75" type="file" valu e="file"></input> 36 <input data-expected-display="block" data-expected-width="75" type="file" valu e="file"></input>
40 <input data-expected-display="block" data-expected-width="75" type="image" val ue="image"></input> 37 <input data-expected-display="block" data-expected-width="75" type="image" val ue="image"></input>
41 <input data-expected-display="block" data-expected-width="75" type="password" value="password"></input> 38 <input data-expected-display="block" data-expected-width="75" type="password" value="password"></input>
42 <input data-expected-display="block" data-expected-width="75" type="radio" val ue="radio"></input> 39 <input data-expected-display="block" data-expected-width="75" type="radio" val ue="radio"></input>
43 <input data-expected-display="block" data-expected-width="75" type="reset" val ue="reset"></input> 40 <input data-expected-display="block" data-expected-width="75" type="reset" val ue="reset"></input>
44 <input data-expected-display="block" data-expected-width="75" type="submit" va lue="submit"></input> 41 <input data-expected-display="block" data-expected-width="75" type="submit" va lue="submit"></input>
45 <input data-expected-display="block" data-expected-width="75" type="text" valu e="text"></input> 42 <input data-expected-display="block" data-expected-width="75" type="text" valu e="text"></input>
46 </div> 43 </div>
47 44
48 <div class="flexbox"> 45 <div class="flexbox">
49 <img data-expected-display="block" data-expected-width="200" style="-webkit-fl ex: 1 0 auto;" src="../images/resources/blue-100.png"> 46 <img data-expected-display="block" data-expected-width="200" style="flex: 1 0 auto;" src="../images/resources/blue-100.png">
50 <img data-expected-display="block" data-expected-width="200" data-expected-hei ght="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png"> 47 <img data-expected-display="block" data-expected-width="200" data-expected-hei ght="100" style="flex: 2 0 0;" src="doesnotexist.png">
51 <img data-expected-display="block" data-expected-width="200" data-expected-hei ght="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png" alt="placeholder t ext"> 48 <img data-expected-display="block" data-expected-width="200" data-expected-hei ght="100" style="flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
52 </div> 49 </div>
53 50
54 <div class="flexbox"> 51 <div class="flexbox">
55 <svg data-expected-display="block" data-expected-width="100" style="-webkit-fl ex: 1 0 auto; width: 100px; height: 100px"> 52 <svg data-expected-display="block" data-expected-width="100" style="flex: 1 0 auto; width: 100px; height: 100px">
56 <circle cx="50" cy="50" r="50" fill="blue"> 53 <circle cx="50" cy="50" r="50" fill="blue">
57 </circle> 54 </circle>
58 </svg> 55 </svg>
59 <svg data-expected-display="block" data-expected-width="500" style="-webkit-fl ex: 1 1 auto; height: 100px"> 56 <svg data-expected-display="block" data-expected-width="500" style="flex: 1 1 auto; height: 100px">
60 <circle cx="50" cy="50" r="50" fill="green"> 57 <circle cx="50" cy="50" r="50" fill="green">
61 </circle> 58 </circle>
62 </svg> 59 </svg>
63 </div> 60 </div>
64 61
65 <div class="flexbox"> 62 <div class="flexbox">
66 <span data-expected-display="block" data-expected-width="200" style="-webkit-f lex: 2 0 0"></span> 63 <span data-expected-display="block" data-expected-width="200" style="flex: 2 0 0"></span>
67 <button data-expected-display="block" data-expected-width="100" style="-webkit -flex: 1 0 0">button</button> 64 <button data-expected-display="block" data-expected-width="100" style="flex: 1 0 0">button</button>
68 <span data-expected-display="block" data-expected-width="300" style="-webkit-f lex: 2 2 100px"></span> 65 <span data-expected-display="block" data-expected-width="300" style="flex: 2 2 100px"></span>
69 </div> 66 </div>
70 67
71 <div class="flexbox" style="width: 700px"> 68 <div class="flexbox" style="width: 700px">
72 <div data-expected-display="block" data-expected-width="100" style="display: i nline-block;"></div> 69 <div data-expected-display="block" data-expected-width="100" style="display: i nline-block;"></div>
73 <div data-expected-display="-webkit-box" data-expected-width="100" style="disp lay: -webkit-inline-box;"></div> 70 <div data-expected-display="-webkit-box" data-expected-width="100" style="disp lay: -webkit-inline-box;"></div>
74 <div data-expected-display="-webkit-flex" data-expected-width="100" style="dis play: -webkit-inline-flex;"></div> 71 <div data-expected-display="flex" data-expected-width="100" style="display: in line-flex;"></div>
75 <div data-expected-display="block" data-expected-width="100" style="display: t able-cell"></div> 72 <div data-expected-display="block" data-expected-width="100" style="display: t able-cell"></div>
76 <div data-expected-display="block" data-expected-width="100" style="display: c ompact"></div> 73 <div data-expected-display="block" data-expected-width="100" style="display: c ompact"></div>
77 <div data-expected-display="block" data-expected-width="100" style="display: r un-in"></div> 74 <div data-expected-display="block" data-expected-width="100" style="display: r un-in"></div>
78 <div data-expected-display="block" data-expected-width="100" style="display: i nline;"></div> 75 <div data-expected-display="block" data-expected-width="100" style="display: i nline;"></div>
79 </div> 76 </div>
80 77
81 <div class="flexbox"> 78 <div class="flexbox">
82 <!-- FIXME: This table should flex. --> 79 <!-- FIXME: This table should flex. -->
83 <div data-expected-display="table" data-expected-width="600" style="display: i nline-table"></div> 80 <div data-expected-display="table" data-expected-width="600" style="display: i nline-table"></div>
84 </div> 81 </div>
(...skipping 75 matching lines...) Expand 10 before | Expand all | Expand 10 after
160 <img data-expected-width="10" style="max-width:-webkit-min-content" src="../ images/resources/green-10.png"> 157 <img data-expected-width="10" style="max-width:-webkit-min-content" src="../ images/resources/green-10.png">
161 <img data-expected-width="50" style="max-width:-webkit-max-content" src="../ images/resources/blue-100.png"> 158 <img data-expected-width="50" style="max-width:-webkit-max-content" src="../ images/resources/blue-100.png">
162 <img data-expected-width="10" style="max-width:-webkit-max-content" src="../ images/resources/green-10.png"> 159 <img data-expected-width="10" style="max-width:-webkit-max-content" src="../ images/resources/green-10.png">
163 <img data-expected-width="50" style="max-width:-webkit-fill-available" src=" ../images/resources/blue-100.png"> 160 <img data-expected-width="50" style="max-width:-webkit-fill-available" src=" ../images/resources/blue-100.png">
164 <img data-expected-width="50" style="max-width:-webkit-fill-available" src=" ../images/resources/green-10.png"> 161 <img data-expected-width="50" style="max-width:-webkit-fill-available" src=" ../images/resources/green-10.png">
165 <img data-expected-width="50" style="max-width:-webkit-fit-content" src="../ images/resources/blue-100.png"> 162 <img data-expected-width="50" style="max-width:-webkit-fit-content" src="../ images/resources/blue-100.png">
166 <img data-expected-width="10" style="max-width:-webkit-fit-content" src="../ images/resources/green-10.png"> 163 <img data-expected-width="10" style="max-width:-webkit-fit-content" src="../ images/resources/green-10.png">
167 </div> 164 </div>
168 165
169 </html> 166 </html>
OLDNEW
« no previous file with comments | « LayoutTests/css3/flexbox/display-flexbox-set-get-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-display.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698