diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/shadow-dom/untriaged/styles | |
parent | Initial commit. (diff) | |
download | firefox-upstream.tar.xz firefox-upstream.zip |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/shadow-dom/untriaged/styles')
6 files changed, 281 insertions, 0 deletions
diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001-ref.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001-ref.html new file mode 100644 index 0000000000..947c01a8f5 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test</title> +<link rel="author" title="Kazuhito Hokamura" href="mailto:k.hokamura@gmail.com"> +<style> +div { + width: 100px; + height: 100px; + background: green; +} +</style> +</head> +<body> +<p>Test passes if following box is green.</p> +<div></div> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001.html new file mode 100644 index 0000000000..99c130ef59 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/not-apply-in-shadow-root-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test - Tests CSS rules must not apply in a shadow root</title> +<link rel="match" href="not-apply-in-shadow-root-001-ref.html"> +<link rel="author" title="Kazuhito Hokamura" href="mailto:k.hokamura@gmail.com"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#styles"> +<meta name="assert" content="Styles: CSS rules declared in an enclosing tree must not apply in a shadow tree if apply-author-styles flag is not set."> +<script src="../../../html/resources/common.js"></script> +<style> +div { + width: 100px; + height: 100px; + background: green; +} +</style> +</head> +<body> +<p>Test passes if following box is green.</p> +<div id="shadow-host"></div> +<script> +var shadowHost = document.getElementById('shadow-host'); +var shadowRoot = shadowHost.attachShadow({mode: 'open'}); +var style = document.createElement('style'); +style.innerHTML = 'div { background: red }'; + +shadowRoot.appendChild(style); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/test-001.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-001.html new file mode 100644 index 0000000000..d773d248c1 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-001.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_06_00_01</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#styles"> +<meta name="assert" content="Styles: CSS rules declared in an enclosing tree must not apply in a shadow tree if apply-author-styles flag is set to false for this tree"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../html/resources/common.js"></script> +<script src="../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +//test apply-author-styles flag of ShadowRoot object (default value) +test(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + d.head.innerHTML = '<style>' + + '.invis {' + + 'display:none;' + + '}' + + '</style>'; + + var host = d.createElement('div'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var div1 = d.createElement('div'); + div1.innerHTML ='<span id="shd" class="invis">This is the shadow tree</span>'; + s.appendChild(div1); + + //apply-author-styles flag is false by default. Invisible style shouldn't be applied + assert_true(s.querySelector('#shd').offsetTop > 0, + 'CSS styles declared in enclosing tree must not be applied in a shadow tree ' + + 'if the apply-author-styles flag is set to false'); + + +}), 'A_06_00_01_T01'); + + +//test apply-author-styles flag of ShadowRoot object (set it) +test(unit(function (ctx) { + + var d = newRenderedHTMLDocument(ctx); + + d.head.innerHTML = '<style>' + + '.invis {' + + 'display:none;' + + '}' + + '</style>'; + + var host = d.createElement('div'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var div1 = d.createElement('div'); + div1.innerHTML ='<span id="shd" class="invis">This is the shadow tree</span>'; + s.appendChild(div1); + + //apply-author-styles flag is set to false. Invisible style shouldn't be applied + assert_true(s.querySelector('#shd').offsetTop > 0, + 'CSS styles declared in enclosing tree must not be applied in a shadow tree ' + + 'if the apply-author-styles flag is set to false'); + + +}), 'A_06_00_01_T02'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/test-003.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-003.html new file mode 100644 index 0000000000..b5b2529861 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_06_00_03</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#styles"> +<meta name="assert" content="Styles: Each shadow root has an associated list of zero or more style sheets, named shadow root style sheets"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../html/resources/common.js"></script> +<script src="../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + var host = d.createElement('div'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + assert_equals(s.styleSheets.length, 0, 'There should be no style sheets'); +}), 'A_06_00_03_T01'); + + +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + var host = d.createElement('div'); + host.setAttribute('style', 'width:100px'); + d.body.appendChild(host); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + assert_equals(s.styleSheets.length, 0, 'There should be no style sheets'); +}), 'A_06_00_03_T02'); + +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + var host = d.createElement('div'); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var style = d.createElement('style'); + style.textContent = 'div {width: 50%;}'; + s.appendChild(style); + + d.body.appendChild(host); + assert_equals(s.styleSheets.length, 1, 'Style sheet is not accessible via styleSheets'); +}), 'A_06_00_03_T03'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/test-005.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-005.html new file mode 100644 index 0000000000..94dbb551dc --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-005.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_06_00_06</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#styles"> +<meta name="assert" content="Styles:CSS rules declared in a shadow root style sheets must not apply in the document tree,"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../html/resources/common.js"></script> +<script src="../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +//check querySelector method +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + d.body.innerHTML = + '<div>' + + '<span class="invis" id="theTreeSpan">This is an element in the document tree</span>' + + '</div>' + + '<div id="sr">' + + '</div>'; + + var host = d.querySelector('#sr'); + + //Shadow root to play with + var s = host.attachShadow({mode: 'open'}); + + var style = d.createElement('style'); + style.innerHTML ='.invis {display:none}'; + s.appendChild(style); + + var span = d.createElement('span'); + span.setAttribute('id', 'theShadowSpan'); + span.setAttribute('class', 'invis'); + s.appendChild(span); + + //theTreeSpan should be visible, theShadowSpan not + assert_true(d.querySelector('#theTreeSpan').offsetTop > 0, + 'CSS styles declared in shadow tree must not be applied to the elements ' + + 'in the document tree'); + + //theTreeSpan should be visible, theShadowSpan not + assert_equals(s.querySelector('#theShadowSpan').offsetTop, 0, + 'CSS styles declared in shadow tree must be applied to the element ' + + 'in the same shadow tree'); + +}), 'A_06_00_06_T01'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/shadow-dom/untriaged/styles/test-008.html b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-008.html new file mode 100644 index 0000000000..4b810af1c8 --- /dev/null +++ b/testing/web-platform/tests/shadow-dom/untriaged/styles/test-008.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<title>Shadow DOM Test: A_06_00_09</title> +<link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru"> +<link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#styles"> +<meta name="assert" content="Styles:the styles of the shadow host are inherited by the children of the shadow root"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../../html/resources/common.js"></script> +<script src="../../resources/shadow-dom-utils.js"></script> +</head> +<body> +<div id="log"></div> +<script> +test(unit(function (ctx) { + var d = newRenderedHTMLDocument(ctx); + + d.body.innerHTML = '' + + '<div id="shHost" style="font-size:10px">' + + '<span id="spn1">This is a shadow host child</span>' + + '</div>'; + + var host = d.querySelector('#shHost'); + + var s = host.attachShadow({mode: 'open'}); + + var div = d.createElement('div'); + div.innerHTML ='<span id="spn2">This is a shadow root child</span>'; + s.appendChild(div); + + assert_equals(d.querySelector('#spn1').offsetTop, 0, + 'Element should not be rendered'); + assert_true(s.querySelector('#spn2').offsetTop > 0, + 'Element should be rendered'); + + var oldHeight = s.querySelector('#spn2').offsetHeight; + + host.setAttribute('style', 'font-size:20px'); + + assert_true(s.querySelector('#spn2').offsetHeight > oldHeight, + 'Shadow host style must be aplied to the shadow root children'); + +}), 'A_06_00_09_T01'); +</script> +</body> +</html> |