public/browser
1
0
Fork 0
mirror of https://github.com/lightpanda-io/browser.git synced 2026-03-22 04:34:44 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Merge pull request #1707 from lightpanda-io/nikneym/details
Some checks failed
e2e-test / zig build release (push) Has been cancelled
Details
e2e-test / demo-scripts (push) Has been cancelled
Details
e2e-test / cdp-and-hyperfine-bench (push) Has been cancelled
Details
e2e-test / perf-fmt (push) Has been cancelled
Details
e2e-test / browser fetch (push) Has been cancelled
Details
zig-test / zig test using v8 in debug mode (push) Has been cancelled
Details
zig-test / zig test (push) Has been cancelled
Details
zig-test / perf-fmt (push) Has been cancelled
Details
e2e-integration-test / zig build release (push) Has been cancelled
Details
e2e-integration-test / demo-integration-scripts (push) Has been cancelled
Details

Browse Source 
Add `HTMLDetailsElement`
This commit is contained in:
Karl Seguin
2026-03-04 07:44:11 +08:00
committed by GitHub
parent 01fab5c92a 50896bdc9d
commit bc8c44f62f
7 changed files with 130 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/browser/Page.zig
View File

@@ -1993,10 +1993,10 @@ pub fn createElementNS(self: *Page, namespace: Element.Namespace, name: []const
.{ ._proto = undefined, ._tag_name = String.init(undefined, "article", .{}) catch unreachable, ._tag = .article }, .{ ._proto = undefined, ._tag_name = String.init(undefined, "article", .{}) catch unreachable, ._tag = .article },
), ),
asUint("details") => return self.createHtmlElementT( asUint("details") => return self.createHtmlElementT(
Element.Html.Generic, Element.Html.Details,
namespace, namespace,
attribute_iterator, attribute_iterator,
.{ ._proto = undefined, ._tag_name = String.init(undefined, "details", .{}) catch unreachable, ._tag = .details }, .{ ._proto = undefined },
), ),
asUint("summary") => return self.createHtmlElementT( asUint("summary") => return self.createHtmlElementT(
Element.Html.Generic, Element.Html.Generic,

1
src/browser/js/bridge.zig
View File

@@ -767,6 +767,7 @@ pub const JsApis = flattenTypes(&.{
@import("../webapi/element/html/Custom.zig"), @import("../webapi/element/html/Custom.zig"),
@import("../webapi/element/html/Data.zig"), @import("../webapi/element/html/Data.zig"),
@import("../webapi/element/html/DataList.zig"), @import("../webapi/element/html/DataList.zig"),
@import("../webapi/element/html/Details.zig"),
@import("../webapi/element/html/Dialog.zig"), @import("../webapi/element/html/Dialog.zig"),
@import("../webapi/element/html/Directory.zig"), @import("../webapi/element/html/Directory.zig"),
@import("../webapi/element/html/DList.zig"), @import("../webapi/element/html/DList.zig"),

63
src/browser/tests/element/html/details.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<script src="../../testing.js"></script>
<!-- Details elements -->
<details id="details1">
<summary>Summary</summary>
Content
</details>
<details id="details2" open>
<summary>Open Summary</summary>
Content
</details>
<script id="instanceof">
{
const details = document.createElement('details')
testing.expectTrue(details instanceof HTMLDetailsElement)
}
</script>
<script id="open_initial">
testing.expectEqual(false, $('#details1').open)
testing.expectEqual(true, $('#details2').open)
</script>
<script id="open_set">
{
$('#details1').open = true
testing.expectEqual(true, $('#details1').open)
$('#details2').open = false
testing.expectEqual(false, $('#details2').open)
}
</script>
<script id="open_reflects_attribute">
{
const details = document.createElement('details')
testing.expectEqual(null, details.getAttribute('open'))
details.open = true
testing.expectEqual('', details.getAttribute('open'))
details.open = false
testing.expectEqual(null, details.getAttribute('open'))
}
</script>
<script id="name_initial">
{
const details = document.createElement('details')
testing.expectEqual('', details.name)
}
</script>
<script id="name_set">
{
const details = document.createElement('details')
details.name = 'group1'
testing.expectEqual('group1', details.name)
testing.expectEqual('group1', details.getAttribute('name'))
}
</script>

3
src/browser/webapi/Element.zig
View File

@@ -209,6 +209,7 @@ pub fn getTagNameLower(self: *const Element) []const u8 {
.custom => |e| e._tag_name.str(), .custom => |e| e._tag_name.str(),
.data => "data", .data => "data",
.datalist => "datalist", .datalist => "datalist",
.details => "details",
.dialog => "dialog", .dialog => "dialog",
.directory => "dir", .directory => "dir",
.div => "div", .div => "div",
@@ -287,6 +288,7 @@ pub fn getTagNameSpec(self: *const Element, buf: []u8) []const u8 {
.custom => |e| upperTagName(&e._tag_name, buf), .custom => |e| upperTagName(&e._tag_name, buf),
.data => "DATA", .data => "DATA",
.datalist => "DATALIST", .datalist => "DATALIST",
.details => "DETAILS",
.dialog => "DIALOG", .dialog => "DIALOG",
.directory => "DIR", .directory => "DIR",
.div => "DIV", .div => "DIV",
@@ -1385,6 +1387,7 @@ pub fn getTag(self: *const Element) Tag {
.custom => .custom, .custom => .custom,
.data => .data, .data => .data,
.datalist => .datalist, .datalist => .datalist,
.details => .details,
.dialog => .dialog, .dialog => .dialog,
.directory => .directory, .directory => .directory,
.iframe => .iframe, .iframe => .iframe,

2
src/browser/webapi/css/CSSStyleDeclaration.zig
View File

@@ -255,7 +255,7 @@ fn getDefaultDisplay(element: *const Element) []const u8 {
.html => |html| { .html => |html| {
return switch (html._type) { return switch (html._type) {
.anchor, .br, .span, .label, .time, .font, .mod, .quote => "inline", .anchor, .br, .span, .label, .time, .font, .mod, .quote => "inline",
.body, .div, .dl, .p, .heading, .form, .button, .canvas, .dialog, .embed, .head, .html, .hr, .iframe, .img, .input, .li, .link, .meta, .ol, .option, .script, .select, .slot, .style, .template, .textarea, .title, .ul, .media, .area, .base, .datalist, .directory, .fieldset, .legend, .map, .meter, .object, .optgroup, .output, .param, .picture, .pre, .progress, .source, .table, .table_caption, .table_cell, .table_col, .table_row, .table_section, .track => "block", .body, .div, .dl, .p, .heading, .form, .button, .canvas, .details, .dialog, .embed, .head, .html, .hr, .iframe, .img, .input, .li, .link, .meta, .ol, .option, .script, .select, .slot, .style, .template, .textarea, .title, .ul, .media, .area, .base, .datalist, .directory, .fieldset, .legend, .map, .meter, .object, .optgroup, .output, .param, .picture, .pre, .progress, .source, .table, .table_caption, .table_cell, .table_col, .table_row, .table_section, .track => "block",
.generic, .custom, .unknown, .data => blk: { .generic, .custom, .unknown, .data => blk: {
const tag = element.getTagNameLower(); const tag = element.getTagNameLower();
if (isInlineTag(tag)) break :blk "inline"; if (isInlineTag(tag)) break :blk "inline";

2
src/browser/webapi/element/Html.zig
View File

@@ -39,6 +39,7 @@ pub const Canvas = @import("html/Canvas.zig");
pub const Custom = @import("html/Custom.zig"); pub const Custom = @import("html/Custom.zig");
pub const Data = @import("html/Data.zig"); pub const Data = @import("html/Data.zig");
pub const DataList = @import("html/DataList.zig"); pub const DataList = @import("html/DataList.zig");
pub const Details = @import("html/Details.zig");
pub const Dialog = @import("html/Dialog.zig"); pub const Dialog = @import("html/Dialog.zig");
pub const Directory = @import("html/Directory.zig"); pub const Directory = @import("html/Directory.zig");
pub const Div = @import("html/Div.zig"); pub const Div = @import("html/Div.zig");
@@ -119,6 +120,7 @@ pub const Type = union(enum) {
custom: *Custom, custom: *Custom,
data: *Data, data: *Data,
datalist: *DataList, datalist: *DataList,
details: *Details,
dialog: *Dialog, dialog: *Dialog,
directory: *Directory, directory: *Directory,
div: *Div, div: *Div,

58
src/browser/webapi/element/html/Details.zig Normal file
View File

@@ -0,0 +1,58 @@
const js = @import("../../../js/js.zig");
const Page = @import("../../../Page.zig");
const Node = @import("../../Node.zig");
const Element = @import("../../Element.zig");
const HtmlElement = @import("../Html.zig");
const Details = @This();
_proto: *HtmlElement,
pub fn asElement(self: *Details) *Element {
return self._proto._proto;
}
pub fn asConstElement(self: *const Details) *const Element {
return self._proto._proto;
}
pub fn asNode(self: *Details) *Node {
return self.asElement().asNode();
}
pub fn getOpen(self: *const Details) bool {
return self.asConstElement().getAttributeSafe(comptime .wrap("open")) != null;
}
pub fn setOpen(self: *Details, open: bool, page: *Page) !void {
if (open) {
try self.asElement().setAttributeSafe(comptime .wrap("open"), .wrap(""), page);
} else {
try self.asElement().removeAttribute(comptime .wrap("open"), page);
}
}
pub fn getName(self: *const Details) []const u8 {
return self.asConstElement().getAttributeSafe(comptime .wrap("name")) orelse "";
}
pub fn setName(self: *Details, value: []const u8, page: *Page) !void {
try self.asElement().setAttributeSafe(comptime .wrap("name"), .wrap(value), page);
}
pub const JsApi = struct {
pub const bridge = js.Bridge(Details);
pub const Meta = struct {
pub const name = "HTMLDetailsElement";
pub const prototype_chain = bridge.prototypeChain();
pub var class_id: bridge.ClassId = undefined;
};
pub const open = bridge.accessor(Details.getOpen, Details.setOpen, .{});
pub const name = bridge.accessor(Details.getName, Details.setName, .{});
};
const testing = @import("../../../../testing.zig");
test "WebApi: HTML.Details" {
try testing.htmlRunner("element/html/details.html", .{});
}