Rune Lillesveen
78514c1fcc
Automatic update from web-platform-tests
Test getComputedStyle("::first-line") for non-block display
All browsers drop declarations for properties that do not apply to
::first-line. However, there is a difference when the display is not a
type that generates a ::first-line. Gecko and Blink is not affected by
display, but WebKit is. Nothing in the spec that indicates the WebKit
way is correct.
Add tests for getComputedStyle() for the Gecko/Blink behavior.
Change-Id: Id25081b889a9e311f6a9f84decff15d85c53485a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7909666
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1644131}
--
wpt-commits: 8d907561bb58f83814274bc3f34c41b7259566ac
wpt-pr: 60499
117 lines
4.4 KiB
HTML
117 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Test: Properties allowed on ::first-line pseudo elements</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-styling">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
#target::first-line {}
|
|
#target { visibility: hidden; }
|
|
</style>
|
|
<div id="target">text</div>
|
|
<script>
|
|
let style;
|
|
const target = document.querySelector("#target");
|
|
const defaultComputedStyle = getComputedStyle(target);
|
|
|
|
test(() => {
|
|
var styleRule = document.styleSheets[0].cssRules[0];
|
|
assert_equals(styleRule.selectorText, "#target::first-line", "make sure we have the correct style rule");
|
|
style = styleRule.style;
|
|
}, "retrieve style rule");
|
|
|
|
const 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: "50% 50%",
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundSize: "10px 20px",
|
|
color: "rgba(10, 20, 30, 0.4)",
|
|
fontFamily: "sans-serif",
|
|
fontFeatureSettings: '"vert" 2',
|
|
fontKerning: "none",
|
|
fontSize: "30px",
|
|
fontSizeAdjust: "0.5",
|
|
fontStyle: "italic",
|
|
fontVariant: "small-caps",
|
|
fontWeight: "900",
|
|
fontVariationSettings: '"XHGT" 0.7',
|
|
letterSpacing: "12px",
|
|
opacity: "0.5",
|
|
textDecoration: "overline wavy rgb(10, 20, 30)",
|
|
textJustify: "none",
|
|
textShadow: "rgb(10, 20, 30) 10px 20px 30px",
|
|
textTransform: "capitalize",
|
|
textUnderlinePosition: "under",
|
|
verticalAlign: "12%",
|
|
wordSpacing: "12px"
|
|
};
|
|
|
|
// The css-pseudo-4 specification says only certain properties _apply_,
|
|
// which is different from computed values, but browsers implement this
|
|
// interoperably. Also, the inheritance section saying properties not in
|
|
// the list that apply to ::first-line are inherited from the non-pseudo
|
|
// parent instead, is also an indication this is the intent of the spec.
|
|
//
|
|
// Similarly, there was a resolution for highlight pseudos along the same
|
|
// lines:
|
|
// https://github.com/w3c/csswg-drafts/issues/7591
|
|
const invalidProperties = {
|
|
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",
|
|
margin: "10px 20px 30px 40px",
|
|
padding: "10px 20px 30px 40px",
|
|
position: "absolute",
|
|
transition: "transform 1s",
|
|
transform: "rotate(45deg)",
|
|
wordBreak: "break-all"
|
|
};
|
|
|
|
function testFirstLineProperty(property, rule, expected, reason) {
|
|
test(function() {
|
|
style[property] = "";
|
|
style[property] = rule;
|
|
assert_equals(getComputedStyle(target, "::first-line")[property], expected);
|
|
style[property] = "";
|
|
}, reason);
|
|
}
|
|
|
|
for (let property in validProperties) {
|
|
testFirstLineProperty(property, validProperties[property], validProperties[property],
|
|
property + " should be applied to first-line pseudo elements (display:block)");
|
|
}
|
|
|
|
for (let property in invalidProperties) {
|
|
testFirstLineProperty(property, invalidProperties[property], defaultComputedStyle[property],
|
|
property + " should not be applied to first-line pseudo elements (display:block)");
|
|
}
|
|
|
|
target.style.display = "inline";
|
|
|
|
for (let property in validProperties) {
|
|
testFirstLineProperty(property, validProperties[property], validProperties[property],
|
|
property + " should be applied to first-line pseudo elements (display:inline)");
|
|
}
|
|
|
|
for (let property in invalidProperties) {
|
|
testFirstLineProperty(property, invalidProperties[property], defaultComputedStyle[property],
|
|
property + " should not be applied to first-line pseudo elements (display:inline)");
|
|
}
|
|
|
|
target.style.display = "flex";
|
|
|
|
for (let property in validProperties) {
|
|
testFirstLineProperty(property, validProperties[property], validProperties[property],
|
|
property + " should be applied to first-line pseudo elements (display:flex)");
|
|
}
|
|
|
|
for (let property in invalidProperties) {
|
|
testFirstLineProperty(property, invalidProperties[property], defaultComputedStyle[property],
|
|
property + " should not be applied to first-line pseudo elements (display:flex)");
|
|
}
|
|
</script>
|