From 9316f95467ec8c554f10f8a7fc1e5a242dd9b0e1 Mon Sep 17 00:00:00 2001
From: Victor Berchet <victor@suumit.com>
Date: Fri, 30 Sep 2016 16:26:24 -0700
Subject: [PATCH] fix(ShadowCss): support `@page` and `@document` CSS rules
 (#11878)

fixes #11860
---
 modules/@angular/compiler/src/shadow_css.ts       |  6 ++++--
 modules/@angular/compiler/test/shadow_css_spec.ts | 12 ++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/modules/@angular/compiler/src/shadow_css.ts b/modules/@angular/compiler/src/shadow_css.ts
index 55ce7651c2..71d0c33bc7 100644
--- a/modules/@angular/compiler/src/shadow_css.ts
+++ b/modules/@angular/compiler/src/shadow_css.ts
@@ -323,10 +323,12 @@ export class ShadowCss {
     return processRules(cssText, (rule: CssRule) => {
       let selector = rule.selector;
       let content = rule.content;
-      if (rule.selector[0] != '@' || rule.selector.startsWith('@page')) {
+      if (rule.selector[0] != '@') {
         selector =
             this._scopeSelector(rule.selector, scopeSelector, hostSelector, this.strictStyling);
-      } else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports')) {
+      } else if (
+          rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
+          rule.selector.startsWith('@page') || rule.selector.startsWith('@document')) {
         content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
       }
       return new CssRule(selector, content);
diff --git a/modules/@angular/compiler/test/shadow_css_spec.ts b/modules/@angular/compiler/test/shadow_css_spec.ts
index cc8f1de454..30a4455d14 100644
--- a/modules/@angular/compiler/test/shadow_css_spec.ts
+++ b/modules/@angular/compiler/test/shadow_css_spec.ts
@@ -52,6 +52,18 @@ export function main() {
       expect(s(css, 'a')).toEqual(expected);
     });
 
+    it('should handle page rules', () => {
+      const css = '@page {div {font-size:50px;}}';
+      const expected = '@page {div[a] {font-size:50px;}}';
+      expect(s(css, 'a')).toEqual(expected);
+    });
+
+    it('should handle document rules', () => {
+      const css = '@document url(http://www.w3.org/) {div {font-size:50px;}}';
+      const expected = '@document url(http://www.w3.org/) {div[a] {font-size:50px;}}';
+      expect(s(css, 'a')).toEqual(expected);
+    });
+
     it('should handle media rules with simple rules', () => {
       const css = '@media screen and (max-width: 800px) {div {font-size: 50px;}} div {}';
       const expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}} div[a] {}';