CSS: background-* defects

[daemonblade]

I have a few books that use background-* CSS tags:

{
    background-image: url(../Images/separator.jpg);
    background-size: 10em auto;
    background-position: 50% 1em;
    background-repeat: no-repeat;
}

When it renders on KOReader:

• image is correct
• image size is acceptable
• no-repeat is honoured
• positioning is incorrect. It renders on the top-left corner.

Additionally, if multiple background images are presented:

{
    background-image: url(../Images/orn-above.png), url(../Images/orn-below.png);
    background-size: 40% auto, 40% auto;
    background-position: 50% 0, 50% 95%;
    background-repeat: no-repeat, no-repeat;
}

No images are rendered.

[poire-z]

We indeed do have some limitations to what we parse and can store, especially for the complex/free-form ones like background-*.
It's not fun to parse all the possible gramar, it would take more room in all the style slots to store the 4 background-position like in your example (vs. our single enum for the values like `top left), so there's some kind of balance to handle the most common one and fail on the rarer ones.
So, it will probably stay like this :/

crengine/crengine/src/lvstsheet.cpp

Lines 4279 to 4483 in 67f478e

	case cssd_background_image:
	{
	if ( g >= 0 ) {
	buf<<(lUInt32) (prop_code | importance | parse_important(decl));
	if ( g == css_g_inherit ) {
	// Have "\x01" means "inherit"
	buf<<(lUInt32) 1; // one char
	buf<<(lUInt32) '\x01';
	}
	else { // initial/unset defaults to 'none'
	buf<<(lUInt32) 0; // empty string
	}
	break;
	}
	lString8 str;
	const char *tmp = decl;
	int len=0;
	while (*tmp && *tmp!=';' && *tmp!=stop_char && *tmp!='!') {
	if ( *tmp == '(' && *(tmp-3) == 'u' && *(tmp-2) == 'r' && *(tmp-1) == 'l') {
	// Accepts everything until ')' after 'url(', including ';'
	// needed when parsing: url("data:image/png;base64,abcd...")
	tmp++; len++;
	while ( *tmp && *tmp!=')' ) {
	tmp++; len++;
	}
	}
	else {
	tmp++; len++;
	}
	}
	str.append(decl,len);
	decl += len;
	resolve_url_path(str, codeBase);
	len = str.length();
	buf<<(lUInt32) (prop_code | importance | parse_important(decl));
	buf<<(lUInt32) len;
	for (int i=0; i<len; i++)
	buf<<(lUInt32) str[i];
	}
	break;
	case cssd_background_repeat:
	IF_g_SET_n_AND_break(false, css_background_r_inherit, css_background_repeat);
	n = parse_name( decl, css_bg_repeat_names, -1 );
	break;
	case cssd_background_position:
	IF_g_SET_n_AND_break(false, css_background_p_inherit, css_background_left_top);
	n = parse_name( decl, css_bg_position_names, -1 );
	// Only values between 0 and 8 will be checked by the background drawing code
	if ( n>8 ) {
	if ( n<18 ) n=n-9; // "top left" = "left top"
	else if ( n==18 ) n=7; // "center" = "center center"
	else if ( n==19 ) n=1; // "left" = "left center"
	else if ( n==20 ) n=4; // "right" = "right center"
	else if ( n==21 ) n=6; // "top" = "center top"
	else if ( n==22 ) n=8; // "bottom" = "center bottom"
	else n=0; // should not happen, but be "left top"
	}
	break;
	case cssd_background:
	{
	if ( g >= 0 ) {
	parsed_important = parse_important(decl);
	// See standalone properties above for details
	buf<<(lUInt32) (cssd_background_image | importance | parsed_important);
	if ( g == css_g_inherit ) {
	buf<<(lUInt32) 1;
	buf<<(lUInt32) '\x01';
	}
	else {
	buf<<(lUInt32) 0;
	}
	buf<<(lUInt32) (cssd_background_repeat | importance | parsed_important);
	buf<<(lUInt32) (g == css_g_inherit ? css_background_r_inherit : css_background_repeat);
	buf<<(lUInt32) (cssd_background_position | importance | parsed_important);
	buf<<(lUInt32) (g == css_g_inherit ? css_background_p_inherit : css_background_left_top);
	buf<<(lUInt32) (cssd_background_color | importance | parsed_important);
	if ( g == css_g_inherit ) {
	buf<<(lUInt32) css_val_inherited;
	buf<<(lUInt32) 0;
	}
	else {
	buf<<(lUInt32) css_val_color;
	buf<<(lUInt32) CSS_COLOR_TRANSPARENT;
	}
	break;
	}
	// Limited parsing of this possibly complex property
	// We only support a single layer in these orders:
	// - color
	// - url(...) repeat position
	// - color url(...) repeat position
	// - color url(...) position repeat
	// (with repeat and position possibly absent or re-ordered)
	css_length_t color;
	bool has_color = parse_color_value(decl, color);
	skip_spaces(decl);
	const char *tmp = decl;
	int len = 0;
	while (*tmp && *tmp!=';' && *tmp!=stop_char && *tmp!='!') {
	if ( *tmp == '(' && *(tmp-3) == 'u' && *(tmp-2) == 'r' && *(tmp-1) == 'l') {
	// Accepts everything until ')' after 'url(', including ';'
	// needed when parsing: url("data:image/png;base64,abcd...")
	tmp++; len++;
	while ( *tmp && *tmp!=')' ) {
	tmp++; len++;
	}
	}
	else {
	tmp++; len++;
	}
	}
	lString8 str;
	str.append(decl,len);
	if ( Utf8ToUnicode(str).lowercase().startsWith("url(") ) {
	tmp = str.c_str();
	len = 0;
	while (*tmp && *tmp!=')') {
	tmp++; len++;
	}
	len = len + 1;
	str.clear();
	str.append(decl, len);
	decl += len;
	resolve_url_path(str, codeBase);
	len = str.length();
	// Try parsing following repeat and position
	skip_spaces(decl);
	int repeat = parse_name( decl, css_bg_repeat_names, -1 );
	if( repeat != -1 ) {
	skip_spaces(decl);
	}
	int position = parse_name( decl, css_bg_position_names, -1 );
	if ( position != -1 ) {
	// Only values between 0 and 8 will be checked by the background drawing code
	if ( position>8 ) {
	if ( position<18 ) position -= 9; // "top left" = "left top"
	else if ( position==18 ) position=7; // "center" = "center center"
	else if ( position==19 ) position=1; // "left" = "left center"
	else if ( position==20 ) position=4; // "right" = "right center"
	else if ( position==21 ) position=6; // "top" = "center top"
	else if ( position==22 ) position=8; // "bottom" = "center bottom"
	else position = 0; // should not happen, but be "left top"
	}
	}
	if( repeat == -1 ) { // Try parsing repeat after position
	skip_spaces(decl);
	repeat = parse_name( decl, css_bg_repeat_names, -1 );
	}
	parsed_important = parse_important(decl);
	buf<<(lUInt32) (cssd_background_image | importance | parsed_important);
	buf<<(lUInt32) len;
	for (int i = 0; i < len; i++)
	buf<<(lUInt32) str[i];
	if(repeat != -1) {
	buf<<(lUInt32) (cssd_background_repeat | importance | parsed_important);
	buf<<(lUInt32) repeat;
	}
	if (position != -1) {
	buf<<(lUInt32) (cssd_background_position | importance | parsed_important);
	buf<<(lUInt32) position;
	}
	}
	else { // no url, only color
	decl += len; // skip any unsupported stuff until !
	parsed_important = parse_important(decl);
	}
	if ( has_color ) {
	buf<<(lUInt32) (cssd_background_color | importance | parsed_important);
	buf<<(lUInt32) color.type;
	buf<<(lUInt32) color.value;
	}
	}
	break;
	case cssd_background_size:
	case cssd_background_size2:
	{
	prop_code = cssd_background_size;
	IF_g_PUSH_LENGTH_AND_break(2, false, css_val_unspecified, css_generic_auto);
	// https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
	css_length_t len[2];
	int i;
	for (i = 0; i < 2; i++) {
	// accept percent, auto and contain/cover
	if ( !parse_number_value( decl, len[i], true, false, true, false, false, false, true ) )
	break;
	}
	if (i) {
	if (i == 1) { // Only 1 value parsed
	if ( len[0].type == css_val_unspecified ) { // "auto", "contain" or "cover"
	len[1].type = css_val_unspecified;
	len[1].value = len[0].value;
	}
	else { // first value is a length: second value should be "auto"
	len[1].type = css_val_unspecified;
	len[1].value = css_generic_auto;
	}
	}
	buf<<(lUInt32) (prop_code | importance | parse_important(decl));
	for (i = 0; i < 2; i++) {
	buf<<(lUInt32) len[i].type;
	buf<<(lUInt32) len[i].value;
	}
	}
	}
	break;