first-letter-allowed-properties.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-pseudo/first-letter-allowed-properties.html - WPT Dashboard Interop Dashboard

<!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(rgb(0, 0, 0), rgb(255, 255, 255))',

  backgroundOrigin: 'border-box',

  backgroundPosition: '10px 20px',

  backgroundRepeat: 'no-repeat',

  backgroundSize: '10px 20px',

  border: '40px dotted rgb(10, 20, 30)',

  borderImage: 'linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)) 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 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 = {

  position: 'absolute',

  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],

                          property + " should be applied to first-letter pseudo elements.");

for (var property in invalidProperties) {

  testFirstLetterProperty(property, invalidProperties[property], defaultComputedStyle[property],

                          property + " should not be applied to first-letter pseudo elements.");

</script>