diff options
Diffstat (limited to 'layout/reftests/css-selectors')
11 files changed, 265 insertions, 0 deletions
diff --git a/layout/reftests/css-selectors/attr-case-insensitive-1-ref.html b/layout/reftests/css-selectors/attr-case-insensitive-1-ref.html new file mode 100644 index 0000000000..4c6baa8f77 --- /dev/null +++ b/layout/reftests/css-selectors/attr-case-insensitive-1-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<style type="text/css"> +.ascii > span { + background-color: yellow; +} +</style> +</head> +<body> + +<div class="ascii"><span lang="paSSfield-killroyß">case-sensitive</span></div> +<div class="ascii"><span lang="passfield-killroyß">lowercase</span></div> +<div class="ascii"><span lang="PASSFIELD-KILLROYß">uppercase</span></div> +<div class="nonascii"><span lang="paſſfield-killroyß">small long s (C)</span></div> +<div class="nonascii"><span lang="passfield-Killroyß">kelvin sign (C)</span></div> +<div class="nonascii"><span lang="paßfield-killroyß">small sharp s (F)</span></div> +<div class="nonascii"><span lang="paẞfield-killroyß">capital sharp s (F)</span></div> +<div class="nonascii"><span lang="passfield-killroyẞ">capital sharp s (S)</span></div> +<div class="nonascii"><span lang="passfield-killroyß">fi ligature (U+fb01) (F)</span></div> +<div class="nonascii"><span lang="passfıeld-killroyß"> dotless i (T)</span></div> +<div class="nonascii"><span lang="passfİeld-killroyß">dotted I (T)</span></div> + +</body> +</html> diff --git a/layout/reftests/css-selectors/attr-case-insensitive-1.html b/layout/reftests/css-selectors/attr-case-insensitive-1.html new file mode 100644 index 0000000000..41d3fc247e --- /dev/null +++ b/layout/reftests/css-selectors/attr-case-insensitive-1.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<style type="text/css"> +span[lang="paSSfield-killroyß"] { + background-color: yellow; +} +</style> +</head> +<body> + +<div class="ascii"><span lang="paSSfield-killroyß">case-sensitive</span></div> +<div class="ascii"><span lang="passfield-killroyß">lowercase</span></div> +<div class="ascii"><span lang="PASSFIELD-KILLROYß">uppercase</span></div> +<div class="nonascii"><span lang="paſſfield-killroyß">small long s (C)</span></div> +<div class="nonascii"><span lang="passfield-Killroyß">kelvin sign (C)</span></div> +<div class="nonascii"><span lang="paßfield-killroyß">small sharp s (F)</span></div> +<div class="nonascii"><span lang="paẞfield-killroyß">capital sharp s (F)</span></div> +<div class="nonascii"><span lang="passfield-killroyẞ">capital sharp s (S)</span></div> +<div class="nonascii"><span lang="passfield-killroyß">fi ligature (U+fb01) (F)</span></div> +<div class="nonascii"><span lang="passfıeld-killroyß"> dotless i (T)</span></div> +<div class="nonascii"><span lang="passfİeld-killroyß">dotted I (T)</span></div> + +</body> +</html> diff --git a/layout/reftests/css-selectors/nth-child-1.html b/layout/reftests/css-selectors/nth-child-1.html new file mode 100644 index 0000000000..91e13c8fef --- /dev/null +++ b/layout/reftests/css-selectors/nth-child-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Tests :nth-child(An+B) matching</title> + <style type="text/css"> + + div :nth-child(+3n/**/-2) { background-color:black; } + div :nth-child(+3n/**/-2) { font-size:12px; } + div :nth-child(+3n-/**/2) { text-decoration: underline; } + div :nth-child(+3n-2/**/) { border-left-width: 1px; } + div :nth-child(+3n/**/-2) { border-top-width: 1px; } + div :nth-child(+3n/**/-2) { border-bottom-width: 1px; } + div :nth-child(+3n-/**/2) { border-right-width: 1px; } + div :nth-child(+3n-2/**/) { border-style: solid; border-color: blue;} + + /* valid but will not match anything */ + div :nth-child(-n/**/-2) { color:red; } + div :nth-child(-n/**/-2) { color:red; } + div :nth-child(-n-/**/2) { color:red; } + div :nth-child(-n-2/**/) { color:red; } + div :nth-child(-1n/**/-2) { color:red; } + div :nth-child(-1n/**/-2) { color:red; } + div :nth-child(-1n-/**/2) { color:red; } + div :nth-child(-1n-2/**/) { color:red; } + + /* invalid */ + div :nth-child(-/**/ n-2) { color:red; } + div :nth-child(- /**/n-2) { color:red; } + div :nth-child(+/**/ n-2) { color:red; } + div :nth-child(+ /**/n-2) { color:red; } + div :nth-child(+3/**/n-2) { color:red; } + div :nth-child(-/**/n-2) {color: red;} + + </style> +</head> +<body> + +<div><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x></div> + +</body> +</html> diff --git a/layout/reftests/css-selectors/nth-child-2.html b/layout/reftests/css-selectors/nth-child-2.html new file mode 100644 index 0000000000..1a53c17302 --- /dev/null +++ b/layout/reftests/css-selectors/nth-child-2.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Tests :nth-child(An+B) matching</title> + <style type="text/css"> + + div :nth-child(+3N/**/-2) { background-color:black; } + div :nth-child(+3N/**/-2) { font-size:12px; } + div :nth-child(+3N-/**/2) { text-decoration: underline; } + div :nth-child(+3N-2/**/) { border-left-width: 1px; } + div :nth-child(+3N/**/-2) { border-top-width: 1px; } + div :nth-child(+3N/**/-2) { border-bottom-width: 1px; } + div :nth-child(+3N-/**/2) { border-right-width: 1px; } + div :nth-child(+3N-2/**/) { border-style: solid; border-color: blue;} + + /* valid but will not match anything */ + div :nth-child(-N/**/-2) { color:red; } + div :nth-child(-N/**/-2) { color:red; } + div :nth-child(-N-/**/2) { color:red; } + div :nth-child(-N-2/**/) { color:red; } + div :nth-child(-1N/**/-2) { color:red; } + div :nth-child(-1N/**/-2) { color:red; } + div :nth-child(-1N-/**/2) { color:red; } + div :nth-child(-1N-2/**/) { color:red; } + + /* invalid */ + div :nth-child(-/**/ N-2) { color:red; } + div :nth-child(- /**/N-2) { color:red; } + div :nth-child(+/**/ N-2) { color:red; } + div :nth-child(+ /**/N-2) { color:red; } + div :nth-child(+3/**/N-2) { color:red; } + div :nth-child(-/**/N-2) {color: red;} + + </style> +</head> +<body> + +<div><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x><x>x</x></div> + +</body> +</html> diff --git a/layout/reftests/css-selectors/nth-child-ref.html b/layout/reftests/css-selectors/nth-child-ref.html new file mode 100644 index 0000000000..04270e909d --- /dev/null +++ b/layout/reftests/css-selectors/nth-child-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<html><head> + <meta charset="utf-8"> + <title>Tests :nth-child(An+B) matching</title> + <style type="text/css"> + + x { background-color:black; } + x { font-size:12px; } + x { text-decoration: underline; } + x { border-left-width: 1px; } + x { border-right-width: 1px; } + x { border-top-width: 1px; } + x { border-bottom-width: 1px; } + x { border-style: solid; border-color: blue;} + + </style> +</head> +<body> + +<div><x>x</x><y>x</y><y>x</y><x>x</x><y>x</y><y>x</y><x>x</x><y>x</y><y>x</y><x>x</x><y>x</y></div> + +</body> +</html> diff --git a/layout/reftests/css-selectors/reftest.list b/layout/reftests/css-selectors/reftest.list new file mode 100644 index 0000000000..3705d71538 --- /dev/null +++ b/layout/reftests/css-selectors/reftest.list @@ -0,0 +1,6 @@ +== state-dependent-in-any.html state-dependent-in-any-ref.html +== attr-case-insensitive-1.html attr-case-insensitive-1-ref.html +== sibling-combinators-on-anon-content-1-shadow.xhtml sibling-combinators-on-anon-content-ref.xhtml +skip == sibling-combinators-on-anon-content-2-shadow.xhtml sibling-combinators-on-anon-content-ref.xhtml # Enable in bug 1587216. +== nth-child-1.html nth-child-ref.html +== nth-child-2.html nth-child-ref.html diff --git a/layout/reftests/css-selectors/sibling-combinators-on-anon-content-1-shadow.xhtml b/layout/reftests/css-selectors/sibling-combinators-on-anon-content-1-shadow.xhtml new file mode 100644 index 0000000000..75f7c30d1b --- /dev/null +++ b/layout/reftests/css-selectors/sibling-combinators-on-anon-content-1-shadow.xhtml @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <script> + customElements.define("custom-element", class extends HTMLElement { + constructor() { + super(); + const template = document.getElementById("template"); + const shadowRoot = this.attachShadow({mode: "open"}) + .appendChild(template.content.cloneNode(true)); + } + }); + </script> + </head> + <body> + <template id="template"> + <style> + .a + .b { color: green; } + </style> + <span class="a"></span> + <span class="b">This should be green</span> + <slot/> + </template> + <custom-element id="foo"></custom-element> + </body> +</html> diff --git a/layout/reftests/css-selectors/sibling-combinators-on-anon-content-2-shadow.xhtml b/layout/reftests/css-selectors/sibling-combinators-on-anon-content-2-shadow.xhtml new file mode 100644 index 0000000000..c5773561f5 --- /dev/null +++ b/layout/reftests/css-selectors/sibling-combinators-on-anon-content-2-shadow.xhtml @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + </head> + <body> + <template id="template"> + <style> + .a:empty + .b { color: green; } + </style> + <span class="a">Some text</span> + <span class="b">This should be green</span> + <slot/> + </template> + <custom-element id="foo"></custom-element> + <script> + customElements.define("custom-element", class extends HTMLElement { + constructor() { + super(); + const template = document.getElementById("template"); + const shadowRoot = this.attachShadow({mode: "open"}) + .appendChild(template.content.cloneNode(true)); + } + + nixText() { + this.shadowRoot.children[1].textContent = ""; + } + }); + window.onload = function() { + var el = document.getElementById("foo"); + // Flush its layout + el.offsetWidth; + el.nixText(); + document.documentElement.className = ""; + } + </script> + </body> +</html> diff --git a/layout/reftests/css-selectors/sibling-combinators-on-anon-content-ref.xhtml b/layout/reftests/css-selectors/sibling-combinators-on-anon-content-ref.xhtml new file mode 100644 index 0000000000..479bed4eff --- /dev/null +++ b/layout/reftests/css-selectors/sibling-combinators-on-anon-content-ref.xhtml @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <style> + .a + .b { color: green; } + </style> + </head> + <body> + <span><span class="a"></span> + <span class="b">This should be green</span></span> + </body> +</html> diff --git a/layout/reftests/css-selectors/state-dependent-in-any-ref.html b/layout/reftests/css-selectors/state-dependent-in-any-ref.html new file mode 100644 index 0000000000..cb69dc19e6 --- /dev/null +++ b/layout/reftests/css-selectors/state-dependent-in-any-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span { color: green; } + </style> + </head> + <body> + <input value="Test"><span>This should be green</span> + </body> +</html> diff --git a/layout/reftests/css-selectors/state-dependent-in-any.html b/layout/reftests/css-selectors/state-dependent-in-any.html new file mode 100644 index 0000000000..8ee1ea48f9 --- /dev/null +++ b/layout/reftests/css-selectors/state-dependent-in-any.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> + <head> + <style> + span { color: red; } + :-moz-any(:valid) + span { color: green; } + </style> + </head> + <body> + <input required><span>This should be green</span> + <script> + document.body.offsetWidth; + document.getElementsByTagName("input")[0].value = "Test" + </script> + </body> +</html> |