System/Libraries/Html/Renderer: Apply CSS distance types other than pixels to node width/height

This commit is contained in:
Alec Murphy 2025-04-26 18:57:51 -04:00
parent 49cb267474
commit 80f599a19a

View file

@ -398,16 +398,48 @@ Bool @apply_css_properties_to_node(@html_dom_node* node, JsonObject* properties)
@css_resolve_color(&node->color, values->@(0)); @css_resolve_color(&node->color, values->@(0));
} }
if (!StrICmp(key->name, "width") && !StrICmp(values->@(0) + StrLen(values->@(0)) - 2, "px")) { if (!StrICmp(key->name, "width")) {
StrCpy(node_tmpnum_buf, values->@(0)); StrCpy(node_tmpnum_buf, values->@(0));
if (String.EndsWith("px", values->@(0))) {
node_tmpnum_buf[StrLen(node_tmpnum_buf) - 2] = NULL; node_tmpnum_buf[StrLen(node_tmpnum_buf) - 2] = NULL;
node->width = Str2I64(node_tmpnum_buf); node->width = Str2F64(node_tmpnum_buf);
node->widthDistanceType = CSS_DISTANCE_PIXELS;
}
if (String.EndsWith("em", values->@(0))) {
node_tmpnum_buf[StrLen(node_tmpnum_buf) - 2] = NULL;
node->width = Str2F64(node_tmpnum_buf);
node->widthDistanceType = CSS_DISTANCE_EM;
}
if (String.EndsWith("%", values->@(0))) {
node_tmpnum_buf[StrLen(node_tmpnum_buf) - 1] = NULL;
node->width = Str2F64(node_tmpnum_buf);
node->widthDistanceType = CSS_DISTANCE_PERCENT;
}
if (!StrICmp(values->@(0), "auto")) {
node->widthDistanceType = CSS_DISTANCE_AUTO;
}
} }
if (!StrICmp(key->name, "height") && !StrICmp(values->@(0) + StrLen(values->@(0)) - 2, "px")) { if (!StrICmp(key->name, "height")) {
StrCpy(node_tmpnum_buf, values->@(0)); StrCpy(node_tmpnum_buf, values->@(0));
if (String.EndsWith("px", values->@(0))) {
node_tmpnum_buf[StrLen(node_tmpnum_buf) - 2] = NULL; node_tmpnum_buf[StrLen(node_tmpnum_buf) - 2] = NULL;
node->height = Str2I64(node_tmpnum_buf); node->height = Str2F64(node_tmpnum_buf);
node->heightDistanceType = CSS_DISTANCE_PIXELS;
}
if (String.EndsWith("em", values->@(0))) {
node_tmpnum_buf[StrLen(node_tmpnum_buf) - 2] = NULL;
node->height = Str2F64(node_tmpnum_buf);
node->heightDistanceType = CSS_DISTANCE_EM;
}
if (String.EndsWith("%", values->@(0))) {
node_tmpnum_buf[StrLen(node_tmpnum_buf) - 1] = NULL;
node->height = Str2F64(node_tmpnum_buf);
node->heightDistanceType = CSS_DISTANCE_PERCENT;
}
if (!StrICmp(values->@(0), "auto")) {
node->heightDistanceType = CSS_DISTANCE_AUTO;
}
} }
if (!StrICmp(key->name, "text-align") && !StrICmp(values->@(0), "left")) if (!StrICmp(key->name, "text-align") && !StrICmp(values->@(0), "left"))
@ -731,13 +763,56 @@ JsonArray* display_values = Json.Parse("[\"none\",\"block\",\"inline\",\"inline-
U0 @dump_node_info(@html_dom_node* node, HtmlRenderer* renderer, U8* comment = NULL) U0 @dump_node_info(@html_dom_node* node, HtmlRenderer* renderer, U8* comment = NULL)
{ {
U8 width_buffer[128];
U8 height_buffer[128];
if (comment) { if (comment) {
@dump_node_indent(renderer); @dump_node_indent(renderer);
"%s\n", comment; "%s\n", comment;
} }
@dump_node_indent(renderer); @dump_node_indent(renderer);
"<%s> CSS: textAlign: %s, width: %dpx, height: %dpx, bgcolor: #0x%06x, color: #0x%06x, fontFamily: \"%s\", fontSize: %dpx, fontWeight: %d, display: %s\n", switch (node->widthDistanceType) {
node->tagName, text_align_values->@(node->textAlign), node->width, node->height, node->backgroundColor, node->color, case CSS_DISTANCE_UNDEFINED:
StrCpy(width_buffer, "(undefined)");
break;
case CSS_DISTANCE_PIXELS:
StrPrint(width_buffer, "%dpx", ToI64(node->width));
break;
case CSS_DISTANCE_EM:
StrPrint(width_buffer, "%fem", node->width);
break;
case CSS_DISTANCE_PERCENT:
StrPrint(width_buffer, "%f\xef\xbc\x85", node->width);
break;
case CSS_DISTANCE_AUTO:
StrCpy(width_buffer, "auto");
break;
default:
StrCpy(width_buffer, "(invalid)");
break;
}
switch (node->heightDistanceType) {
case CSS_DISTANCE_UNDEFINED:
StrCpy(height_buffer, "(undefined)");
break;
case CSS_DISTANCE_PIXELS:
StrPrint(height_buffer, "%dpx", ToI64(node->height));
break;
case CSS_DISTANCE_EM:
StrPrint(height_buffer, "%fem", node->height);
break;
case CSS_DISTANCE_PERCENT:
StrPrint(height_buffer, "%f\xef\xbc\x85", node->height);
break;
case CSS_DISTANCE_AUTO:
StrCpy(height_buffer, "auto");
break;
default:
StrCpy(height_buffer, "(invalid)");
break;
}
"<%s> CSS: textAlign: %s, width: %s, height: %s, bgcolor: #0x%06x, color: #0x%06x, fontFamily: \"%s\", fontSize: %dpx, fontWeight: %d, display: %s\n",
node->tagName, text_align_values->@(node->textAlign), width_buffer, height_buffer, node->backgroundColor, node->color,
node->fontFamily, node->fontSize, node->fontWeight, display_values->@(node->display); node->fontFamily, node->fontSize, node->fontWeight, display_values->@(node->display);
@dump_node_indent(renderer); @dump_node_indent(renderer);
"%s\n", Json.Stringify(node->attributes, erythros_mem_task); "%s\n", Json.Stringify(node->attributes, erythros_mem_task);
@ -757,10 +832,6 @@ Bool @apply_css_rules_to_node(@html_dom_node* node, HtmlRenderer* renderer)
Bool matched = FALSE; Bool matched = FALSE;
Bool should_display = TRUE; Bool should_display = TRUE;
// Set initial values for node width/height to undefined
node->width = -1;
node->height = -1;
if (block_level_element_tag_names->contains(node->tagName)) { if (block_level_element_tag_names->contains(node->tagName)) {
node->display = CSS_DISPLAY_BLOCK; node->display = CSS_DISPLAY_BLOCK;
} }
@ -941,9 +1012,9 @@ U0 @render_form_element(@html_dom_node* node, HtmlRenderer* renderer)
CheckBoxWidget* cb = NULL; CheckBoxWidget* cb = NULL;
if (!StrICmp(type, "checkbox")) { if (!StrICmp(type, "checkbox")) {
if (node->width < 0) if (!node->widthDistanceType)
width = 14; width = 14;
if (node->height < 0) if (!node->heightDistanceType)
height = 14; height = 14;
cb = Gui.CreateWidget(renderer->win, WIDGET_TYPE_CHECKBOX, U64_MAX, U64_MAX, width, height); // FIXME: Derive width/height cb = Gui.CreateWidget(renderer->win, WIDGET_TYPE_CHECKBOX, U64_MAX, U64_MAX, width, height); // FIXME: Derive width/height
cb->checked = node->attributes->@("checked"); cb->checked = node->attributes->@("checked");
@ -953,9 +1024,9 @@ U0 @render_form_element(@html_dom_node* node, HtmlRenderer* renderer)
} }
if (!StrICmp(type, "button")) { if (!StrICmp(type, "button")) {
if (node->width < 0) if (!node->widthDistanceType)
width = 64; width = 64;
if (node->height < 0) if (!node->heightDistanceType)
height = 16; height = 16;
btn = Gui.CreateWidget(renderer->win, WIDGET_TYPE_BUTTON, U64_MAX, U64_MAX, width, height); // FIXME: Derive width/height btn = Gui.CreateWidget(renderer->win, WIDGET_TYPE_BUTTON, U64_MAX, U64_MAX, width, height); // FIXME: Derive width/height
btn->data = node; btn->data = node;
@ -965,9 +1036,9 @@ U0 @render_form_element(@html_dom_node* node, HtmlRenderer* renderer)
} }
if (!StrICmp(type, "submit")) { if (!StrICmp(type, "submit")) {
if (node->width < 0) if (!node->widthDistanceType)
width = 64; width = 64;
if (node->height < 0) if (!node->heightDistanceType)
height = 16; height = 16;
btn = Gui.CreateWidget(renderer->win, WIDGET_TYPE_BUTTON, U64_MAX, U64_MAX, width, height); // FIXME: Derive width/height btn = Gui.CreateWidget(renderer->win, WIDGET_TYPE_BUTTON, U64_MAX, U64_MAX, width, height); // FIXME: Derive width/height
btn->data = node; btn->data = node;
@ -978,9 +1049,9 @@ U0 @render_form_element(@html_dom_node* node, HtmlRenderer* renderer)
} }
if (!type || !StrICmp(type, "text")) { if (!type || !StrICmp(type, "text")) {
if (node->width < 0) if (!node->widthDistanceType)
width = 64; width = 64;
if (node->height < 0) if (!node->heightDistanceType)
height = 16; height = 16;
if (node->attributes->@("width")) { if (node->attributes->@("width")) {
width = 8 * Str2I64(node->attributes->@("width")); width = 8 * Str2I64(node->attributes->@("width"));
@ -1002,9 +1073,9 @@ U0 @render_form_element(@html_dom_node* node, HtmlRenderer* renderer)
} }
if (!StrICmp(type, "password")) { if (!StrICmp(type, "password")) {
if (node->width < 0) if (!node->widthDistanceType)
width = 64; width = 64;
if (node->height < 0) if (!node->heightDistanceType)
height = 16; height = 16;
if (node->attributes->@("width")) { if (node->attributes->@("width")) {
width = 8 * Str2I64(node->attributes->@("width")); width = 8 * Str2I64(node->attributes->@("width"));
@ -1274,7 +1345,7 @@ U0 @render_node_list(@html_dom_node* node, HtmlRenderer* renderer)
if (node->display == CSS_DISPLAY_BLOCK || node->display == CSS_DISPLAY_INLINE_BLOCK) { if (node->display == CSS_DISPLAY_BLOCK || node->display == CSS_DISPLAY_INLINE_BLOCK) {
block_widget = Gui.CreateWidget(renderer->win, WIDGET_TYPE_CONTEXT2D, block_widget = Gui.CreateWidget(renderer->win, WIDGET_TYPE_CONTEXT2D,
U64_MAX, U64_MAX, 0, 0); U64_MAX, U64_MAX, 0, 0);
if (node->width > 0 && node->height > 0) { if (node->widthDistanceType == CSS_DISTANCE_PIXELS && node->heightDistanceType == CSS_DISTANCE_PIXELS) {
block_widget->ctx = NewContext2D(node->width, node->height)->fill(node->backgroundColor); block_widget->ctx = NewContext2D(node->width, node->height)->fill(node->backgroundColor);
block_widget->width = block_widget->ctx->width; block_widget->width = block_widget->ctx->width;
block_widget->height = block_widget->ctx->height; block_widget->height = block_widget->ctx->height;
@ -1320,7 +1391,7 @@ U0 @render_node_list(@html_dom_node* node, HtmlRenderer* renderer)
} }
if (!StrICmp(node->tagName, "img")) { if (!StrICmp(node->tagName, "img")) {
if (node->width < 0 || node->height < 0) { if (!node->widthDistanceType || !node->heightDistanceType) {
node->width = 32; node->width = 32;
node->height = 32; node->height = 32;
} }