How is the bgcolor property being calculated?

2018-05-29 19:59:01

Possible Duplicate:
Why does HTML think “chucknorris” is a color?

How is the bgcolor property calculated?

When i use the following html code...

<body bgcolor="#Deine Mutter hat eine Farbe und die ist grün."></body>

...what I get is the following color.

By the way: When I try to use it in CSS it won´t work and will apply the standard color:

body{
    color: #IchwillGOLD;
}

Why?

My first try on this was a little trial on error and while I found some interesting properties of the system, it wasn't quite enough to form an answer. Next, I turned my attention to the standard. The reason that I believed this to be in the standard was that I tested it on three different browsers and they actually all did the same thing. Using the standard I found out what happens:

All characters that aren't hexadecimal are replaced by zeroes (so only zeroes, 1-9 and ae remain)

The string is zero padded at the end to be a multiple of three

The string is then divided up in three equal parts, each representing a color

If the resulting strings are longer than 8 characters, take the last 8 characters of each string

As long as each of the strings starts with a zero, the first character is removed from each string (not happening for this particular string since it starts with De

The first two characters are taken from each of those strings and converted to a number for use as one of the components of the color

This way you'll see you get 00FA00 for Deine Mutter hat eine Farbe und die ist grün.

The html5 standard describes the process more precisely and actually describes a couple more cases here: http://www.w3.org/TR/html5/common-microsyntaxes.html#colors under the "rules for parsing a legacy color value"

As i stated in the Comments, the HTMLParser adds it as a CSS Property, and as already answered by Jasper, it is by Specification.

Implementation

Webkit parses the html in HTMLParser.cpp and if the Parser is inBody it adds the bgColor Attribute as CssColor in HTMLBodyElement.cpp

// Color parsing that matches HTML's "rules for parsing a legacy color value"
void HTMLElement::addHTMLColorToStyle(StylePropertySet* style, CSSPropertyID propertyID, const String& attributeValue)
{
    // An empty string doesn't apply a color. (One containing only whitespace does, which is why this check occurs before stripping.)
    if (attributeValue.isEmpty())
        return;

    String colorString = attributeValue.stripWhiteSpace();

    // "transparent" doesn't apply a color either.
    if (equalIgnoringCase(colorString, "transparent"))
        return;

    // If the string is a named CSS color or a 3/6-digit hex color, use that.
    Color parsedColor(colorString);
    if (!parsedColor.isValid())
        parsedColor.setRGB(parseColorStringWithCrazyLegacyRules(colorString));

    style->setProperty(propertyID, cssValuePool().createColorValue(parsedColor.rgb()));
}

You have good chances to end in this method:

static RGBA32 parseColorStringWithCrazyLegacyRules(const String& colorString)

I think it is to support legacy Colors like this : body bgcolor=ff0000 ( Mozilla Gecko Test ).

Skip a leading #

Grab the first 128 characters, replacing non-hex characters with 0. 1120

Non-BMP characters are replaced with "00" due to them appearing as two "characters" in the String.

If no digits return Color black

Split the digits into three components, then search the last 8 digits of each component.

Code of Webkit/HTMLElement.cpp:parseColorStringWithCrazyLegacyRules:

static RGBA32 parseColorStringWithCrazyLegacyRules(const String& colorString)
{
    // Per spec, only look at the first 128 digits of the string.
    const size_t maxColorLength = 128;
    // We'll pad the buffer with two extra 0s later, so reserve two more than the max.
    Vector<char, maxColorLength+2> digitBuffer;
    size_t i = 0;
    // Skip a leading #.
    if (colorString[0] == '#')
        i = 1;

    // Grab the first 128 characters, replacing non-hex characters with 0.
    // Non-BMP characters are replaced with "00" due to them appearing as two "characters" in the String.
    for (; i < colorString.length() && digitBuffer.size() < maxColorLength; i++) {
        if (!isASCIIHexDigit(colorString[i]))
            digitBuffer.append('0');
        else
            digitBuffer.append(colorString[i]);
    }

    if (!digitBuffer.size())
        return Color::black;

    // Pad the buffer out to at least the next multiple of three in size.
    digitBuffer.append('0');
    digitBuffer.append('0');

    if (digitBuffer.size() < 6)
        return makeRGB(toASCIIHexValue(digitBuffer[0]), toASCIIHexValue(digitBuffer[1]), toASCIIHexValue(digitBuffer[2]));

    // Split the digits into three components, then search the last 8 digits of each component.
    ASSERT(digitBuffer.size() >= 6);
    size_t componentLength = digitBuffer.size() / 3;
    size_t componentSearchWindowLength = min<size_t>(componentLength, 8);
    size_t redIndex = componentLength - componentSearchWindowLength;
    size_t greenIndex = componentLength * 2 - componentSearchWindowLength;
    size_t blueIndex = componentLength * 3 - componentSearchWindowLength;
    // Skip digits until one of them is non-zero, 
    // or we've only got two digits left in the component.
    while (digitBuffer[redIndex] == '0' && digitBuffer[greenIndex] == '0' 
        && digitBuffer[blueIndex] == '0' && (componentLength - redIndex) > 2) {
        redIndex++;
        greenIndex++;
        blueIndex++;
    }
    ASSERT(redIndex + 1 < componentLength);
    ASSERT(greenIndex >= componentLength);
    ASSERT(greenIndex + 1 < componentLength * 2);
    ASSERT(blueIndex >= componentLength * 2);
    ASSERT(blueIndex + 1 < digitBuffer.size());

    int redValue = toASCIIHexValue(digitBuffer[redIndex], digitBuffer[redIndex + 1]);
    int greenValue = toASCIIHexValue(digitBuffer[greenIndex], digitBuffer[greenIndex + 1]);
    int blueValue = toASCIIHexValue(digitBuffer[blueIndex], digitBuffer[blueIndex + 1]);
    return makeRGB(redValue, greenValue, blueValue);
}

链接地址: http://www.djcxy.com/p/2516.html

上一篇: bgcolor支持哪些属性

下一篇: 如何计算bgcolor属性？