added test page for Privly button

privly · Aug 16, 2014 · 2ada28b · 2ada28b
1 parent c7de396
commit 2ada28b
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -23,6 +23,7 @@ <h2>Current Test Files</h2>
       <li><a href="test_pages/nonwhitelist.html">Non-Whitelisted</a>: Non-trusted domains can indicate their support of Privly injection. This page checks their behavior.</li>
       <li><a href="test_pages/misdirection.html">Misdirection</a>: Many sites change the way links are displayed or tracked. This page is a developing list of cases found across the internet.</li>
       <li><a href="test_pages/iframes.html">Iframe Depth</a>: Many websites render their content within iframes. This page ensures that Privly works for an arbitrary depth of iframes.</li>
+      <li><a href="test_pages/privly_button.html">Privly Button</a>: Collect many different circumstances to test the appearance of the Privly button in the upper-right corner of textareas and editable div elements.</li>
   </ul>
 
   <h2>Host Page Tests</h2>

diff --git a/styles.css b/styles.css
@@ -310,5 +310,56 @@ body { background-color: #fff; color: #333; }
 
 .replace_link { color: #000; background-color:#ff0000; }
 
+hr {
+  border: 1px;
+  height: 1px;
+  background: #333;
+  background-image: -webkit-linear-gradient(left, #333, #ccc, #ccc); 
+  background-image:    -moz-linear-gradient(left, #333, #ccc, #ccc); 
+  background-image:     -ms-linear-gradient(left, #333, #ccc, #ccc); 
+  background-image:      -o-linear-gradient(left, #333, #ccc, #ccc); 
+}
 
+#textarea1 {
+  width: 400px;
+  height: 100px;
+  resize: none;
+  border: none;  
+  outline: none;
+}
+#textarea1b {
+  width: 400px;
+  height: 100px;
+  resize: none;
+  outline: none;
+}
+#textarea2 {
+  width: 400px;
+  height: 21px;
+  resize: none;
+  border: none;
+  margin-top: 10px;
+  outline: none;
+}
+#textarea2b {
+  width: 400px;
+  height: 21px;
+  resize: none;
+  margin-top: 10px;
+  outline: none;
+}
+#textarea3 {
+  width: 400px;
+  height: 15px;
+  resize: none;
+}
+#div1 {
+  width: 407px;
+  border: 1px solid grey;  
+}
+#div2 {
+  width: 400px;
+  height: 30px;
+  border: 1px solid grey;
+}
 
diff --git a/test_pages/privly_button.html b/test_pages/privly_button.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Privly Button Test File</title>
+  <script src="../jquery-1.7.1.min.js" type="text/javascript"></script>
+
+  <link href="../styles.css" media="screen" rel="stylesheet" type="text/css" />
+
+</head>
+<body> 
+
+  <div id="test_area">
+    <h1>Privly Button Test File</h1>
+    <p>This file contains a test cases for different circumstances in which the Privly button should appear.
+    It shows its position relative to the height of the textarea / editable divs.</p>
+    </br>
+    <h4>Large textarea with immediate parent div</h4>
+    <p>Parent div has border.</p>
+    <div id="div1"><textarea id="textarea1">Write something...</textarea></div>
+    </br><hr>
+
+    <h4>Large textarea without immediate parent div</h4>
+    <p>Textarea has border.</p>
+    <textarea id="textarea1b">Write something...</textarea>
+    </br><hr>
+
+    <h4>Small textarea (21px) with immediate parent div</h4>
+    <p>Child textarea has 10px top margin. Parent div has a border.</p>
+    <div id="div1"><textarea id="textarea2">Enter...</textarea></div>
+    </br><hr>
+
+    <h4>Small textarea (21px) without immediate parent div</h4>
+    <p>Textarea has border.</p>
+    <textarea id="textarea2b">Enter...</textarea>
+    </br><hr>
+
+    <h4>Very small textarea (&lt 21px) with immediate parent div</h4>
+    <p>Textarea has border.</p>
+    <div><textarea id="textarea3">Enter...</textarea></div>
+    </br><hr>
+
+    <h4>Very small textarea (&lt 21px) without immediate parent div</h4>
+    <p>Textarea has border.</p>
+    <textarea id="textarea3">Enter...</textarea>
+    </br><hr>
+
+    <h4>Editable div</h4>
+    <p>Div has border.</p>
+    <div contentEditable="true" id="div1">Enter...</div>
+    </br><hr>
+
+    <h4>Editable div with blank child div (Twitter)</h4>
+    <p>Div has border.</p>
+    <div contentEditable="true" id="div2"><div></br></div></div>
+  </div>
+</body>
+</html>