test_placeholder_restrictions.html (1826B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1382786 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1382786</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script type="text/javascript" src="property_database.js"></script> 11 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 12 <style id="s"></style> 13 </head> 14 <body> 15 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1382786">Mozilla Bug 1382786</a> 16 <p id="display"></p> 17 <div id="content" style="display: none"> 18 19 </div> 20 <input id="test"> 21 <input id="control"> 22 <script type="application/javascript"> 23 24 /** Test for Bug 1382786 */ 25 var test = getComputedStyle($("test"), "::placeholder"); 26 var control = getComputedStyle($("control"), "::placeholder"); 27 for (let prop in gCSSProperties) { 28 var info = gCSSProperties[prop]; 29 if (info.type == CSS_TYPE_TRUE_SHORTHAND) { 30 // Can't get useful info out of getComputedStyle. 31 continue; 32 } 33 let prereqs = ""; 34 if (info.prerequisites) { 35 for (let name in info.prerequisites) { 36 prereqs += `${name}: ${info.prerequisites[name]}; `; 37 } 38 } 39 $("s").textContent = ` 40 #control::placeholder { ${prop}: ${info.initial_values[0]}; ${prereqs} } 41 #test::placeholder { ${prop}: ${info.other_values[0]}; ${prereqs} } 42 `; 43 // line-height does apply to ::placeholder, but only on <textarea>. We could 44 // switch the test to use a <textarea>. 45 if (info.applies_to_placeholder && prop != "line-height") { 46 isnot(get_computed_value(test, prop), 47 get_computed_value(control, prop), 48 `${prop} should apply to ::placeholder`); 49 } else { 50 is(get_computed_value(test, prop), 51 get_computed_value(control, prop), 52 `${prop} should not apply to ::placeholder`); 53 } 54 } 55 </script> 56 </body> 57 </html>