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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution.html

Issue 22759002: [CSS Grid Layout] Add support for named grid areas (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 4 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 | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script>
5 if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script>
8 <link href="resources/grid.css" rel="stylesheet">
9 <style>
10 .grid {
11 grid-definition-rows: "before" 50px "middle" 100px "after";
12 grid-definition-columns: 40px 80px 160px;
13 }
14
15 .gridWithoutRepeat {
16 grid-template: "first second third"
17 "fourth fifth sixth";
18 }
19
20 .gridWithRepeat {
21 grid-template: "first second third"
22 "fourth fourth third";
23 }
24
25 .gridItemFirstArea {
26 grid-area: first;
27 }
28
29 .gridItemSecondArea {
30 grid-area: second;
31 }
32
33 .gridItemThirdArea {
34 grid-area: third;
35 }
36
37 .gridItemFourthArea {
38 grid-area: fourth;
39 }
40
41 .gridItemFifthArea {
42 grid-area: fifth;
43 }
44
45 .gridItemSixthArea {
46 grid-area: sixth;
47 }
48
49 .gridItemSpan2ThirdArea {
50 grid-row: fourth;
51 grid-column: span 2 / third;
52 }
53
54 .gridItemNamedGridLineWithArea {
55 grid-row: third / "after";
56 grid-column: 1;
57 }
58 </style>
59 <script src="../../resources/check-layout.js"></script>
60 </head>
61 <body onload="checkLayout('.grid')">
62
63 <p>This test checks that we resolve named grid areas per the specification.</p>
64
65 <div style="position: relative">
66 <div class="grid gridWithoutRepeat">
67 <div class="sizedToGridArea gridItemSixthArea" data-offset-x="120" data- offset-y="50" data-expected-width="160" data-expected-height="100"></div>
68 <div class="sizedToGridArea gridItemFifthArea" data-offset-x="40" data-o ffset-y="50" data-expected-width="80" data-expected-height="100"></div>
69 <div class="sizedToGridArea gridItemFourthArea" data-offset-x="0" data-o ffset-y="50" data-expected-width="40" data-expected-height="100"></div>
70 <div class="sizedToGridArea gridItemThirdArea" data-offset-x="120" data- offset-y="0" data-expected-width="160" data-expected-height="50"></div>
71 <div class="sizedToGridArea gridItemSecondArea" data-offset-x="40" data- offset-y="0" data-expected-width="80" data-expected-height="50"></div>
72 <div class="sizedToGridArea gridItemFirstArea" data-offset-x="0" data-of fset-y="0" data-expected-width="40" data-expected-height="50"></div>
73
74 <div class="sizedToGridArea gridItemSpan2ThirdArea" data-offset-x="40" d ata-offset-y="50" data-expected-width="240" data-expected-height="100"></div>
75 <div class="sizedToGridArea gridItemNamedGridLineWithArea" data-offset-x ="0" data-offset-y="0" data-expected-width="40" data-expected-height="150"></div >
76 </div>
77 </div>
78
79 <div style="position: relative">
80 <div class="grid gridWithRepeat">
81 <!-- fifth and sixth are invalid named grid areas. -->
82 <div class="sizedToGridArea gridItemSixthArea" data-offset-x="0" data-of fset-y="0" data-expected-width="40" data-expected-height="50"></div>
83 <div class="sizedToGridArea gridItemFifthArea" data-offset-x="0" data-of fset-y="0" data-expected-width="40" data-expected-height="50"></div>
84
85 <div class="sizedToGridArea gridItemFourthArea" data-offset-x="0" data-o ffset-y="50" data-expected-width="120" data-expected-height="100"></div>
86 <div class="sizedToGridArea gridItemThirdArea" data-offset-x="120" data- offset-y="0" data-expected-width="160" data-expected-height="150"></div>
87 <div class="sizedToGridArea gridItemSecondArea" data-offset-x="40" data- offset-y="0" data-expected-width="80" data-expected-height="50"></div>
88 <div class="sizedToGridArea gridItemFirstArea" data-offset-x="0" data-of fset-y="0" data-expected-width="40" data-expected-height="50"></div>
89
90 <div class="sizedToGridArea gridItemSpan2ThirdArea" data-offset-x="40" d ata-offset-y="50" data-expected-width="240" data-expected-height="100"></div>
91 <div class="sizedToGridArea gridItemNamedGridLineWithArea" data-offset-x ="0" data-offset-y="0" data-expected-width="40" data-expected-height="150"></div >
92 </div>
93 </div>
94
95 </body>
96 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-named-grid-area-resolution-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698