mirror of
https://github.com/servo/servo.git
synced 2025-06-25 09:34:32 +01:00
52 lines
2 KiB
HTML
52 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>box-shadow + variable substitution on same element</title>
|
|
|
|
<meta rel="author" title="Kevin Babbitt">
|
|
<meta rel="author" title="Greg Whitworth">
|
|
<link rel="author" title="Microsoft Corporation" href="http://microsoft.com" />
|
|
<!-- This is testing filters functions with var() function -->
|
|
<link rel="help" href="http://www.w3.org/TR/css-variables-1/#defining-variables">
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="target" style="box-shadow: 1px 1px 1px green; color: var(--alpha); --alpha: green;">This div should have green text and a green shadow.</div>
|
|
|
|
<script type="text/javascript">
|
|
"use strict";
|
|
let target = document.getElementById('target');
|
|
let computedStyle = window.getComputedStyle(target);
|
|
|
|
let templates = [
|
|
{
|
|
testName:"box-shadow",
|
|
value: computedStyle.boxShadow,
|
|
potentialValues: ["1px 1px 1px green", "rgb(0, 128, 0) 1px 1px 1px 0px"],
|
|
description: "Expected value should be 1px 1px 1px green or rgb(0, 128, 0) 1px 1px 1px 0px"
|
|
},
|
|
{
|
|
testName:"--alpha",
|
|
value: computedStyle.getPropertyValue("--alpha").trim(),
|
|
potentialValues: ["green"],
|
|
description: "Expected value is green"
|
|
},
|
|
{
|
|
testName:"color",
|
|
value: computedStyle.color,
|
|
potentialValues: ["rgb(0, 128, 0)", "rgba(0, 128, 0, 1)"],
|
|
description: "Expected value to be rgb(0, 128, 0) or rgba(0, 128, 0, 1)"
|
|
}
|
|
];
|
|
|
|
templates.forEach(function (template) {
|
|
test( function () {
|
|
assert_in_array(template.value, template.potentialValues, template.description);
|
|
}, template.testName);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|