Skip to content

Commit b6ea721

Browse files
Ahmad-S792Ahmad Saleem
Ahmad-S792
authored and
Ahmad Saleem
committed
Fix :placeholder-shown to match elements with empty placeholder attributes
https://bugs.webkit.org/show_bug.cgi?id=311002 rdar://173604635 Reviewed by Ryosuke Niwa and Tim Nguyen. This patch aligns WebKit with Gecko / Firefox and Blink / Chromium. Per the HTML spec [1], :placeholder-shown must match elements that have a placeholder attribute "whose value is currently being presented to the user." An empty placeholder attribute still has a value (the empty string) that is being presented. WebKit was incorrectly requiring non-empty placeholder text. Remove isPlaceholderEmpty() and check attribute presence instead. Update TextFieldInputType and HTMLTextAreaElement to preserve the placeholder shadow DOM element when the attribute is present but empty. [1] https://html.spec.whatwg.org/#selector-placeholder-shown * Source/WebCore/html/HTMLTextAreaElement.cpp: (WebCore::HTMLTextAreaElement::updatePlaceholderText): * Source/WebCore/html/HTMLTextFormControlElement.cpp: (WebCore::HTMLTextFormControlElement::placeholderShouldBeVisible const): (WebCore::isNotLineBreak): Deleted. (WebCore::HTMLTextFormControlElement::isPlaceholderEmpty const): Deleted. * Source/WebCore/html/HTMLTextFormControlElement.h: * Source/WebCore/html/TextFieldInputType.cpp: (WebCore::TextFieldInputType::updatePlaceholderText): * LayoutTests/imported/w3c/web-platform-tests/css/selectors/invalidation/placeholder-shown-expected.txt: Progression * LayoutTests/imported/w3c/web-platform-tests/css/selectors/placeholder-shown-expected.txt: Ditto Add more tests below: Merge: https://chromium.googlesource.com/chromium/src/+/c9a2ede805faf4305954df116f4b9cfdde1dc5d1 * LayoutTests/fast/css/placeholder-shown-basics-expected.html: * LayoutTests/fast/css/placeholder-shown-basics.html: Update below: Merge: https://chromium.googlesource.com/chromium/src/+/42a6faa36ca322b47d02bfce5c05684054141b48 * LayoutTests/fast/css/placeholder-shown-basics-expected.html: * LayoutTests/fast/selectors/placeholder-shown-style-update-expected.txt: * LayoutTests/fast/selectors/placeholder-shown-style-update.html: * LayoutTests/fast/selectors/placeholder-shown-with-input-basics-expected.txt: * LayoutTests/fast/selectors/placeholder-shown-with-input-basics.html: * LayoutTests/fast/selectors/placeholder-shown-with-textarea-basics-expected.txt: * LayoutTests/fast/selectors/placeholder-shown-with-textarea-basics.html: Canonical link: https://commits.webkit.org/310781@main
1 parent 20be166 commit b6ea721

14 files changed

Lines changed: 426 additions & 393 deletions

‎LayoutTests/fast/css/placeholder-shown-basics-expected.html‎

Lines changed: 153 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,154 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<style>
5-
input, textarea {
6-
height: 8px;
7-
}
8-
.placeholder-shown {
9-
background-color: green;
10-
}
11-
</style>
12-
</head>
13-
<body>
14-
<p>This test checks how various input elements are styled when :placeholder-shown is applied.</p>
15-
<div>
16-
<textarea></textarea>
17-
<textarea placeholder></textarea>
18-
<textarea placeholder="WebKit" class="placeholder-shown"></textarea>
19-
<textarea placeholder="WebKit">Foobar</textarea>
20-
</div>
21-
<div>
22-
<input>
23-
<input placeholder>
24-
<input placeholder="WebKit" class="placeholder-shown">
25-
<input placeholder="WebKit" value="Foobar">
26-
</div>
27-
<div>
28-
<input type="">
29-
<input type="" placeholder>
30-
<input type="" placeholder="WebKit" class="placeholder-shown">
31-
<input type="" placeholder="WebKit" value="Foobar">
32-
</div>
33-
<div>
34-
<input type="hidden">
35-
<input type="hidden" placeholder>
36-
<input type="hidden" placeholder="WebKit" class="placeholder-shown">
37-
<input type="hidden" placeholder="WebKit" value="Foobar">
38-
</div>
39-
<div>
40-
<input type="text">
41-
<input type="text" placeholder>
42-
<input type="text" placeholder="WebKit" class="placeholder-shown">
43-
<input type="text" placeholder="WebKit" value="Foobar">
44-
</div>
45-
<div>
46-
<input type="tel">
47-
<input type="tel" placeholder>
48-
<input type="tel" placeholder="WebKit" class="placeholder-shown">
49-
<input type="tel" placeholder="WebKit" value="Foobar">
50-
</div>
51-
<div>
52-
<input type="url">
53-
<input type="url" placeholder>
54-
<input type="url" placeholder="WebKit" class="placeholder-shown">
55-
<input type="url" placeholder="WebKit" value="Foobar">
56-
</div>
57-
<div>
58-
<input type="email">
59-
<input type="email" placeholder>
60-
<input type="email" placeholder="WebKit" class="placeholder-shown">
61-
<input type="email" placeholder="WebKit" value="Foobar">
62-
</div>
63-
<div>
64-
<input type="password">
65-
<input type="password" placeholder>
66-
<input type="password" placeholder="WebKit" class="placeholder-shown">
67-
<input type="password" placeholder="WebKit" value="Foobar">
68-
</div>
69-
<div>
70-
<input type="datetime">
71-
<input type="datetime" placeholder>
72-
<input type="datetime" placeholder="WebKit" class="placeholder-shown">
73-
<input type="datetime" placeholder="WebKit" value="Foobar">
74-
</div>
75-
<div>
76-
<input type="number">
77-
<input type="number" placeholder>
78-
<input type="number" placeholder="WebKit" class="placeholder-shown">
79-
<input type="number" placeholder="WebKit" value="0">
80-
</div>
81-
<div>
82-
<input type="range">
83-
<input type="range" placeholder>
84-
<input type="range" placeholder="WebKit">
85-
<input type="range" placeholder="WebKit" value="1">
86-
</div>
87-
<div>
88-
<input type="checkbox">
89-
<input type="checkbox" placeholder>
90-
<input type="checkbox" placeholder="WebKit">
91-
<input type="checkbox" placeholder="WebKit" value="Foobar">
92-
</div>
93-
<div>
94-
<input type="radio">
95-
<input type="radio" placeholder>
96-
<input type="radio" placeholder="WebKit">
97-
<input type="radio" placeholder="WebKit" value="Foobar">
98-
</div>
99-
<div>
100-
<input type="submit">
101-
<input type="submit" placeholder>
102-
<input type="submit" placeholder="WebKit">
103-
<input type="submit" placeholder="WebKit" value="Foobar">
104-
</div>
105-
</body>
106-
</html>
2+
<style>
3+
input, textarea {
4+
height: 8px;
5+
}
6+
.placeholder-shown {
7+
background-color: green;
8+
}
9+
</style>
10+
<p>This test checks how various input elements are styled when :placeholder-shown is applied.</p>
11+
<div>
12+
<textarea></textarea>
13+
<textarea placeholder class="placeholder-shown"></textarea>
14+
<textarea placeholder="Placeholder text" class="placeholder-shown"></textarea>
15+
<textarea placeholder="Placeholder text">Foobar</textarea>
16+
</div>
17+
<div>
18+
<input>
19+
<input placeholder class="placeholder-shown">
20+
<input placeholder="Placeholder text" class="placeholder-shown">
21+
<input placeholder="Placeholder text" value="Foobar">
22+
</div>
23+
<div>
24+
<input type="">
25+
<input type="" placeholder class="placeholder-shown">
26+
<input type="" placeholder="Placeholder text" class="placeholder-shown">
27+
<input type="" placeholder="Placeholder text" value="Foobar">
28+
</div>
29+
<div>
30+
<input type="hidden">
31+
<input type="hidden" placeholder>
32+
<input type="hidden" placeholder="Placeholder text">
33+
<input type="hidden" placeholder="Placeholder text" value="Foobar">
34+
</div>
35+
<div>
36+
<input type="text">
37+
<input type="text" placeholder class="placeholder-shown">
38+
<input type="text" placeholder="Placeholder text" class="placeholder-shown">
39+
<input type="text" placeholder="Placeholder text" value="Foobar">
40+
</div>
41+
<div>
42+
<input type="tel">
43+
<input type="tel" placeholder class="placeholder-shown">
44+
<input type="tel" placeholder="Placeholder text" class="placeholder-shown">
45+
<input type="tel" placeholder="Placeholder text" value="Foobar">
46+
</div>
47+
<div>
48+
<input type="url">
49+
<input type="url" placeholder class="placeholder-shown">
50+
<input type="url" placeholder="Placeholder text" class="placeholder-shown">
51+
<input type="url" placeholder="Placeholder text" value="Foobar">
52+
</div>
53+
<div>
54+
<input type="email">
55+
<input type="email" placeholder class="placeholder-shown">
56+
<input type="email" placeholder="Placeholder text" class="placeholder-shown">
57+
<input type="email" placeholder="Placeholder text" value="Foobar">
58+
</div>
59+
<div>
60+
<input type="password">
61+
<input type="password" placeholder class="placeholder-shown">
62+
<input type="password" placeholder="Placeholder text" class="placeholder-shown">
63+
<input type="password" placeholder="Placeholder text" value="Foobar">
64+
</div>
65+
<div>
66+
<input type="search">
67+
<input type="search" placeholder class="placeholder-shown">
68+
<input type="search" placeholder="Placeholder text" class="placeholder-shown">
69+
<input type="search" placeholder="Placeholder text" value="Foobar">
70+
</div>
71+
<div>
72+
<input type="date">
73+
<input type="date" placeholder>
74+
<input type="date" placeholder="Placeholder text">
75+
<input type="date" placeholder="Placeholder text" value="Foobar">
76+
</div>
77+
<div>
78+
<input type="month">
79+
<input type="month" placeholder>
80+
<input type="month" placeholder="Placeholder text">
81+
<input type="month" placeholder="Placeholder text" value="Foobar">
82+
</div>
83+
<div>
84+
<input type="week">
85+
<input type="week" placeholder>
86+
<input type="week" placeholder="Placeholder text">
87+
<input type="week" placeholder="Placeholder text" value="Foobar">
88+
</div>
89+
<div>
90+
<input type="time">
91+
<input type="time" placeholder>
92+
<input type="time" placeholder="Placeholder text">
93+
<input type="time" placeholder="Placeholder text" value="Foobar">
94+
</div>
95+
<div>
96+
<input type="datetime-local">
97+
<input type="datetime-local" placeholder>
98+
<input type="datetime-local" placeholder="Placeholder text">
99+
<input type="datetime-local" placeholder="Placeholder text" value="Foobar">
100+
</div>
101+
<div>
102+
<input type="number">
103+
<input type="number" placeholder class="placeholder-shown">
104+
<input type="number" placeholder="Placeholder text" class="placeholder-shown">
105+
<input type="number" placeholder="Placeholder text" value="0">
106+
</div>
107+
<div>
108+
<input type="range">
109+
<input type="range" placeholder>
110+
<input type="range" placeholder="Placeholder text">
111+
<input type="range" placeholder="Placeholder text" value="1">
112+
</div>
113+
<div>
114+
<input type="checkbox">
115+
<input type="checkbox" placeholder>
116+
<input type="checkbox" placeholder="Placeholder text">
117+
<input type="checkbox" placeholder="Placeholder text" value="Foobar">
118+
</div>
119+
<div>
120+
<input type="radio">
121+
<input type="radio" placeholder>
122+
<input type="radio" placeholder="Placeholder text">
123+
<input type="radio" placeholder="Placeholder text" value="Foobar">
124+
</div>
125+
<div>
126+
<input type="file">
127+
<input type="file" placeholder>
128+
<input type="file" placeholder="Placeholder text">
129+
<input type="file" placeholder="Placeholder text" value="Foobar">
130+
</div>
131+
<div>
132+
<input type="submit">
133+
<input type="submit" placeholder>
134+
<input type="submit" placeholder="Placeholder text">
135+
<input type="submit" placeholder="Placeholder text" value="Foobar">
136+
</div>
137+
<div>
138+
<input type="image">
139+
<input type="image" placeholder>
140+
<input type="image" placeholder="Placeholder text">
141+
<input type="image" placeholder="Placeholder text" value="Foobar">
142+
</div>
143+
<div>
144+
<input type="reset">
145+
<input type="reset" placeholder>
146+
<input type="reset" placeholder="Placeholder text">
147+
<input type="reset" placeholder="Placeholder text" value="Foobar">
148+
</div>
149+
<div>
150+
<input type="color">
151+
<input type="color" placeholder>
152+
<input type="color" placeholder="Placeholder text">
153+
<input type="color" placeholder="Placeholder text" value="Foobar">
154+
</div>

0 commit comments

Comments
 (0)