forked from mirrors/gecko-dev
958a1daa0a
Automatic update from web-platform-tests Allow var() references in -internal-visited-* properties. Previously, -internal-visited-* properties didn't get any parsing behavior, because they were assumed to be used during style application only. In other words, it was assumed that the parsing would happen _before_ e.g. color would expand to -internal-visited-color. This is (of course) not true if the value has a var() reference, since the actual parsing then happens computed-value time. To fix this, this CL gives all -internal-visited-* properties parsing behavior. The "pending substitution value" adds complexity here, since the value itself contains the shorthand it came from. This means that if e.g. the border shorthand is parsed with a value that contains a var() reference, the corresponding -internal-border-*-color property will point to the same pending substitution value, that contains the "border" shorthand. When resolving that pending substitution value computed-value time, we expand the shorthand into its longhands, which of course are unaware of the -internal-visited-* context. To fix this, this CL adds a way to get the unvisited counterpart from a visited property, and uses the unvisited CSSPropertyID as they key for the pending substitution cache. Bug: 974665, 976913 Change-Id: I1a168bfe188eaccad7feac6c065f8e447ee56dbe Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1669290 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/master@{#670896} -- wpt-commits: be93a1b93e08be1bd161208aaa6ab662c1c2d1c1 wpt-pr: 17411
36 lines
1.4 KiB
HTML
36 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>Verify that colors with var() references apply in visited link context</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-variables/#using-variables">
|
|
<style>
|
|
div {
|
|
min-height: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.color { color: green; }
|
|
.background_color { background-color: green; }
|
|
.border { border: medium solid green; }
|
|
.outline { outline: medium solid green; }
|
|
.text_decoration { text-decoration: solid underline green; }
|
|
.column_rule { columns: 2; column-rule: medium solid green; }
|
|
.stroke { stroke: green; fill: white; }
|
|
.fill { fill: green; }
|
|
</style>
|
|
<a href="">
|
|
<div class="color">Text should be green</div>
|
|
<div class="background_color"></div>
|
|
<div class="border"></div>
|
|
<div class="border"></div>
|
|
<div class="border"></div>
|
|
<div class="border"></div>
|
|
<div class="outline"></div>
|
|
<div class="outline"></div>
|
|
<div class="text_decoration">Underline should be green</div>
|
|
<div class="text_decoration">Underline should be green</div>
|
|
<div class="column_rule"><div style="height: 20px"></div></div>
|
|
<div class="column_rule"><div style="height: 20px"></div></div>
|
|
<svg width="20" height="50">
|
|
<rect class="stroke" x="5" y="5" width="10" height="10" />
|
|
<rect class="fill" x="5" y="20" width="10" height="10" />
|
|
</svg>
|
|
</a>
|