Khan / Khan/live-editor

isValidColor returns true for non-color strings such as "abc".

Open
#556 2 comments 0 reactions 0 assignees View on GitHub
webpage
Dominant language
JavaScript
Stars
776
Forks
180
PR merge metrics
No merged PRs in 30d

Description

When using the isValidColor method in the HTML validation code, values such as "rg(255,0,0)" will return true, causing a pass in the grader.

My temporary solution in the coding challenge, Colorful Creature:

``` js
// CSS Color Names
// Compiled by @bobspace.
//
// A javascript array containing all of the color names listed in the CSS Spec.
// The full list can be found here: http://www.w3schools.com/cssref/css_colornames.asp
// Use it as you please, 'cuz you can't, like, own a color, man.

var CSS_COLOR_NAMES = ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","Black","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"];

// returns true if color name is found
// in CSS_COLOR_NAMES.
var isColorName = function(color) {
var names = [];

// convert all the names to lower case
for (name in CSS_COLOR_NAMES)
names.push(CSS_COLOR_NAMES[name].toLowerCase());

return names.indexOf(color.toLowerCase()) !== -1;
}

// modified version of isValidColor from live-editor/build/js/live-editor.output_webpage.js
var isColor = constraintPartial(function(color) {
var isValidNum = function isValidNum(val) {
var num = parseInt(val, 10);
return num >= 0 && num <= 255;
};

var isRGB = /rgb\((\s*\d+,){2}(\s*\d+\s*)\)/.test(color) || /rgba\((\s*\d+,){3}(\s*\d+\s*)\)/.test(color);
if (isRGB) {
var vals = color.split("(")[1].split(",");
return isValidNum(vals[0]) && isValidNum(vals[1]) && isValidNum(vals[2]);
}

// [old]
// If they're trying to use a color name, it should be at least
// three letters long and not equal to rgb
// return /[a-zA-Z]+/.test(color) && color.length >= 3 && color.indexOf("rgb") === -1;

// [new]
// are they using a color name?
return isColorName(color);
});
```

And then it can be used like this:

``` js
cssMatches(, isColor()
```

Maybe the isValidColor method wasn't intended to be used from the validation code, but it's useful when it works properly :) Is this something worth adding, or is there another way to validate colors that's already implemented?

Thanks in advance for any thoughts.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating isValidColor in live-editor/build/js/live-editor.output_webpage.js and inspect how the HTML validation code calls it. Reproduce the reported acceptance of values such as "abc" and "rg(255,0,0)", then compare that behavior with the valid color forms the implementation is intended to support. Done means invalid strings fail validation without rejecting supported colors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.