The `flex` property is not calculated as in real browsers

[nightskylark]

• I'm submitting a ...

- [x] bug report
- [ ] feature request
- [ ] support request => Please do not submit support request here, see note at the top of this template.

• What modules are related to this Issue?

- [ ] aspnetcore-engine
- [x] common
- [ ] express-engine
- [ ] hapi-engine
- [ ] module-map-ngfactory-loader

• Do you want to request a feature or report a bug?
  A bug.

• What is the current behavior?
  The value of the property element.style.flex keeps being undefined after the flex-* properties are set.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.

1. create the angular-universal application
2. describe the app.component as follows:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<div #flexTest></div>',
})
export class AppComponent {

  constructor() { }

  @ViewChild('flexTest') element: ElementRef;

  ngAfterViewInit() {
    var elementStyle = this.element.nativeElement.style;
    elementStyle.display = 'flex';
    elementStyle.flexBasis = '0px';
    elementStyle.flexGrow = 1;
    elementStyle.flexShrink = 1;

    console.log('FLEX: ' + elementStyle.flex);
  }
}

3. Build and run the application in a server-side mode
4. See the attribute style of the #flexTest node rendered on the server. It should contents value flex: 0px 1 1; but it does not.

• What is the expected behavior?

The style property flex of the #flexTest node should contents value 0px 1 1

• What is the motivation / use case for changing the behavior?

I use calculated flex properties for my markup, so I set them separately. I want the markup rendered on a server to be the same as the markup rendered on a client side.

• Please tell us about your environment:

• Angular version: 5.2.9
• Browser: [all]
• Language: [all]
• OS: [Windows]
• Platform: [NodeJS]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us
  to have context, eg. stackoverflow, gitter, etc)

[CaerusKaru]

Unfortunately this is a consequence of the DOM implementation Angular relies on for its server renderer (called Domino). It doesn’t have a real CSS engine, so resolution for shorthand names, URL resolution, etc, all don’t work for CSS stylings. Closing as not a Universal issue.

[Toxicable]

However, feel free to make an issue over on the Domino github about your problem.
https://github.com/fgnass/domino

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}