diff options
Diffstat (limited to 'layout/reftests/css-placeholder/input')
28 files changed, 372 insertions, 0 deletions
diff --git a/layout/reftests/css-placeholder/input/css-display.html b/layout/reftests/css-placeholder/input/css-display.html new file mode 100644 index 0000000000..a97734b15b --- /dev/null +++ b/layout/reftests/css-placeholder/input/css-display.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + [bar]::-moz-placeholder, + [foo]::placeholder { + display: inline; + } + </style> + <body> + <input placeholder='foo'> + <input placeholder='bar'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/css-opacity.html b/layout/reftests/css-placeholder/input/css-opacity.html new file mode 100644 index 0000000000..dd6e21ee13 --- /dev/null +++ b/layout/reftests/css-placeholder/input/css-opacity.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + [placeholder="bar"]::-moz-placeholder, + [placeholder="foo"]::placeholder { + opacity: 0.1; + } + </style> + <body> + <input placeholder='foo'> + <input placeholder='bar'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/css-text-align.html b/layout/reftests/css-placeholder/input/css-text-align.html new file mode 100644 index 0000000000..d71af94d52 --- /dev/null +++ b/layout/reftests/css-placeholder/input/css-text-align.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + [placeholder="bar"]::-moz-placeholder, + [placeholder="foo"]::placeholder { + text-align: center; + } + </style> + <body> + <input placeholder='foo'> + <input placeholder='bar'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/input-ref.html b/layout/reftests/css-placeholder/input/input-ref.html new file mode 100644 index 0000000000..8589b2b289 --- /dev/null +++ b/layout/reftests/css-placeholder/input/input-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <input> + <input> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-add.html b/layout/reftests/css-placeholder/input/placeholder-add.html new file mode 100644 index 0000000000..6ec33026d1 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-add.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <script> + function loadHandler() + { + document.getElementById('moz').placeholder='bar'; + document.getElementById('i').placeholder='foo'; + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <input id='i'> + <input id='moz'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-blur.html b/layout/reftests/css-placeholder/input/placeholder-blur.html new file mode 100644 index 0000000000..9c9f3c62b5 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-blur.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <script> + function loadHandler() + { + document.getElementById('i').focus(); + } + function focusHandler() + { + document.getElementById('i').blur(); + } + function blurHandler() + { + document.getElementById('moz').focus(); + } + function focusHandlerMoz() + { + document.getElementById('moz').blur(); + } + function blurHandlerMoz() + { + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <input id='i' placeholder='foo' onfocus='focusHandler();' onblur='blurHandler();'> + <input id='moz' placeholder='bar' onfocus='focusHandlerMoz();' onblur='blurHandlerMoz();'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-button-ref.html b/layout/reftests/css-placeholder/input/placeholder-button-ref.html new file mode 100644 index 0000000000..8f584f6e3f --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-button-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <input type='button'> + <input type='button'> + </body> +</html> + diff --git a/layout/reftests/css-placeholder/input/placeholder-empty-string-ref.html b/layout/reftests/css-placeholder/input/placeholder-empty-string-ref.html new file mode 100644 index 0000000000..ad0de3cfba --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-empty-string-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <input class='ref'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-empty-string.html b/layout/reftests/css-placeholder/input/placeholder-empty-string.html new file mode 100644 index 0000000000..8d9dfb5b41 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-empty-string.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <input placeholder=''> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-focus-ref.html b/layout/reftests/css-placeholder/input/placeholder-focus-ref.html new file mode 100644 index 0000000000..d2e2af35a2 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-focus-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <script> + function loadHandler() + { + document.getElementById('i').focus(); + } + function focusHandler() + { + document.getElementById('moz').focus(); + } + function focusHandlerMoz() + { + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <input id='i' class='ref' value='foo' onfocus='focusHandler();'> + <input id='moz' class='ref' value='bar' onfocus='focusHandlerMoz();'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-focus.html b/layout/reftests/css-placeholder/input/placeholder-focus.html new file mode 100644 index 0000000000..285bf4f60c --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-focus.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <script> + function loadHandler() + { + document.getElementById('i').focus(); + } + function focusHandler() + { + document.getElementById('moz').focus(); + } + function focusHandlerMoz() + { + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <input id='i' placeholder='foo' onfocus='focusHandler();'> + <input id='moz' placeholder='bar' onfocus='focusHandlerMoz();'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-removal.html b/layout/reftests/css-placeholder/input/placeholder-removal.html new file mode 100644 index 0000000000..88b6829148 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-removal.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <script> + function loadHandler() + { + document.getElementById('i').removeAttribute('placeholder'); + document.getElementById('moz').removeAttribute('placeholder'); + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <input id='i' placeholder='foo'> + <input id='moz' placeholder='bar'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-simple-ref.html b/layout/reftests/css-placeholder/input/placeholder-simple-ref.html new file mode 100644 index 0000000000..02c604b7db --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-simple-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <input class='ref' value='foo'> + <input class='ref' value='bar'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-simple.html b/layout/reftests/css-placeholder/input/placeholder-simple.html new file mode 100644 index 0000000000..c7958ed1f8 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-simple.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <input placeholder='foo'> + <input placeholder='bar'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-type-change-1.html b/layout/reftests/css-placeholder/input/placeholder-type-change-1.html new file mode 100644 index 0000000000..2eb0ea4d3e --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-type-change-1.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <script> + function loadHandler() + { + document.getElementById('i').type = 'text'; + document.getElementById('moz').type = 'text'; + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <input type='button' id='i' placeholder='foo'> + <input type='button' id='moz' placeholder='bar'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-type-change-2.html b/layout/reftests/css-placeholder/input/placeholder-type-change-2.html new file mode 100644 index 0000000000..7a1feb06e6 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-type-change-2.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <script> + function loadHandler() + { + document.getElementById('i').type = 'button'; + document.getElementById('moz').type = 'button'; + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <input id='i' placeholder='foo'> + <input id='moz' placeholder='bar'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-value-ref.html b/layout/reftests/css-placeholder/input/placeholder-value-ref.html new file mode 100644 index 0000000000..79209802a4 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-value-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <input value='bar'> + <input value='foo'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-value-reset.html b/layout/reftests/css-placeholder/input/placeholder-value-reset.html new file mode 100644 index 0000000000..3e0b672ce0 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-value-reset.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <script> + function loadHandler() + { + document.getElementById('i').value = 'bar'; + document.getElementById('moz').value = 'foo'; + document.forms[0].reset(); + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <form> + <input id='i' placeholder='foo'> + <input id='moz' placeholder='bar'> + </form> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-value-set.html b/layout/reftests/css-placeholder/input/placeholder-value-set.html new file mode 100644 index 0000000000..c2b1a0c015 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-value-set.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <script> + function loadHandler() + { + document.getElementById('i').value = 'bar'; + document.getElementById('moz').value = 'foo'; + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <input id='i' placeholder='foo'> + <input id='moz' placeholder='bar'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-value-unset.html b/layout/reftests/css-placeholder/input/placeholder-value-unset.html new file mode 100644 index 0000000000..c985d56675 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-value-unset.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class='reftest-wait'> + <link rel='stylesheet' type='text/css' href='style.css'> + <script> + function loadHandler() + { + document.getElementById('i').value = ''; + document.getElementById('moz').value = ''; + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <input id='i' placeholder='foo' value='bar'> + <input id='moz' placeholder='bar' value='foo'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholder-value.html b/layout/reftests/css-placeholder/input/placeholder-value.html new file mode 100644 index 0000000000..80694027cb --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholder-value.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <input placeholder='foo' value='bar'> + <input placeholder='bar' value='foo'> + </body> +</html> diff --git a/layout/reftests/css-placeholder/input/placeholdershown-date-ref.html b/layout/reftests/css-placeholder/input/placeholdershown-date-ref.html new file mode 100644 index 0000000000..4fee8b159d --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholdershown-date-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<link rel='stylesheet' href='style-shown.css'> +<input type="month" class='shown-ref' placeholder='foo'> +<input type="week" class='shown-ref' placeholder='foo'> diff --git a/layout/reftests/css-placeholder/input/placeholdershown-date.html b/layout/reftests/css-placeholder/input/placeholdershown-date.html new file mode 100644 index 0000000000..2406ece4b6 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholdershown-date.html @@ -0,0 +1,4 @@ +<!doctype html> +<link rel='stylesheet' href='style-shown.css'> +<input type="month" class='shown' placeholder='foo'> +<input type="week" class='shown' placeholder='foo'> diff --git a/layout/reftests/css-placeholder/input/placeholdershown-ref.html b/layout/reftests/css-placeholder/input/placeholdershown-ref.html new file mode 100644 index 0000000000..0036552fb6 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholdershown-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel='stylesheet' href='style-shown.css'> +<input class='shown-ref' value='foo'> +<input type="number" class='shown-ref' placeholder='foo'> +<input type="email" class='shown-ref' placeholder='foo'> +<input type="search" class='shown-ref' placeholder='foo'> +<input type="tel" class='shown-ref' placeholder='foo'> +<input type="url" class='shown-ref' placeholder='foo'> diff --git a/layout/reftests/css-placeholder/input/placeholdershown.html b/layout/reftests/css-placeholder/input/placeholdershown.html new file mode 100644 index 0000000000..90f64beae6 --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholdershown.html @@ -0,0 +1,8 @@ +<!doctype html> +<link rel='stylesheet' href='style-shown.css'> +<input class='shown' placeholder='foo'> +<input type="number" class='shown' placeholder='foo'> +<input type="email" class='shown' placeholder='foo'> +<input type="search" class='shown' placeholder='foo'> +<input type="tel" class='shown' placeholder='foo'> +<input type="url" class='shown' placeholder='foo'> diff --git a/layout/reftests/css-placeholder/input/reftest.list b/layout/reftests/css-placeholder/input/reftest.list new file mode 100644 index 0000000000..b2caafa433 --- /dev/null +++ b/layout/reftests/css-placeholder/input/reftest.list @@ -0,0 +1,29 @@ +# Tests using placeholder-focus-ref.html as a reference are disabled because +# we can't change the caret colour nor disable it and we can't change the +# text colour without changing the caret which means that the tested page has +# a black caret with a grey text and the reference has a grey caret with grey +# text. The only thing that is doable is to make the caret grey in the tested +# page but that would make the test moot because a failure wouldn't be seen. +# A real way to fix this would be to be able to style the caret or to implement +# ::value (bug 648643), depending of the ::value behaviour (it could change the +# caret colour and the text colour or just the text colour). + +== placeholder-simple.html placeholder-simple-ref.html +# needs-focus == placeholder-focus.html placeholder-focus-ref.html +needs-focus == placeholder-blur.html placeholder-simple-ref.html +== placeholder-value.html placeholder-value-ref.html +== placeholder-empty-string.html placeholder-empty-string-ref.html +== placeholder-add.html placeholder-simple-ref.html +== placeholder-removal.html input-ref.html +== placeholder-value-set.html placeholder-value-ref.html +== placeholder-value-unset.html placeholder-simple-ref.html +== placeholder-value-reset.html placeholder-simple-ref.html +== placeholder-type-change-1.html placeholder-simple-ref.html +== placeholder-type-change-2.html placeholder-button-ref.html +== placeholdershown.html placeholdershown-ref.html +fails-if(Android) == placeholdershown-date.html placeholdershown-date-ref.html # bug 1431431 +== css-display.html placeholder-simple-ref.html +# We can't check except by verifying that the output is different. +# Same reasons as focus issues explained above. +!= css-opacity.html placeholder-simple-ref.html +!= css-text-align.html placeholder-simple-ref.html diff --git a/layout/reftests/css-placeholder/input/style-shown.css b/layout/reftests/css-placeholder/input/style-shown.css new file mode 100644 index 0000000000..a73b0c5fd0 --- /dev/null +++ b/layout/reftests/css-placeholder/input/style-shown.css @@ -0,0 +1,21 @@ +input::placeholder { + color: green; + opacity: 1.0; +} + +input:placeholder-shown { + appearance: none; + color: FieldText; + background-color: red; +} + +input:placeholder-shown.shown, +input.shown-ref { + appearance: none; + color: green; + background-color: #c7c7c7; + font-style: italic; + border: 2px solid green; + height: 200px; + width: 200px; +} diff --git a/layout/reftests/css-placeholder/input/style.css b/layout/reftests/css-placeholder/input/style.css new file mode 100644 index 0000000000..8963a6e177 --- /dev/null +++ b/layout/reftests/css-placeholder/input/style.css @@ -0,0 +1,6 @@ +[placeholder="bar"]::-moz-placeholder, +[placeholder="foo"]::placeholder, +input.ref { + color: green; + opacity: 1.0; +} |