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

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-auto-columns-rows-update.html

Issue 16404015: Unprefix -webkit-min-content and -webkit-max-content for grid layout (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebaselined change Created 7 years, 5 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 <head> 3 <head>
4 <script> 4 <script>
5 if (window.testRunner) 5 if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script> 7 </script>
8 <link href="resources/grid.css" rel="stylesheet"> 8 <link href="resources/grid.css" rel="stylesheet">
9 <style> 9 <style>
10 .grid { 10 .grid {
(...skipping 20 matching lines...) Expand all
31 checkLayout("#" + gridElementID); 31 checkLayout("#" + gridElementID);
32 } 32 }
33 33
34 function updateGridAutoRowsColumns() 34 function updateGridAutoRowsColumns()
35 { 35 {
36 checkLayout('.grid'); 36 checkLayout('.grid');
37 37
38 // The constrained example is always sized to the min width so we don't test max width. 38 // The constrained example is always sized to the min width so we don't test max width.
39 updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' }); 39 updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': '50px' }, { 'width': '50px', 'height': '200px' });
40 updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '200px' }); 40 updateAndCheck("constrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '200px' });
41 updateAndCheck("constrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15p x)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '20px' }); 41 updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'co lumns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '20px' });
42 updateAndCheck("constrainedGrid", { 'rows': 'minmax(-webkit-min-content, 15p x)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'hei ght': '10px' }); 42 updateAndCheck("constrainedGrid", { 'rows': 'minmax(min-content, 15px)', 'co lumns': 'minmax(max-content, 100px)' }, { 'width': '120px', 'height': '10px' });
43 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(-webkit-max-content, 100px)' }, { 'width': '120px', 'height': '400px' } ); 43 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(max-content, 100px)' }, { 'width': '120px', 'height': '400px' });
44 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '400px' }); 44 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '1px', 'height': '400px' });
45 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60px', 'height': '400px' }); 45 updateAndCheck("constrainedGrid", { 'rows': 'minmax(40em, 15px)', 'columns': 'auto' }, { 'width': '60px', 'height': '400px' });
46 updateAndCheck("constrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { ' width': '60px', 'height': '20px' }); 46 updateAndCheck("constrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { ' width': '60px', 'height': '20px' });
47 47
48 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns ': '50px' }, { 'width': '50px', 'height': '200px' }); 48 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns ': '50px' }, { 'width': '50px', 'height': '200px' });
49 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns ': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '200px' }); 49 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(20em, 15px)', 'columns ': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '200px' });
50 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 1 5px)', 'columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '20px' } ); 50 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', ' columns': 'minmax(10%, 100px)' }, { 'width': '100px', 'height': '20px' });
51 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 1 5px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'hei ght': '15px' }); 51 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', ' columns': 'minmax(10%, max-content)' }, { 'width': '120px', 'height': '15px' });
52 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(-webkit-min-content, 1 5px)', 'columns': 'minmax(10%, -webkit-max-content)' }, { 'width': '120px', 'hei ght': '15px' }); 52 updateAndCheck("unconstrainedGrid", { 'rows': 'minmax(min-content, 15px)', ' columns': 'minmax(10%, max-content)' }, { 'width': '120px', 'height': '15px' });
53 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(10e m, -webkit-max-content)' }, { 'width': '120px', 'height': '10px' }); 53 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(10e m, max-content)' }, { 'width': '120px', 'height': '10px' });
54 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20e m, -webkit-max-content)' }, { 'width': '200px', 'height': '10px' }); 54 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20e m, max-content)' }, { 'width': '200px', 'height': '10px' });
55 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120px', 'height': '10px' }); 55 updateAndCheck("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120px', 'height': '10px' });
56 } 56 }
57 57
58 window.addEventListener("load", updateGridAutoRowsColumns, false); 58 window.addEventListener("load", updateGridAutoRowsColumns, false);
59 </script> 59 </script>
60 <body> 60 <body>
61 61
62 <div>This test checks that grid-auto-{row|column} updates properly recomputes th e grid items' sizes.</div> 62 <div>This test checks that grid-auto-{row|column} updates properly recomputes th e grid items' sizes.</div>
63 63
64 <div class="constrainedContainer" style="position: relative"> 64 <div class="constrainedContainer" style="position: relative">
65 <div class="grid" id="constrainedGrid"> 65 <div class="grid" id="constrainedGrid">
66 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX </div> 66 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX </div>
67 </div> 67 </div>
68 </div> 68 </div>
69 69
70 <div class="unconstrainedContainer" style="position: relative"> 70 <div class="unconstrainedContainer" style="position: relative">
71 <div class="grid" id="unconstrainedGrid"> 71 <div class="grid" id="unconstrainedGrid">
72 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX </div> 72 <div class="sizedToGridArea secondRowSecondColumn" data-offset-x="10" da ta-offset-y="20" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX </div>
73 </div> 73 </div>
74 </div> 74 </div>
75 75
76 </body> 76 </body>
77 </html> 77 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698