mirror of
https://github.com/servo/servo.git
synced 2025-08-01 11:40:30 +01:00
dom: Textual Input UA Shadow Dom (#37527)
Depend on: - https://github.com/servo/servo/pull/37427 - https://github.com/servo/servo/pull/37483 Utilize input `type=text` for the display of all textual input. In which, consist of https://html.spec.whatwg.org/#the-input-element-as-a-text-entry-widget and https://html.spec.whatwg.org/#the-input-element-as-domain-specific-widgets inputs. For `password`, `url`, `tel`, and, `email` input, the appearance of input container is exactly the same as the `text` input. Other types of textual input simply extends `text` input by adding extra components inside the container. Testing: Servo textual input appearance WPT. --------- Signed-off-by: stevennovaryo <steven.novaryo@gmail.com> Signed-off-by: Jo Steven Novaryo <jo.steven.novaryo@huawei.com>
This commit is contained in:
Jo Steven Novaryo
GitHub
parent
1d896699a4
commit
6cd8578f8b
36 changed files with 546 additions and 279 deletions
4
tests/wpt/meta/MANIFEST.json
vendored
4
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -357056,7 +357056,7 @@
|
|||
"input-date-content-size.html": [
|
||||
"d026771f3c89c736b397db6a10c15fde5d73a3a8",
|
||||
[
|
||||
null,
|
||||
"html/rendering/widgets/input-date-content-size.html",
|
||||
[
|
||||
[
|
||||
"/html/rendering/widgets/input-date-content-size-ref.html",
|
||||
|
|
@ -357147,7 +357147,7 @@
|
|||
"input-time-content-size.html": [
|
||||
"4a378f6923a8910b96f8afa84125a8fbac4a5d05",
|
||||
[
|
||||
null,
|
||||
"html/rendering/widgets/input-time-content-size.html",
|
||||
[
|
||||
[
|
||||
"/html/rendering/widgets/input-time-content-size-ref.html",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
[number-placeholder-right-aligned.html]
|
||||
expected: FAIL
|
||||
|
|
@ -13,3 +13,6 @@
|
|||
|
||||
[number: Update field-sizing property dynamically]
|
||||
expected: FAIL
|
||||
|
||||
[number: Text caret is taller than the placeholder]
|
||||
expected: FAIL
|
||||
|
|
|
|||
2
tests/wpt/meta/html/rendering/widgets/input-date-content-size.html.ini
vendored
Normal file
2
tests/wpt/meta/html/rendering/widgets/input-date-content-size.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
[input-date-content-size.html]
|
||||
expected: FAIL
|
||||
2
tests/wpt/meta/html/rendering/widgets/input-number-text-size.tentative.html.ini
vendored
Normal file
2
tests/wpt/meta/html/rendering/widgets/input-number-text-size.tentative.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
[input-number-text-size.tentative.html]
|
||||
expected: FAIL
|
||||
2
tests/wpt/meta/html/rendering/widgets/input-time-content-size.html.ini
vendored
Normal file
2
tests/wpt/meta/html/rendering/widgets/input-time-content-size.html.ini
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
[input-time-content-size.html]
|
||||
expected: FAIL
|
||||
76
tests/wpt/mozilla/meta/MANIFEST.json
vendored
76
tests/wpt/mozilla/meta/MANIFEST.json
vendored
|
|
@ -92,78 +92,78 @@
|
|||
},
|
||||
"reftest": {
|
||||
"appearance": {
|
||||
"input-text-definite-width.html": [
|
||||
"fda46f8af9c14cef3911ec809054624204848b9d",
|
||||
"input-textual-definite-width.html": [
|
||||
"59f1797fab3d1889bbcb7863178c6c5ef9e54f19",
|
||||
[
|
||||
"appearance/input-text-definite-width.html",
|
||||
"appearance/input-textual-definite-width.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/appearance/input-text-definite-width-ref.html",
|
||||
"/_mozilla/appearance/input-textual-definite-width-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"input-text-empty.html": [
|
||||
"bd5f5f5a21ec0ce028922a6764de41dc904a1eb1",
|
||||
"input-textual-empty.html": [
|
||||
"c85214b6c681b657a30a06b44670c796cdaeda11",
|
||||
[
|
||||
"appearance/input-text-empty.html",
|
||||
"appearance/input-textual-empty.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/appearance/input-text-empty-ref.html",
|
||||
"/_mozilla/appearance/input-textual-empty-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"input-text-nonempty-placeholder.html": [
|
||||
"e075663cb6ae708b313b3cd5cd69f78c51b4bc1f",
|
||||
"input-textual-nonempty-placeholder.html": [
|
||||
"83670d37e310954e6d3a69114577ff92b4126a98",
|
||||
[
|
||||
"appearance/input-text-nonempty-placeholder.html",
|
||||
"appearance/input-textual-nonempty-placeholder.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/appearance/input-text-nonempty-placeholder-ref.html",
|
||||
"/_mozilla/appearance/input-textual-nonempty-placeholder-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"input-text-overflow.html": [
|
||||
"52db07c0f0274d2b7b086d7017982145c25918da",
|
||||
"input-textual-overflow.html": [
|
||||
"ad1f0aa70285e227153f7d05983b2ef9caa798f9",
|
||||
[
|
||||
"appearance/input-text-overflow.html",
|
||||
"appearance/input-textual-overflow.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/appearance/input-text-overflow-ref.html",
|
||||
"/_mozilla/appearance/input-textual-overflow-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"input-text-placeholder-overflow.html": [
|
||||
"c4d77ae2a22a5b7972f2798b8ca78742b81bacc4",
|
||||
"input-textual-placeholder-overflow.html": [
|
||||
"9bc84f26b8c1ae0718085ddb069889cca2e0322a",
|
||||
[
|
||||
"appearance/input-text-placeholder-overflow.html",
|
||||
"appearance/input-textual-placeholder-overflow.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/appearance/input-text-placeholder-overflow-ref.html",
|
||||
"/_mozilla/appearance/input-textual-placeholder-overflow-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"input-text-placeholder.html": [
|
||||
"d75acade78038b14529135b1d63c0ac5a168a87b",
|
||||
"input-textual-placeholder.html": [
|
||||
"68287721ce67ecece6e746b44fd3fd1d92763085",
|
||||
[
|
||||
"appearance/input-text-placeholder.html",
|
||||
"appearance/input-textual-placeholder.html",
|
||||
[
|
||||
[
|
||||
"/_mozilla/appearance/input-text-placeholder-ref.html",
|
||||
"/_mozilla/appearance/input-textual-placeholder-ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
|
|
@ -8130,33 +8130,33 @@
|
|||
[]
|
||||
],
|
||||
"appearance": {
|
||||
"input-text-definite-width-ref.html": [
|
||||
"86f7937755750261ed3b06dfe11e78a251b9d175",
|
||||
"input-textual-definite-width-ref.html": [
|
||||
"7a256be23b3c084bb8477d7380a8b1801ec07f05",
|
||||
[]
|
||||
],
|
||||
"input-text-empty-ref.html": [
|
||||
"437c9988a13e094d870f67c8de0dd0becdeece76",
|
||||
"input-textual-empty-ref.html": [
|
||||
"6cbaa3e40e5a7fa6ea96710f126d6e6d4d4d633e",
|
||||
[]
|
||||
],
|
||||
"input-text-nonempty-placeholder-ref.html": [
|
||||
"5415dfb2a4a88dc3bfed6ad04e23f288534351e4",
|
||||
"input-textual-nonempty-placeholder-ref.html": [
|
||||
"7a256be23b3c084bb8477d7380a8b1801ec07f05",
|
||||
[]
|
||||
],
|
||||
"input-text-overflow-ref.html": [
|
||||
"4cece657a2a09cfe3f1d91d49f0c9d76f5714516",
|
||||
"input-textual-overflow-ref.html": [
|
||||
"f8e22c9d11dc68dd244a3fc5b8f5946a707a2660",
|
||||
[]
|
||||
],
|
||||
"input-text-placeholder-overflow-ref.html": [
|
||||
"0cccfff638c0d8687a3582310c73233b7d883b1a",
|
||||
"input-textual-placeholder-overflow-ref.html": [
|
||||
"ee297a94cacb3838375b94c3a546f288adb464f1",
|
||||
[]
|
||||
],
|
||||
"input-text-placeholder-ref.html": [
|
||||
"fa5b60bdabdf2b9b818ebe66bfc7f2711173b88b",
|
||||
"input-textual-placeholder-ref.html": [
|
||||
"d30f13a2a1bab16989ec585a57ba7b7bd0b1c329",
|
||||
[]
|
||||
],
|
||||
"supports": {
|
||||
"input-text-ref.css": [
|
||||
"8cf00d493138285e50aa510273abae98c099ae8b",
|
||||
"input-textual-ref.css": [
|
||||
"7cdabb05d5dd7eb39df521fcb5ce24e39fea840f",
|
||||
[]
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Input type=text With a Definite Width</title>
|
||||
<link rel="stylesheet" href="./supports/input-text-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Foo
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Input type=text With a Definite Width</title>
|
||||
<link rel="match" href="input-text-definite-width-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input type="text" value="Foo" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Empty Input type=text With a Definite Width</title>
|
||||
<link rel="stylesheet" href="./supports/input-text-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Empty Input type=text With a Definite Width</title>
|
||||
<link rel="match" href="input-text-empty-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input type="text" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of a Non-empty Input type=text With a Definite Width and a Placeholder</title>
|
||||
<link rel="stylesheet" href="./supports/input-text-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Foo
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of a Non-empty Input type=text With a Definite Width and a Placeholder</title>
|
||||
<link rel="match" href="input-text-nonempty-placeholder-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input type="text" value="Foo" placeholder="Bar" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Overflowing Input type=text With a Definite Width</title>
|
||||
<link rel="stylesheet" href="./supports/input-text-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Overflowing Input type=text With a Definite Width</title>
|
||||
<link rel="match" href="input-text-overflow-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input type="text" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Input type=text With a Definite Width and an Overflowing Placeholder</title>
|
||||
<link rel="stylesheet" href="./supports/input-text-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Input type=text With a Definite Width and an Overflowing Placeholder</title>
|
||||
<link rel="match" href="input-text-placeholder-overflow-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input type="text" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Input type=text With a Definite Width and a Placeholder</title>
|
||||
<link rel="stylesheet" href="./supports/input-text-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Bar
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Input type=text With a Definite Width and a Placeholder</title>
|
||||
<link rel="match" href="input-text-placeholder-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of an input type=text should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input type="text" placeholder="Bar" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
tests/wpt/mozilla/tests/appearance/input-textual-definite-width-ref.html
vendored
Normal file
36
tests/wpt/mozilla/tests/appearance/input-textual-definite-width-ref.html
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Textual Input With a Definite Width</title>
|
||||
<link rel="stylesheet" href="./supports/input-textual-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
●●●●●●●●
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Tel
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Url
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Email
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
tests/wpt/mozilla/tests/appearance/input-textual-definite-width.html
vendored
Normal file
26
tests/wpt/mozilla/tests/appearance/input-textual-definite-width.html
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Textual Input With a Definite Width</title>
|
||||
<link rel="match" href="input-textual-definite-width-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input type="text" value="Text" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="password" value="Password" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="tel" value="Tel" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="url" value="Url" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="email" value="Email" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
tests/wpt/mozilla/tests/appearance/input-textual-empty-ref.html
vendored
Normal file
36
tests/wpt/mozilla/tests/appearance/input-textual-empty-ref.html
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Textual Input With a Definite Width</title>
|
||||
<link rel="stylesheet" href="./supports/input-textual-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
tests/wpt/mozilla/tests/appearance/input-textual-empty.html
vendored
Normal file
26
tests/wpt/mozilla/tests/appearance/input-textual-empty.html
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Textual Input With a Definite Width</title>
|
||||
<link rel="match" href="input-textual-empty-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input type="text" value="" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="password" value="" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="tel" value="" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="url" value="" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="email" value="" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder-ref.html
vendored
Normal file
36
tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder-ref.html
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Textual Input With a Definite Width</title>
|
||||
<link rel="stylesheet" href="./supports/input-textual-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
●●●●●●●●
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Tel
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Url
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Email
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
26
tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder.html
vendored
Normal file
26
tests/wpt/mozilla/tests/appearance/input-textual-nonempty-placeholder.html
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of a Non-empty Textual Input With a Definite Width and a Placeholder</title>
|
||||
<link rel="match" href="input-textual-nonempty-placeholder-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input type="text" value="Text" placeholder="Placeholder" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="password" value="Password" placeholder="Placeholder" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="tel" value="Tel" placeholder="Placeholder" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="url" value="Url" placeholder="Placeholder" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="email" value="Email" placeholder="Placeholder" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
tests/wpt/mozilla/tests/appearance/input-textual-overflow-ref.html
vendored
Normal file
35
tests/wpt/mozilla/tests/appearance/input-textual-overflow-ref.html
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder</title>
|
||||
<link rel="stylesheet" href="./supports/input-textual-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Text Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Tel Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Url Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width">
|
||||
Email Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
46
tests/wpt/mozilla/tests/appearance/input-textual-overflow.html
vendored
Normal file
46
tests/wpt/mozilla/tests/appearance/input-textual-overflow.html
vendored
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder</title>
|
||||
<link rel="match" href="input-textual-overflow-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value="Text Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
style="font-size: 1em !important; width: 100px;">
|
||||
</input>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
value="Password Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
style="font-size: 1em !important; width: 100px;">
|
||||
</input>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="tel"
|
||||
value="Tel Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
style="font-size: 1em !important; width: 100px;">
|
||||
</input>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="url"
|
||||
value="Url Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
style="font-size: 1em !important; width: 100px;">
|
||||
</input>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="email"
|
||||
value="Email Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
style="font-size: 1em !important; width: 100px;">
|
||||
</input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow-ref.html
vendored
Normal file
35
tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow-ref.html
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder</title>
|
||||
<link rel="stylesheet" href="./supports/input-textual-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Text Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Password Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Tel Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Url Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Email Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
46
tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow.html
vendored
Normal file
46
tests/wpt/mozilla/tests/appearance/input-textual-placeholder-overflow.html
vendored
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Textual Input With a Definite Width and an Overflowing Placeholder</title>
|
||||
<link rel="match" href="input-textual-placeholder-overflow-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Text Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
style="font-size: 1em !important; width: 100px;">
|
||||
</input>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
style="font-size: 1em !important; width: 100px;">
|
||||
</input>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="tel"
|
||||
placeholder="Tel Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
style="font-size: 1em !important; width: 100px;">
|
||||
</input>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="url"
|
||||
placeholder="Url Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
style="font-size: 1em !important; width: 100px;">
|
||||
</input>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email Input: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
|
||||
style="font-size: 1em !important; width: 100px;">
|
||||
</input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
tests/wpt/mozilla/tests/appearance/input-textual-placeholder-ref.html
vendored
Normal file
35
tests/wpt/mozilla/tests/appearance/input-textual-placeholder-ref.html
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Textual Input With a Definite Width and a Placeholder</title>
|
||||
<link rel="stylesheet" href="./supports/input-textual-ref.css">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Text
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Password
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Tel
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Url
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id="input" class="definite-width placeholder-color">
|
||||
Email
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
26
tests/wpt/mozilla/tests/appearance/input-textual-placeholder.html
vendored
Normal file
26
tests/wpt/mozilla/tests/appearance/input-textual-placeholder.html
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Appearance of an Textual Input With a Definite Width and a Placeholder</title>
|
||||
<link rel="match" href="input-textual-placeholder-ref.html">
|
||||
<link rel="help" href="https://github.com/servo/servo/pull/37065">
|
||||
</head>
|
||||
<body>
|
||||
Display of the textual inputs should match the display generated by the CSS reference.
|
||||
<div>
|
||||
<input type="text" placeholder="Text" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="password" placeholder="Password" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="tel" placeholder="Tel" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="url" placeholder="Url" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
<div>
|
||||
<input type="email" placeholder="Email" style="font-size: 1em !important; width: 100px;"></input>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/* Minimal stylesheet to mimic the appearence of an input type=text specific to Servo.
|
||||
/* Minimal stylesheet to mimic the appearence of the textual inputs specific to Servo.
|
||||
* This stylesheet is expected to be modified following the development of the
|
||||
* Shadow DOM input type=text in Servo.
|
||||
* Shadow DOM textual inputs in Servo.
|
||||
*/
|
||||
|
||||
#input {
|
||||
Loading…
Add table
Add a link
Reference in a new issue