mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-27 19:07:31 +09:00
import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo
This commit is contained in:
Roy Tam
commit
dcd9973243
150858 changed files with 23884658 additions and 0 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue