From 25189661534502d578d27ea02bee17c29df1a882 Mon Sep 17 00:00:00 2001
From: Krzysztof Kotowicz <koto@google.com>
Date: Sun, 24 May 2020 20:09:21 +0300
Subject: [PATCH] fix(grunt-utils): insert the core CSS styles without using
 innerHTML

Create style elements and modify their text content instead of using
innerHTML to create the whole `<style>` element with its content.
That way style insertion done at bootstrap time doesn't interfere with
Trusted Types restrictions in Chrome (https://bit.ly/trusted-types).

Remove the type attribute - `text/css` is default:
https://html.spec.whatwg.org/#update-a-style-block.

Closes #17014
---
 lib/grunt/utils.js            | 2 +-
 test/e2e/tests/sample.spec.js | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/lib/grunt/utils.js b/lib/grunt/utils.js
index 84a76eb7deff..f94661c2ffa3 100644
--- a/lib/grunt/utils.js
+++ b/lib/grunt/utils.js
@@ -111,7 +111,7 @@ module.exports = {
         .replace(/\\/g, '\\\\')
         .replace(/'/g, '\\\'')
         .replace(/\r?\n/g, '\\n');
-      js = '!window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend(\'<style type="text/css">' + css + '</style>\');';
+      js = '!window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend(window.angular.element(\'<style>\').text(\'' + css + '\'));';
       state.js.push(js);
 
       return state;
diff --git a/test/e2e/tests/sample.spec.js b/test/e2e/tests/sample.spec.js
index fa283fa33a6b..2a2369ec2528 100644
--- a/test/e2e/tests/sample.spec.js
+++ b/test/e2e/tests/sample.spec.js
@@ -9,4 +9,13 @@ describe('Sample', function() {
   it('should have the interpolated text', function() {
     expect(element(by.binding('text')).getText()).toBe('Hello, world!');
   });
+
+  it('should insert the ng-cloak styles', function() {
+    browser.executeScript(`
+      var span = document.createElement('span');
+      span.className = 'ng-cloak foo';
+      document.body.appendChild(span);
+    `);
+    expect(element(by.className('foo')).isDisplayed()).toBe(false);
+  });
 });