Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-16 19:05:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'

Browse source
This commit is contained in:
WPT Sync Bot 2022-01-20 04:38:55 +00:00 • committed by cybai
parent 4401622eb1
commit b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
Download patch file Download diff file Expand all files Collapse all files

120
tests/wpt/web-platform-tests/css/css-pseudo/highlight-cascade-002.html Normal file
View file

@ -0,0 +1,120 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight cascade: custom properties are inherited regardless of inherits flag or inheritedness of referencing property</title>
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
<link rel="match" href="highlight-cascade-002-ref.html">
<meta name="assert" value="This test verifies that, given ::selection styles referencing custom properties, their substitution values are inherited from the parent ::selection styles, even if the property is registered with inherits set to false (--inherits-false) or the referencing property is not an inherited property (background-color). All custom properties are treated as inherited when used in highlight styles in any way.">
<script src="support/selections.js"></script>
<link rel="stylesheet" href="support/highlights.css">
<style>
/*
Register the custom properties, other than --unregistered,
which would be an inherited property [css-variables-1].
*/
@property --control {
syntax: "<color>";
initial-value: green;
inherits: false;
}
@property --inherits-false {
syntax: "<color>";
initial-value: red;
inherits: false;
}
@property --inherits-true {
syntax: "<color>";
initial-value: red;
inherits: true;
}
main {
font-size: 7em;
margin: 0.5em;
}
main::selection {
/*
Don’t visibly highlight the spaces between words.
*/
color: black;
background-color: transparent;
}
/*
Non-highlight control: if this text is white on red (inherit)
rather than white on green (initial), then @property is not
supported well enough to make this test meaningful.
*/
main > .control {
--control: red;
}
main > .control > span {
color: white;
background-color: var(--control);
}
main > *::selection {
--inherits-false: green;
--inherits-true: green;
--unregistered: green;
}
/*
Foreground tests: if the foreground of this text is red or
black (initial) rather than green (inherit), then custom
properties are not being inherited in highlight styles.
color is an inherited property, but that shouldn’t matter.
*/
main > .fg > span::selection {
background-color: white;
}
main > .fg.inherits-false > span::selection {
color: var(--inherits-false);
}
main > .fg.inherits-true > span::selection {
color: var(--inherits-true);
}
main > .fg.unregistered > span::selection {
color: var(--unregistered);
}
/*
Background tests: if the background of this text is red or
black (initial) rather than green (inherit), then custom
properties are not being inherited in highlight styles.
background-color is not an inherited property, but that
shouldn’t matter.
*/
main > .bg > span::selection {
color: white;
}
main > .bg.inherits-false > span::selection {
background-color: var(--inherits-false);
}
main > .bg.inherits-true > span::selection {
background-color: var(--inherits-true);
}
main > .bg.unregistered > span::selection {
background-color: var(--unregistered);
}
</style>
<p>Test passes if the words below are (respectively): white on green, green on white, white on green.
<main class="highlight_reftest"
><span class="control"><span>foo</span></span
> <span class="fg inherits-false"><span>b</span></span
><span class="fg inherits-true"><span>a</span></span
><span class="fg unregistered"><span>r</span></span
> <span class="bg inherits-false"><span>b</span></span
><span class="bg inherits-true"><span>a</span></span
><span class="bg unregistered"><span>z</span></span
></main>
<script>
const main = document.querySelector("main");
selectRangeWith(range => {
range.selectNodeContents(main);
range.setStart(main, 2);
range.setEnd(main, 9);
});
</script>