Name: [css-ui-3] Add test text-overflow and pointer event interaction · web-platform-tests/wpt@b749ca8 · GitHub
Rating: 4.9 (2854 reviews)
web-platform-tests
diff --git a/‎css/css-ui-3/text-overflow-023.html
+43 b/‎css/css-ui-3/text-overflow-023.html
+43
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<htmlclass="reftest-wait">
+<metacharset="utf-8">
+<title>CSS Basic User Interface Test: interacting with the ellipsis</title>
+<linkrel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
+<linkrel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow">
+<linkrel="match" href="../reference/ref-filled-green-100px-square.xht">
+<metaname="flags" content="ahem interact dom should">
+<metaname="assert" content="Pointer events on the ellipsis should be dispatched to the elided inline element if there's one, rather than directly to the block.">
+<style>
+#test {
+overflow: hidden;
+text-overflow: ellipsis;
+margin-left:-100px;
+width:2.5em;
+height:1em;
+white-space: pre;
+font:100px/1 ahem;
+color: blue;
+}
+#discard {
+float: left;
+}
+</style>
+
+<divid=discard>First, click the blue box. </div>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<divid="test"><spanid="inner"></span></div>
+<script>
+document.getElementById("test").addEventListener("click",red);
+document.getElementById("inner").addEventListener("click",green)
+functionred(){
+document.getElementById("test").style.color="red";
+document.getElementById("discard").remove();
+document.children[0].className="";
+}
+functiongreen(e){
+document.getElementById("test").style.color="green";
+document.getElementById("discard").remove();
+document.children[0].className="";
+e.stopPropagation();
+}
+</script>