[#LPP-2954] Make hex color (#FFFFFF), named color (red), and rgb(x,x,x) color specification work in CSS

OpenLaszlo

Make hex color (#FFFFFF), named color (red), and rgb(x,x,x) color specification work in CSS

Created: 19/Oct/06 03:03 PM Updated: 03/Jan/07 02:22 PM

Component/s:

LFC - CSS

Affects Version/s:

3.4

Fix Version/s:

3.4

Time Tracking:

Not Specified

Severity:	Major
Fixed in Change#:	3,247
Runtime:	N/A
Fix in hand:	False

Description

« Hide

The following application shows that stylesheet declarations that assign colors by "name" , "rgb(x,x,x)", or "#hexcolor" don't work.

<canvas width="860" debug="true">

<stylesheet>
#vName {
bgcolorName : "blue";
}

#tName {
fgcolorName : "blue";
}

#vRGB {
bgcolorRGB : "#0000FF";
}

#tRGB {
fgcolorRGB : "#0000FF";
}

#vHex {
bgcolorHex : "0x0000FF";
}

#tHex {
fgcolorHex : "0x0000FF";
}

#vParens {
bgcolorParens : "rgb(0,0,255)";
}

#tParens {
fgcolorParens : "rgb(0,0,255)";
}

</stylesheet>

<wrappinglayout axis="x" spacing="10"/>

<view id="vName" height="100" width="100" bgcolor="$style{'bgcolorName'}"/>
<text id="tName" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorName'}">Blue1</text>

<view id="vRGB" height="100" width="100" bgcolor="$style{'bgcolorRGB'}"/>
<text id="tRGB" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorRGB'}">Blue2</text>

<view id="vHex" height="100" width="100" bgcolor="$style{'bgcolorHex'}"/>
<text id="tHex" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorHex'}">Blue3</text>

<view id="vParens" height="100" width="100" bgcolor="$style{'bgcolorParens'}"/>
<text id="tParens" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorParens'}">Blue4</text>

<view id="explicitVName" height="100" width="100" bgcolor="blue"/>
<text id="explicitTName" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="blue">Blue5</text>

<view id="explicitVRGB" height="100" width="100" bgcolor="#0000FF"/>
<text id="explicitTRGB" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="#0000FF">Blue6</text>

<view id="explicitVHex" height="100" width="100" bgcolor="0x0000FF"/>
<text id="explicitTHex" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="0x0000FF">Blue7</text>

<view id="explicitVParens" height="100" width="100" bgcolor="rgb(0,0,255)"/>
<text id="explicitTParens" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="rgb(0,0,255)">Blue8</text>

<script>
Debug.write("1=styled by blue");
Debug.write("2=styled by #0000FF");
Debug.write("3=styled by 0x0000FF");
Debug.write("4=styled by rgb(0,0,255)");
Debug.write("5=explicitly named blue");
Debug.write("6=explicitly colored #0000FF");
Debug.write("7=explicitly colored 0x0000FF");
Debug.write("8=explicitly colored rgb(0,0,255)");
</script>


</canvas>

Description

The following application shows that stylesheet declarations that assign colors by "name" , "rgb(x,x,x)", or "#hexcolor" don't work. <canvas width="860" debug="true"> <stylesheet> #vName { bgcolorName : "blue"; } #tName { fgcolorName : "blue"; } #vRGB { bgcolorRGB : "#0000FF"; } #tRGB { fgcolorRGB : "#0000FF"; } #vHex { bgcolorHex : "0x0000FF"; } #tHex { fgcolorHex : "0x0000FF"; } #vParens { bgcolorParens : "rgb(0,0,255)"; } #tParens { fgcolorParens : "rgb(0,0,255)"; } </stylesheet> <wrappinglayout axis="x" spacing="10"/> <view id="vName" height="100" width="100" bgcolor="$style{'bgcolorName'}"/> <text id="tName" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorName'}">Blue1</text> <view id="vRGB" height="100" width="100" bgcolor="$style{'bgcolorRGB'}"/> <text id="tRGB" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorRGB'}">Blue2</text> <view id="vHex" height="100" width="100" bgcolor="$style{'bgcolorHex'}"/> <text id="tHex" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorHex'}">Blue3</text> <view id="vParens" height="100" width="100" bgcolor="$style{'bgcolorParens'}"/> <text id="tParens" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="$style{'fgcolorParens'}">Blue4</text> <view id="explicitVName" height="100" width="100" bgcolor="blue"/> <text id="explicitTName" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="blue">Blue5</text> <view id="explicitVRGB" height="100" width="100" bgcolor="#0000FF"/> <text id="explicitTRGB" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="#0000FF">Blue6</text> <view id="explicitVHex" height="100" width="100" bgcolor="0x0000FF"/> <text id="explicitTHex" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="0x0000FF">Blue7</text> <view id="explicitVParens" height="100" width="100" bgcolor="rgb(0,0,255)"/> <text id="explicitTParens" font="verdana,sans-serif" fontsize="30" fontstyle="bold" height="40" fgcolor="rgb(0,0,255)">Blue8</text> <script> Debug.write("1=styled by blue"); Debug.write("2=styled by #0000FF"); Debug.write("3=styled by 0x0000FF"); Debug.write("4=styled by rgb(0,0,255)"); Debug.write("5=explicitly named blue"); Debug.write("6=explicitly colored #0000FF"); Debug.write("7=explicitly colored 0x0000FF"); Debug.write("8=explicitly colored rgb(0,0,255)"); </script>  </canvas>

Show »

All

Comments

Work Log

Change History

Sort Order:

Ascending order - Click to sort in descending order

[ Permlink | « Hide ]

Frisco Del Rosario - 13/Nov/06 11:08 AM

Ben and I were discussing which views appear (wrongly) as black, and which don't appear at all, depending on stylesheet.

If styled by rgb(x,x,x) or #xxxxxx, the views turn out black (.bgcolor==NaN). If no stylesheet selector is fired, no view appears (.bgcolor==null).

<canvas debug="true">
<include href="lzunit"/>

<stylesheet>

#skyBlue {
bgcolor : "0x00BFFF";
}

#stormGreen {
bgcolor : "rgb(0,64,0)";
}

#cometRed {
bgcolor : "#FF0000";
}

</stylesheet>

<simplelayout axis="x" spacing="10"/>


<view id="skyBlue" height="50" width="50" bgcolor="$style{'bgcolor'}"/>


<view id="stormGreen" height="50" width="50" bgcolor="$style{'bgcolor'}"/>


<view id="cometRed" height="50" width="50" bgcolor="$style{'bgcolor'}"/>


<view id="nothingThere" height="50" width="50" bgcolor="$style{'bgcolor'}"/>

<TestSuite>
<TestCase>
<method name="testLPP2954b">
assertEquals(Math.round(skyBlue.bgcolor), skyBlue.bgcolor, true);
assertEquals(isNaN(stormGreen.bgcolor), true);
assertEquals(isNaN(cometRed.bgcolor), true);
assertEquals(nothingThere.bgcolor, null, true);
</method>
</TestCase>
</TestSuite>

</canvas>

[ Permlink | « Hide ]

Sarah Allen - 20/Dec/06 12:59 PM

Ben says "the parser should do it we should just friggin' do it"
We all think it's very odd not to support #FFFFFF and only 0xFFFFFF

[ Permlink | « Hide ]

Benjamin Shine - 01/Jan/07 04:26 PM

The relevant part of the CSS 2.1 spec is here:
http://www.w3.org/TR/CSS21/syndata.html#color-units

[ Permlink | « Hide ]

Benjamin Shine - 03/Jan/07 08:44 AM

Improving bug summary.

[ Permlink | « Hide ]

P T Withington - 03/Jan/07 02:22 PM

r3247 | ptw | 2007-01-03 17:21:09 -0500 (Wed, 03 Jan 2007) | 55 lines
Changed paths:
   M /openlaszlo/trunk/WEB-INF/lps/lfc/core/LzNode.as
   M /openlaszlo/trunk/WEB-INF/lps/lfc/services/LzCSSStyle.js
   M /openlaszlo/trunk/WEB-INF/lps/lfc/views/LaszloView.as
   M /openlaszlo/trunk/WEB-INF/lps/server/src/org/openlaszlo/compiler/StyleSheetCompiler.java
   M /openlaszlo/trunk/WEB-INF/lps/server/src/org/openlaszlo/css/CSSHandler.java
   M /openlaszlo/trunk/WEB-INF/lps/server/src/org/openlaszlo/css/StyleProperty.java

Change 20070102-ptw-s by ptw@dueling-banjos.local on 2007-01-02 10:14:51 EST
    in /Users/ptw/OpenLaszlo/trunk

Summary: Better typing for styles

Bugs Fixed:
~~LPP-3356~~: 'can't make bgcolor transparent with css'
~~LPP-2954~~: 'Make hex color (#FFFFFF), named color (red), and rgb(x,x,x)
color specification work in CSS'

Technical Reviewer: ben (Message-Id: <C2614CE0-1B63-437B-B72B-442B26FFE11C@laszlosystems.com>)
QA Reviewer: adam (pending)
Doc Reviewer: jsundman (Message-Id: <65BC51A6-BFF2-4589-A18D-476E9CDB2DEE@laszlosystems.com>)

Documentation:

It seems that people want to write CSS colors as 0xFF00DD. But that
is not valid CSS. So they wrote them as "0xFF00DD" and then were
disappointed that the runtime did not recognize those strings as
numbers. So a kludge was added to the style applicator to convert
strings to numbers. But this kludge did not consider that the string
"null" would coerce nicely to the number 0, which for a color is
black. And thereby hangs a tale.

Release Notes:

You will get a warning if you use "OxXXXXXX" to specify a color in a
CSS style sheet. You should be using #XXXXXX instead.

Details:
    LzCSSStyle.js: Consider the case where the value of the property
    may be 0, or null, which coerce to false in a boolean context.

    LzNode.as: Only do the string->int conversion if the string is
    really parseable as a number. Warn the user that there is a
    better way.

    LaszloView.as: Fix the code that was trying to warn you when you
    set bgcolor to a non-number to actually detect and report that.

    StyleProperty.java: Add a toString method to support
    ScriptCompiler.writeObject

    CSSHandler.java: Use the LexicalUnitType information to store the
    value as an appropriate Javascript literal (i.e., encode the type
    information).

    StyleSheetCompiler: Use ScriptCompiler.writeObject to write the
    style map, so that type information encoded in the literals is
    preserved.

Tests:
    Bug test and failing cases both pass now. That is, once I
    corrected the failing test case to specify CSS bgcolor as the
    token `null`, rather than the string `"null"`.

[ Show » ]

P T Withington - 03/Jan/07 02:22 PM r3247 | ptw | 2007-01-03 17:21:09 -0500 (Wed, 03 Jan 2007) | 55 lines Changed paths: M /openlaszlo/trunk/WEB-INF/lps/lfc/core/LzNode.as M /openlaszlo/trunk/WEB-INF/lps/lfc/services/LzCSSStyle.js M /openlaszlo/trunk/WEB-INF/lps/lfc/views/LaszloView.as M /openlaszlo/trunk/WEB-INF/lps/server/src/org/openlaszlo/compiler/StyleSheetCompiler.java M /openlaszlo/trunk/WEB-INF/lps/server/src/org/openlaszlo/css/CSSHandler.java M /openlaszlo/trunk/WEB-INF/lps/server/src/org/openlaszlo/css/StyleProperty.java Change 20070102-ptw-s by ptw@dueling-banjos.local on 2007-01-02 10:14:51 EST in /Users/ptw/OpenLaszlo/trunk Summary: Better typing for styles Bugs Fixed: ~~LPP-3356~~: 'can't make bgcolor transparent with css' ~~LPP-2954~~: 'Make hex color (#FFFFFF), named color (red), and rgb(x,x,x) color specification work in CSS' Technical Reviewer: ben (Message-Id: <C2614CE0-1B63-437B-B72B-442B26FFE11C@laszlosystems.com>) QA Reviewer: adam (pending) Doc Reviewer: jsundman (Message-Id: <65BC51A6-BFF2-4589-A18D-476E9CDB2DEE@laszlosystems.com>) Documentation: It seems that people want to write CSS colors as 0xFF00DD. But that is not valid CSS. So they wrote them as "0xFF00DD" and then were disappointed that the runtime did not recognize those strings as numbers. So a kludge was added to the style applicator to convert strings to numbers. But this kludge did not consider that the string "null" would coerce nicely to the number 0, which for a color is black. And thereby hangs a tale. Release Notes: You will get a warning if you use "OxXXXXXX" to specify a color in a CSS style sheet. You should be using #XXXXXX instead. Details: LzCSSStyle.js: Consider the case where the value of the property may be 0, or null, which coerce to false in a boolean context. LzNode.as: Only do the string->int conversion if the string is really parseable as a number. Warn the user that there is a better way. LaszloView.as: Fix the code that was trying to warn you when you set bgcolor to a non-number to actually detect and report that. StyleProperty.java: Add a toString method to support ScriptCompiler.writeObject CSSHandler.java: Use the LexicalUnitType information to store the value as an appropriate Javascript literal (i.e., encode the type information). StyleSheetCompiler: Use ScriptCompiler.writeObject to write the style map, so that type information encoded in the literals is preserved. Tests: Bug test and failing cases both pass now. That is, once I corrected the failing test case to specify CSS bgcolor as the token `null`, rather than the string `"null"`.