diff options
Diffstat (limited to 'layout/reftests/w3c-css/received/selectors-4')
20 files changed, 731 insertions, 0 deletions
diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html new file mode 100644 index 000000000..9d76c0674 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within Reference File</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<style> +div { + border: solid 15px green; +} +</style> +<p>Test passes if, when the element below is focused, it is surrounded by a thick green border. There must be no red or blue once it is focused.</p> +<div>Focus this element</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html new file mode 100644 index 000000000..15de67cef --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within applies to an element with tabindex when :focus applies."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +div { +border: solid 15px blue; +} +div:focus { +border-color: red; +} +div:focus-within { +border-color: green; +} +</style> +<p>Test passes if, when the element below is focused, it is surrounded by a thick green border. There must be no red or blue once it is focused.</p> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var focusme = document.getElementById('focusme'); +focusme.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html new file mode 100644 index 000000000..b59dc25b5 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within applies to the parent of an element with tabindex where :focus applies."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +#focusme:not(:focus) { + border: solid 15px blue; +} + +#target:focus-within { + border: solid 15px green; +} +</style> +<p>Test passes if, when the element below is focused, +it is surrounded by a thick green border. +There must be no red or blue once it is focused.</p> +<div id="target"> + <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div> +</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var focusme = document.getElementById('focusme'); +focusme.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html new file mode 100644 index 000000000..4c87dc627 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-003.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within applies to ancestors of an element with tabindex where :focus applies."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +#focusme:not(:focus) { + border: solid 15px blue; +} + +#target:focus-within { + border: solid 15px green; +} +</style> +<p>Test passes if, when the element below is focused, +it is surrounded by a thick green border. +There must be no red or blue once it is focused.</p> +<div id="target"> + <div> + <div> + <div> + <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1">Focus this element</div> + </div> + </div> + </div> +</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var focusme = document.getElementById('focusme'); +focusme.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html new file mode 100644 index 000000000..f0d3765a9 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-004.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within works on elements that are focusable due to contenteditable."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; + + /* Make the caret invisible + since it matches the color of the text, which is transparent, + while keeping the text readable thanks to its shadow. + Not using the caret-color property as it is too new to be relied on. */ + color: transparent; text-shadow: black 0px 0px 0px; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +#focusme:not(:focus) { + border: solid 15px blue; +} + +:focus { + border: solid 5px red; +} +div:focus-within, #focusme:focus-within { + border: solid 5px green; +} +</style> +<p>Test passes if, when the element below is focused, +it is surrounded by a thick green border. +There must be no red or blue once it is focused.</p> +<div> + <div> + <div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" contentEditable="true">Focus this element</div> + </div> +</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var editor = document.getElementById('focusme'); +editor.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html new file mode 100644 index 000000000..5a173fd72 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-005.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within works on links."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +#focusme:not(:focus) { + border: solid 15px blue; +} + +/* Make the link look like the div in the reference file */ +#focusme { + display: block; + text-decoration: none; + color: currentColor; +} + +:focus { + border: solid 5px red; +} +div:focus-within, #focusme:focus-within { + border: solid 5px green; +} +</style> +<p>Test passes if, when the element below is focused, +it is surrounded by a thick green border. +There must be no red or blue once it is focused.</p> +<div> + <div> + <a id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" href="">Focus this element</a> + </div> +</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var editor = document.getElementById('focusme'); +editor.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html new file mode 100644 index 000000000..04e6cbcb9 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-006.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-001-ref.html"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test that :focus-within works on form controls, using an input element."> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + all: initial; + outline: none; + + /* Make the caret invisible + since it matches the color of the text, which is transparent, + while keeping the text readable thanks to its shadow. + Not using the caret-color property as it is too new to be relied on. */ + color: transparent; text-shadow: black 0px 0px 0px; +} + +/* Use blue to indicate that the user needs to pay attention. + This element needs to be focused for the test to make sense. */ +#focusme:not(:focus) { + border: solid 15px blue; +} + +#focusme:focus:not(:focus-within) { + background: red; +} +div:focus-within { + border: solid 5px green; +} +</style> +<p>Test passes if, when the element below is focused, +it is surrounded by a thick green border. +There must be no red or blue once it is focused.</p> +<div> + <div> + <div> + <input id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" value="Focus this element"> + <div> + </div> +</div> +<script> +/* This script is an optional convenience, + simply removing the need to manually focus the element. + The test is valid even if the script is not run. */ +var editor = document.getElementById('focusme'); +editor.focus(); +</script> +<body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html new file mode 100644 index 000000000..4631ef3e3 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within shadow DOM Reference File</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<style> +div { + border: solid 15px green; +} +</style> +<p>Test passes if there is a green rectangle below.</p> +<div></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html new file mode 100644 index 000000000..e4610dacf --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within with shadow DOM</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-shadow-001-ref.html"> +<meta name="flags" content="interact dom"> +<meta name="assert" content="Test that :focus-within applies to a focused element inside the shadow DOM."> +<body> +<p>Test passes if there is a green rectangle below.</p> +<div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> + +<template id="shadow-template"> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} + +div:focus-within { + border: solid 15px green; +} +</style> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div> +</template> + +<script> +var shadow = document.getElementById('shadow-host').createShadowRoot(); +var template = document.getElementById('shadow-template'); +var instance = document.importNode(template.content, true); +shadow.appendChild(instance); +window.setTimeout(function() { +var focusme = shadow.getElementById('focusme'); +focusme.focus(); +}, 0); +</script> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html new file mode 100644 index 000000000..b02a3f9a1 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within with shadow DOM</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-shadow-001-ref.html"> +<meta name="flags" content="interact dom"> +<meta name="assert" content="Test that :focus-within applies to a shadow host containing a focused element."> +<style> +div:focus-within { + border: solid 15px green; +} +</style> +<body> +<p>Test passes if there is a green rectangle below.</p> +<div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> + +<template id="shadow-template"> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} +</style> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div> +</template> + +<script> +var shadow = document.getElementById('shadow-host').createShadowRoot(); +var template = document.getElementById('shadow-template'); +var instance = document.importNode(template.content, true); +shadow.appendChild(instance); +window.setTimeout(function() { +var focusme = shadow.getElementById('focusme'); +focusme.focus(); +}, 0); +</script> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html new file mode 100644 index 000000000..588719424 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-003.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within with shadow DOM</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-shadow-001-ref.html"> +<meta name="flags" content="interact dom"> +<meta name="assert" content="Test that :focus-within applies to the parent of a shadow host containing a focused element."> +<style> +#target:focus-within { + border: solid 15px green; +} +</style> +<body> +<p>Test passes if there is a green rectangle below.</p> +<div id="target"> + <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> +</div> + +<template id="shadow-template"> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} +</style> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div> +</template> + +<script> +var shadow = document.getElementById('shadow-host').createShadowRoot(); +var template = document.getElementById('shadow-template'); +var instance = document.importNode(template.content, true); +shadow.appendChild(instance); +window.setTimeout(function() { +var focusme = shadow.getElementById('focusme'); +focusme.focus(); +}, 0); +</script> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html new file mode 100644 index 000000000..8348adc35 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-004.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within with shadow DOM</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-shadow-001-ref.html"> +<meta name="flags" content="interact dom"> +<meta name="assert" content="Test that :focus-within applies to an ancestor of a shadow host containing a focused element."> +<style> +#target:focus-within { + border: solid 15px green; +} +</style> +<body> +<p>Test passes if there is a green rectangle below.</p> +<div id="target"> + <div> + <div> + <div> + <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> + </div> + </div> + </div> +</div> + +<template id="shadow-template"> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} +</style> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div> +</template> + +<script> +var shadow = document.getElementById('shadow-host').createShadowRoot(); +var template = document.getElementById('shadow-template'); +var instance = document.importNode(template.content, true); +shadow.appendChild(instance); +window.setTimeout(function() { +var focusme = shadow.getElementById('focusme'); +focusme.focus(); +}, 0); +</script> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html new file mode 100644 index 000000000..6c486fa48 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/focus-within-shadow-005.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>Selectors Level 4: focus-within with shadow DOM</title> +<link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net"> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo"> +<link rel="match" href="focus-within-shadow-001-ref.html"> +<meta name="flags" content="interact dom"> +<meta name="assert" content="Test that :focus-within propagates through nested shadow DOMs containing a focused element."> +<style> +#target:focus-within { + border: solid 15px green; +} +</style> +<body> +<p>Test passes if there is a green rectangle below.</p> +<div id="target"> + <div> + <div> + <div> + <div id="shadow-host"><strong>Skip this test, shadow DOM is not supported.</strong></div> + </div> + </div> + </div> +</div> + +<template id="shadow-template"> +<div id="nested-shadow-host"><strong>Skip this test, nested shadow hosts are not supported.</strong></div> +</template> + +<template id="nested-shadow-template"> +<style> +/* Suppress things that cannot be reproduced in the reference file */ +:focus { + outline: none; +} +</style> +<div id="focusme" class="reftest-wait" onfocus="this.classList.toggle('reftest-wait');" tabindex="1"></div> +</template> + +<script> +var shadow = document.getElementById('shadow-host').createShadowRoot(); +var template = document.getElementById('shadow-template'); +var instance = document.importNode(template.content, true); +shadow.appendChild(instance); + +window.setTimeout(function() { +shadow = shadow.getElementById('nested-shadow-host').createShadowRoot(); +template = document.getElementById('nested-shadow-template'); +instance = document.importNode(template.content, true); +shadow.appendChild(instance); +}, 0); + +window.setTimeout(function() { +var focusme = shadow.getElementById('focusme'); +focusme.focus(); +}, 0); +</script> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml new file mode 100644 index 000000000..af883c97e --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors-ref.xhtml @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Selectors Level 4: :first-of-type</title> +<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/> +<style type="text/css"> +div > *|* { + display: block; + color: black; + border: thin solid; + margin: 1em; +} +.yellow { + background: yellow; +} +.green { + background: lime; +} +</style> +</head> +<body> +<div> +<p class="green">This line should have a green background.</p> +<p class="yellow">This line should have a yellow background.</p> +<p class="yellow">This line should have a yellow background.</p> +<p class="green">This line should have a green background.</p> +<p class="green">This line should have a green background.</p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml new file mode 100644 index 000000000..18fead9b1 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/of-type-selectors.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml"> +<head> +<title>Selectors Level 4: :first-of-type</title> +<meta name="flags" content="namespace nonHTML"/> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/> +<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-first-of-type-pseudo"/> +<link rel="match" href="of-type-selectors-ref.xhtml"/> +<style type="text/css"> +div > *|* { + display: block; + color: black; + background: yellow; + border: thin solid; + margin: 1em; +} +div > *|*:first-of-type { + background: lime; +} +</style> +</head> +<body> +<div> +<p>This line should have a green background.</p> +<p>This line should have a yellow background.</p> +<html:p>This line should have a yellow background.</html:p> +<p xmlns="http://www.example.com/ns">This line should have a green background.</p> +<p xmlns="">This line should have a green background.</p> +</div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html b/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html new file mode 100644 index 000000000..038a8a9b6 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/selector-required-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS level4 Selector :required and :optional</title> + <link rel="author" title="LEE YUN HEE" href="mailto:zzirasi@gmail.com"> + + <style> + input {border:3px solid green;} + </style> + </head> + <body> + <p> + You should see a green input box. + </p> + <p> + <input> + </p> + <p> + <input> + </p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/selector-required.html b/layout/reftests/w3c-css/received/selectors-4/selector-required.html new file mode 100644 index 000000000..9c0899ad2 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/selector-required.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS level4 Selector :required and :optional</title> + <link rel="author" title="LEE YUN HEE" href="mailto:zzirasi@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/selectors4/#opt-pseudos"> + <meta name="assert" content="You should see a green input box."> + <link rel="match" href="selector-required-ref.html"> + <style> + input {border:3px solid red;} + :required {border-color:green;} + :optional {border-color:green;} + </style> + </head> + <body> + <p> + You should see a green input box. + </p> + <p> + <input required> + </p> + <p> + <input optional> + </p> + </body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html new file mode 100644 index 000000000..c11f42f62 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ltr-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Selectors Level 4 Test: basic support for dir(ltr)</title> + <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo"> + <link rel="match" href="selectors-dir-selector-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="The :dir(ltr) pseudo-class matches an element that has a directionality of (ltr). Since the div element has dir=ltr, the selector matches."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + background-color: red; + } + + div:dir(ltr) { + background-color: green; + } + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div dir="ltr"></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html new file mode 100644 index 000000000..7b297d036 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference for CSS Selectors Level 4 :dir() Tests</title> + <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com"> + <meta name="flags" content=""> + <style type="text/css"> + div { + width: 100px; + height: 100px; + background-color: green; + } + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div></div> +</body> +</html> diff --git a/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html new file mode 100644 index 000000000..df2c63494 --- /dev/null +++ b/layout/reftests/w3c-css/received/selectors-4/selectors-dir-selector-rtl-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Selectors Level 4 Test: basic support for dir(rtl)</title> + <link rel="author" title="Takeshi Kurosawa" href="mailto:taken.spc@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/selectors4/#dir-pseudo"> + <link rel="match" href="selectors-dir-selector-ref.html"> + <meta name="flags" content=""> + <meta name="assert" content="The :dir(rtl) pseudo-class matches an elment that has a directionality of right-to-left (rtl). Since the div element has dir=rtl, the selector matches."> + <style type="text/css"> + div { + width: 100px; + height: 100px; + background-color: red; + } + + div:dir(rtl) { + background-color: green; + } + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div dir="rtl"></div> +</body> +</html> |