This test verifies that setting an empty suggested value removes/resets the shadow placeholder value.
Input before setting suggested values:
| <input>
| id="test"
| type="text"
| value="initial value"
| this.value="initial value"
| <shadow:root>
| <div>
| "initial value"
| <br>
| "
"
| <input>
| id="inputwithplaceholder"
| placeholder="initial placeholder"
| type="text"
| this.value=""
| <shadow:root>
| <div>
| id="placeholder"
| pseudo="-webkit-input-placeholder"
| style="display: block !important;"
| shadow:pseudoId="-webkit-input-placeholder"
| "initial placeholder"
| <div>
| <br>
| "
"
| <textarea>
| id="textarea"
| this.value="initial value"
| "initial value"
| <shadow:root>
| <div>
| "initial value"
| <br>
| "
"
| <textarea>
| id="textareaWithPlaceholder"
| placeholder="initial placeholder"
| this.value=""
| <shadow:root>
| <div>
| id="placeholder"
| pseudo="-webkit-input-placeholder"
| style="display: block !important;"
| shadow:pseudoId="-webkit-input-placeholder"
| "initial placeholder"
| <div>
| <br>
| "
"
| <select>
| id="select"
| <option>
| "CA"
| <shadow:root>
| <slot>
| <option>
| "TX"
| <shadow:root>
| <slot>
| <shadow:root>
| <div>
| aria-hidden="true"
| ""
| <slot>
| id="select-options"
| <slot>
| id="select-button"
| <button>
| pseudo="select-fallback-button"
| shadow:pseudoId="select-fallback-button"
| <span>
| pseudo="select-fallback-button-text"
| shadow:pseudoId="select-fallback-button-text"
| <div>
| popover="auto"
| pseudo="picker(select)"
| shadow:pseudoId="picker(select)"
| <slot>
| id="select-popover-options"
| <div>
| popover="manual"
| pseudo="-internal-select-autofill-preview"
| shadow:pseudoId="-internal-select-autofill-preview"
| <div>
| pseudo="-internal-select-autofill-preview-text"
| shadow:pseudoId="-internal-select-autofill-preview-text"
| "input.value: initial value"
| "internals.suggestedValue(input): "
| "inputWithPlaceholder.value: "
| "internals.suggestedValue(inputWithPlaceholder): "
| "textarea.value: initial value"
| "internals.suggestedValue(textarea): "
| "textareaWithPlaceholder.value: "
| "internals.suggestedValue(textareaWithPlaceholder): "
| "select.value: "
| "internals.suggestedValue(select): "
Input after setting suggestedValue:
| <input>
| id="test"
| type="text"
| value="initial value"
| this.value="initial value"
| <shadow:root>
| <div>
| id="placeholder"
| pseudo="-internal-input-suggested"
| style="display: block !important; user-select: none !important;"
| shadow:pseudoId="-internal-input-suggested"
| "suggested value"
| <div>
| "initial value"
| <br>
| "
"
| <input>
| id="inputwithplaceholder"
| placeholder="initial placeholder"
| type="text"
| this.value=""
| <shadow:root>
| <div>
| id="placeholder"
| pseudo="-internal-input-suggested"
| style="display: block !important; user-select: none !important;"
| shadow:pseudoId="-internal-input-suggested"
| "suggested value"
| <div>
| <br>
| "
"
| <textarea>
| id="textarea"
| this.value="initial value"
| "initial value"
| <shadow:root>
| <div>
| id="placeholder"
| pseudo="-internal-input-suggested"
| style="display: block !important; user-select: none !important;"
| shadow:pseudoId="-internal-input-suggested"
| "suggested value"
| <div>
| "initial value"
| <br>
| "
"
| <textarea>
| id="textareaWithPlaceholder"
| placeholder="initial placeholder"
| this.value=""
| <shadow:root>
| <div>
| id="placeholder"
| pseudo="-internal-input-suggested"
| style="display: block !important; user-select: none !important;"
| shadow:pseudoId="-internal-input-suggested"
| "suggested value"
| <div>
| <br>
| "
"
| <select>
| id="select"
| <option>
| "CA"
| <shadow:root>
| <slot>
| <option>
| "TX"
| <shadow:root>
| <slot>
| <shadow:root>
| <div>
| aria-hidden="true"
| "TX"
| <slot>
| id="select-options"
| <slot>
| id="select-button"
| <button>
| pseudo="select-fallback-button"
| shadow:pseudoId="select-fallback-button"
| <span>
| pseudo="select-fallback-button-text"
| shadow:pseudoId="select-fallback-button-text"
| "TX"
| <div>
| popover="auto"
| pseudo="picker(select)"
| shadow:pseudoId="picker(select)"
| <slot>
| id="select-popover-options"
| <div>
| popover="manual"
| pseudo="-internal-select-autofill-preview"
| shadow:pseudoId="-internal-select-autofill-preview"
| <div>
| pseudo="-internal-select-autofill-preview-text"
| shadow:pseudoId="-internal-select-autofill-preview-text"
| "input.value: initial value"
| "internals.suggestedValue(input): "
| "inputWithPlaceholder.value: "
| "internals.suggestedValue(inputWithPlaceholder): "
| "textarea.value: initial value"
| "internals.suggestedValue(textarea): "
| "textareaWithPlaceholder.value: "
| "internals.suggestedValue(textareaWithPlaceholder): "
| "select.value: "
| "internals.suggestedValue(select): "
| "input.value: initial value"
| "internals.suggestedValue(input): suggested value"
| "inputWithPlaceholder.value: "
| "internals.suggestedValue(inputWithPlaceholder): suggested value"
| "textarea.value: initial value"
| "internals.suggestedValue(textarea): suggested value"
| "textareaWithPlaceholder.value: "
| "internals.suggestedValue(textareaWithPlaceholder): suggested value"
| "select.value: "
| "internals.suggestedValue(select): TX"
After resetting suggestedValue value:
| <input>
| id="test"
| type="text"
| value="initial value"
| this.value="initial value"
| <shadow:root>
| <div>
| "initial value"
| <br>
| "
"
| <input>
| id="inputwithplaceholder"
| placeholder="initial placeholder"
| type="text"
| this.value=""
| <shadow:root>
| <div>
| id="placeholder"
| pseudo="-webkit-input-placeholder"
| style="display: block !important;"
| shadow:pseudoId="-webkit-input-placeholder"
| "initial placeholder"
| <div>
| <br>
| "
"
| <textarea>
| id="textarea"
| this.value="initial value"
| "initial value"
| <shadow:root>
| <div>
| "initial value"
| <br>
| "
"
| <textarea>
| id="textareaWithPlaceholder"
| placeholder="initial placeholder"
| this.value=""
| <shadow:root>
| <div>
| id="placeholder"
| pseudo="-webkit-input-placeholder"
| style="display: block !important;"
| shadow:pseudoId="-webkit-input-placeholder"
| "initial placeholder"
| <div>
| <br>
| "
"
| <select>
| id="select"
| <option>
| "CA"
| <shadow:root>
| <slot>
| <option>
| "TX"
| <shadow:root>
| <slot>
| <shadow:root>
| <div>
| aria-hidden="true"
| ""
| <slot>
| id="select-options"
| <slot>
| id="select-button"
| <button>
| pseudo="select-fallback-button"
| shadow:pseudoId="select-fallback-button"
| <span>
| pseudo="select-fallback-button-text"
| shadow:pseudoId="select-fallback-button-text"
| <div>
| popover="auto"
| pseudo="picker(select)"
| shadow:pseudoId="picker(select)"
| <slot>
| id="select-popover-options"
| <div>
| popover="manual"
| pseudo="-internal-select-autofill-preview"
| shadow:pseudoId="-internal-select-autofill-preview"
| <div>
| pseudo="-internal-select-autofill-preview-text"
| shadow:pseudoId="-internal-select-autofill-preview-text"
| "input.value: initial value"
| "internals.suggestedValue(input): "
| "inputWithPlaceholder.value: "
| "internals.suggestedValue(inputWithPlaceholder): "
| "textarea.value: initial value"
| "internals.suggestedValue(textarea): "
| "textareaWithPlaceholder.value: "
| "internals.suggestedValue(textareaWithPlaceholder): "
| "select.value: "
| "internals.suggestedValue(select): "
| "input.value: initial value"
| "internals.suggestedValue(input): suggested value"
| "inputWithPlaceholder.value: "
| "internals.suggestedValue(inputWithPlaceholder): suggested value"
| "textarea.value: initial value"
| "internals.suggestedValue(textarea): suggested value"
| "textareaWithPlaceholder.value: "
| "internals.suggestedValue(textareaWithPlaceholder): suggested value"
| "select.value: "
| "internals.suggestedValue(select): TX"
| "input.value: initial value"
| "internals.suggestedValue(input): "
| "inputWithPlaceholder.value: "
| "internals.suggestedValue(inputWithPlaceholder): "
| "textarea.value: initial value"
| "internals.suggestedValue(textarea): "
| "textareaWithPlaceholder.value: "
| "internals.suggestedValue(textareaWithPlaceholder): "
| "select.value: "
| "internals.suggestedValue(select): "
| "PASS"