<!DOCTYPE html>
<meta charset="UTF-8">
<style>
#test {
  outline: none;
  color: lime;
  padding: 50px;
  background: black;
}
</style>
<p id="text">
This test checks that composition underline color uses the color of the text and is not always black.
The test passes if you see the word "foobar" in green with a composition underline in the same color.
</p>

<div contenteditable id="test"></div>
<script>
var test = document.getElementById("test");
test.focus();
if (window.textInputController)
  textInputController.setComposition("foobar");
</script>