LibWeb: Handle weird inheritance of text-decoration-line
text-decoration-line seems to be the only property that is neither inherited nor not inherited:
Below is an attempt at a test (save as foo.patch and run git am foo.patch, or just copy/paste the text):
- The test below produces "correctly" painted pixels in Firefox, Chrome, and Chromium, as in: I think I understand why each testcase is supposed to be underlined or not underlined.
- I don't understand
getComputedStyle(), because Firefox/Chrome/Chromium all return the same JS strings, but they don't match the display. I.e. a plain<a href="x"><span id="thisone">somehow returnsnone, even though it is clearly underlined. Huh? - It has to be like that in the first place, because that property does not affect layout, and therefore cannot be part of the Layout tests.
- I'm not sure where to implement it properly. My best guess is to abuse
StyleComputer::compute_defaulted_property_value, but I don't understand how to check for box tree borders from there.
I'd be happy if someone could help me a bit, I'm a total newbie to this part of the codebase :^)
Patch for a LibWeb Text test
From 0bd9342a13c47ef9ab0bc0606a91d8cb3ce047b8 Mon Sep 17 00:00:00 2001
From: Ben Wiederhake <[email protected]>
Date: Tue, 30 May 2023 20:47:44 +0200
Subject: [PATCH] LibWeb: Test that text-decoration-line is propagated by
inheritance
---
...ion-line-uses-box-tree-not-inheritance.txt | 22 +++++++++++++
...on-line-uses-box-tree-not-inheritance.html | 32 +++++++++++++++++++
2 files changed, 54 insertions(+)
create mode 100644 Tests/LibWeb/Text/expected/css/text-decoration-line-uses-box-tree-not-inheritance.txt
create mode 100644 Tests/LibWeb/Text/input/css/text-decoration-line-uses-box-tree-not-inheritance.html
diff --git a/Tests/LibWeb/Text/expected/css/text-decoration-line-uses-box-tree-not-inheritance.txt b/Tests/LibWeb/Text/expected/css/text-decoration-line-uses-box-tree-not-inheritance.txt
new file mode 100644
index 0000000000..6f30221ab8
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/css/text-decoration-line-uses-box-tree-not-inheritance.txt
@@ -0,0 +1,22 @@
+ u
+ u
+ u
+ u
+ u
+ u
+ n
+ n
+ n
+ n
+ o
+ underline
+underline
+underline
+underline
+underline
+underline
+none
+none
+none
+none
+overline
diff --git a/Tests/LibWeb/Text/input/css/text-decoration-line-uses-box-tree-not-inheritance.html b/Tests/LibWeb/Text/input/css/text-decoration-line-uses-box-tree-not-inheritance.html
new file mode 100644
index 0000000000..c48226c471
--- /dev/null
+++ b/Tests/LibWeb/Text/input/css/text-decoration-line-uses-box-tree-not-inheritance.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html><html><body><script src="../include.js"></script>
+<!-- Underline by default: -->
+<a style="" href="x"><span id="inner0" style="">u</span></a><br>
+<!-- Can still be underlined explicitly: -->
+<a style="" href="x"><span id="inner1" style="position:absolute;text-decoration-line:underline;">u</span></a><br>
+<!-- Still can be underlined: -->
+<a style="display:contents;" href="x"><span id="inner2" style="position:absolute;text-decoration-line:underline;">u</span></a><br>
+<!-- A different display doesn't cause a disconnect: -->
+<a style="display:block;" href="x"><span id="inner3" style="">u</span></a><br>
+<a style="display:flex;" href="x"><span id="inner4" style="">u</span></a><br>
+<!-- "position:relative" doesn't create a new box: -->
+<a style="" href="x"><span id="inner5" style="position:relative">u</span></a><br>
+<!-- position:absolute creates a new box: -->
+<a style="" href="x"><span id="inner6" style="position:absolute;">n</span></a><br>
+<!-- The spec also explicitly mentions display:contents: -->
+<a style="display:contents;" href="x"><span id="inner7" style="">n</span></a><br>
+<!-- Two reasons to be in a different box still means a different box: -->
+<a style="display:contents;" href="x"><span id="inner8" style="position:absolute;">n</span></a><br>
+<!-- "position:fixed" also forces a new box: -->
+<a style="" href="x"><span id="inner9" style="position:fixed">n</span></a><br>
+<!-- Or overline it: -->
+<a style="" href="x"><span id="inner10" style="position:absolute;text-decoration-line:overline;">o</span></a><br>
+<!-- Also update loop count! -->
+<!-- FIXME: Also test pseudo-elements! -->
+<script>
+ test(() => {
+ for (let i = 0; i < 11; ++i) {
+ const elem = document.getElementById(`inner${i}`);
+ println(getComputedStyle(elem)["text-decoration-line"]);
+ }
+ });
+</script>
--
2.39.2Screenshot of the text test:
SerenityOS / serenity
The Serenity Operating System 🐞
30.6k
Contributors get 100% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too