refactor(ivy): Delete all styling code. (Part of next SHA) (#34616)
NOTE: This change deletes code and creates a BROKEN SHA. If reverting this SHA needs to be reverted with the next SHA to get back into a valid state. PR Close #34616
This commit is contained in:
@ -1,85 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {normalizeIntoStylingMap as createMap} from '../../../src/render3/util/styling_utils';
|
||||
|
||||
describe('map-based bindings', () => {
|
||||
describe('StylingMapArray construction', () => {
|
||||
it('should create a new StylingMapArray instance from a given value', () => {
|
||||
createAndAssertValues(null, []);
|
||||
createAndAssertValues(undefined, []);
|
||||
createAndAssertValues({}, []);
|
||||
createAndAssertValues({foo: 'bar'}, ['foo', 'bar']);
|
||||
createAndAssertValues({bar: null}, ['bar', null]);
|
||||
createAndAssertValues('', []);
|
||||
createAndAssertValues('abc xyz', ['abc', true, 'xyz', true]);
|
||||
createAndAssertValues([], []);
|
||||
});
|
||||
|
||||
it('should list each entry in the context in alphabetical order', () => {
|
||||
const value1 = {width: '200px', color: 'red', zIndex: -1};
|
||||
const map1 = createMap(null, value1);
|
||||
expect(map1).toEqual([value1, 'color', 'red', 'width', '200px', 'zIndex', -1]);
|
||||
|
||||
const value2 = 'yes no maybe';
|
||||
const map2 = createMap(null, value2);
|
||||
expect(map2).toEqual([value2, 'maybe', true, 'no', true, 'yes', true]);
|
||||
});
|
||||
|
||||
it('should patch an existing StylingMapArray entry with new values and retain the alphabetical order',
|
||||
() => {
|
||||
const value1 = {color: 'red'};
|
||||
const map1 = createMap(null, value1);
|
||||
expect(map1).toEqual([value1, 'color', 'red']);
|
||||
|
||||
const value2 = {backgroundColor: 'red', color: 'blue', opacity: '0.5'};
|
||||
const map2 = createMap(map1, value2);
|
||||
expect(map1).toBe(map2);
|
||||
expect(map1).toEqual(
|
||||
[value2, 'backgroundColor', 'red', 'color', 'blue', 'opacity', '0.5']);
|
||||
|
||||
const value3 = 'myClass';
|
||||
const map3 = createMap(null, value3);
|
||||
expect(map3).toEqual([value3, 'myClass', true]);
|
||||
|
||||
const value4 = 'yourClass everyonesClass myClass';
|
||||
const map4 = createMap(map3, value4);
|
||||
expect(map3).toBe(map4);
|
||||
expect(map4).toEqual([value4, 'everyonesClass', true, 'myClass', true, 'yourClass', true]);
|
||||
});
|
||||
|
||||
it('should nullify old values that are not a part of the new set of values', () => {
|
||||
const value1 = {color: 'red', fontSize: '20px'};
|
||||
const map1 = createMap(null, value1);
|
||||
expect(map1).toEqual([value1, 'color', 'red', 'fontSize', '20px']);
|
||||
|
||||
const value2 = {color: 'blue', borderColor: 'purple', opacity: '0.5'};
|
||||
const map2 = createMap(map1, value2);
|
||||
expect(map2).toEqual(
|
||||
[value2, 'borderColor', 'purple', 'color', 'blue', 'fontSize', null, 'opacity', '0.5']);
|
||||
|
||||
const value3 = 'orange';
|
||||
const map3 = createMap(null, value3);
|
||||
expect(map3).toEqual([value3, 'orange', true]);
|
||||
|
||||
const value4 = 'apple banana';
|
||||
const map4 = createMap(map3, value4);
|
||||
expect(map4).toEqual([value4, 'apple', true, 'banana', true, 'orange', null]);
|
||||
});
|
||||
|
||||
it('should hyphenate property names ', () => {
|
||||
const value1 = {fontSize: '50px', paddingTopLeft: '20px'};
|
||||
const map1 = createMap(null, value1, true);
|
||||
expect(map1).toEqual([value1, 'font-size', '50px', 'padding-top-left', '20px']);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function createAndAssertValues(newValue: any, entries: any[]) {
|
||||
const result = createMap(null, newValue);
|
||||
expect(result).toEqual([newValue, ...entries]);
|
||||
}
|
@ -1,136 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {TStylingContext, TStylingNode} from '@angular/core/src/render3/interfaces/styling';
|
||||
import {registerBinding as _registerBinding} from '@angular/core/src/render3/styling/bindings';
|
||||
import {attachStylingDebugObject} from '@angular/core/src/render3/styling/styling_debug';
|
||||
|
||||
import {DEFAULT_GUARD_MASK_VALUE, allocTStylingContext} from '../../../src/render3/util/styling_utils';
|
||||
|
||||
function registerBinding(
|
||||
context: TStylingContext, countId: number, sourceIndex: number, prop: string | null,
|
||||
value: any) {
|
||||
let tNode: TStylingNode = (context as any).tNode;
|
||||
if (!tNode) {
|
||||
tNode = (context as any).tNode = {flags: 0};
|
||||
}
|
||||
_registerBinding(context, tNode, countId, sourceIndex, prop, value, false, false);
|
||||
}
|
||||
|
||||
describe('styling context', () => {
|
||||
it('should register a series of entries into the context', () => {
|
||||
const debug = makeContextWithDebug(false);
|
||||
const context = debug.context;
|
||||
expect(debug.entries).toEqual({});
|
||||
|
||||
registerBinding(context, 1, 0, 'width', '100px');
|
||||
expect(debug.entries['width']).toEqual({
|
||||
prop: 'width',
|
||||
valuesCount: 1,
|
||||
sanitizationRequired: false,
|
||||
templateBitMask: buildGuardMask(),
|
||||
hostBindingsBitMask: buildGuardMask(),
|
||||
defaultValue: '100px',
|
||||
sources: ['100px'],
|
||||
});
|
||||
|
||||
registerBinding(context, 2, 0, 'width', 20);
|
||||
expect(debug.entries['width']).toEqual({
|
||||
prop: 'width',
|
||||
sanitizationRequired: false,
|
||||
valuesCount: 2,
|
||||
templateBitMask: buildGuardMask(2),
|
||||
hostBindingsBitMask: buildGuardMask(),
|
||||
defaultValue: '100px',
|
||||
sources: [20, '100px'],
|
||||
});
|
||||
|
||||
registerBinding(context, 3, 0, 'height', 10);
|
||||
registerBinding(context, 4, 1, 'height', 15);
|
||||
expect(debug.entries['height']).toEqual({
|
||||
prop: 'height',
|
||||
valuesCount: 3,
|
||||
sanitizationRequired: false,
|
||||
templateBitMask: buildGuardMask(3),
|
||||
hostBindingsBitMask: buildGuardMask(4),
|
||||
defaultValue: null,
|
||||
sources: [10, 15, null],
|
||||
});
|
||||
});
|
||||
|
||||
it('should only register the same binding index once per property', () => {
|
||||
const debug = makeContextWithDebug(false);
|
||||
const context = debug.context;
|
||||
expect(debug.entries).toEqual({});
|
||||
|
||||
registerBinding(context, 1, 0, 'width', 123);
|
||||
registerBinding(context, 1, 0, 'width', 123);
|
||||
expect(debug.entries['width']).toEqual({
|
||||
prop: 'width',
|
||||
valuesCount: 2,
|
||||
sanitizationRequired: false,
|
||||
templateBitMask: buildGuardMask(1),
|
||||
hostBindingsBitMask: buildGuardMask(),
|
||||
defaultValue: null,
|
||||
sources: [123, null],
|
||||
});
|
||||
});
|
||||
|
||||
it('should overwrite a default value for an entry only if it is non-null', () => {
|
||||
const debug = makeContextWithDebug(false);
|
||||
const context = debug.context;
|
||||
|
||||
registerBinding(context, 1, 0, 'width', null);
|
||||
const x = debug.entries['width'];
|
||||
expect(debug.entries['width']).toEqual({
|
||||
prop: 'width',
|
||||
valuesCount: 1,
|
||||
sanitizationRequired: false,
|
||||
templateBitMask: buildGuardMask(),
|
||||
hostBindingsBitMask: buildGuardMask(),
|
||||
defaultValue: null,
|
||||
sources: [null]
|
||||
});
|
||||
|
||||
registerBinding(context, 1, 0, 'width', '100px');
|
||||
expect(debug.entries['width']).toEqual({
|
||||
prop: 'width',
|
||||
valuesCount: 1,
|
||||
sanitizationRequired: false,
|
||||
templateBitMask: buildGuardMask(),
|
||||
hostBindingsBitMask: buildGuardMask(),
|
||||
defaultValue: '100px',
|
||||
sources: ['100px']
|
||||
});
|
||||
|
||||
registerBinding(context, 1, 0, 'width', '200px');
|
||||
expect(debug.entries['width']).toEqual({
|
||||
prop: 'width',
|
||||
valuesCount: 1,
|
||||
sanitizationRequired: false,
|
||||
templateBitMask: buildGuardMask(),
|
||||
hostBindingsBitMask: buildGuardMask(),
|
||||
defaultValue: '100px',
|
||||
sources: ['100px']
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function makeContextWithDebug(isClassBased: boolean) {
|
||||
const ctx = allocTStylingContext(null, false);
|
||||
const tNode: TStylingNode = {flags: 0};
|
||||
(ctx as any).tNode = ctx;
|
||||
return attachStylingDebugObject(ctx, tNode, isClassBased);
|
||||
}
|
||||
|
||||
function buildGuardMask(...bindingIndices: number[]) {
|
||||
let mask = DEFAULT_GUARD_MASK_VALUE;
|
||||
for (let i = 0; i < bindingIndices.length; i++) {
|
||||
mask |= 1 << bindingIndices[i];
|
||||
}
|
||||
return mask;
|
||||
}
|
@ -1,85 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {TStylingNode} from '@angular/core/src/render3/interfaces/styling';
|
||||
import {registerBinding} from '@angular/core/src/render3/styling/bindings';
|
||||
import {NodeStylingDebug, attachStylingDebugObject} from '@angular/core/src/render3/styling/styling_debug';
|
||||
import {allocTStylingContext} from '@angular/core/src/render3/util/styling_utils';
|
||||
|
||||
describe('styling debugging tools', () => {
|
||||
describe('NodeStylingDebug', () => {
|
||||
it('should list out each of the values in the context paired together with the provided data',
|
||||
() => {
|
||||
if (isIE()) return;
|
||||
|
||||
const values = makeContextWithDebug(false);
|
||||
const context = values.context;
|
||||
const tNode = values.tNode;
|
||||
|
||||
const data: any[] = [];
|
||||
const d = new NodeStylingDebug(context, tNode, data, false);
|
||||
|
||||
registerBinding(context, tNode, 0, 0, 'width', null, false, false);
|
||||
expect(d.summary).toEqual({
|
||||
width: {
|
||||
prop: 'width',
|
||||
value: null,
|
||||
bindingIndex: null,
|
||||
},
|
||||
});
|
||||
|
||||
registerBinding(context, tNode, 0, 0, 'width', '100px', false, false);
|
||||
expect(d.summary).toEqual({
|
||||
width: {
|
||||
prop: 'width',
|
||||
value: '100px',
|
||||
bindingIndex: null,
|
||||
},
|
||||
});
|
||||
|
||||
const someBindingIndex1 = 1;
|
||||
data[someBindingIndex1] = '200px';
|
||||
|
||||
registerBinding(context, tNode, 0, 0, 'width', someBindingIndex1, false, false);
|
||||
expect(d.summary).toEqual({
|
||||
width: {
|
||||
prop: 'width',
|
||||
value: '200px',
|
||||
bindingIndex: someBindingIndex1,
|
||||
},
|
||||
});
|
||||
|
||||
const someBindingIndex2 = 2;
|
||||
data[someBindingIndex2] = '500px';
|
||||
|
||||
registerBinding(context, tNode, 0, 1, 'width', someBindingIndex2, false, false);
|
||||
expect(d.summary).toEqual({
|
||||
width: {
|
||||
prop: 'width',
|
||||
value: '200px',
|
||||
bindingIndex: someBindingIndex1,
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function makeContextWithDebug(isClassBased: boolean) {
|
||||
const context = allocTStylingContext(null, false);
|
||||
const tNode = createTStylingNode();
|
||||
attachStylingDebugObject(context, tNode, isClassBased);
|
||||
return {context, tNode};
|
||||
}
|
||||
|
||||
function createTStylingNode(): TStylingNode {
|
||||
return {flags: 0};
|
||||
}
|
||||
|
||||
function isIE() {
|
||||
// note that this only applies to older IEs (not edge)
|
||||
return typeof window !== 'undefined' && (window as any).document['documentMode'] ? true : false;
|
||||
}
|
@ -1,26 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {splitOnWhitespace} from '@angular/core/src/render3/util/styling_utils';
|
||||
|
||||
describe('styling_utils', () => {
|
||||
describe('splitOnWhitespace', () => {
|
||||
it('should treat empty strings as null', () => {
|
||||
expect(splitOnWhitespace('')).toEqual(null);
|
||||
expect(splitOnWhitespace(' ')).toEqual(null);
|
||||
expect(splitOnWhitespace(' \n\r\t ')).toEqual(null);
|
||||
});
|
||||
|
||||
it('should split strings into parts', () => {
|
||||
expect(splitOnWhitespace('a\nb\rc')).toEqual(['a', 'b', 'c']);
|
||||
expect(splitOnWhitespace('\ta-long\nb-long\rc-long ')).toEqual([
|
||||
'a-long', 'b-long', 'c-long'
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
Reference in New Issue
Block a user