| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/DTD/xhtml1-strict.dtd"> |
| 2 <html xmlns="http://www.w3.org/1999/xhtml"> |
| 3 <head> |
| 4 <title>CSS Grid Layout Test: Support for 'grid-template-ares' property w
ithin an inline grid</title> |
| 5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igal
ia.com" /> |
| 6 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-ar
eas-property" title="5.2 Named Areas: the 'grid-template-areas' property" /> |
| 7 <meta name="flags" content="ahem dom" /> |
| 8 <meta name="assert" content="This test checks that 'grid-template-areas'
is supported in an inline grid. So you can define the grid structure." /> |
| 9 <script src="/resources/testharness.js" type="text/javascript"></script> |
| 10 <script src="/resources/testharnessreport.js" type="text/javascript"></s
cript> |
| 11 <script src="support/testing-utils.js" type="text/javascript"></script> |
| 12 <style type="text/css"><![CDATA[ |
| 13 #grid { |
| 14 display: inline-grid; |
| 15 } |
| 16 ]]></style> |
| 17 </head> |
| 18 <body> |
| 19 <div id="log"></div> |
| 20 |
| 21 <div id="inline-grid"></div> |
| 22 |
| 23 <script type="text/javascript"><![CDATA[ |
| 24 // Single values. |
| 25 TestingUtils.testGridTemplateAreas('inline-grid', 'none', 'none'); |
| 26 TestingUtils.testGridTemplateAreas('inline-grid', '"a"', '"a"'); |
| 27 TestingUtils.testGridTemplateAreas('inline-grid', '"."', '"."'); |
| 28 TestingUtils.testGridTemplateAreas('inline-grid', '"lower UPPER 10 -
minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_rig
ht line¶"'); |
| 29 TestingUtils.testGridTemplateAreas('inline-grid', '"a b"', '"a b"'); |
| 30 TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c d"', '"a
b" "c d"'); |
| 31 TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c
d"', ['"a b" "c d"', '"a b" "c d"']); |
| 32 TestingUtils.testGridTemplateAreas('inline-grid', '"a b""c d"', '"a
b" "c d"'); |
| 33 TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\t"c d"', '"
a b" "c d"'); |
| 34 TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\n"c d"', '"
a b" "c d"'); |
| 35 TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "a b"', '"a
b" "a b"'); |
| 36 TestingUtils.testGridTemplateAreas('inline-grid', '"a a" "b b"', '"a
a" "b b"'); |
| 37 TestingUtils.testGridTemplateAreas('inline-grid', '". a ." "b a c"',
'". a ." "b a c"'); |
| 38 TestingUtils.testGridTemplateAreas('inline-grid', '".. a ..." "b a c
"', ['". a ." "b a c"', '".. a ..." "b a c"']); |
| 39 TestingUtils.testGridTemplateAreas('inline-grid', '".a..." "b a c"',
['". a ." "b a c"', '".a..." "b a c"']); |
| 40 TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav
main" "foot ."', '"head head" "nav main" "foot ."'); |
| 41 TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav
main" "foot ...."', ['"head head" "nav main" "foot ."', '"head head" "nav main"
"foot ...."']); |
| 42 TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav
main" "foot."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foo
t."']); |
| 43 TestingUtils.testGridTemplateAreas('inline-grid', '". header header
." "nav main main main" "nav footer footer ."', '". header header ." "nav main m
ain main" "nav footer footer ."'); |
| 44 TestingUtils.testGridTemplateAreas('inline-grid', '"... header heade
r ...." "nav main main main" "nav footer footer ...."', ['". header header ." "n
av main main main" "nav footer footer ."', '"... header header ...." "nav main m
ain main" "nav footer footer ...."']); |
| 45 TestingUtils.testGridTemplateAreas('inline-grid', '"...header header
...." "nav main main main" "nav footer footer...."', ['". header header ." "nav
main main main" "nav footer footer ."', '"...header header...." "nav main main m
ain" "nav footer footer...."']); |
| 46 TestingUtils.testGridTemplateAreas('inline-grid', '"title stats" "sc
ore stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board boa
rd" "ctrls ctrls"'); |
| 47 TestingUtils.testGridTemplateAreas('inline-grid', '"title board" "st
ats board" "score ctrls"', '"title board" "stats board" "score ctrls"'); |
| 48 TestingUtils.testGridTemplateAreas('inline-grid', '". a" "b a" ". a"
', '". a" "b a" ". a"'); |
| 49 TestingUtils.testGridTemplateAreas('inline-grid', '".. a" "b a" "...
a"', ['". a" "b a" ". a"', '".. a" "b a" "... a"']); |
| 50 TestingUtils.testGridTemplateAreas('inline-grid', '"..a" "b a" ".a"'
, ['". a" "b a" ". a"', '"..a" "b a" ".a"']); |
| 51 TestingUtils.testGridTemplateAreas('inline-grid', '"a a a" "b b b"',
'"a a a" "b b b"'); |
| 52 TestingUtils.testGridTemplateAreas('inline-grid', '". ." "a a"', '".
." "a a"'); |
| 53 TestingUtils.testGridTemplateAreas('inline-grid', '"... ...." "a a"'
, ['". ." "a a"', '"... ...." "a a"']); |
| 54 |
| 55 // Reset values. |
| 56 document.getElementById('inline-grid').style.gridTemplateAreas = ''; |
| 57 |
| 58 // Wrong values. |
| 59 TestingUtils.testGridTemplateAreas('inline-grid', 'a', 'none'); |
| 60 TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b c"', 'none
'); |
| 61 TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c" "d e"',
'none'); |
| 62 TestingUtils.testGridTemplateAreas('inline-grid', '"a b c" "d e"', '
none'); |
| 63 TestingUtils.testGridTemplateAreas('inline-grid', '"a b"-"c d"', 'no
ne'); |
| 64 TestingUtils.testGridTemplateAreas('inline-grid', '"a b" - "c d"', '
none'); |
| 65 TestingUtils.testGridTemplateAreas('inline-grid', '"a b" . "c d"', '
none'); |
| 66 TestingUtils.testGridTemplateAreas('inline-grid', '"a b a"', 'none')
; |
| 67 TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b" "a"', 'no
ne'); |
| 68 TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b b"', 'no
ne'); |
| 69 TestingUtils.testGridTemplateAreas('inline-grid', '"b a" "b b"', 'no
ne'); |
| 70 TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b a"', 'no
ne'); |
| 71 TestingUtils.testGridTemplateAreas('inline-grid', '"a ." ". a"', 'no
ne'); |
| 72 TestingUtils.testGridTemplateAreas('inline-grid', '","', 'none'); |
| 73 TestingUtils.testGridTemplateAreas('inline-grid', '"10%"', 'none'); |
| 74 TestingUtils.testGridTemplateAreas('inline-grid', '"USD$"', 'none'); |
| 75 ]]></script> |
| 76 </body> |
| 77 </html> |
| OLD | NEW |