Blitz - WPT: highlight-image-stacked.html

wpt / css / css-highlight-api / highlight-image-stacked.html

/css/css-highlight-api/highlight-image-stacked.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Custom highlight: stacked highlights over a replaced element</title>
<link rel="author" title="Fernando Fiori" href="mailto:ffiori@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-bounds">
<link rel="match" href="highlight-image-stacked-ref.html">
<meta name="assert" content="Two custom highlights covering a replaced element stack by priority; the higher-priority opaque background paints on top of the lower one.">
<style>
  ::highlight(under) { background-color: blue; }
  ::highlight(over) { background-color: green; }
</style>
<body>
<div id="d"><img src="../../images/blank-highlight.png"></div>
<script>
  const d = document.getElementById('d');
  const makeHighlight = () => new Highlight(new StaticRange({
    startContainer: d, startOffset: 0, endContainer: d, endOffset: 1,
  }));
  const under = makeHighlight();
  const over = makeHighlight();
  under.priority = 0;
  over.priority = 1;
  CSS.highlights.set("under", under);
  CSS.highlights.set("over", over);
</script>
</body>

/css/css-highlight-api/highlight-image-stacked-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Custom highlight: stacked highlights over a replaced element (reference)</title>
<link rel="author" title="Fernando Fiori" href="mailto:ffiori@microsoft.com">
<style>
  #tint { width: 100px; height: 100px; background-color: green; }
</style>
<body>
<div id="d"><div id="tint"></div></div>
</body>