mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-25 00:50:22 +00:00
LibWeb: Make CSSStyleDeclaration a legacy platform object with indices
CSSStyleDeclaration has an indexed property getter, which returns properties associated with the object in the order they were specified in.
This commit is contained in:
Luke Wilde
Andreas Kling
parent
aacf9b08ed
commit
a94282e0e8
Notes:
github-actions[bot]
2024-11-14 18:51:15 +00:00
Author: https://github.com/Lubrsi Commit: https://github.com/LadybirdBrowser/ladybird/commit/a94282e0e8d Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2346
3 changed files with 247 additions and 0 deletions
|
|
@ -24,6 +24,9 @@ JS_DEFINE_ALLOCATOR(ElementInlineCSSStyleDeclaration);
|
|||
CSSStyleDeclaration::CSSStyleDeclaration(JS::Realm& realm)
|
||||
: PlatformObject(realm)
|
||||
{
|
||||
m_legacy_platform_object_flags = LegacyPlatformObjectFlags {
|
||||
.supports_indexed_properties = true,
|
||||
};
|
||||
}
|
||||
|
||||
void CSSStyleDeclaration::initialize(JS::Realm& realm)
|
||||
|
|
@ -328,6 +331,15 @@ WebIDL::ExceptionOr<void> CSSStyleDeclaration::set_css_float(StringView value)
|
|||
return set_property("float"sv, value, ""sv);
|
||||
}
|
||||
|
||||
Optional<JS::Value> CSSStyleDeclaration::item_value(size_t index) const
|
||||
{
|
||||
auto value = item(index);
|
||||
if (value.is_empty())
|
||||
return {};
|
||||
|
||||
return JS::PrimitiveString::create(vm(), value);
|
||||
}
|
||||
|
||||
// https://www.w3.org/TR/cssom/#serialize-a-css-declaration
|
||||
static String serialize_a_css_declaration(CSS::PropertyID property, StringView value, Important important)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,212 @@
|
|||
All properties associated with getComputedStyle(document.body):
|
||||
{
|
||||
"0": "-webkit-text-fill-color",
|
||||
"1": "accent-color",
|
||||
"2": "border-collapse",
|
||||
"3": "border-spacing",
|
||||
"4": "caption-side",
|
||||
"5": "clip-rule",
|
||||
"6": "color",
|
||||
"7": "cursor",
|
||||
"8": "direction",
|
||||
"9": "fill",
|
||||
"10": "fill-opacity",
|
||||
"11": "fill-rule",
|
||||
"12": "font-family",
|
||||
"13": "font-feature-settings",
|
||||
"14": "font-language-override",
|
||||
"15": "font-size",
|
||||
"16": "font-style",
|
||||
"17": "font-variant",
|
||||
"18": "font-variation-settings",
|
||||
"19": "font-weight",
|
||||
"20": "font-width",
|
||||
"21": "image-rendering",
|
||||
"22": "letter-spacing",
|
||||
"23": "line-height",
|
||||
"24": "list-style-image",
|
||||
"25": "list-style-position",
|
||||
"26": "list-style-type",
|
||||
"27": "math-depth",
|
||||
"28": "math-shift",
|
||||
"29": "math-style",
|
||||
"30": "pointer-events",
|
||||
"31": "quotes",
|
||||
"32": "stroke",
|
||||
"33": "stroke-linecap",
|
||||
"34": "stroke-linejoin",
|
||||
"35": "stroke-miterlimit",
|
||||
"36": "stroke-opacity",
|
||||
"37": "stroke-width",
|
||||
"38": "tab-size",
|
||||
"39": "text-align",
|
||||
"40": "text-anchor",
|
||||
"41": "text-decoration-line",
|
||||
"42": "text-indent",
|
||||
"43": "text-justify",
|
||||
"44": "text-shadow",
|
||||
"45": "text-transform",
|
||||
"46": "visibility",
|
||||
"47": "white-space",
|
||||
"48": "word-break",
|
||||
"49": "word-spacing",
|
||||
"50": "word-wrap",
|
||||
"51": "writing-mode",
|
||||
"52": "align-content",
|
||||
"53": "align-items",
|
||||
"54": "align-self",
|
||||
"55": "animation-delay",
|
||||
"56": "animation-direction",
|
||||
"57": "animation-duration",
|
||||
"58": "animation-fill-mode",
|
||||
"59": "animation-iteration-count",
|
||||
"60": "animation-name",
|
||||
"61": "animation-play-state",
|
||||
"62": "animation-timing-function",
|
||||
"63": "appearance",
|
||||
"64": "aspect-ratio",
|
||||
"65": "backdrop-filter",
|
||||
"66": "background-attachment",
|
||||
"67": "background-clip",
|
||||
"68": "background-color",
|
||||
"69": "background-image",
|
||||
"70": "background-origin",
|
||||
"71": "background-position-x",
|
||||
"72": "background-position-y",
|
||||
"73": "background-repeat",
|
||||
"74": "background-size",
|
||||
"75": "border-bottom-color",
|
||||
"76": "border-bottom-left-radius",
|
||||
"77": "border-bottom-right-radius",
|
||||
"78": "border-bottom-style",
|
||||
"79": "border-bottom-width",
|
||||
"80": "border-left-color",
|
||||
"81": "border-left-style",
|
||||
"82": "border-left-width",
|
||||
"83": "border-right-color",
|
||||
"84": "border-right-style",
|
||||
"85": "border-right-width",
|
||||
"86": "border-top-color",
|
||||
"87": "border-top-left-radius",
|
||||
"88": "border-top-right-radius",
|
||||
"89": "border-top-style",
|
||||
"90": "border-top-width",
|
||||
"91": "bottom",
|
||||
"92": "box-shadow",
|
||||
"93": "box-sizing",
|
||||
"94": "clear",
|
||||
"95": "clip",
|
||||
"96": "clip-path",
|
||||
"97": "column-count",
|
||||
"98": "column-gap",
|
||||
"99": "column-span",
|
||||
"100": "column-width",
|
||||
"101": "content",
|
||||
"102": "content-visibility",
|
||||
"103": "counter-increment",
|
||||
"104": "counter-reset",
|
||||
"105": "counter-set",
|
||||
"106": "cx",
|
||||
"107": "cy",
|
||||
"108": "display",
|
||||
"109": "filter",
|
||||
"110": "flex-basis",
|
||||
"111": "flex-direction",
|
||||
"112": "flex-grow",
|
||||
"113": "flex-shrink",
|
||||
"114": "flex-wrap",
|
||||
"115": "float",
|
||||
"116": "grid-auto-columns",
|
||||
"117": "grid-auto-flow",
|
||||
"118": "grid-auto-rows",
|
||||
"119": "grid-column-end",
|
||||
"120": "grid-column-start",
|
||||
"121": "grid-row-end",
|
||||
"122": "grid-row-start",
|
||||
"123": "grid-template-areas",
|
||||
"124": "grid-template-columns",
|
||||
"125": "grid-template-rows",
|
||||
"126": "height",
|
||||
"127": "inline-size",
|
||||
"128": "inset-block-end",
|
||||
"129": "inset-block-start",
|
||||
"130": "inset-inline-end",
|
||||
"131": "inset-inline-start",
|
||||
"132": "justify-content",
|
||||
"133": "justify-items",
|
||||
"134": "justify-self",
|
||||
"135": "left",
|
||||
"136": "margin-block-end",
|
||||
"137": "margin-block-start",
|
||||
"138": "margin-bottom",
|
||||
"139": "margin-inline-end",
|
||||
"140": "margin-inline-start",
|
||||
"141": "margin-left",
|
||||
"142": "margin-right",
|
||||
"143": "margin-top",
|
||||
"144": "mask",
|
||||
"145": "mask-type",
|
||||
"146": "max-height",
|
||||
"147": "max-inline-size",
|
||||
"148": "max-width",
|
||||
"149": "min-height",
|
||||
"150": "min-inline-size",
|
||||
"151": "min-width",
|
||||
"152": "object-fit",
|
||||
"153": "object-position",
|
||||
"154": "opacity",
|
||||
"155": "order",
|
||||
"156": "outline-color",
|
||||
"157": "outline-offset",
|
||||
"158": "outline-style",
|
||||
"159": "outline-width",
|
||||
"160": "overflow-x",
|
||||
"161": "overflow-y",
|
||||
"162": "padding-block-end",
|
||||
"163": "padding-block-start",
|
||||
"164": "padding-bottom",
|
||||
"165": "padding-inline-end",
|
||||
"166": "padding-inline-start",
|
||||
"167": "padding-left",
|
||||
"168": "padding-right",
|
||||
"169": "padding-top",
|
||||
"170": "position",
|
||||
"171": "r",
|
||||
"172": "right",
|
||||
"173": "rotate",
|
||||
"174": "row-gap",
|
||||
"175": "rx",
|
||||
"176": "ry",
|
||||
"177": "scrollbar-gutter",
|
||||
"178": "scrollbar-width",
|
||||
"179": "stop-color",
|
||||
"180": "stop-opacity",
|
||||
"181": "table-layout",
|
||||
"182": "text-decoration-color",
|
||||
"183": "text-decoration-style",
|
||||
"184": "text-decoration-thickness",
|
||||
"185": "text-overflow",
|
||||
"186": "top",
|
||||
"187": "transform",
|
||||
"188": "transform-box",
|
||||
"189": "transform-origin",
|
||||
"190": "transition-delay",
|
||||
"191": "transition-duration",
|
||||
"192": "transition-property",
|
||||
"193": "transition-timing-function",
|
||||
"194": "unicode-bidi",
|
||||
"195": "user-select",
|
||||
"196": "vertical-align",
|
||||
"197": "width",
|
||||
"198": "x",
|
||||
"199": "y",
|
||||
"200": "z-index"
|
||||
}
|
||||
All properties associated with document.body.style by default:
|
||||
{}
|
||||
All properties associated with document.body.style after setting some properties:
|
||||
{
|
||||
"0": "display",
|
||||
"1": "background-color",
|
||||
"2": "font-size"
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<script src="../include.js"></script>
|
||||
<script>
|
||||
test(() => {
|
||||
const bodyStyleDeclaration = getComputedStyle(document.body);
|
||||
|
||||
const serializedBodyComputedStyle = JSON.stringify(bodyStyleDeclaration, null, 4);
|
||||
println("All properties associated with getComputedStyle(document.body):");
|
||||
println(serializedBodyComputedStyle);
|
||||
|
||||
const serializedBodyElementStyle = JSON.stringify(document.body.style, null, 4);
|
||||
println("All properties associated with document.body.style by default:");
|
||||
println(serializedBodyElementStyle);
|
||||
|
||||
document.body.style.display = "none";
|
||||
document.body.style.backgroundColor = "red";
|
||||
document.body.style.fontSize = "15px";
|
||||
|
||||
const serializedBodyElementStyleWithSetProperties = JSON.stringify(document.body.style, null, 4);
|
||||
println("All properties associated with document.body.style after setting some properties:");
|
||||
println(serializedBodyElementStyleWithSetProperties);
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in a new issue