Test Cases for g-color-swatch
Base Case
The input's value should reflect the hex-code attribute. The label should get the hex code set as well. Changing the input's value should update the hex-code attribute.
input's value should reflect the hex-code attribute. The label should get the hex code set as well. Changing the input's value should update the hex-code attribute.
Base Case on a non-input
If there is no input nor label, the contained markup can set data-color and data-hexcode. In that case, the data-color will be given the background color of the hex code and the data-hexcode will be treated as if it were a label.
inputinput nor label, the contained markup can set data-color and data-hexcode. In that case, the data-color will be given the background color of the hex code and the data-hexcode will be treated as if it were a label.
Multiple Labels and Inputs
Base case behavior applies to all relevant inputs and labels.
Deriving Brighter Values
Color swatch can show a brigher value based on linear transformation
Deriving Darker Values
Color swatch can show a darker value based on linear transformation
Deriving Complement
Color swatch can show the complement of another color
Deriving Split Complements
Color swatch can show one of the split complements of another color
Deriving Analogous
Color swatch can show one of the analogous colors of another color
Deriving Triad
Color swatch can show one of the triad colors of another color
Disconnected Derived Elements
When we set attributes to remove a derivation, the underlying events should not still be connected