docs: update Ivy compatibility guide to mention DebugElement behavior difference related to styling

🐞 bug report

Affected Package

Ivy renderer

Is this a regression?

It’s working with ivy disabled

Description

A clear and concise description of the problem...

🔬 Minimal Reproduction

In my component: <span [style]="colorStyle"></span>

public get colorStyle(): { [key: string]: string } { return { 'background-color': '#026cdf' }; }

In my test: it('should display the open color', () => { expect(getElement().styles['background-color']).toBe('#026cdf'); });

🔥 Exception or Error

Error: Expected 'rgb(2, 108, 223)' to be '#026cdf'

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.12
Node: 12.3.1
OS: darwin x64

Angular: 9.1.12
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.12
@angular-devkit/build-angular     0.901.12
@angular-devkit/build-optimizer   0.901.12
@angular-devkit/build-webpack     0.901.12
@angular-devkit/core              9.1.12
@angular-devkit/schematics        9.1.12
@angular/cdk                      9.2.4
@angular/material                 9.2.4
@ngtools/webpack                  9.1.12
@schematics/angular               9.1.12
@schematics/update                0.901.12
rxjs                              6.5.3
typescript                        3.7.3
webpack                           4.42.0

Anything else relevant?

[AleksanderBodurri]

Thanks for making the reproduction app! Heres what I found,

Without Ivy the PRE_R3 debug element stores the raw style value. debugEl.styles[style] = value;. debugEl.styles is just a regular javascript object. https://github.com/angular/angular/blob/6768fe9927ad4b9b81c5f8094c42c771d1047f56/packages/core/src/view/services.ts#L818-L824

With Ivy, the POST_R3 debug element’s styles property shadows the style property on the actual DOM node.

This is why fixture.debugElement.query(By.css("span")).styles["background-color"] returns different values. Without Ivy the look up is done on a regular javascript object that has the raw style value. With Ivy the look up is done against the CSSStyleDeclaration object on the actual DOM node (in this case the browser serialization that I described above applies).

You’ll notice that in both cases, the actual inline style on the dom node is the same.

Without Ivy: With Ivy:

I would argue that the DebugElement behaviour in Ivy is preferable because it more closely adheres to the behaviour you would expect to see in your browser.

[angular-automatic-lock-bot[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.}