diff --git a/core/theme.js b/core/theme.js index a46f1af15..c086d3714 100644 --- a/core/theme.js +++ b/core/theme.js @@ -172,12 +172,12 @@ Blockly.Theme.validatedBlockStyle = function(blockStyle) { var parsedColour = Blockly.utils.colour.parseBlockColour( valid.colourPrimary || '#000'); valid.colourPrimary = parsedColour.hex; - valid.colourSecondary = valid.colourSecondary || - Blockly.utils.colour.blend('#fff', valid.colourPrimary, 0.6) || - valid.colourPrimary; - valid.colourTertiary = valid.colourTertiary || - Blockly.utils.colour.blend('#fff', valid.colourPrimary, 0.3) || - valid.colourPrimary; + valid.colourSecondary = valid.colourSecondary ? + Blockly.utils.colour.parseBlockColour(valid.colourSecondary).hex : + Blockly.utils.colour.blend('#fff', valid.colourPrimary, 0.6); + valid.colourTertiary = valid.colourTertiary ? + Blockly.utils.colour.parseBlockColour(valid.colourTertiary).hex : + Blockly.utils.colour.blend('#fff', valid.colourPrimary, 0.3); valid.hat = valid.hat || ''; return valid; diff --git a/core/theme/deuteranopia.js b/core/theme/deuteranopia.js index a2c18ab84..05b4c9664 100644 --- a/core/theme/deuteranopia.js +++ b/core/theme/deuteranopia.js @@ -34,7 +34,7 @@ Blockly.Themes.Deuteranopia = {}; Blockly.Themes.Deuteranopia.defaultBlockStyles = { "colour_blocks": { "colourPrimary": "#f2a72c", - "colourSecondary": "#f1c17", + "colourSecondary": "#f1c170", "colourTertiary": "#da921c" }, "list_blocks": { diff --git a/tests/jsunit/block_test.js b/tests/jsunit/block_test.js index f8fba5bed..a6588c353 100644 --- a/tests/jsunit/block_test.js +++ b/tests/jsunit/block_test.js @@ -253,28 +253,6 @@ function test_block_row_unplug_multi_inputs_child() { } } -function test_set_style() { - blockTest_setUp(); - var styleStub = { - getBlockStyle: function() { - return { - "colourPrimary": "#ffffff", - "colourSecondary": "#aabbcc", - "colourTertiary": "#ddeeff" - }; - } - }; - mockControl_ = setUpMockMethod(workspace, 'getTheme', null, [styleStub]); - var blockA = workspace.newBlock('row_block'); - blockA.setStyle('styleOne'); - - assertEquals('#ffffff', blockA.colour_); - assertEquals('#aabbcc', blockA.colourSecondary_); - assertEquals('#ddeeff', blockA.colourTertiary_); - - blockTest_tearDown(); -} - function test_set_style_throw_exception() { blockTest_setUp(); var styleStub = { diff --git a/tests/jsunit/theme_test.js b/tests/jsunit/theme_test.js deleted file mode 100644 index 22ba32c2e..000000000 --- a/tests/jsunit/theme_test.js +++ /dev/null @@ -1,153 +0,0 @@ -/** - * @license - * Copyright 2018 Google LLC - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - - /** - * @fileoverview Tests for Blockly.Style - * @author aschmiedt@google.com (Abby Schmiedt) - */ -'use strict'; - -function defineThemeTestBlocks() { - Blockly.defineBlocksWithJsonArray([{ - "type": "stack_block", - "message0": "", - "previousStatement": null, - "nextStatement": null - }, - { - "type": "row_block", - "message0": "%1", - "args0": [ - { - "type": "input_value", - "name": "INPUT" - } - ], - "output": null - }]); -}; - -function undefineThemeTestBlocks() { - delete Blockly.Blocks['stack_block']; - delete Blockly.Blocks['row_block']; -} - - -function createBlockStyles() { - return { - "styleOne": { - "colourPrimary": "colour1", - "colourSecondary":"colour2", - "colourTertiary":"colour3" - } - }; -} - -function createMultipleBlockStyles() { - return { - "styleOne": { - "colourPrimary": "colour1", - "colourSecondary":"colour2", - "colourTertiary":"colour3" - }, - "styleTwo": { - "colourPrimary": "colour1", - "colourSecondary":"colour2", - "colourTertiary":"colour3" - } - }; -} - -function test_setAllBlockStyles() { - var theme = new Blockly.Theme(createBlockStyles()); - stringifyAndCompare(createBlockStyles(), theme.blockStyles_); - theme.setAllBlockStyles(createMultipleBlockStyles()); - stringifyAndCompare(createMultipleBlockStyles(), theme.blockStyles_); -} - -function test_getAllBlockStyles() { - var theme = new Blockly.Theme(createMultipleBlockStyles()); - var allBlocks = theme.getAllBlockStyles(); - stringifyAndCompare(createMultipleBlockStyles(), allBlocks); - -} - -function test_getBlockStyles() { - var theme = new Blockly.Theme(createBlockStyles()); - var blockStyle = theme.getBlockStyle('styleOne'); - - stringifyAndCompare(blockStyle, createBlockStyles().styleOne); -} - -function test_setBlockStyleUpdate() { - var theme = new Blockly.Theme(createBlockStyles()); - var blockStyle = createBlockStyles(); - blockStyle.styleOne.colourPrimary = 'somethingElse'; - - theme.setBlockStyle('styleOne', blockStyle.styleOne); - - stringifyAndCompare(theme.blockStyles_, blockStyle); -} - -function test_setBlockStyleAdd() { - var theme = new Blockly.Theme(createBlockStyles()); - var blockStyle = createMultipleBlockStyles(); - - theme.setBlockStyle('styleTwo', blockStyle.styleTwo); - - stringifyAndCompare(theme.blockStyles_, blockStyle); -} - -function test_setTheme() { - defineThemeTestBlocks(); - var blockStyles = createBlockStyles(); - var workspace = new Blockly.WorkspaceSvg({}); - var blockA = workspace.newBlock('stack_block'); - var blocks = [blockA]; - - blockA.setStyle = function() {this.styleName_ = 'styleTwo'}; - var callCount = 1; - workspace.refreshToolboxSelection = function() { - return ++callCount; - }; - blockA.styleName_ = 'styleOne'; - - var mockControl_ = setUpMockMethod(Blockly, 'getMainWorkspace', null, [workspace]); - - workspace.setTheme(blockStyles); - - //Checks that the theme was set correctly on Blockly namespace - stringifyAndCompare(workspace.getTheme(), blockStyles); - - //Checks that the setTheme function was called on the block - assertEquals(blockA.getStyleName(), 'styleTwo'); - - //check that the toolbox refreshed method was called - assertEquals(workspace.refreshToolboxSelection(), 3); - - assertEquals(Blockly.Events.FIRE_QUEUE_.pop().element, 'theme'); - - undefineThemeTestBlocks(); - - mockControl_.restore(); -} - -function stringifyAndCompare(val1, val2) { - var stringVal1 = JSON.stringify(val1); - var stringVal2 = JSON.stringify(val2); - assertEquals(stringVal1, stringVal2); -} diff --git a/tests/mocha/block_test.js b/tests/mocha/block_test.js index 27b496fcb..b01e96989 100644 --- a/tests/mocha/block_test.js +++ b/tests/mocha/block_test.js @@ -1249,4 +1249,66 @@ suite('Blocks', function() { }); }); }); + + suite('Style', function() { + suite('Headless', function() { + setup(function() { + this.block = Blockly.Xml.domToBlock(Blockly.Xml.textToDom( + '' + ), this.workspace); + }); + test('Set colour', function() { + this.block.setColour('20'); + assertEquals(this.block.getColour(), '#a5745b'); + assertEquals(this.block.colour_, this.block.getColour()); + assertEquals(this.block.hue_, '20'); + }); + test('Set style', function() { + this.block.setStyle('styleOne'); + assertEquals(this.block.getStyleName(), 'styleOne'); + assertEquals(this.block.hue_, null); + // Calling setStyle does not update the colour on a headless block. + assertEquals(this.block.getColour(), '#000000'); + }); + }); + suite('Rendered', function() { + setup(function() { + this.workspace = Blockly.inject('blocklyDiv', {}); + this.block = Blockly.Xml.domToBlock(Blockly.Xml.textToDom( + '' + ), this.workspace); + this.workspace.setTheme(new Blockly.Theme({ + "styleOne" : { + "colourPrimary": "#000000", + "colourSecondary": "#999999", + "colourTertiary": "#4d4d4d", + "hat": '' + } + }), {}); + }); + teardown(function() { + this.workspace.dispose(); + }); + test('Set colour hue', function() { + this.block.setColour('20'); + assertEquals(this.block.getStyleName(), 'auto_#a5745b'); + assertEquals(this.block.getColour(), '#a5745b'); + assertEquals(this.block.colour_, this.block.getColour()); + assertEquals(this.block.hue_, '20'); + }); + test('Set colour hex', function() { + this.block.setColour('#000000'); + assertEquals(this.block.getStyleName(), 'auto_#000000'); + assertEquals(this.block.getColour(), '#000000'); + assertEquals(this.block.colour_, this.block.getColour()); + assertEquals(this.block.hue_, null); + }); + test('Set style', function() { + this.block.setStyle('styleOne'); + assertEquals(this.block.getStyleName(), 'styleOne'); + assertEquals(this.block.getColour(), '#000000'); + assertEquals(this.block.colour_, this.block.getColour()); + }); + }); + }); }); diff --git a/tests/mocha/theme_test.js b/tests/mocha/theme_test.js index 4f17b730b..e6d5f7592 100644 --- a/tests/mocha/theme_test.js +++ b/tests/mocha/theme_test.js @@ -52,9 +52,10 @@ suite('Theme', function() { function createBlockStyles() { return { "styleOne": { - "colourPrimary": "colour1", - "colourSecondary":"colour2", - "colourTertiary":"colour3" + "colourPrimary": "#aaaaaa", + "colourSecondary": "#bbbbbb", + "colourTertiary": "#cccccc", + "hat": 'cap' } }; } @@ -62,14 +63,16 @@ suite('Theme', function() { function createMultipleBlockStyles() { return { "styleOne": { - "colourPrimary": "colour1", - "colourSecondary":"colour2", - "colourTertiary":"colour3" + "colourPrimary": "#aaaaaa", + "colourSecondary": "#bbbbbb", + "colourTertiary": "#cccccc", + "hat": 'cap' }, "styleTwo": { - "colourPrimary": "colour1", - "colourSecondary":"colour2", - "colourTertiary":"colour3" + "colourPrimary": "#000000", + "colourSecondary": "#999999", + "colourTertiary": "#4d4d4d", + "hat": '' } }; } @@ -103,7 +106,7 @@ suite('Theme', function() { test('Set BlockStyle Update', function() { var theme = new Blockly.Theme(createBlockStyles()); var blockStyle = createBlockStyles(); - blockStyle.styleOne.colourPrimary = 'somethingElse'; + blockStyle.styleOne.colourPrimary = '#00ff00'; theme.setBlockStyle('styleOne', blockStyle.styleOne); @@ -152,4 +155,120 @@ suite('Theme', function() { stub.restore(); }); + suite('Validate block styles', function() { + test('Null', function() { + var inputStyle = null; + var expectedOutput = { + "colourPrimary": "#000000", + "colourSecondary": "#999999", + "colourTertiary": "#4d4d4d", + "hat": '' + }; + stringifyAndCompare( + Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput); + }); + + test('Empty', function() { + var inputStyle = {}; + var expectedOutput = { + "colourPrimary": "#000000", + "colourSecondary": "#999999", + "colourTertiary": "#4d4d4d", + "hat": '' + }; + stringifyAndCompare( + Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput); + }); + + test('Incomplete hex', function() { + var inputStyle = { + "colourPrimary": "#012345" + }; + var expectedOutput = { + "colourPrimary": "#012345", + "colourSecondary": "#99a7b5", + "colourTertiary": "#4d657d", + "hat": '' + }; + stringifyAndCompare( + Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput); + }); + + test('Complete hex', function() { + var inputStyle = { + "colourPrimary": "#aaaaaa", + "colourSecondary": "#bbbbbb", + "colourTertiary": "#cccccc", + "hat": 'cap' + }; + var expectedOutput = { + "colourPrimary": "#aaaaaa", + "colourSecondary": "#bbbbbb", + "colourTertiary": "#cccccc", + "hat": 'cap' + }; + stringifyAndCompare( + Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput); + }); + + test('Complete hue', function() { + var inputStyle = { + "colourPrimary": "20", + "colourSecondary": "40", + "colourTertiary": "60", + }; + var expectedOutput = { + "colourPrimary": "#a5745b", + "colourSecondary": "#a58c5b", + "colourTertiary": "#a5a55b", + "hat": '' + }; + stringifyAndCompare( + Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput); + }); + + test('Incomplete hue', function() { + var inputStyle = { + "colourPrimary": "20", + }; + var expectedOutput = { + "colourPrimary": "#a5745b", + "colourSecondary": "#dbc7bd", + "colourTertiary": "#c09e8c", + "hat": '' + }; + stringifyAndCompare( + Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput); + }); + + test('Complete css colour name', function() { + var inputStyle = { + "colourPrimary": "red", + "colourSecondary": "white", + "colourTertiary": "blue" + }; + var expectedOutput = { + "colourPrimary": "#ff0000", + "colourSecondary": "#ffffff", + "colourTertiary": "#0000ff", + "hat": '' + }; + stringifyAndCompare( + Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput); + }); + + test('Incomplete css colour name', function() { + var inputStyle = { + "colourPrimary": "black", + }; + var expectedOutput = { + "colourPrimary": "#000000", + "colourSecondary": "#999999", + "colourTertiary": "#4d4d4d", + "hat": '' + }; + stringifyAndCompare( + Blockly.Theme.validatedBlockStyle(inputStyle), expectedOutput); + }); + }); });