SerenityOS/serenity
在 GitHub 查看LibWeb: Handle weird inheritance of `text-decoration-line`
Open
#19,176 建立於 2023年5月31日
help wanted
描述
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 :^)
From 0bd9342a13c47ef9ab0bc0606a91d8cb3ce047b8 Mon Sep 17 00:00:00 2001
From: Ben Wiederhake <BenWiederhake.GitHub@gmx.de>
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.2
Screenshot of the text test: