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 angular#17014

Author: koto

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;

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);
+  });
 });