| 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</
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 a 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: grid; |
| 15 } |
| 16 ]]></style> |
| 17 </head> |
| 18 <body> |
| 19 <div id="log"></div> |
| 20 |
| 21 <div id="grid"></div> |
| 22 |
| 23 <script type="text/javascript"><![CDATA[ |
| 24 // Single values. |
| 25 TestingUtils.testGridTemplateAreas('grid', 'none', 'none'); |
| 26 TestingUtils.testGridTemplateAreas('grid', '"a"', '"a"'); |
| 27 TestingUtils.testGridTemplateAreas('grid', '"."', '"."'); |
| 28 TestingUtils.testGridTemplateAreas('grid', '"lower UPPER 10 -minus _
low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line
¶"'); |
| 29 TestingUtils.testGridTemplateAreas('grid', '"a b"', '"a b"'); |
| 30 TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c
d"'); |
| 31 TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"'
, ['"a b" "c d"', '"a b" "c d"']); |
| 32 TestingUtils.testGridTemplateAreas('grid', '"a b""c d"', '"a b" "c d
"'); |
| 33 TestingUtils.testGridTemplateAreas('grid', '"a b"\t"c d"', '"a b" "c
d"'); |
| 34 TestingUtils.testGridTemplateAreas('grid', '"a b"\n"c d"', '"a b" "c
d"'); |
| 35 TestingUtils.testGridTemplateAreas('grid', '"a b" "a b"', '"a b" "a
b"'); |
| 36 TestingUtils.testGridTemplateAreas('grid', '"a a" "b b"', '"a a" "b
b"'); |
| 37 TestingUtils.testGridTemplateAreas('grid', '". a ." "b a c"', '". a
." "b a c"'); |
| 38 TestingUtils.testGridTemplateAreas('grid', '".. a ..." "b a c"', ['"
. a ." "b a c"', '".. a ..." "b a c"']); |
| 39 TestingUtils.testGridTemplateAreas('grid', '".a..." "b a c"', ['". a
." "b a c"', '".a..." "b a c"']); |
| 40 TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "
foot ."', '"head head" "nav main" "foot ."'); |
| 41 TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "
foot ...."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot .
..."']); |
| 42 TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "
foot."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot."']); |
| 43 TestingUtils.testGridTemplateAreas('grid', '". header header ." "nav
main main main" "nav footer footer ."', '". header header ." "nav main main mai
n" "nav footer footer ."'); |
| 44 TestingUtils.testGridTemplateAreas('grid', '"... header header ...."
"nav main main main" "nav footer footer ...."', ['". header header ." "nav main
main main" "nav footer footer ."', '"... header header ...." "nav main main mai
n" "nav footer footer ...."']); |
| 45 TestingUtils.testGridTemplateAreas('grid', '"...header header...." "
nav main main main" "nav footer footer...."', ['". header header ." "nav main ma
in main" "nav footer footer ."', '"...header header...." "nav main main main" "n
av footer footer...."']); |
| 46 TestingUtils.testGridTemplateAreas('grid', '"title stats" "score sta
ts" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ct
rls ctrls"'); |
| 47 TestingUtils.testGridTemplateAreas('grid', '"title board" "stats boa
rd" "score ctrls"', '"title board" "stats board" "score ctrls"'); |
| 48 TestingUtils.testGridTemplateAreas('grid', '". a" "b a" ". a"', '".
a" "b a" ". a"'); |
| 49 TestingUtils.testGridTemplateAreas('grid', '".. a" "b a" "... a"', [
'". a" "b a" ". a"', '".. a" "b a" "... a"']); |
| 50 TestingUtils.testGridTemplateAreas('grid', '"..a" "b a" ".a"', ['".
a" "b a" ". a"', '"..a" "b a" ".a"']); |
| 51 TestingUtils.testGridTemplateAreas('grid', '"a a a" "b b b"', '"a a
a" "b b b"'); |
| 52 TestingUtils.testGridTemplateAreas('grid', '". ." "a a"', '". ." "a
a"'); |
| 53 TestingUtils.testGridTemplateAreas('grid', '"... ...." "a a"', ['".
." "a a"', '"... ...." "a a"']); |
| 54 |
| 55 // Reset values. |
| 56 document.getElementById('grid').style.gridTemplateAreas = ''; |
| 57 |
| 58 // Wrong values. |
| 59 TestingUtils.testGridTemplateAreas('grid', 'a', 'none'); |
| 60 TestingUtils.testGridTemplateAreas('grid', '"a" "b c"', 'none'); |
| 61 TestingUtils.testGridTemplateAreas('grid', '"a b" "c" "d e"', 'none'
); |
| 62 TestingUtils.testGridTemplateAreas('grid', '"a b c" "d e"', 'none'); |
| 63 TestingUtils.testGridTemplateAreas('grid', '"a b"-"c d"', 'none'); |
| 64 TestingUtils.testGridTemplateAreas('grid', '"a b" - "c d"', 'none'); |
| 65 TestingUtils.testGridTemplateAreas('grid', '"a b" . "c d"', 'none'); |
| 66 TestingUtils.testGridTemplateAreas('grid', '"a b a"', 'none'); |
| 67 TestingUtils.testGridTemplateAreas('grid', '"a" "b" "a"', 'none'); |
| 68 TestingUtils.testGridTemplateAreas('grid', '"a b" "b b"', 'none'); |
| 69 TestingUtils.testGridTemplateAreas('grid', '"b a" "b b"', 'none'); |
| 70 TestingUtils.testGridTemplateAreas('grid', '"a b" "b a"', 'none'); |
| 71 TestingUtils.testGridTemplateAreas('grid', '"a ." ". a"', 'none'); |
| 72 TestingUtils.testGridTemplateAreas('grid', '","', 'none'); |
| 73 TestingUtils.testGridTemplateAreas('grid', '"10%"', 'none'); |
| 74 TestingUtils.testGridTemplateAreas('grid', '"USD$"', 'none'); |
| 75 ]]></script> |
| 76 </body> |
| 77 </html> |
| OLD | NEW |