Bug 1889466 [wpt PR 45509] - [PEPC] Limit min/max-height/width for PEPC, a=testonly

Automatic update from web-platform-tests
[PEPC] Limit min/max-height/width for PEPC

Put limits on what the min/max-width/height can be.

The min-height will have to be at least 1em
The max-height will have to be at most 3em

Widths are enforced by building an expression that makes use of
calc-size:
The min-width will have to be at least fit-content.
The max-width will have to be at most 3x fit-content.

Bug: 1462930

Change-Id: Idb00f9614cde69e4ff2ca295ca5e89b85b3d0f04
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5386157
Reviewed-by: Thomas Nguyen <tungnh@chromium.org>
Reviewed-by: David Baron <dbaron@chromium.org>
Commit-Queue: Andy Paicu <andypaicu@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1286356}

--

wpt-commits: 7c2a090d60996315c82651c562aaea988d2220b5
wpt-pr: 45509
This commit is contained in:
Andy Paicu 2024-04-15 16:15:44 +00:00 committed by moz-wptsync-bot
parent cbc04b7104
commit e41da79b21
7 changed files with 139 additions and 2 deletions

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<meta charset=utf-8>
<link rel="match" href="bounded-css-properties-reference-expected.html">
<link rel="match" href="bounded-css-properties-reftest-ref.html">
<link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style">
<body>
<div>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<meta charset=utf-8>
<body>
<div>
The permission element should have some limits for the min/max-width/height:
<ul>
<li>min-width should be sufficient to fit the element text (depends on user agent implementation)</li>
<li>max-width should be at most 3x min-width</li>
<li>min-height should be sufficient to fit the element text (1em)</li>
<li>max-height should be at most 3x min-height</li>
</ul>
</div>
<style>
#id1 {
font-size: 10px;
height: 10px;
/* width set via JS */
}
#id2 {
font-size: 10px;
height: 30px;
/* width set via JS */
}
</style>
<permission id="id1" type="geolocation">
<permission id="id2" type="camera">
<script>
let el = document.getElementById("id1");
el.style.width = getComputedStyle(el).minWidth;
el = document.getElementById("id2");
el.style.width = getComputedStyle(el).maxWidth;
</script>
</body>
</html>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<meta charset=utf-8>
<link rel="match" href="bounded-sizes-reftest-ref.html">
<link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style">
<body>
<div>
The permission element should have some limits for the min/max-width/height:
<ul>
<li>min-width should be sufficient to fit the element text (depends on user agent implementation)</li>
<li>max-width should be at most 3x min-width</li>
<li>min-height should be sufficient to fit the element text (1em)</li>
<li>max-height should be at most 3x min-height</li>
</ul>
</div>
<style>
#id1 {
font-size: 10px;
min-height: 1px;
max-height: 100px;
/* These values are extreme enough that they should be out of bounds for any implementation */
min-width: 10px;
max-width: 1000px;
/* This element will be as tiny as possible */
width: 1px;
height: 1px;
}
#id2 {
font-size: 10px;
min-height: 1px;
max-height: 100px;
/* These values are extreme enough that they should be out of bounds for any implementation */
min-width: 10px;
max-width: 1000px;
/* This element will be as large as possible */
width: 1000px;
height: 1000px;
}
</style>
<permission id="id1" type="geolocation">
<permission id="id2" type="camera">
</body>

View file

@ -0,0 +1,51 @@
<!DOCTYPE html>
<meta charset=utf-8>
<link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<!--The permission element should have some limits for the min/max-width/height:
* min-width should be sufficient to fit the element text (depends on user agent implementation)
* max-width should be at most 3x min-width
* min-height should be sufficient to fit the element text (1em)
* max-height should be at most 3x min-height
-->
<style>
#id1 {
font-size: 10px;
min-height: 1px;
max-height: 100px;
/* These values are extreme enough that they should be out of bounds for any implementation */
min-width: 10px;
max-width: 1000px;
}
#id2 {
font-size: 10px;
min-height: 11px;
max-height: 29px;
}
</style>
<permission id="id1" type="geolocation">
<permission id="id2" type="camera">
<script>
test(function(){
let el_outside_bounds = document.getElementById("id1");
let min_height = getComputedStyle(el_outside_bounds).minHeight;
let max_height = getComputedStyle(el_outside_bounds).maxHeight;
assert_true(min_height === "calc(10px)" || min_height === "10px", "min-height");
assert_true(max_height === "calc(30px)" || max_height === "30px", "max-height");
assert_not_equals(getComputedStyle(el_outside_bounds).minWidth, "10px", "min-width");
assert_not_equals(getComputedStyle(el_outside_bounds).maxWidth, "1000px", "max-width");
}, "Properties with out-of-bounds values should be corrected");
test(function(){
let el_inside_bounds = document.getElementById("id2");
assert_equals(getComputedStyle(el_inside_bounds).minHeight, "calc(11px)", "min-height");
assert_equals(getComputedStyle(el_inside_bounds).maxHeight, "calc(29px)", "max-height");
}, "Properties with values in bounds should not be modified");
</script>
</body>

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<meta charset=utf-8>
<link rel="match" href="display-css-property-reference-expected.html">
<link rel="match" href="display-css-property-reftest-ref.html">
<link rel="help" href="https://github.com/WICG/PEPC/blob/main/explainer.md#locking-the-pepc-style">
<body>
<div>