CSS Filter: unleash modern CSS.

Properties, functions, and at-rules from the following modules are added
to the safe lists:

* CSS Color Module Level 3
* Media Queries
* CSS Backgrounds and Borders Module Level 3
* CSS Values and Units Module Level 3
* CSS Flexible Box Layout Module
* CSS Text-decoration Level 3
* CSS Transitions
* CSS Animations
* CSS Transforms Level 1
* CSS Text Level 3

As documented on https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3

r2/r2/lib/cssfilter.py

@@ -74,12 +74,25 @@ SAFE_PROPERTIES = {
     "align-content",
     "align-items",
     "align-self",
+    "animation",
+    "animation-delay",
+    "animation-direction",
+    "animation-duration",
+    "animation-fill-mode",
+    "animation-iteration-count",
+    "animation-name",
+    "animation-play-state",
+    "animation-timing-function",
+    "backface-visibility",
     "background",
     "background-attachment",
+    "background-clip",
     "background-color",
     "background-image",
+    "background-origin",
     "background-position",
     "background-repeat",
+    "background-size",
     "border",
     "border-bottom",
     "border-bottom-color",
@@ -89,6 +102,12 @@ SAFE_PROPERTIES = {
     "border-bottom-width",
     "border-collapse",
     "border-color",
+    "border-image",
+    "border-image-outset",
+    "border-image-repeat",
+    "border-image-slice",
+    "border-image-source",
+    "border-image-width",
     "border-left",
     "border-left-color",
     "border-left-style",
@@ -129,6 +148,15 @@ SAFE_PROPERTIES = {
     "display",
     "elevation",
     "empty-cells",
+    "flex",
+    "flex-align",
+    "flex-direction",
+    "flex-flow",
+    "flex-item-align",
+    "flex-line-pack",
+    "flex-order",
+    "flex-pack",
+    "flex-wrap",
     "float",
     "font",
     "font-family",
@@ -136,9 +164,12 @@ SAFE_PROPERTIES = {
     "font-style",
     "font-variant",
     "font-weight",
+    "hanging-punctuation",
     "height",
+    "hyphens",
     "left",
     "letter-spacing",
+    "line-break",
     "line-height",
     "list-style",
     "list-style-image",
@@ -160,6 +191,7 @@ SAFE_PROPERTIES = {
     "outline-style",
     "outline-width",
     "overflow",
+    "overflow-wrap",
     "overflow-x",
     "overflow-y",
     "padding",
@@ -173,6 +205,8 @@ SAFE_PROPERTIES = {
     "pause",
     "pause-after",
     "pause-before",
+    "perspective",
+    "perspective-origin",
     "pitch",
     "pitch-range",
     "play-during",
@@ -187,13 +221,31 @@ SAFE_PROPERTIES = {
     "speech-rate",
     "stress",
     "table-layout",
+    "tab-size",
     "text-align",
+    "text-align-last",
     "text-decoration",
+    "text-decoration-color",
+    "text-decoration-line",
+    "text-decoration-skip",
+    "text-decoration-style",
     "text-indent",
+    "text-justify",
     "text-overflow",
     "text-shadow",
+    "text-space-collapse",
     "text-transform",
+    "text-underline-position",
+    "text-wrap",
     "top",
+    "transform",
+    "transform-origin",
+    "transform-style",
+    "transition",
+    "transition-delay",
+    "transition-duration",
+    "transition-property",
+    "transition-timing-function",
     "unicode-bidi",
     "vertical-align",
     "visibility",
@@ -202,6 +254,7 @@ SAFE_PROPERTIES = {
     "white-space",
     "widows",
     "width",
+    "word-break",
     "word-spacing",
     "z-index",
 }
@@ -210,20 +263,43 @@ assert all(property == property.lower() for property in SAFE_PROPERTIES)
 
 SAFE_FUNCTIONS = {
     "attr",
+    "calc",
     "counter",
+    "hsl",
+    "hsla",
     "lang",
     "linear-gradient",
+    "matrix",
+    "matrix3d",
     "not",
     "nth-child",
     "nth-last-child",
     "nth-last-of-type",
     "nth-of-type",
+    "perspective",
     "radial-gradient",
     "rect",
     "repeating-linear-gradient",
     "repeating-radial-gradient",
     "rgb",
     "rgba",
+    "rotate",
+    "rotate3d",
+    "rotatex",
+    "rotatey",
+    "rotatez",
+    "scale",
+    "scale3d",
+    "scalex",
+    "scaley",
+    "scalez",
+    "skewx",
+    "skewy",
+    "translate",
+    "translate3d",
+    "translatex",
+    "translatey",
+    "translatez",
 }
 assert all(function == function.lower() for function in SAFE_FUNCTIONS)
 
@@ -336,8 +412,20 @@ class StylesheetValidator(object):
         return itertools.chain(prelude_errors, declaration_errors)
 
     def validate_at_rule(self, rule):
-        return ValidationError(rule.source_line, "UNKNOWN_AT_RULE",
-                               {"keyword": rule.at_keyword})
+        prelude_errors = self.validate_component_values(rule.prelude)
+
+        keyword = strip_vendor_prefix(rule.lower_at_keyword)
+
+        if keyword in ("media", "keyframes"):
+            rules = tinycss2.parse_rule_list(rule.content)
+            rule_errors = self.validate_rule_list(rules)
+        elif keyword == "page":
+            rule_errors = self.validate_qualified_rule(rule)
+        else:
+            return ValidationError(rule.source_line, "UNKNOWN_AT_RULE",
+                                   {"keyword": rule.at_keyword})
+
+        return itertools.chain(prelude_errors, rule_errors)
 
     def validate_rule_list(self, rules):
         return self.validate_list(rules, {