build: check for latest Chromium version and upgrade Chromium/ChromeDriver

packages/core/src/render3/instructions.ts

@@ -1344,7 +1344,7 @@ export function elementStyling<T>(
  *
  * This method lazily creates the `StylingContext`. This is because in most cases
  * we have styling without any bindings. Creating `StylingContext` eagerly would mean that
- * every style declaration such as `<div style="color: 'red' ">` would result `StyleContext`
+ * every style declaration such as `<div style="color: red">` would result `StyleContext`
  * which would create unnecessary memory pressure.
  *
  * @param index Index of the style allocation. See: `elementStyling`.

packages/core/test/render3/compiler_canonical/elements_spec.ts

@@ -6,9 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {browserDetection} from '@angular/platform-browser/testing/src/browser_util';
-
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ContentChildren, Directive, HostBinding, HostListener, Injectable, Input, NgModule, OnDestroy, Optional, Pipe, PipeTransform, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren, ViewContainerRef} from '../../../src/core';
+import {Component} from '../../../src/core';
 import * as $r3$ from '../../../src/core_render3_private_export';
 import {AttributeMarker} from '../../../src/render3';
 import {ComponentDefInternal, InitialStylingFlags} from '../../../src/render3/interfaces/definition';
@@ -337,20 +335,12 @@ describe('elements', () => {
       }
 
       const comp = renderComponent(MyComponent);
-      if (browserDetection.isIE) {
-        expect(toHtml(comp)).toEqual('<div style="width: 50px; color: red;"></div>');
-      } else {
-        expect(toHtml(comp)).toEqual('<div style="color: red; width: 50px;"></div>');
-      }
+      expect(toHtml(comp)).toEqual('<div style="color: red; width: 50px;"></div>');
 
       comp.someColor = 'blue';
       comp.someWidth = 100;
       $r3$.ɵdetectChanges(comp);
-      if (browserDetection.isIE) {
-        expect(toHtml(comp)).toEqual('<div style="width: 100px; color: blue;"></div>');
-      } else {
-        expect(toHtml(comp)).toEqual('<div style="color: blue; width: 100px;"></div>');
-      }
+      expect(toHtml(comp)).toEqual('<div style="color: blue; width: 100px;"></div>');
     });
 
     it('should bind to many and keep order', () => {

packages/core/test/render3/instructions_spec.ts

@@ -246,7 +246,7 @@ describe('instructions', () => {
         elementStylingMap(0, null, {'background-color': 'red'});
         elementStylingApply(0);
       });
-      expect(fixture.html).toEqual('<div style="height: 10px; background-color: red;"></div>');
+      expect(fixture.html).toEqual('<div style="background-color: red; height: 10px;"></div>');
     });
 
     it('should sanitize new styles that may contain `url` properties', () => {

packages/core/test/render3/styling_spec.ts

@@ -169,10 +169,10 @@ describe('styling', () => {
            expect(renderToHtml(Template, {
              myStyles: {width: '200px', height: '200px'},
              myWidth: '300px'
-           })).toEqual('<span style="width: 300px; height: 200px; opacity: 0.5;"></span>');
+           })).toEqual('<span style="height: 200px; opacity: 0.5; width: 300px;"></span>');
 
            expect(renderToHtml(Template, {myStyles: {width: '200px', height: null}, myWidth: null}))
-               .toEqual('<span style="width: 200px; height: 100px; opacity: 0.5;"></span>');
+               .toEqual('<span style="height: 100px; opacity: 0.5; width: 200px;"></span>');
          });
     });
 

packages/platform-browser/testing/src/browser_util.ts

@@ -100,14 +100,19 @@ export function stringifyElement(el: any /** TODO #9100 */): string {
 
     // Attributes in an ordered way
     const attributeMap = getDOM().attributeMap(el);
-    const keys: string[] = Array.from(attributeMap.keys()).sort();
-    for (let i = 0; i < keys.length; i++) {
-      const key = keys[i];
-      const attValue = attributeMap.get(key);
+    const sortedKeys = Array.from(attributeMap.keys()).sort();
+    for (const key of sortedKeys) {
       const lowerCaseKey = key.toLowerCase();
+      let attValue = attributeMap.get(key);
+
       if (typeof attValue !== 'string') {
         result += ` ${lowerCaseKey}`;
       } else {
+        // Browsers order style rules differently. Order them alphabetically for consistency.
+        if (lowerCaseKey === 'style') {
+          attValue = attValue.split(/; ?/).filter(s => !!s).sort().map(s => `${s};`).join(' ');
+        }
+
         result += ` ${lowerCaseKey}="${attValue}"`;
       }
     }

scripts/ci/env.sh

@@ -38,8 +38,8 @@ setEnvVar NODE_VERSION 8.9.1
 setEnvVar YARN_VERSION 1.3.2
 # Pin to a Chromium version that does not cause the aio e2e tests to flake. (See https://github.com/angular/angular/pull/20403.)
 # Revision 494239 (which was part of Chrome 62.0.3186.0) is the last version that does not cause flakes. (Latest revision checked: 508578)
-setEnvVar CHROMIUM_VERSION 494239 # Chrome 62 linux stable, see https://www.chromium.org/developers/calendar
-setEnvVar CHROMEDRIVER_VERSION_ARG "--versions.chrome 2.33"
+setEnvVar CHROMIUM_VERSION 561733 # Chrome 68 linux stable, see https://www.chromium.org/developers/calendar
+setEnvVar CHROMEDRIVER_VERSION_ARG "--versions.chrome 2.41"
 setEnvVar SAUCE_CONNECT_VERSION 4.4.9
 setEnvVar ANGULAR_CLI_VERSION 1.6.3
 setEnvVar PROJECT_ROOT $(cd ${thisDir}/../..; pwd)

scripts/ci/install-chromium.sh

@@ -79,7 +79,6 @@ if [[ "$EXISTING_VERSION" != "$CHROMIUM_VERSION" ]]; then
   echo $CHROMIUM_VERSION > $CHROMIUM_VERSION_FILE
 fi
 
-## TODO (matsko|iminar): uncomment once #22231 is closed
-# if [[ "$CHROMIUM_VERSION" != "$LATEST_CHROMIUM_VERSION" ]]; then
-  # echo "New version of Chromium available. Update install-chromium.sh with build number: ${LATEST_CHROMIUM_VERSION}"
-# fi
+if [[ "$CHROMIUM_VERSION" != "$LATEST_CHROMIUM_VERSION" ]]; then
+  echo "New version of Chromium available. Update 'scripts/ci/env.sh' with build number: $LATEST_CHROMIUM_VERSION"
+fi