Skip to content

GitLab

T
tangled
Commit 70d0ebbd authored by Fergal Daly's avatar Fergal Daly Committed by Commit Bot
Browse files
Options

CSS: Add WPT tests for basic ::part() functionality. 

https://drafts.csswg.org/css-shadow-parts/

Tests cover the following:
- Simple - Part in selected host is styled
- Host Stylesheet - Part in selected host is not styled by ::part in a stylesheet inside the host
- Different Host - Part is not styled when host is not selected
- Inner Host
 - Part in outer host is styled by document style sheet
 - Part in inner host is not styled by document style sheet
- Compound Positive - Compound selector for host works
- Compound Negative - Non-matching compound selector for host does not style
- All Hosts
 - ::part with host selector styles in first host
 - ::part with host selector styles in second host
- Chaining Negative - ::part cannot be chained to reach elements in the inner host


Bug: 805271
Change-Id: I8c16ae09547bd833dbcc1eb0afb8be91a40c0a8e
Reviewed-on: https://chromium-review.googlesource.com/983833
Commit-Queue: Fergal Daly <fergal@chromium.org>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Reviewed-by: default avatarTakayoshi Kochi <kochi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#548349}
parent 6963de52
Hide whitespace changes
Inline Side-by-side
Showing with 304 additions and 0 deletions
third_party/WebKit/LayoutTests/external/wpt/css/css-shadow-parts/all-hosts.html 0 → 100644
View file @ 70d0ebbd
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - All Hosts</title>
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<style>::part(partp) { color: green; }</style>
<script>installCustomElement("custom-element", "custom-element-template");</script>
<template id="custom-element-template">
<style>span { color: red; }</style>
<span id="part" part="partp">This text</span>
</template>
The following text should be green:
<custom-element id="c-e-1"></custom-element>
The following text should be green:
<custom-element id="c-e-2"></custom-element>
<script type="text/javascript">
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e-1", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "::part with host selector styles in first host");
test(function() {
var el = getElementByShadowIds(document, ["c-e-2", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "::part with host selector styles in second host");
</script>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-shadow-parts/chaining-invalid-selector.html 0 → 100644
View file @ 70d0ebbd
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Chaining Invalid Selector</title>
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<style>#c-e-outer::part(c-e-part)::part(partp) { color: red; }</style>
<div>
It's invalid to use 2 pseudoelements in a selector but if somehow it becomes valid,
it should not expose the internal structure of the shadow tree.
</div>
<script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
<template id="custom-element-inner-template">
<style>span { color: green; }</style>
<span id="part" part="partp">This text</span>
</template>
<script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
<template id="custom-element-outer-template">
The following text should be green:
<custom-element-inner id="c-e-inner" part="c-e-part"></custom-element-inner>
</template>
<custom-element-outer id="c-e-outer"></custom-element-outer>
<script type="text/javascript">
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "::part cannot be chained to reach elements in the inner host");
test(function() {
assert_equals(document.getElementsByTagName("body")[0].style.length, 0);
}, "Chained ::part selectors are dropped");
</script>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-shadow-parts/complex-matching.html 0 → 100644
View file @ 70d0ebbd
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Complex Matching</title>
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<style>div #c-e::part(partp) { color: green; }</style>
<script>installCustomElement("custom-element", "custom-element-template");</script>
<template id="custom-element-template">
<style>span { color: red; }</style>
<span id="part" part="partp">This text</span>
</template>
The following text should be green:
<div><custom-element id="c-e"></custom-element></div>
<script type="text/javascript">
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Complex selector for host works");
</script>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-shadow-parts/complex-non-matching.html 0 → 100644
View file @ 70d0ebbd
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Complex Non-matching</title>
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<style>div #c-e::part(partp) { color: red; }</style>
<script>installCustomElement("custom-element", "custom-element-template");</script>
<template id="custom-element-template">
<style>span { color: green; }</style>
<span id="part" part="partp">This text</span>
</template>
The following text should be green:
<pre><custom-element id="c-e"></custom-element></pre>
<script type="text/javascript">
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Non-matching complex selector for host does not style");
</script>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-shadow-parts/different-host.html 0 → 100644
View file @ 70d0ebbd
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Different Host</title>
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<style>#c-e-other::part(partp) { color: red; }</style>
<script>installCustomElement("custom-element", "custom-element-template");</script>
<template id="custom-element-template">
<style>span { color: green; }</style>
<span id="part" part="partp">This text</span>
</template>
The following text should be green:
<custom-element id="c-e"></custom-element>
<script type="text/javascript">
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part is not styled when host is not selected");
</script>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-shadow-parts/host-stylesheet.html 0 → 100644
View file @ 70d0ebbd
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Host Stylesheet</title>
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<script>installCustomElement("custom-element", "custom-element-template");</script>
<template id="custom-element-template">
<style>
::part(partp) { color: red; }
span { color: green; }
</style>
<span id="part" part="partp">This text</span>
</template>
The following text should be green:
<custom-element id="c-e"></custom-element>
<script type="text/javascript">
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in selected host is not styled by ::part in a stylesheet inside the host");
</script>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-shadow-parts/inner-host.html 0 → 100644
View file @ 70d0ebbd
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Inner Host</title>
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<style>#c-e-outer::part(partp) { color: green; }</style>
<script>installCustomElement("custom-element-inner", "custom-element-inner-template");</script>
<template id="custom-element-inner-template">
<style>span { color: blue; }</style>
<span id="blue_part" part="partp">This text</span>
</template>
<script>installCustomElement("custom-element-outer", "custom-element-outer-template");</script>
<template id="custom-element-outer-template">
<style>span { color: red; }</style>
<span id="green_part" part="partp">This text</span>
The following text should be blue:
<custom-element-inner id="c-e-inner"></custom-element-inner>
</template>
The following text should be green:
<custom-element-outer id="c-e-outer"></custom-element-outer>
<script type="text/javascript">
"use strict";
const colorBlue = "rgb(0, 0, 255)";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e-outer", "green_part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in outer host is styled by document style sheet");
test(function() {
var el = getElementByShadowIds(document, ["c-e-outer", "c-e-inner", "blue_part"]);
assert_equals(window.getComputedStyle(el).color, colorBlue);
}, "Part in inner host is not styled by document style sheet");
</script>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-shadow-parts/simple.html 0 → 100644
View file @ 70d0ebbd
<!DOCTYPE html>
<html>
<head>
<title>CSS Shadow Parts - Simple</title>
<meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
<link href="http://www.google.com/" rel="author" title="Google">
<link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/shadow-helper.js"></script>
</head>
<body>
<style>#c-e::part(partp) { color: green; }</style>
<script>installCustomElement("custom-element", "custom-element-template");</script>
<template id="custom-element-template">
<style>span { color: red; }</style>
<span id="part" part="partp">This text</span>
</template>
The following text should be green:
<custom-element id="c-e"></custom-element>
<script type="text/javascript">
"use strict";
const colorGreen = "rgb(0, 128, 0)";
test(function() {
var el = getElementByShadowIds(document, ["c-e", "part"]);
assert_equals(window.getComputedStyle(el).color, colorGreen);
}, "Part in selected host is styled");
</script>
</body>
</html>
third_party/WebKit/LayoutTests/external/wpt/css/css-shadow-parts/support/shadow-helper.js 0 → 100644
View file @ 70d0ebbd
// Takes a root element and a list of ids of shadow host elements. Each id refers to a shadow host
// inside the previous id's shadow tree.
function getElementByShadowIds(root, ids) {
for (var i = 0; ;i++) {
var host = root.getElementById(ids[i]);
if (host == null) {
throw "No element found: i=" + i + " id=" + ids[i] + ". Root was " + root;
}
if (i == ids.length - 1) {
return host;
}
root = host.shadowRoot;
if (root == null) {
throw "No shadowRoot found: i=" + i + " id=" + ids[i] + ". Host was " + host;
}
}
}
// Installs a mininal custom element based on this template.
function installCustomElement(element_name, template_id) {
ceClass = class extends HTMLElement {
constructor() {
super();
var template = document
.getElementById(template_id)
.content;
this
.attachShadow({mode: 'open'})
.appendChild(template.cloneNode(true));
}
};
window.customElements.define(element_name, ceClass);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment