blob: 073e554a8c4c58d2c73d2adedfb0ec770de7c524 [file] [log] [blame]
<!DOCTYPE html>
<title>CSS Test: Properties allowed on ::first-letter pseudo elements</title>
<link rel="author" title="Chris Nardi" href="mailto:cnardi@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target::first-letter {}
#target { visibility: hidden; }
</style>
<div id="target">text</div>
<script>
'use strict';
var style;
const target = document.querySelector("#target");
var defaultComputedStyle = getComputedStyle(target);
test(function() {
var styleRule = document.styleSheets[0].cssRules[0];
assert_equals(styleRule.selectorText, '#target::first-letter', 'make sure we have the correct style rule');
style = styleRule.style;
}, 'pre test setup');
var validProperties = {
backgroundAttachment: 'fixed',
backgroundBlendMode: 'hue',
backgroundClip: 'padding-box',
backgroundColor: 'rgb(10, 20, 30)',
backgroundImage: 'linear-gradient(black, white)',
backgroundOrigin: 'border-box',
backgroundPosition: 'left 10px top 20px',
backgroundRepeat: 'no-repeat',
backgroundSize: '10px 20px',
border: '40px dotted rgb(10, 20, 30)',
borderImage: 'linear-gradient(black, white) 10% / 20 / 30px repeat',
borderRadius: '10px 20px',
boxShadow: 'rgb(10, 20, 30) 10px 20px 30px 40px inset',
color: 'rgba(10, 20, 30, 0.4)',
float: 'right',
font: 'italic small-caps 900 normal 10px / 20px sans-serif',
fontFeatureSettings: '"vert" 2',
fontSizeAdjust: '0.5',
fontKerning: 'none',
fontVariationSettings: '"XHGT" 0.7',
letterSpacing: '12px',
margin: '10px 20px 30px 40px',
padding: '10px 20px 30px 40px',
opacity: '0.5',
textDecoration: 'overline wavy rgb(10, 20, 30)',
textJustify: 'inter-word',
textShadow: 'rgb(10, 20, 30) 10px 20px 30px',
textTransform: 'capitalize',
textUnderlinePosition: 'under',
verticalAlign: '12%',
wordSpacing: '12px'
};
var invalidProperties = {
transition: 'transform 1s',
transform: 'rotate(45deg)',
wordBreak: 'break-all'
};
function testFirstLetterProperty(property, rule, expected, reason) {
test(function() {
style[property] = "";
style[property] = rule;
assert_equals(getComputedStyle(target, '::first-letter')[property], expected);
style[property] = "";
}, reason);
}
for (var property in validProperties) {
testFirstLetterProperty(property, validProperties[property], validProperties[property],
"Whitelisted property " + property + " should be applied to first-letter pseudo elements.");
}
for (var property in invalidProperties) {
testFirstLetterProperty(property, invalidProperties[property], defaultComputedStyle[property],
"Non-whitelisted property " + property + " should not be applied to first-letter pseudo elements.");
}
</script>