diff options
| author | Andreas Kling <kling@serenityos.org> | 2023-05-17 17:05:36 +0200 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-05-17 20:37:29 +0200 |
| commit | fb722e69f35cfa7639b971677d4031ae320959d5 (patch) | |
| tree | fcb61b2844b134a7033430e95fc85262ede328be /Tests | |
| parent | 6970f1b6c15073e2386362a817b8c7bf25a73827 (diff) | |
| download | serenity-fb722e69f35cfa7639b971677d4031ae320959d5.zip | |
LibWeb: Resolve CSS custom properties on pseudo elements
The resolved property sets are stored with the element in a
per-pseudo-element array (same as for pseudo element layout nodes).
Longer term, we should stop storing this with elements entirely and make
it temporary state in StyleComputer somehow, so we don't waste memory
keeping all the resolved properties around.
This makes various gradients show up on https://shopify.com/ :^)
Diffstat (limited to 'Tests')
4 files changed, 116 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/expected/pseudo-element-with-custom-properties-2.txt b/Tests/LibWeb/Layout/expected/pseudo-element-with-custom-properties-2.txt new file mode 100644 index 0000000000..6e145c759e --- /dev/null +++ b/Tests/LibWeb/Layout/expected/pseudo-element-with-custom-properties-2.txt @@ -0,0 +1,60 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (0,0) content-size 800x470.195312 [BFC] children: not-inline + BlockContainer <body> at (8,8) content-size 784x454.195312 children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 784x21.835937 children: inline + line 0 width: 391.640625, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + frag 0 from TextNode start: 0, length: 40, rect: [8,8 391.640625x21.835937] + "Variable set by inline style of element:" + TextNode <#text> + BreakNode <br> + TextNode <#text> + BlockContainer <div.a> at (8,29.835937) content-size 784x100 children: inline + line 0 width: 200, height: 100, bottom: 100, baseline: 16.914062 + frag 0 from BlockContainer start: 0, length: 0, rect: [8,29.835937 200x100] + BlockContainer <(anonymous)> at (8,29.835937) content-size 200x100 inline-block [BFC] children: inline + line 0 width: 0, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + frag 0 from TextNode start: 0, length: 0, rect: [8,29.835937 0x21.835937] + "" + TextNode <#text> + BlockContainer <(anonymous)> at (8,129.835937) content-size 784x66.179687 children: inline + line 0 width: 0, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + line 1 width: 0, height: 21.835937, bottom: 43.671875, baseline: 16.914062 + line 2 width: 441.269531, height: 22.507812, bottom: 66.179687, baseline: 16.914062 + frag 0 from TextNode start: 1, length: 42, rect: [8,172.835937 441.269531x21.835937] + "Variable set by CSS rule matching element:" + TextNode <#text> + BreakNode <br> + BreakNode <br> + TextNode <#text> + BreakNode <br> + TextNode <#text> + BlockContainer <div.b> at (8,196.015625) content-size 784x100 children: inline + line 0 width: 200, height: 100, bottom: 100, baseline: 16.914062 + frag 0 from BlockContainer start: 0, length: 0, rect: [8,196.015625 200x100] + BlockContainer <(anonymous)> at (8,196.015625) content-size 200x100 inline-block [BFC] children: inline + line 0 width: 0, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + frag 0 from TextNode start: 0, length: 0, rect: [8,196.015625 0x21.835937] + "" + TextNode <#text> + BlockContainer <(anonymous)> at (8,296.015625) content-size 784x66.179687 children: inline + line 0 width: 0, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + line 1 width: 0, height: 21.835937, bottom: 43.671875, baseline: 16.914062 + line 2 width: 520.605468, height: 22.507812, bottom: 66.179687, baseline: 16.914062 + frag 0 from TextNode start: 1, length: 49, rect: [8,339.015625 520.605468x21.835937] + "Variable set by CSS rule matching pseudo element:" + TextNode <#text> + BreakNode <br> + BreakNode <br> + TextNode <#text> + BreakNode <br> + TextNode <#text> + BlockContainer <div.c> at (8,362.195312) content-size 784x100 children: inline + line 0 width: 200, height: 100, bottom: 100, baseline: 16.914062 + frag 0 from BlockContainer start: 0, length: 0, rect: [8,362.195312 200x100] + BlockContainer <(anonymous)> at (8,362.195312) content-size 200x100 inline-block [BFC] children: inline + line 0 width: 0, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + frag 0 from TextNode start: 0, length: 0, rect: [8,362.195312 0x21.835937] + "" + TextNode <#text> + BlockContainer <(anonymous)> at (8,462.195312) content-size 784x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/expected/pseudo-element-with-custom-properties.txt b/Tests/LibWeb/Layout/expected/pseudo-element-with-custom-properties.txt new file mode 100644 index 0000000000..64f4b3fc9d --- /dev/null +++ b/Tests/LibWeb/Layout/expected/pseudo-element-with-custom-properties.txt @@ -0,0 +1,9 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (0,0) content-size 800x16 [BFC] children: not-inline + BlockContainer <body> at (8,8) content-size 784x0 children: not-inline + BlockContainer <div.hello> at (8,8) content-size 784x0 children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 500x100 positioned [BFC] children: inline + line 0 width: 0, height: 21.835937, bottom: 21.835937, baseline: 16.914062 + frag 0 from TextNode start: 0, length: 0, rect: [8,8 0x21.835937] + "" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties-2.html b/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties-2.html new file mode 100644 index 0000000000..d896a851d8 --- /dev/null +++ b/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties-2.html @@ -0,0 +1,32 @@ +<!DOCTYPE html><style> +* { + font: 20px SerenitySans; +} +:root { + --bg: red; + --width: 100px; +} +div::before { + display: inline-block; + height: 100px; + content: ""; + background: var(--bg); + width: var(--width); +} +.b { + --bg: green; + --width: 200px; +} +.c::before { + --bg: green; + --width: 200px; +} +</style> +Variable set by inline style of element:<br> +<div class="a" style="--bg: green; --width: 200px;"></div> +<br><br> +Variable set by CSS rule matching element:<br> +<div class="b"></div> +<br><br> +Variable set by CSS rule matching pseudo element:<br> +<div class="c"></div> diff --git a/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties.html b/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties.html new file mode 100644 index 0000000000..7114a04e1b --- /dev/null +++ b/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties.html @@ -0,0 +1,15 @@ +<!DOCTYPE html><style> +* { + font: 20px SerenitySans; +} +.hello::before { + position: absolute; + height: 100px; + width: 100px; + --wide: 500px; + width: var(--wide); + --bg: orange; + background: var(--bg); + content: ""; +} +</style><div class="hello">
\ No newline at end of file |