// Copyright 2020 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import { drawGridLineNumbers, drawGridTrackSizes, generateLegibleTextColor, normalizePositionData, } from './css_grid_label_helpers.js'; import { drawGridAreaNamesAndAssertLabels, drawGridLineNamesAndAssertLabels, drawGridLineNumbersAndAssertLabels, drawMultipleGridLineNumbersAndAssertLabels, getGridLineNumberLabelContainer, getGridTrackSizesLabelContainer, initFrameForGridLabels, initFrameForMultipleGridLabels, } from './testing/InspectorOverlayHelpers.js'; describe('drawGridLineNumbers label creation', () => { beforeEach(initFrameForGridLabels); const bounds = { minX: 100, minY: 100, maxX: 200, maxY: 200, allPoints: [{x: 100, y: 100}, {x: 200, y: 100}, {x: 200, y: 200}, {x: 100, y: 200}], }; const TESTS = [ { description: 'can display positive row line numbers', config: { positiveRowLineNumberPositions: [{x: 0, y: 0}, {x: 0, y: 50}, {x: 0, y: 100}, {x: 0, y: 150}], }, bounds, expectedLabels: [1, 2, 3, 4], }, { description: 'can display negative row line numbers', config: { negativeRowLineNumberPositions: [{x: 0, y: 0}, {x: 0, y: 50}, {x: 0, y: 100}, {x: 0, y: 150}], }, bounds, expectedLabels: [-4, -3, -2, -1], }, { description: 'can display positive column line numbers', config: { positiveColumnLineNumberPositions: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 0}], }, bounds, expectedLabels: [1, 2, 3], }, { description: 'can display negative column line numbers', config: { negativeColumnLineNumberPositions: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 0}], }, bounds, expectedLabels: [-3, -2, -1], }, { description: 'can display all line numbers', config: { positiveColumnLineNumberPositions: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 0}], positiveRowLineNumberPositions: [{x: 0, y: 0}, {x: 0, y: 50}, {x: 0, y: 100}, {x: 0, y: 150}], negativeColumnLineNumberPositions: [{x: 0, y: 0}, {x: 50, y: 0}, {x: 100, y: 0}], negativeRowLineNumberPositions: [{x: 0, y: 0}, {x: 0, y: 50}, {x: 0, y: 100}, {x: 0, y: 150}], }, bounds, expectedLabels: [1, 2, 3, 1, 2, 3, 4, -3, -2, -1, -4, -3, -2, -1], }, ]; for (const {description, config, bounds, expectedLabels} of TESTS) { it(description, () => { const el = getGridLineNumberLabelContainer(); const data = normalizePositionData(config, bounds); drawGridLineNumbers(el, data, {canvasWidth: 800, canvasHeight: 600}, 1); assert.strictEqual(el.children.length, expectedLabels.length, 'The right number of labels got created'); assert.strictEqual(el.textContent, expectedLabels.join(''), 'The labels text is correct'); }); } }); describe('drawGridLineNumbers label placement', () => { beforeEach(initFrameForGridLabels); const bounds = { minX: 100, maxX: 300, minY: 100, maxY: 300, allPoints: [{x: 100, y: 100}, {x: 300, y: 100}, {x: 300, y: 300}, {x: 100, y: 300}], }; const TESTS = [ { description: 'places row labels left and right under normal conditions', config: { positiveRowLineNumberPositions: [{x: 100, y: 140}, {x: 100, y: 180}, {x: 100, y: 220}, {x: 100, y: 260}], negativeRowLineNumberPositions: [{x: 300, y: 140}, {x: 300, y: 180}, {x: 300, y: 220}, {x: 300, y: 260}], }, bounds, expectedLabels: [ {className: 'left-mid', count: 4}, {className: 'right-mid', count: 4}, ], }, { description: 'places column labels top and bottom under normal conditions', config: { positiveColumnLineNumberPositions: [{x: 140, y: 100}, {x: 180, y: 100}, {x: 220, y: 100}, {x: 260, y: 100}], negativeColumnLineNumberPositions: [{x: 140, y: 300}, {x: 180, y: 300}, {x: 220, y: 300}, {x: 260, y: 300}], }, bounds, expectedLabels: [ {className: 'top-mid', count: 4}, {className: 'bottom-mid', count: 4}, ], }, { description: 'shifts the first row label down when the first column also has a label', config: { positiveRowLineNumberPositions: [{x: 100, y: 100}, {x: 100, y: 140}], positiveColumnLineNumberPositions: [{x: 100, y: 100}, {x: 140, y: 100}], }, bounds, expectedLabels: [ {className: 'bottom-mid', count: 2}, {className: 'right-top', count: 1}, {className: 'right-mid', count: 1}, ], }, { description: 'moves positive row labels inside the grid when they are too close to the edge', config: { positiveRowLineNumberPositions: [{x: 0, y: 20}, {x: 0, y: 40}], }, bounds: { minX: 5, maxX: 995, minY: 100, maxY: 200, allPoints: [{x: 5, y: 100}, {x: 995, y: 100}, {x: 995, y: 200}, {x: 5, y: 200}], }, expectedLabels: [ {className: 'left-mid', count: 2}, ], }, { description: 'moves negative row labels inside the grid when they are too close to the edge', config: { negativeRowLineNumberPositions: [{x: 995, y: 120}, {x: 995, y: 140}], }, bounds: { minX: 5, maxX: 995, minY: 100, maxY: 200, allPoints: [{x: 5, y: 100}, {x: 995, y: 100}, {x: 995, y: 200}, {x: 5, y: 200}], }, expectedLabels: [ {className: 'right-mid', count: 2}, ], }, { description: 'moves positive column labels inside the grid when they are too close to the edge', config: { positiveColumnLineNumberPositions: [{x: 20, y: 0}, {x: 40, y: 0}], }, bounds: { minX: 100, maxX: 200, minY: 5, maxY: 995, allPoints: [{x: 100, y: 5}, {x: 200, y: 5}, {x: 200, y: 995}, {x: 100, y: 995}], }, expectedLabels: [ {className: 'top-mid', count: 2}, ], }, { description: 'moves negative column labels inside the grid when they are too close to the edge', config: { negativeColumnLineNumberPositions: [{x: 20, y: 995}, {x: 40, y: 995}], }, bounds: { minX: 100, maxX: 200, minY: 5, maxY: 995, allPoints: [{x: 100, y: 5}, {x: 200, y: 5}, {x: 200, y: 995}, {x: 100, y: 995}], }, expectedLabels: [ {className: 'bottom-mid', count: 2}, ], }, ]; for (const {description, config, bounds, expectedLabels} of TESTS) { it(description, () => drawGridLineNumbersAndAssertLabels( config, bounds, {canvasWidth: 800, canvasHeight: 600}, 0, expectedLabels)); } }); describe('drawGridLineNumbers inner-grid label placement', () => { beforeEach(initFrameForGridLabels); // Making a grid bounds object that's the size of the viewport so all labels flip inside the grid. const bounds = { minX: 0, maxX: 1000, minY: 0, maxY: 1000, allPoints: [{x: 0, y: 0}, {x: 1000, y: 0}, {x: 1000, y: 1000}, {x: 0, y: 1000}], }; const TESTS = [ { description: 'flips positive row labels inside the grid', config: { positiveRowLineNumberPositions: [{x: 0, y: 0}, {x: 0, y: 500}, {x: 0, y: 1000}], }, bounds, expectedLabels: [ {className: 'left-top', count: 1}, {className: 'left-mid', count: 1}, {className: 'left-bottom', count: 1}, ], }, { description: 'flips negative row labels inside the grid', config: { negativeRowLineNumberPositions: [{x: 1000, y: 0}, {x: 1000, y: 500}, {x: 1000, y: 1000}], }, bounds, expectedLabels: [ {className: 'right-top', count: 1}, {className: 'right-mid', count: 1}, {className: 'right-bottom', count: 1}, ], }, { description: 'flips positive column labels inside the grid', config: { positiveColumnLineNumberPositions: [{x: 0, y: 0}, {x: 500, y: 0}, {x: 1000, y: 0}], }, bounds, expectedLabels: [ {className: 'top-left', count: 1}, {className: 'top-mid', count: 1}, {className: 'top-right', count: 1}, ], }, { description: 'flips negative column labels inside the grid', config: { negativeColumnLineNumberPositions: [{x: 0, y: 1000}, {x: 500, y: 1000}, {x: 1000, y: 1000}], }, bounds, expectedLabels: [ {className: 'bottom-left', count: 1}, {className: 'bottom-mid', count: 1}, {className: 'bottom-right', count: 1}, ], }, ]; for (const {description, config, bounds, expectedLabels} of TESTS) { it(description, () => drawGridLineNumbersAndAssertLabels( config, bounds, {canvasWidth: 800, canvasHeight: 600}, 0, expectedLabels)); } }); describe('drawGridLineNumbers label skipping logic', () => { beforeEach(initFrameForGridLabels); it('skips labels on all sides when they are too close to each other', () => { drawGridLineNumbersAndAssertLabels( { positiveRowLineNumberPositions: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200].map(y => ({x: 100, y: y + 100})), negativeRowLineNumberPositions: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200].map(y => ({x: 300, y: y + 100})), positiveColumnLineNumberPositions: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200].map(x => ({y: 100, x: x + 100})), negativeColumnLineNumberPositions: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200].map(x => ({y: 300, x: x + 100})), }, { minX: 100, maxX: 300, minY: 100, maxY: 300, allPoints: [{x: 100, y: 100}, {x: 300, y: 100}, {x: 300, y: 300}, {x: 100, y: 300}], }, { canvasWidth: 800, canvasHeight: 600, }, 0, [ // Expecting every other positive column labels. {className: 'bottom-mid', count: 6}, // Expecting every other negative column labels. {className: 'top-mid', count: 6}, // Expecting every other positive row labels, except the first and last which are set to avoid // column labels. {className: 'right-mid', count: 4}, // Expected the first and last positive row labels. {className: 'right-top', count: 1}, {className: 'right-bottom', count: 1}, // Expecting every other negative row labels, except the first and last which are set to avoid // column labels. {className: 'left-mid', count: 4}, // Expected the first and last negative row labels. {className: 'left-top', count: 1}, {className: 'left-bottom', count: 1}, ]); }); }); describe('drawGridLineNumbers label placement with vertical writing mode', () => { beforeEach(initFrameForGridLabels); const bounds = { minX: 100, maxX: 300, minY: 100, maxY: 300, allPoints: [{x: 100, y: 100}, {x: 300, y: 100}, {x: 300, y: 300}, {x: 100, y: 300}], }; const TESTS = [ { description: 'vertical-lr positive row labels should be displayed at the top of the grid', config: { writingMode: 'vertical-lr', positiveRowLineNumberPositions: [{x: 100, y: 140}, {x: 100, y: 180}, {x: 100, y: 220}, {x: 100, y: 260}], }, bounds, expectedLabels: [ {className: 'bottom-mid', count: 4}, ], }, { description: 'vertical-lr positive column labels should be displayed left of the grid', config: { writingMode: 'vertical-lr', positiveColumnLineNumberPositions: [{x: 140, y: 100}, {x: 180, y: 100}, {x: 220, y: 100}, {x: 260, y: 100}], }, bounds, expectedLabels: [ {className: 'right-mid', count: 4}, ], }, { description: 'vertical-lr negative row labels should be displayed at the bottom of the grid', config: { writingMode: 'vertical-lr', negativeRowLineNumberPositions: [{x: 300, y: 140}, {x: 300, y: 180}, {x: 300, y: 220}, {x: 300, y: 260}], }, bounds, expectedLabels: [ {className: 'top-mid', count: 4}, ], }, { description: 'vertical-lr negative column labels should be displayed right of the grid', config: { writingMode: 'vertical-lr', negativeColumnLineNumberPositions: [{x: 140, y: 300}, {x: 180, y: 300}, {x: 220, y: 300}, {x: 260, y: 300}], }, bounds, expectedLabels: [ {className: 'left-mid', count: 4}, ], }, { description: 'vertical-rl positive row labels should be displayed at the top of the grid', config: { writingMode: 'vertical-rl', positiveRowLineNumberPositions: [{x: 100, y: 140}, {x: 100, y: 180}, {x: 100, y: 220}, {x: 100, y: 260}], }, bounds, expectedLabels: [ {className: 'bottom-mid', count: 4}, ], }, { description: 'vertical-rl positive column labels should be displayed right of the grid', config: { writingMode: 'vertical-rl', positiveColumnLineNumberPositions: [{x: 140, y: 100}, {x: 180, y: 100}, {x: 220, y: 100}, {x: 260, y: 100}], }, bounds, expectedLabels: [ {className: 'left-mid', count: 4}, ], }, { description: 'vertical-rl negative row labels should be displayed at the bottom of the grid', config: { writingMode: 'vertical-rl', negativeRowLineNumberPositions: [{x: 300, y: 140}, {x: 300, y: 180}, {x: 300, y: 220}, {x: 300, y: 260}], }, bounds, expectedLabels: [ {className: 'top-mid', count: 4}, ], }, { description: 'vertical-rl negative column labels should be displayed left of the grid', config: { writingMode: 'vertical-rl', negativeColumnLineNumberPositions: [{x: 140, y: 300}, {x: 180, y: 300}, {x: 220, y: 300}, {x: 260, y: 300}], }, bounds, expectedLabels: [ {className: 'right-mid', count: 4}, ], }, { description: 'sideways-lr positive row labels should be displayed at the bottom of the grid', config: { writingMode: 'sideways-lr', positiveRowLineNumberPositions: [{x: 100, y: 140}, {x: 100, y: 180}, {x: 100, y: 220}, {x: 100, y: 260}], }, bounds, expectedLabels: [ {className: 'top-mid', count: 4}, ], }, { description: 'sideways-lr positive column labels should be displayed left of the grid', config: { writingMode: 'sideways-lr', positiveColumnLineNumberPositions: [{x: 140, y: 100}, {x: 180, y: 100}, {x: 220, y: 100}, {x: 260, y: 100}], }, bounds, expectedLabels: [ {className: 'right-mid', count: 4}, ], }, { description: 'sideways-lr negative row labels should be displayed at the top of the grid', config: { writingMode: 'sideways-lr', negativeRowLineNumberPositions: [{x: 300, y: 140}, {x: 300, y: 180}, {x: 300, y: 220}, {x: 300, y: 260}], }, bounds, expectedLabels: [ {className: 'bottom-mid', count: 4}, ], }, { description: 'sideways-lr negative column labels should be displayed right of the grid', config: { writingMode: 'sideways-lr', negativeColumnLineNumberPositions: [{x: 140, y: 300}, {x: 180, y: 300}, {x: 220, y: 300}, {x: 260, y: 300}], }, bounds, expectedLabels: [ {className: 'left-mid', count: 4}, ], }, { description: 'sideways-rl positive row labels should be displayed at the top of the grid', config: { writingMode: 'sideways-rl', positiveRowLineNumberPositions: [{x: 100, y: 140}, {x: 100, y: 180}, {x: 100, y: 220}, {x: 100, y: 260}], }, bounds, expectedLabels: [ {className: 'bottom-mid', count: 4}, ], }, { description: 'sideways-rl positive column labels should be displayed right of the grid', config: { writingMode: 'sideways-rl', positiveColumnLineNumberPositions: [{x: 140, y: 100}, {x: 180, y: 100}, {x: 220, y: 100}, {x: 260, y: 100}], }, bounds, expectedLabels: [ {className: 'left-mid', count: 4}, ], }, { description: 'sideways-rl negative row labels should be displayed at the bottom of the grid', config: { writingMode: 'sideways-rl', negativeRowLineNumberPositions: [{x: 300, y: 140}, {x: 300, y: 180}, {x: 300, y: 220}, {x: 300, y: 260}], }, bounds, expectedLabels: [ {className: 'top-mid', count: 4}, ], }, { description: 'sideways-rl negative column labels should be displayed left of the grid', config: { writingMode: 'sideways-rl', negativeColumnLineNumberPositions: [{x: 140, y: 300}, {x: 180, y: 300}, {x: 220, y: 300}, {x: 260, y: 300}], }, bounds, expectedLabels: [ {className: 'right-mid', count: 4}, ], }, ]; for (const {description, config, bounds, expectedLabels} of TESTS) { it(description, () => drawGridLineNumbersAndAssertLabels( config, bounds, {canvasWidth: 800, canvasHeight: 600}, 0, expectedLabels)); } }); describe('normalizePositionData', () => { it('returns an object with default values', () => { const data = normalizePositionData({}, { minX: 0, maxX: 100, minY: 0, maxY: 100, allPoints: [{x: 0, y: 0}, {x: 100, y: 0}, {x: 100, y: 100}, {x: 0, y: 100}], }); assert.deepEqual(data, { bounds: { minX: 0, maxX: 100, minY: 0, maxY: 100, width: 100, height: 100, allPoints: [{x: 0, y: 0}, {x: 100, y: 0}, {x: 100, y: 100}, {x: 0, y: 100}], }, rows: { positive: { positions: [], hasFirst: false, hasLast: false, }, negative: { positions: [], hasFirst: false, hasLast: false, }, }, columns: { positive: { positions: [], hasFirst: false, hasLast: false, }, negative: { positions: [], hasFirst: false, hasLast: false, }, }, }); }); it('rounds positions', () => { const data = normalizePositionData( { positiveRowLineNumberPositions: [{y: 1.54, x: 0}, {y: 5.89, x: 0}, {y: 10, x: 0}, {y: 123.7564353278, x: 0}], negativeRowLineNumberPositions: [{y: 3, x: 0}, {y: 6.3265, x: 0}, {y: 28.463532, x: 0}, {y: 50, x: 0}], positiveColumnLineNumberPositions: [{x: 0.654535365378, y: 0}, {x: 1.1323256, y: 0}, {x: 1.896057, y: 0}], negativeColumnLineNumberPositions: [{x: 2, y: 0}, {x: 6, y: 0}, {x: 10.564543, y: 0}], }, { minX: 0, maxX: 100, minY: 0, maxY: 100, allPoints: [{x: 0, y: 0}, {x: 100, y: 0}, {x: 100, y: 100}, {x: 0, y: 100}], }); assert.deepEqual(data.rows.positive.positions.map(p => p.y), [2, 6, 10, 124]); assert.deepEqual(data.rows.negative.positions.map(p => p.y), [3, 6, 28, 50]); assert.deepEqual(data.columns.positive.positions.map(p => p.x), [1, 1, 2]); assert.deepEqual(data.columns.negative.positions.map(p => p.x), [2, 6, 11]); }); it('detects first and last positions', () => { const data = normalizePositionData( { positiveRowLineNumberPositions: [{y: 0, x: 0}, {y: 10, x: 0}, {y: 20, x: 0}], negativeRowLineNumberPositions: [{y: 10, x: 30}, {y: 20, x: 30}, {y: 30, x: 30}], positiveColumnLineNumberPositions: [{x: 10, y: 0}, {x: 20, y: 0}], negativeColumnLineNumberPositions: [{x: 0, y: 30}, {x: 30, y: 30}], }, { minX: 0, maxX: 30, minY: 0, maxY: 30, allPoints: [{x: 0, y: 0}, {x: 30, y: 0}, {x: 30, y: 30}, {x: 0, y: 30}], }); assert.isTrue(data.rows.positive.hasFirst); assert.isFalse(data.rows.positive.hasLast); assert.isFalse(data.rows.negative.hasFirst); assert.isTrue(data.rows.negative.hasLast); assert.isFalse(data.columns.positive.hasFirst); assert.isFalse(data.columns.positive.hasLast); assert.isTrue(data.columns.negative.hasFirst); assert.isTrue(data.columns.negative.hasLast); }); it('prefers line names over line numbers when present', () => { const data = normalizePositionData( { gridHighlightConfig: {showLineNames: true}, positiveRowLineNumberPositions: [{x: 0, y: 10}, {x: 0, y: 20}, {x: 0, y: 30}], positiveColumnLineNumberPositions: [{x: 10, y: 0}, {x: 20, y: 0}, {x: 30, y: 0}], rowLineNameOffsets: [{name: 'foo', x: 0, y: 10}], columnLineNameOffsets: [{name: 'bar', x: 10, y: 0}, {name: 'baz', x: 20, y: 0}], }, { minX: 0, maxX: 30, minY: 0, maxY: 30, allPoints: [{x: 0, y: 0}, {x: 30, y: 0}, {x: 30, y: 30}, {x: 0, y: 30}], }); assert.lengthOf(data.rows.negative.positions, 0); assert.lengthOf(data.columns.negative.positions, 0); assert.lengthOf( data.rows.positive.positions, 1, 'There should be only one row offset since there is only one name'); assert.lengthOf(data.columns.positive.positions, 2, 'There should be 2 column offsets since there are 2 names'); }); it('returns the correct line name structure', () => { const data = normalizePositionData( { gridHighlightConfig: {showLineNames: true}, rowLineNameOffsets: [ {name: 'foo', x: 0, y: 5}, {name: 'bar', x: 0, y: 5}, {name: 'test', x: 0, y: 20}, {name: 'baz', x: 0, y: 5}, ], columnLineNameOffsets: [ {name: 'edge-start', x: 15, y: 0}, {name: 'edge-end', x: 17, y: 0}, ], }, { minX: 0, maxX: 30, minY: 0, maxY: 30, allPoints: [{x: 0, y: 0}, {x: 30, y: 0}, {x: 30, y: 30}, {x: 0, y: 30}], }); assert.deepEqual(data.rows.positive.positions, [{x: 0, y: 5}, {x: 0, y: 20}]); assert.deepEqual(data.rows.positive.names, [['foo', 'bar', 'baz'], ['test']]); assert.deepEqual(data.columns.positive.positions, [{x: 15, y: 0}, {x: 17, y: 0}]); assert.deepEqual(data.columns.positive.names, [['edge-start'], ['edge-end']]); }); }); describe('drawGridAreaNames', () => { beforeEach(initFrameForGridLabels); const TESTS = [ { description: 'does not create labels when not needed', areaBounds: [], expectedLabels: [], }, { description: 'creates the necessary number of area labels', areaBounds: [ { name: 'foo', bounds: {allPoints: [{x: 0, y: 0}, {x: 10, y: 0}, {x: 10, y: 10}, {x: 0, y: 10}]}, }, { name: 'bar', bounds: {allPoints: [{x: 0, y: 0}, {x: 10, y: 0}, {x: 10, y: 10}, {x: 0, y: 10}]}, }, ], expectedLabels: [ {textContent: 'foo'}, {textContent: 'bar'}, ], }, { description: 'positions area labels correctly', areaBounds: [ { name: 'foo', bounds: {allPoints: [{x: 125, y: 22}, {x: 225, y: 22}, {x: 225, y: 42}, {x: 125, y: 42}]}, }, { name: 'bar', bounds: {allPoints: [{x: 678, y: 435}, {x: 878, y: 435}, {x: 878, y: 635}, {x: 678, y: 635}]}, }, ], expectedLabels: [ {textContent: 'foo', top: '22px', left: '125px'}, {textContent: 'bar', top: '435px', left: '678px'}, ], }, ]; for (const {description, areaBounds, expectedLabels} of TESTS) { it(description, () => drawGridAreaNamesAndAssertLabels(areaBounds, undefined, undefined, expectedLabels)); } }); describe('drawGridAreaNames label placement with vertical writing mode', () => { beforeEach(initFrameForGridLabels); const areaBounds = [{name: 'foo', bounds: {allPoints: [{x: 20, y: 30}, {x: 100, y: 30}, {x: 100, y: 50}, {x: 20, y: 50}]}}]; const TESTS = [ { description: 'positions area labels correctly in vertical-lr writing-mode', writingMode: 'vertical-lr', areaBounds, expectedLabels: [{textContent: 'foo', top: '30px', left: '20px'}], }, { description: 'positions area labels correctly in vertical-rl writing-mode', writingMode: 'vertical-rl', areaBounds, expectedLabels: [{textContent: 'foo', top: '50px', left: '20px'}], }, { description: 'positions area labels correctly in sideways-lr writing-mode', writingMode: 'sideways-lr', areaBounds, expectedLabels: [{textContent: 'foo', top: '30px', left: '100px'}], }, { description: 'positions area labels correctly in sideways-rl writing-mode', writingMode: 'sideways-rl', areaBounds, expectedLabels: [{textContent: 'foo', top: '50px', left: '20px'}], }, ]; for (const {description, writingMode, areaBounds, expectedLabels} of TESTS) { // The way points are transformed using the writingMode matrix isn't what we're interested in testing here, so we // just pass the identity matrix to make our life easier. it(description, () => drawGridAreaNamesAndAssertLabels(areaBounds, new DOMMatrix(), writingMode, expectedLabels)); } }); describe('drawMultipleGridLabels', () => { it('can set labels on multiple grid nodes', () => { initFrameForMultipleGridLabels(2); const bounds = { minX: 100, maxX: 500, minY: 100, maxY: 500, allPoints: [{x: 100, y: 100}, {x: 500, y: 100}, {x: 500, y: 500}, {x: 100, y: 500}], }; const configs = [ { layerId: 1, positiveRowLineNumberPositions: [{x: 100, y: 100}, {x: 100, y: 150}, {x: 100, y: 200}], }, { layerId: 2, positiveRowLineNumberPositions: [{x: 100, y: 100}, {x: 100, y: 150}, {x: 100, y: 200}], }, ]; const expectedLayers = [ { layerId: 1, expectedLabels: [ {className: 'right-mid', count: 3}, ], }, { layerId: 2, expectedLabels: [ {className: 'right-mid', count: 3}, ], }, ]; drawMultipleGridLineNumbersAndAssertLabels( configs.map(config => ({config, layerId: config.layerId})), bounds, {canvasWidth: 800, canvasHeight: 600}, expectedLayers); }); }); describe('drawGridTrackSizes label creation', () => { beforeEach(initFrameForGridLabels); const TESTS = [ { description: 'can display track sizes', config: { gridHighlightConfig: { showTrackSizes: true, }, columnTrackSizes: [{computedSize: 10, x: 10, y: 0}, {computedSize: 20, x: 20, y: 0}], rowTrackSizes: [{computedSize: 10, x: 0, y: 10}, {computedSize: 20, x: 0, y: 20}], rotationAngle: 0, }, expectedLabels: ['10px', '20px', '10px', '20px'], }, ]; for (const {description, config, expectedLabels} of TESTS) { it(description, () => { const el = getGridTrackSizesLabelContainer(); drawGridTrackSizes(el, config.rowTrackSizes, 'row', {canvasWidth: 800, canvasHeight: 600}, 1); drawGridTrackSizes(el, config.columnTrackSizes, 'column', {canvasWidth: 800, canvasHeight: 600}, 1); assert.strictEqual(el.children.length, expectedLabels.length, 'The right number of labels got created'); assert.strictEqual(el.textContent, expectedLabels.join(''), 'The labels text is correct'); }); } }); describe('drawGridLineNames', () => { beforeEach(initFrameForGridLabels); const TESTS = [ { description: 'places labels in the right spot', rowLineNameOffsets: [ {x: 100, y: 100, name: 'first-row'}, {x: 100, y: 200, name: 'second-row'}, {x: 100, y: 300, name: 'third-row'}, ], columnLineNameOffsets: [ {x: 100, y: 100, name: 'first-col'}, {x: 200, y: 100, name: 'second-col'}, {x: 300, y: 100, name: 'third-col'}, ], expectedLabels: [ {type: 'row', textContent: 'first-row', y: 100}, {type: 'row', textContent: 'second-row', y: 199.5}, {type: 'row', textContent: 'third-row', y: 299.5}, {type: 'column', textContent: 'first-col', x: 99.5}, {type: 'column', textContent: 'second-col', x: 199.5}, {type: 'column', textContent: 'third-col', x: 299.5}, ], deviceEmulationFactor: 1, }, { description: 'groups labels together when they are for the same line', rowLineNameOffsets: [], columnLineNameOffsets: [ {x: 100, y: 100, name: 'first-col'}, {x: 100, y: 100, name: 'also-first-col'}, {x: 200, y: 100, name: 'second-col'}, {x: 100, y: 100, name: 'and-another-first-col'}, {x: 200, y: 100, name: 'also-second-col'}, ], expectedLabels: [ {type: 'column', textContent: 'first-colalso-first-coland-another-first-col'}, {type: 'column', textContent: 'second-colalso-second-col'}, ], deviceEmulationFactor: 1, }, { description: 'places labels in the right spot with emulation factor = 2', rowLineNameOffsets: [ {x: 100, y: 100, name: 'first-row'}, {x: 100, y: 200, name: 'second-row'}, {x: 100, y: 300, name: 'third-row'}, ], columnLineNameOffsets: [ {x: 100, y: 100, name: 'first-col'}, {x: 200, y: 100, name: 'second-col'}, {x: 300, y: 100, name: 'third-col'}, ], expectedLabels: [ {type: 'row', textContent: 'first-row', y: 200}, {type: 'row', textContent: 'second-row', y: 399.5}, {type: 'row', textContent: 'third-row', y: 599.5}, {type: 'column', textContent: 'first-col', x: 199.5}, {type: 'column', textContent: 'second-col', x: 399.5}, {type: 'column', textContent: 'third-col', x: 599.5}, ], deviceEmulationFactor: 2, }, ]; for (const {description, rowLineNameOffsets, columnLineNameOffsets, deviceEmulationFactor, expectedLabels} of TESTS) { it(description, () => drawGridLineNamesAndAssertLabels( { gridHighlightConfig: { showLineNames: true, }, rowLineNameOffsets, columnLineNameOffsets, }, { minX: 100, maxX: 300, minY: 100, maxY: 300, allPoints: [{x: 100, y: 100}, {x: 300, y: 100}, {x: 300, y: 300}, {x: 100, y: 300}], }, {canvasWidth: 800, canvasHeight: 600}, 0, deviceEmulationFactor, expectedLabels)); } }); describe('generateLegibleTextColor', () => { it('returns expected colors depending on the background color', () => { // black assert.strictEqual(generateLegibleTextColor('rgb(0, 0, 0)'), 'white'); // dark grey assert.strictEqual(generateLegibleTextColor('rgb(50, 50, 50)'), 'white'); // light grey assert.strictEqual(generateLegibleTextColor('rgb(200, 200, 200)'), '#121212'); // white assert.strictEqual(generateLegibleTextColor('rgb(255, 255, 255)'), '#121212'); // several of the default colors (from OverlayColorGenerator.js) assert.strictEqual(generateLegibleTextColor('rgb(245, 151, 148)'), '#121212'); assert.strictEqual(generateLegibleTextColor('rgb(212, 237, 49)'), '#121212'); assert.strictEqual(generateLegibleTextColor('rgb(91, 209, 215)'), '#121212'); assert.strictEqual(generateLegibleTextColor('rgb(188, 206, 251)'), '#121212'); assert.strictEqual(generateLegibleTextColor('rgb(208, 148, 234)'), '#121212'); assert.strictEqual(generateLegibleTextColor('rgb(235, 148, 207)'), '#121212'); }); it('ignores alpha', () => { assert.strictEqual(generateLegibleTextColor('rgba(0, 0, 0, 0.8)'), 'white'); }); it('returns null for unparsable rgb colors', () => { assert.isNull(generateLegibleTextColor('not a color')); assert.isNull(generateLegibleTextColor('')); assert.isNull(generateLegibleTextColor('rgb(r g b)')); }); it('accepts #hex colors too', () => { assert.strictEqual(generateLegibleTextColor('#000000'), 'white'); assert.strictEqual(generateLegibleTextColor('#FFFFFF'), '#121212'); assert.strictEqual(generateLegibleTextColor('#a68cf0'), '#121212'); }); });