Skip to content

Commit f6808c3

Browse files
Thomas Nguyenchromium-wpt-export-bot
Thomas Nguyen
authored and
chromium-wpt-export-bot
committed
[PEPC] Use negative margin param of intersection observe
This CL refines intersection observer set up by focusing on the target's content area, which is usually smaller than its bounding rectangle. Instead of forcing a 4px margin, we're now using -4px margin to the target, so any overlap within that 4px padding is tolerant. Occlusion status will only be impacted if the inner rect is actually occluded. Change-Id: Ifb4a46a32059fe487a370282592ab8a896573d31 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6467575 Reviewed-by: Stefan Zager <szager@chromium.org> Reviewed-by: Andy Paicu <andypaicu@chromium.org> Commit-Queue: Thomas Nguyen <tungnh@chromium.org> Cr-Commit-Position: refs/heads/main@{#1467495}
1 parent b1220ee commit f6808c3

File tree

2 files changed

+79
-68
lines changed

2 files changed

+79
-68
lines changed

‎html/semantics/permission-element/negative-offset-and-margin.tentative.html

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎html/semantics/permission-element/negative-offset.tentative.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<meta charset=utf-8>
3+
<link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style">
4+
<script src="/resources/testharness.js"></script>
5+
<script src="/resources/testharnessreport.js"></script>
6+
<body>
7+
<!--The permission element should not allow setting negative outline-offset.
8+
-->
9+
<style>
10+
#id1 {
11+
outline-offset: -50px;
12+
}
13+
#id2 {
14+
outline-offset: 50px;
15+
}
16+
17+
/* These various expressions all result in a negative value when calculated */
18+
#id3 {
19+
outline-offset: min(-50px, 50px);
20+
}
21+
#id4 {
22+
outline-offset: min(10%, -50px);
23+
}
24+
#id5 {
25+
outline-offset: clamp(-100px, 1vw, -50px);
26+
}
27+
#id6 {
28+
outline-offset: 1% - 10000px;
29+
}
30+
#id7 {
31+
outline-offset: max(min(-1em, 10em), -5%);
32+
}
33+
</style>
34+
35+
<permission id="id1" type="geolocation"></permission>
36+
<permission id="id2" type="camera"></permission>
37+
<permission id="id3" type="microphone"></permission>
38+
<permission id="id4" type="camera"></permission>
39+
<permission id="id5" type="geolocation"></permission>
40+
<permission id="id6" type="microphone"></permission>
41+
<permission id="id7" type="camera microphone"></permission>
42+
43+
<script>
44+
test(function(){
45+
var el_with_negatives = document.getElementById("id1");
46+
assert_equals(getComputedStyle(el_with_negatives).outlineOffset, "0px", "outline-offset");
47+
}, "Negative offset should be changed to 0px");
48+
49+
test(function(){
50+
var el_with_positives = document.getElementById("id2");
51+
assert_equals(getComputedStyle(el_with_positives).outlineOffset, "50px", "outline-offset");
52+
}, "Positive offset are unaffected");
53+
54+
test(function(){
55+
var el_with_negative_expr = document.getElementById("id3");
56+
assert_equals(getComputedStyle(el_with_negative_expr).outlineOffset, "0px", "outline-offset");
57+
}, "Expressions offset min(-50px, 50px) should return at least 0px");
58+
59+
test(function(){
60+
var el_with_negative_expr = document.getElementById("id4");
61+
assert_equals(getComputedStyle(el_with_negative_expr).outlineOffset, "0px", "outline-offset");
62+
}, "Expressions offset outline-offset: min(10%, -50px) should return at least 0px");
63+
64+
test(function(){
65+
var el_with_negative_expr = document.getElementById("id5");
66+
assert_equals(getComputedStyle(el_with_negative_expr).outlineOffset, "0px", "outline-offset");
67+
}, "Expressions offset clamp(-100px, 1vw, -50px) should return at least 0px");
68+
69+
test(function(){
70+
var el_with_negative_expr = document.getElementById("id6");
71+
assert_equals(getComputedStyle(el_with_negative_expr).outlineOffset, "0px", "outline-offset");
72+
}, "Expressions offset 1% - 10000px should return at least 0px");
73+
74+
test(function(){
75+
var el_with_negative_expr = document.getElementById("id7");
76+
assert_equals(getComputedStyle(el_with_negative_expr).outlineOffset, "0px", "outline-offset");
77+
}, "Expressions offset max(min(-1em, 10em), -5%) should return at least 0px");
78+
</script>
79+
</body>

0 commit comments

Comments
 (0)