1 This test checks that grid-area is properly parsed and stored internally.
3 On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
6 Test getting grid-area set through CSS
7 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "1"
8 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
9 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
10 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
11 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "thirdArea"
12 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "thirdArea"
13 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "thirdArea"
14 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "thirdArea"
15 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
16 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 1"
17 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
18 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
19 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "firstArea"
20 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "secondArea"
21 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "firstArea"
22 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "secondArea"
23 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "span 1"
24 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "10"
25 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "-1"
26 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
27 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-5"
28 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 5"
29 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 8"
30 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "9"
31 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "firstArea"
32 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 1"
33 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "nonExistent"
34 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "1 foobar"
36 Test getting and setting grid-area set through JS
37 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
38 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
39 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
40 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
41 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
42 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "span 5"
43 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
44 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
45 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "-1"
46 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "10"
47 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "span 3"
48 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
50 Test setting grid-area to 'initial' through JS
51 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "1"
52 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "2"
53 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "3"
54 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "4"
55 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
56 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
57 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
58 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
60 Test setting grid-area to 'inherit' through JS
61 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "1"
62 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "2"
63 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "3"
64 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "4"
65 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "1"
66 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "2"
67 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "3"
68 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "4"
70 Test setting some positions to invalid values through JS
71 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
72 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
73 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
74 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
75 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
76 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
77 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
78 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
79 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
80 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
81 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
82 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
83 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-start') is "auto"
84 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-start') is "auto"
85 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-row-end') is "auto"
86 PASS getComputedStyle(gridItem, '').getPropertyValue('grid-column-end') is "auto"
87 PASS successfullyParsed is true