<!DOCTYPE html>
<title>When non-empty placeholder becomes empty, :placeholder-shown test</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://drafts.csswg.org/selectors-4/#placeholder">
<input id="myinput" type="text" placeholder="FAIL">
<textarea id="mytextarea" placeholder="FAIL"></textarea>
<script>
test(() => {
  const input = document.querySelector("input");
  input.placeholder = "";
  input.value = "NO RED";
  assert_false(input.matches(":placeholder-shown"));
}, "input:placeholder-shown should not be matched");

test(() => {
  const textarea = document.querySelector("textarea");
  textarea.placeholder = "";
  textarea.value = "No RED";
  assert_false(textarea.matches(":placeholder-shown"));
}, "textarea:placeholder-shown should not be matched");
</script>