diff options
Diffstat (limited to 'layout/reftests/css-placeholder')
61 files changed, 860 insertions, 0 deletions
diff --git a/layout/reftests/css-placeholder/css-background-ref.html b/layout/reftests/css-placeholder/css-background-ref.html new file mode 100644 index 0000000000..b75db15b6f --- /dev/null +++ b/layout/reftests/css-placeholder/css-background-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <body> + <input placeholder='foo'> + <textarea placeholder='foo'></textarea> + <input placeholder='foo'> + <textarea placeholder='foo'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/css-background.html b/layout/reftests/css-placeholder/css-background.html new file mode 100644 index 0000000000..94ab1a5b00 --- /dev/null +++ b/layout/reftests/css-placeholder/css-background.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> + <!-- + This test checks that setting a background on a ::placeholder works. + However, given that it is not possible to do an actualy equality check, we + have te check that setting a background doesn't produce the same result + as not setting it. + --> + <style> + :-moz-any(input, textarea).color::placeholder { + background-color: blue; + } + :-moz-any(input, textarea).gradient::placeholder { + background: linear-gradient(to right, blue, white, red); + } + </style> + <body> + <input class="color" placeholder='foo'> + <textarea class="color" placeholder='foo'></textarea> + <input class="gradient" placeholder='foo'> + <textarea class="gradient" placeholder='foo'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/css-restrictions-ref.html b/layout/reftests/css-placeholder/css-restrictions-ref.html new file mode 100644 index 0000000000..a09df21e12 --- /dev/null +++ b/layout/reftests/css-placeholder/css-restrictions-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <body> + <input placeholder='foo'> + <textarea placeholder='foo'></textarea> + <input placeholder='this is a quitelongetextforasmallelement'> + <textarea placeholder='this is a quitelongetextforasmallelement'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/css-restrictions.html b/layout/reftests/css-placeholder/css-restrictions.html new file mode 100644 index 0000000000..746ed2ee97 --- /dev/null +++ b/layout/reftests/css-placeholder/css-restrictions.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <style> + :-moz-any(input, textarea)::placeholder { + visibility: hidden; + padding: 20px; + float: right; + overflow: visible; + white-space: pre; + + /* + * This list could be endless given that all non-whitelisted properties + * are restricted. + */ + } + </style> + <body> + <input placeholder='foo'> + <textarea placeholder='foo'></textarea> + <!-- for overflow and white-space --> + <input placeholder='this is a quitelongetextforasmallelement'> + <textarea placeholder='this is a quitelongetextforasmallelement'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/css-simple-styling-ref.html b/layout/reftests/css-placeholder/css-simple-styling-ref.html new file mode 100644 index 0000000000..eeaca440c9 --- /dev/null +++ b/layout/reftests/css-placeholder/css-simple-styling-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <style> + :-moz-any(input, textarea) { + font: -moz-list; + font-family: mono; + font-style: italic; + color: blue; + word-spacing: 5px; + text-shadow: 1px 1px 1px red; + } + </style> + <body> + <input value='foo bar'> + <textarea>foo bar</textarea> + <input value='bar foo'> + <textarea>bar foo</textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/css-simple-styling.html b/layout/reftests/css-placeholder/css-simple-styling.html new file mode 100644 index 0000000000..bfecc19c8d --- /dev/null +++ b/layout/reftests/css-placeholder/css-simple-styling.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> + <!-- + This test checks that a few allowed CSS properties have an effect when + applied to ::placeholder or ::-moz-placeholder. + --> + <style> + /* + * We need to set some properties on the <input> because its size will + * depend on its font. + */ + input, textarea { + font: -moz-list; + font-family: mono; + font-style: italic; + } + + [placeholder="foo bar"]::placeholder, + [placeholder="bar foo"]::-moz-placeholder { + opacity: 1.0; + font: -moz-list; + font-family: mono; + font-style: italic; + color: blue; + word-spacing: 5px; + text-shadow: 1px 1px 1px red; + } + </style> + <body> + <input placeholder='foo bar'> + <textarea placeholder='foo bar'></textarea> + <input placeholder='bar foo'> + <textarea placeholder='bar foo'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/ignore-pseudo-class-ref.html b/layout/reftests/css-placeholder/ignore-pseudo-class-ref.html new file mode 100644 index 0000000000..9085635b60 --- /dev/null +++ b/layout/reftests/css-placeholder/ignore-pseudo-class-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> +<body> + <input placeholder='foobar'> + <textarea placeholder='foobar'></textarea> +</body> +</html> diff --git a/layout/reftests/css-placeholder/ignore-pseudo-class.html b/layout/reftests/css-placeholder/ignore-pseudo-class.html new file mode 100644 index 0000000000..bd314c5b8f --- /dev/null +++ b/layout/reftests/css-placeholder/ignore-pseudo-class.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<style> + :-moz-placeholder { + color: red; + } + :placeholder { + color: red; + } +</style> +<body> + <input placeholder='foobar'> + <textarea placeholder='foobar'></textarea> +</body> +</html> 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..47c7f98e5f --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholdershown-date-ref.html @@ -0,0 +1,5 @@ +<!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'> +<input type="datetime-local" 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..0a5a50226f --- /dev/null +++ b/layout/reftests/css-placeholder/input/placeholdershown-date.html @@ -0,0 +1,5 @@ +<!doctype html> +<link rel='stylesheet' href='style-shown.css'> +<input type="month" class='shown' placeholder='foo'> +<input type="week" class='shown' placeholder='foo'> +<input type="datetime-local" 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; +} diff --git a/layout/reftests/css-placeholder/reftest.list b/layout/reftests/css-placeholder/reftest.list new file mode 100644 index 0000000000..ee97e5638d --- /dev/null +++ b/layout/reftests/css-placeholder/reftest.list @@ -0,0 +1,7 @@ +include input/reftest.list +include textarea/reftest.list + +fuzzy-if(skiaContent,0-1,0-4) == css-restrictions.html css-restrictions-ref.html +fuzzy-if(gtkWidget&&nativeThemePref,255-255,1376-1881) == css-simple-styling.html css-simple-styling-ref.html # gtkWidget, Bug 1600749 +!= css-background.html css-background-ref.html +fuzzy-if(skiaContent,0-1,0-180) == ignore-pseudo-class.html ignore-pseudo-class-ref.html diff --git a/layout/reftests/css-placeholder/textarea/css-display.html b/layout/reftests/css-placeholder/textarea/css-display.html new file mode 100644 index 0000000000..717bfab7cd --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/css-display.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + textarea::-moz-placeholder, + textarea::placeholder { + display: inline; + } + </style> + <body> + <textarea placeholder='foo'></textarea> + <textarea placeholder='bar'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/css-opacity.html b/layout/reftests/css-placeholder/textarea/css-opacity.html new file mode 100644 index 0000000000..832f504eca --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/css-opacity.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + textarea::-moz-placeholder, + textarea::placeholder { + opacity: 0.1; + } + </style> + <body> + <textarea placeholder='foo'></textarea> + <textarea placeholder='bar'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/css-resize-ref.html b/layout/reftests/css-placeholder/textarea/css-resize-ref.html new file mode 100644 index 0000000000..c6e2e5b09e --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/css-resize-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + textarea { + resize: none; + } + </style> + <body> + <textarea class='ref'>foo</textarea> + <textarea class='ref'>bar</textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/css-resize.html b/layout/reftests/css-placeholder/textarea/css-resize.html new file mode 100644 index 0000000000..81ea278b56 --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/css-resize.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <!-- + resize shouldn't be allowed on the ::placeholder. + --> + <link rel='stylesheet' type='text/css' href='style.css'> + <style> + textarea { + resize: none; + } + textarea::-moz-placeholder, + textarea::placeholder { + resize: both; + } + </style> + <body> + <textarea placeholder='foo'></textarea> + <textarea placeholder='bar'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-add.html b/layout/reftests/css-placeholder/textarea/placeholder-add.html new file mode 100644 index 0000000000..9807f3d702 --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/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('t').placeholder='foo'; + document.getElementById('moz').placeholder='bar'; + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <textarea id='t'></textarea> + <textarea id='moz'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-blur.html b/layout/reftests/css-placeholder/textarea/placeholder-blur.html new file mode 100644 index 0000000000..a1b7ebace4 --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/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('t').focus(); + } + function focusHandler() + { + document.getElementById('t').blur(); + } + function blurHandler() + { + document.getElementById('moz').focus(); + } + function focusHandlerMoz() + { + document.getElementById('moz').blur(); + } + function blurHandlerMoz() + { + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <textarea id='t' placeholder='foo' onfocus='focusHandler();' onblur='blurHandler();'></textarea> + <textarea id='moz' placeholder='bar' onfocus='focusHandlerMoz();' onblur='blurHandlerMoz();'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-empty-string-ref.html b/layout/reftests/css-placeholder/textarea/placeholder-empty-string-ref.html new file mode 100644 index 0000000000..09928f0ad2 --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/placeholder-empty-string-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <textarea class='ref'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-empty-string.html b/layout/reftests/css-placeholder/textarea/placeholder-empty-string.html new file mode 100644 index 0000000000..87f27256cd --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/placeholder-empty-string.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <textarea placeholder=''></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-focus-ref.html b/layout/reftests/css-placeholder/textarea/placeholder-focus-ref.html new file mode 100644 index 0000000000..69318b626f --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/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('t').focus(); + } + function focusHandler() + { + document.getElementById('moz').focus(); + } + function focusHandlerMoz() + { + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <textarea id='t' class='ref' onfocus='focusHandler();'>foo</textarea> + <textarea id='moz' class='ref' onfocus='focusHandlerMoz();'>bar</textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-focus.html b/layout/reftests/css-placeholder/textarea/placeholder-focus.html new file mode 100644 index 0000000000..a8c97293da --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/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('t').focus(); + } + function focusHandler() + { + document.getElementById('moz').focus(); + } + function focusHandlerMoz() + { + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <textarea id='t' placeholder='foo' onfocus='focusHandler();'></textarea> + <textarea id='moz' placeholder='bar' onfocus='focusHandlerMoz();'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-removal.html b/layout/reftests/css-placeholder/textarea/placeholder-removal.html new file mode 100644 index 0000000000..727b216a99 --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/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('t').removeAttribute('placeholder'); + document.getElementById('moz').removeAttribute('placeholder'); + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <textarea id='t' placeholder='foo'></textarea> + <textarea id='moz' placeholder='bar'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-simple-ref.html b/layout/reftests/css-placeholder/textarea/placeholder-simple-ref.html new file mode 100644 index 0000000000..c012cc4116 --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/placeholder-simple-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <textarea class='ref'>foo</textarea> + <textarea class='ref'>bar</textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-simple.html b/layout/reftests/css-placeholder/textarea/placeholder-simple.html new file mode 100644 index 0000000000..5a9d3eb6f0 --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/placeholder-simple.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <textarea placeholder='foo'></textarea> + <textarea placeholder='bar'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-value-ref.html b/layout/reftests/css-placeholder/textarea/placeholder-value-ref.html new file mode 100644 index 0000000000..f8023e1c98 --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/placeholder-value-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <textarea>bar</textarea> + <textarea>foo</textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-value-reset.html b/layout/reftests/css-placeholder/textarea/placeholder-value-reset.html new file mode 100644 index 0000000000..92fc7d79bd --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/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('t').value = 'bar'; + document.getElementById('moz').value = 'foo'; + document.forms[0].reset(); + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <form> + <textarea id='t' placeholder='foo'></textarea> + <textarea id='moz' placeholder='bar'></textarea> + </form> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-value-set.html b/layout/reftests/css-placeholder/textarea/placeholder-value-set.html new file mode 100644 index 0000000000..30c3c26a4a --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/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('t').value = 'bar'; + document.getElementById('moz').value = 'foo'; + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <textarea id='t' placeholder='foo'></textarea> + <textarea id='moz' placeholder='bar'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-value-unset.html b/layout/reftests/css-placeholder/textarea/placeholder-value-unset.html new file mode 100644 index 0000000000..aacea6a203 --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/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('t').value = ''; + document.getElementById('moz').value = ''; + document.documentElement.className = ''; + } + </script> + <body onload='loadHandler();'> + <textarea id='t' placeholder='foo'>bar</textarea> + <textarea id='moz' placeholder='bar'>foo</textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholder-value.html b/layout/reftests/css-placeholder/textarea/placeholder-value.html new file mode 100644 index 0000000000..a17bfa8f30 --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/placeholder-value.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style.css'> + <body> + <textarea placeholder='foo'>bar</textarea> + <textarea placeholder='bar'>foo</textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholdershown-ref.html b/layout/reftests/css-placeholder/textarea/placeholdershown-ref.html new file mode 100644 index 0000000000..caa109411c --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/placeholdershown-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style-shown.css'> + <body> + <textarea class='shown-ref'>foo</textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/placeholdershown.html b/layout/reftests/css-placeholder/textarea/placeholdershown.html new file mode 100644 index 0000000000..781ca2165d --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/placeholdershown.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <link rel='stylesheet' type='text/css' href='style-shown.css'> + <body> + <textarea class='shown' placeholder='foo'></textarea> + </body> +</html> diff --git a/layout/reftests/css-placeholder/textarea/reftest.list b/layout/reftests/css-placeholder/textarea/reftest.list new file mode 100644 index 0000000000..a24dddf1fe --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/reftest.list @@ -0,0 +1,26 @@ +# 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 textarea-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 +== placeholdershown.html placeholdershown-ref.html +== css-resize.html css-resize-ref.html +== 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 diff --git a/layout/reftests/css-placeholder/textarea/style-shown.css b/layout/reftests/css-placeholder/textarea/style-shown.css new file mode 100644 index 0000000000..e7b33cef63 --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/style-shown.css @@ -0,0 +1,22 @@ +textarea::placeholder { + color: green; + opacity: 1.0; +} + +textarea:placeholder-shown { + appearance: none; + color: FieldText; + background-color: red; +} + +textarea:placeholder-shown.shown, +textarea.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/textarea/style.css b/layout/reftests/css-placeholder/textarea/style.css new file mode 100644 index 0000000000..6d7893318d --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/style.css @@ -0,0 +1,6 @@ +textarea::-moz-placeholder, +textarea::placeholder, +textarea.ref { + color: green; + opacity: 1.0; +} diff --git a/layout/reftests/css-placeholder/textarea/textarea-ref.html b/layout/reftests/css-placeholder/textarea/textarea-ref.html new file mode 100644 index 0000000000..79f410593b --- /dev/null +++ b/layout/reftests/css-placeholder/textarea/textarea-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <textarea></textarea> + <textarea></textarea> + </body> +</html> |