Update charted to 0.4.8 and roll

packages/csslib/test/declaration_test.dart

 // Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
 library declaration_test;
 
+import 'package:csslib/src/messages.dart';
+import 'package:csslib/visitor.dart';
 import 'package:test/test.dart';
 
 import 'testing.dart';
 
+void expectCss(String css, String expected) {
+  var errors = <Message>[];
+  var styleSheet = parseCss(css, errors: errors, opts: simpleOptions);
+  expect(styleSheet, isNotNull);
+  expect(errors, isEmpty);
+  expect(prettyPrint(styleSheet), expected);
+}
+
 void testSimpleTerms() {
-  var errors = [];
+  var errors = <Message>[];
   final String input = r'''
 @ import url("test.css");
 .foo {
   background-color: #191919;
+  content: "u+0041";
   width: 10PX;
   height: 22mM !important;
   border-width: 20cm;
   margin-width: 33%;
   border-height: 30EM;
   width: .6in;
   length: 1.2in;
   -web-stuff: -10Px;
 }''';
   final String generated = r'''
 @import "test.css";
 .foo {
   background-color: #191919;
+  content: "u+0041";
   width: 10px;
   height: 22mm !important;
   border-width: 20cm;
   margin-width: 33%;
   border-height: 30em;
   width: .6in;
   length: 1.2in;
   -web-stuff: -10px;
 }''';
 
@@ skipping 10 matching lines @@
   final String generated2 = r'''
 * {
   border-color: #008000;
 }''';
 
   stylesheet = parseCss(input2, errors: errors..clear());
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated2);
+
+  // Regression test to ensure invalid percentages don't throw an exception and
+  // instead print a useful error message when not in checked mode.
+  var css = '''
+.foo {
+  width: Infinity%;
+}''';
+  stylesheet = parseCss(css, errors: errors..clear(), opts: simpleOptions);
+  expect(errors, isNotEmpty);
+  expect(errors.first.message, 'expected }, but found %');
+  expect(errors.first.span.text, '%');
 }
 
 /**
  * Declarations with comments, references with single-quotes, double-quotes,
  * no quotes.  Hex values with # and letters, and functions (rgba, url, etc.)
  */
 void testDeclarations() {
-  var errors = [];
+  var errors = <Message>[];
   final String input = r'''
 .more {
   color: white;
   color: black;
   color: cyan;
   color: red;
   color: #aabbcc;  /* test -- 3 */
   color: blue;
   background-image: url(http://test.jpeg);
   background-image: url("http://double_quote.html");
@@ skipping 17 matching lines @@
 }''';
 
   var stylesheet = parseCss(input, errors: errors);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 }
 
 void testIdentifiers() {
-  var errors = [];
+  var errors = <Message>[];
   final String input = r'''
 #da {
   height: 100px;
 }
 #foo {
   width: 10px;
   color: #ff00cc;
 }
 ''';
   final String generated = r'''
 #da {
   height: 100px;
 }
 #foo {
   width: 10px;
   color: #f0c;
 }''';
 
   var stylesheet = parseCss(input, errors: errors);
 
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(stylesheet != null, true);
   expect(prettyPrint(stylesheet), generated);
 }
 
 void testComposites() {
-  var errors = [];
+  var errors = <Message>[];
   final String input = r'''
 .xyzzy {
   border: 10px 80px 90px 100px;
   width: 99%;
 }
 @-webkit-keyframes pulsate {
   0% {
     -webkit-transform: translate3d(0, 0, 0) scale(1.0);
   }
 }''';
   final String generated = r'''
 .xyzzy {
   border: 10px 80px 90px 100px;
   width: 99%;
 }
 @-webkit-keyframes pulsate {
   0% {
   -webkit-transform: translate3d(0, 0, 0) scale(1.0);
   }
 }''';
 
   var stylesheet = parseCss(input, errors: errors);
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 }
 
 void testUnits() {
-  var errors = [];
+  var errors = <Message>[];
   final String input = r'''
 #id-1 {
   transition: color 0.4s;
   animation-duration: 500ms;
   top: 1em;
   left: 200ex;
   right: 300px;
   bottom: 400cm;
   border-width: 2.5mm;
-  margin-top: .5in;
-  margin-left: 5pc;
+  margin-top: -.5in;
+  margin-left: +5pc;
   margin-right: 5ex;
   margin-bottom: 5ch;
   font-size: 10pt;
   padding-top: 22rem;
   padding-left: 33vw;
   padding-right: 34vh;
   padding-bottom: 3vmin;
   transform: rotate(20deg);
   voice-pitch: 10hz;
 }
@@ skipping 16 matching lines @@
 
   final String generated = r'''
 #id-1 {
   transition: color 0.4s;
   animation-duration: 500ms;
   top: 1em;
   left: 200ex;
   right: 300px;
   bottom: 400cm;
   border-width: 2.5mm;
-  margin-top: .5in;
-  margin-left: 5pc;
+  margin-top: -.5in;
+  margin-left: +5pc;
   margin-right: 5ex;
   margin-bottom: 5ch;
   font-size: 10pt;
   padding-top: 22rem;
   padding-left: 33vw;
   padding-right: 34vh;
   padding-bottom: 3vmin;
   transform: rotate(20deg);
   voice-pitch: 10hz;
 }
@@ skipping 14 matching lines @@
 }''';
 
   var stylesheet = parseCss(input, errors: errors, opts: simpleOptions);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 }
 
 void testUnicode() {
-  var errors = [];
+  var errors = <Message>[];
   final String input = r'''
 .toggle:after {
   content: '✔';
   line-height: 43px;
   font-size: 20px;
   color: #d9d9d9;
   text-shadow: 0 -1px 0 #bfbfbf;
 }
 ''';
 
   final String generated = r'''
 .toggle:after {
   content: '✔';
   line-height: 43px;
   font-size: 20px;
   color: #d9d9d9;
   text-shadow: 0 -1px 0 #bfbfbf;
 }''';
 
   var stylesheet = parseCss(input, errors: errors);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 }
 
 void testNewerCss() {
-  var errors = [];
+  var errors = <Message>[];
   final String input = r'''
 @media screen,print {
   .foobar_screen {
     width: 10px;
   }
 }
 @page {
   height: 22px;
   size: 3in 3in;
 }
 @page : left {
   width: 10px;
 }
 @page bar : left { @top-left { margin: 8px; } }
+@page { @top-left { margin: 8px; } width: 10px; }
 @charset "ISO-8859-1";
 @charset 'ASCII';''';
 
   final String generated = r'''
 @media screen, print {
 .foobar_screen {
   width: 10px;
 }
 }
 @page {
   height: 22px;
   size: 3in 3in;
 }
 @page:left {
   width: 10px;
 }
 @page bar:left {
 @top-left {
   margin: 8px;
 }
 }
+@page {
+@top-left {
+  margin: 8px;
+}
+  width: 10px;
+}
 @charset "ISO-8859-1";
 @charset "ASCII";''';
 
   var stylesheet = parseCss(input, errors: errors);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 }
 
 void testMediaQueries() {
-  var errors = [];
+  var errors = <Message>[];
   String input = '''
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   .todo-item .toggle {
     background: none;
   }
   #todo-item .toggle {
     height: 40px;
   }
 }''';
   String generated = '''
@@ skipping 31 matching lines @@
     }
   }''';
   generated =
       '''@media handheld AND (min-width:20em), screen AND (min-width:20em) {
 #id {
   color: #f00;
 }
 .myclass {
   height: 20px;
 }
-} @media print AND (min-resolution:300dpi) {
+}
+@media print AND (min-resolution:300dpi) {
 #anotherId {
   color: #fff;
 }
-} @media print AND (min-resolution:280dpcm) {
+}
+@media print AND (min-resolution:280dpcm) {
 #finalId {
   color: #aaa;
 }
 .class2 {
   border: 20px;
 }
 }''';
 
   stylesheet = parseCss(input, errors: errors..clear(), opts: simpleOptions);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 
   input = '''
 @media only screen and (min-device-width: 4000px) and
-    (min-device-height: 2000px), screen (another: 100px) {
+    (min-device-height: 2000px), screen AND (another: 100px) {
       html {
         font-size: 10em;
       }
     }''';
   generated = '@media ONLY screen AND (min-device-width:4000px) '
-      'AND (min-device-height:2000px), screen (another:100px) {\n'
+      'AND (min-device-height:2000px), screen AND (another:100px) {\n'
       'html {\n  font-size: 10em;\n}\n}';
 
   stylesheet = parseCss(input, errors: errors..clear(), opts: simpleOptions);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 
   input = '''
-@media screen,print (min-device-width: 4000px) and
-    (min-device-height: 2000px), screen (another: 100px) {
+@media screen,print AND (min-device-width: 4000px) and
+    (min-device-height: 2000px), screen AND (another: 100px) {
       html {
         font-size: 10em;
       }
     }''';
-  generated = '@media screen, print (min-device-width:4000px) AND '
-      '(min-device-height:2000px), screen (another:100px) {\n'
+  generated = '@media screen, print AND (min-device-width:4000px) AND '
+      '(min-device-height:2000px), screen AND (another:100px) {\n'
       'html {\n  font-size: 10em;\n}\n}';
 
   stylesheet = parseCss(input, errors: errors..clear(), opts: simpleOptions);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 
   input = '''
-@import "test.css" ONLY screen, NOT print (min-device-width: 4000px);''';
-  generated =
-      '@import "test.css" ONLY screen, NOT print (min-device-width:4000px);';
+@import "test.css" ONLY screen, NOT print AND (min-device-width: 4000px);''';
+  generated = '@import "test.css" ONLY screen, '
+      'NOT print AND (min-device-width:4000px);';
 
   stylesheet = parseCss(input, errors: errors..clear(), opts: simpleOptions);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
+
+  var css = '@media (min-device-width:400px) {\n}';
+  expectCss(css, css);
+
+  css = '@media all AND (tranform-3d), (-webkit-transform-3d) {\n}';
+  expectCss(css, css);
+
+  // Test that AND operator is required between media type and expressions.
+  css = '@media screen (min-device-width:400px';
+  stylesheet = parseCss(css, errors: errors..clear(), opts: simpleOptions);
+  expect(errors, isNotEmpty);
+  expect(
+      errors.first.message, contains('expected { after media before ruleset'));
+  expect(errors.first.span.text, '(');
+}
+
+void testMozDocument() {
+  var errors = <Message>[];
+  // Test empty url-prefix, commonly used for browser detection.
+  var css = '''
+@-moz-document url-prefix() {
+  div {
+    color: #000;
+  }
+}''';
+  var expected = '''@-moz-document url-prefix() {
+div {
+  color: #000;
+}
+}''';
+  var styleSheet = parseCss(css, errors: errors);
+  expect(styleSheet, isNotNull);
+  expect(errors, isEmpty);
+  expect(prettyPrint(styleSheet), expected);
+
+  // Test url-prefix with unquoted parameter
+  css = '''
+@-moz-document url-prefix(http://www.w3.org/Style/) {
+  div {
+    color: #000;
+  }
+}''';
+  expected = '''@-moz-document url-prefix("http://www.w3.org/Style/") {
+div {
+  color: #000;
+}
+}''';
+  styleSheet = parseCss(css, errors: errors);
+  expect(styleSheet, isNotNull);
+  expect(errors, isEmpty);
+  expect(prettyPrint(styleSheet), expected);
+
+  // Test domain with unquoted parameter
+  css = '''
+@-moz-document domain(google.com) {
+  div {
+    color: #000;
+  }
+}''';
+  expected = '''@-moz-document domain("google.com") {
+div {
+  color: #000;
+}
+}''';
+  styleSheet = parseCss(css, errors: errors);
+  expect(styleSheet, isNotNull);
+  expect(errors, isEmpty);
+  expect(prettyPrint(styleSheet), expected);
+
+  // Test all document functions combined.
+  css = '@-moz-document ' +
+      'url(http://www.w3.org/), ' +
+      "url-prefix('http://www.w3.org/Style/'), " +
+      'domain("google.com"), ' +
+      'regexp("https:.*") { div { color: #000; } }';
+  expected = '@-moz-document ' +
+      'url("http://www.w3.org/"), ' +
+      'url-prefix("http://www.w3.org/Style/"), ' +
+      'domain("google.com"), ' +
+      'regexp("https:.*") {\ndiv {\n  color: #000;\n}\n}';
+  styleSheet = parseCss(css, errors: errors);
+  expect(styleSheet, isNotNull);
+  expect(errors, isEmpty);
+  expect(prettyPrint(styleSheet), expected);
+}
+
+void testSupports() {
+  // Test single declaration condition.
+  var css = '''
+@supports (-webkit-appearance: none) {
+  div {
+    -webkit-appearance: none;
+  }
+}''';
+  var expected = '''@supports (-webkit-appearance: none) {
+div {
+  -webkit-appearance: none;
+}
+}''';
+  expectCss(css, expected);
+
+  // Test negation.
+  css = '''
+@supports not ( display: flex ) {
+  body { width: 100%; }
+}''';
+  expected = '''@supports not (display: flex) {
+body {
+  width: 100%;
+}
+}''';
+  expectCss(css, expected);
+
+  // Test clause with multiple conditions.
+  css = '''
+@supports (box-shadow: 0 0 2px black inset) or
+    (-moz-box-shadow: 0 0 2px black inset) or
+    (-webkit-box-shadow: 0 0 2px black inset) or
+    (-o-box-shadow: 0 0 2px black inset) {
+  .box {
+    box-shadow: 0 0 2px black inset;
+  }
+}''';
+  expected = '@supports (box-shadow: 0 0 2px #000 inset) or ' +
+      '(-moz-box-shadow: 0 0 2px #000 inset) or ' +
+      '(-webkit-box-shadow: 0 0 2px #000 inset) or ' +
+      '(-o-box-shadow: 0 0 2px #000 inset) {\n' +
+      '.box {\n' +
+      '  box-shadow: 0 0 2px #000 inset;\n' +
+      '}\n' +
+      '}';
+  expectCss(css, expected);
+
+  // Test conjunction and disjunction together.
+  css = '''
+@supports ((transition-property: color) or (animation-name: foo)) and
+    (transform: rotate(10deg)) {
+  div {
+    transition-property: color;
+    transform: rotate(10deg);
+  }
+}''';
+
+  expected = '@supports ' +
+      '((transition-property: color) or (animation-name: foo)) and ' +
+      '(transform: rotate(10deg)) {\n' +
+      'div {\n' +
+      '  transition-property: color;\n' +
+      '  transform: rotate(10deg);\n' +
+      '}\n' +
+      '}';
+  expectCss(css, expected);
+
+  // Test that operators can't be mixed without parentheses.
+  css = '@supports (a: 1) and (b: 2) or (c: 3) {}';
+  var errors = <Message>[];
+  var styleSheet = parseCss(css, errors: errors, opts: simpleOptions);
+  expect(styleSheet, isNotNull);
+  expect(errors, isNotEmpty);
+  expect(errors.first.message,
+      "Operators can't be mixed without a layer of parentheses");
+  expect(errors.first.span.text, 'or');
+}
+
+void testViewport() {
+  // No declarations.
+  var css = '@viewport {\n}';
+  expectCss(css, css);
+
+  // All declarations.
+  css = '''
+@viewport {
+  min-width: auto;
+  max-width: 800px;
+  width: 400px;
+  min-height: 50%;
+  max-height: 200px;
+  height: 100px 200px;
+  zoom: auto;
+  min-zoom: 0.75;
+  max-zoom: 40%;
+  user-zoom: fixed;
+  orientation: landscape;
+}''';
+  expectCss(css, css);
+
+  // Vendor specific.
+  css = '''
+@-ms-viewport {
+  width: device-width;
+}''';
+  expectCss(css, css);
 }
 
 void testFontFace() {
-  var errors = [];
+  var errors = <Message>[];
 
   final String input = '''
 @font-face {
   font-family: BBCBengali;
   src: url(fonts/BBCBengali.ttf) format("opentype");
   unicode-range: U+0A-FF, U+980-9FF, U+????, U+3???;
 }''';
   final String generated = '''@font-face  {
   font-family: BBCBengali;
   src: url("fonts/BBCBengali.ttf") format("opentype");
@@ skipping 71 matching lines @@
   unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
 }''';
   stylesheet = parseCss(input4, errors: errors..clear(), opts: simpleOptions);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated4);
 }
 
 void testCssFile() {
-  var errors = [];
+  var errors = <Message>[];
   final String input = r'''
 @import 'simple.css'
 @import "test.css" print
 @import url(test.css) screen, print
 @import url(http://google.com/maps/maps.css);
 
 div[href^='test'] {
   height: 10px;
 }
 
 @-webkit-keyframes pulsate {
   from {
     -webkit-transform: translate3d(0, 0, 0) scale(1.0);
   }
   10% {
     -webkit-transform: translate3d(0, 0, 0) scale(1.0);
   }
   30% {
     -webkit-transform: translate3d(0, 2, 0) scale(1.0);
   }
 }
 
 .foobar {
     grid-columns: 10px ("content" 1fr 10px)[4];
 }
 
 .test-background {
   background:  url(http://www.foo.com/bar.png);
 }
+
+.test-background-with-multiple-properties {
+  background: #000 url(http://www.foo.com/bar.png);
+}
 ''';
 
   final String generated = '@import "simple.css"; '
       '@import "test.css" print; '
       '@import "test.css" screen, print; '
       '@import "http://google.com/maps/maps.css";\n'
       'div[href^="test"] {\n'
       '  height: 10px;\n'
       '}\n'
       '@-webkit-keyframes pulsate {\n'
       '  from {\n'
       '  -webkit-transform: translate3d(0, 0, 0) scale(1.0);\n'
       '  }\n'
       '  10% {\n'
       '  -webkit-transform: translate3d(0, 0, 0) scale(1.0);\n'
       '  }\n'
       '  30% {\n'
       '  -webkit-transform: translate3d(0, 2, 0) scale(1.0);\n'
       '  }\n'
       '}\n'
       '.foobar {\n'
       '  grid-columns: 10px ("content" 1fr 10px) [4];\n'
       '}\n'
       '.test-background {\n'
       '  background: url("http://www.foo.com/bar.png");\n'
+      '}\n'
+      '.test-background-with-multiple-properties {\n'
+      '  background: #000 url("http://www.foo.com/bar.png");\n'
       '}';
   var stylesheet = parseCss(input, errors: errors);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 }
 
 void testCompactEmitter() {
-  var errors = [];
+  var errors = <Message>[];
 
   // Check !import compactly emitted.
   final String input = r'''
 div {
   color: green !important;
 }
 ''';
-  final String generated = "div { color: green!important; }";
+  final String generated = "div { color:green!important; }";
 
   var stylesheet = parseCss(input, errors: errors);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(compactOuptut(stylesheet), generated);
 
   // Check namespace directive compactly emitted.
   final String input2 = "@namespace a url(http://www.example.org/a);";
   final String generated2 = "@namespace a url(http://www.example.org/a);";
 
   var stylesheet2 = parseCss(input2, errors: errors..clear());
 
   expect(stylesheet2 != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(compactOuptut(stylesheet2), generated2);
 }
 
 void testNotSelectors() {
-  var errors = [];
+  var errors = <Message>[];
 
   final String input = r'''
 .details:not(.open-details) x-element,
 .details:not(.open-details) .summary {
   overflow: hidden;
 }
 
 .details:not(.open-details) x-icon {
   margin-left: 99px;
 }
@@ skipping 69 matching lines @@
 }''';
 
   var stylesheet = parseCss(input, errors: errors, opts: simpleOptions);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 }
 
 void testIE() {
-  var errors = [];
+  var errors = <Message>[];
   final String input = ".test {\n"
       "  filter: progid:DXImageTransform.Microsoft.gradient"
       "(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');\n"
       "}";
   final String generated = ".test {\n"
       "  filter: progid:DXImageTransform.Microsoft.gradient"
       "(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');\n"
       "}";
 
   var stylesheet = parseCss(input, errors: errors, opts: simpleOptions);
@@ skipping 42 matching lines @@
       '  Filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, '
       'StartX=20, StartY=40,\n'
       '      FinishX=0, FinishY=0)  Wave(Add=0, Freq=5, LightStrength=20,\n'
       '      Phase=220, Strength=10);\n}';
 
   stylesheet = parseCss(input3, errors: errors..clear(), opts: simpleOptions);
 
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated3);
+
+  final input4 = '''
+div {
+  filter: FlipH;
+}''';
+
+  stylesheet = parseCss(input4, errors: errors..clear(), opts: simpleOptions);
+
+  expect(stylesheet != null, true);
+  expect(errors.isEmpty, true, reason: errors.toString());
+  expect(prettyPrint(stylesheet), input4);
 }
 
 /**
  *  Test IE specific declaration syntax:
  *    IE6 property name prefixed with _ (normal CSS property name can start
  *    with an underscore).
  *
  *    IE7 or below property add asterisk before the CSS property.
  *
  *    IE8 or below add \9 at end of declaration expression e.g.,
  *        background: red\9;
  */
 void testIEDeclaration() {
-  var errors = [];
+  var errors = <Message>[];
 
   final input = '''
 .testIE-6 {
   _zoom : 5;
 }
 .clearfix {
   *zoom: 1;
 }
 audio, video {
   display: inline-block;
@@ skipping 145 matching lines @@
   }
 }''';
 
   var stylesheet = parseCss(input, errors: errors, opts: simpleOptions);
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 }
 
 void testHangs() {
-  var errors = [];
+  var errors = <Message>[];
 
   // Bad hexvalue had caused a hang in processTerm.
   final input = r'''#a { color: #ebebeburl(0/IE8+9+); }''';
   var stylesheet = parseCss(input, errors: errors, opts: options);
 
   expect(stylesheet != null, true);
   expect(errors.length, 3, reason: errors.toString());
 
   var errorMessage = errors[0];
   expect(errorMessage.message, contains('Bad hex number'));
@@ skipping 36 matching lines @@
   expect(errorMessage.message, contains('unexpected end of file'));
   expect(errorMessage.span, isNotNull);
   expect(errorMessage.span.start.line, 7);
   expect(errorMessage.span.start.column, 0);
   expect(errorMessage.span.text.trim(), '');
 }
 
 void testExpressionSpans() {
   final input = r'''.foo { width: 50px; }''';
   var stylesheet = parseCss(input);
-  var decl = stylesheet.topLevels.single.declarationGroup.declarations.single;
+  var decl = (stylesheet.topLevels.single as RuleSet)
+      .declarationGroup
+      .declarations
+      .single;
   // This passes
   expect(decl.span.text, 'width: 50px');
   // This currently fails
-  expect(decl.expression.span.text, '50px');
+  expect((decl as Declaration).expression.span.text, '50px');
 }
 
 void simpleCalc() {
   final input = r'''.foo { height: calc(100% - 55px); }''';
   var stylesheet = parseCss(input);
-  var decl = stylesheet.topLevels.single.declarationGroup.declarations.single;
+  var decl = (stylesheet.topLevels.single as RuleSet)
+      .declarationGroup
+      .declarations
+      .single;
   expect(decl.span.text, 'height: calc(100% - 55px)');
 }
 
 void complexCalc() {
   final input = r'''.foo { left: calc((100%/3 - 2) * 1em - 2 * 1px); }''';
   var stylesheet = parseCss(input);
-  var decl = stylesheet.topLevels.single.declarationGroup.declarations.single;
+  var decl = (stylesheet.topLevels.single as RuleSet)
+      .declarationGroup
+      .declarations
+      .single;
   expect(decl.span.text, 'left: calc((100%/3 - 2) * 1em - 2 * 1px)');
 }
 
 void twoCalcs() {
   final input = r'''.foo { margin: calc(1rem - 2px) calc(1rem - 1px); }''';
   var stylesheet = parseCss(input);
-  var decl = stylesheet.topLevels.single.declarationGroup.declarations.single;
+  var decl = (stylesheet.topLevels.single as RuleSet)
+      .declarationGroup
+      .declarations
+      .single;
   expect(decl.span.text, 'margin: calc(1rem - 2px) calc(1rem - 1px)');
 }
 
 void selectorWithCalcs() {
-  var errors = [];
+  var errors = <Message>[];
   final String input = r'''
 .foo {
   width: calc(1em + 5 * 2em);
   height: calc(1px + 2%) !important;
   border: 5px calc(1pt + 2cm) 6px calc(1em + 1in + 2px) red;
   border: calc(5px + 1em) 0px 1px calc(10 + 20 + 1px);
   margin: 25px calc(50px + (100% / (3 - 1em) - 20%)) calc(10px + 10 * 20) calc(100% - 10px);
 }''';
   final String generated = r'''
 .foo {
   width: calc(1em + 5 * 2em);
   height: calc(1px + 2%) !important;
   border: 5px calc(1pt + 2cm) 6px calc(1em + 1in + 2px) #f00;
   border: calc(5px + 1em) 0px 1px calc(10 + 20 + 1px);
   margin: 25px calc(50px + (100% / (3 - 1em) - 20%)) calc(10px + 10 * 20) calc(100% - 10px);
 }''';
 
   var stylesheet = parseCss(input, errors: errors);
   expect(stylesheet != null, true);
   expect(errors.isEmpty, true, reason: errors.toString());
   expect(prettyPrint(stylesheet), generated);
 }
 
+void vendorPrefixedCalc() {
+  var css = '''
+.foo {
+  width: -webkit-calc((100% - 15px*1) / 1);
+}''';
+  expectCss(css, css);
+
+  css = '''
+.foo {
+  width: -moz-calc((100% - 15px*1) / 1);
+}''';
+  expectCss(css, css);
+}
+
 main() {
   test('Simple Terms', testSimpleTerms);
   test('Declarations', testDeclarations);
   test('Identifiers', testIdentifiers);
   test('Composites', testComposites);
   test('Units', testUnits);
   test('Unicode', testUnicode);
   test('Newer CSS', testNewerCss);
   test('Media Queries', testMediaQueries);
+  test('Document', testMozDocument);
+  test('Supports', testSupports);
+  test('Viewport', testViewport);
   test('Font-Face', testFontFace);
   test('CSS file', testCssFile);
   test('Compact Emitter', testCompactEmitter);
   test('Selector Negation', testNotSelectors);
   test('IE stuff', testIE);
   test('IE declaration syntax', testIEDeclaration);
   test('Hanging bugs', testHangs);
   test('Expression spans', testExpressionSpans,
       skip: 'expression spans are broken'
-            ' (https://github.com/dart-lang/csslib/issues/15)');
+          ' (https://github.com/dart-lang/csslib/issues/15)');
   group('calc function', () {
     test('simple calc', simpleCalc);
     test('single complex', complexCalc);
     test('two calc terms for same declaration', twoCalcs);
     test('selector with many calc declarations', selectorWithCalcs);
+    test('vendor prefixed calc', vendorPrefixedCalc);
   });
 }
-