bounded-sizes.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/permission-element/bounded-sizes.tentative.html - WPT Dashboard Interop Dashboard

<!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;

    width: auto;

    height: auto;

    min-height: 1px;

    max-height: 100px;

    padding-top: 12px;

    padding-left: 60px;

    padding-bottom: 1000px;

    padding-right: 1000px;

    /* 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;

    width: auto;

    height: auto;

    min-height: 11px;

    max-height: 29px;

    padding-top: 5px;

    padding-left: 45px;

    padding-bottom: 6px;

    padding-right: 46px;

</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");

    assert_equals(getComputedStyle(el_outside_bounds).paddingLeft, "50px", "padding-left");

    assert_equals(getComputedStyle(el_outside_bounds).paddingRight, "50px", "padding-right");

    assert_equals(getComputedStyle(el_outside_bounds).paddingTop, "10px", "padding-top");

    assert_equals(getComputedStyle(el_outside_bounds).paddingBottom, "10px", "padding-bottom");

  }, "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");

    assert_equals(getComputedStyle(el_inside_bounds).paddingLeft, "45px", "padding-left");

    assert_equals(getComputedStyle(el_inside_bounds).paddingRight, "45px", "padding-right");

    assert_equals(getComputedStyle(el_inside_bounds).paddingTop, "5px", "padding-top");

    assert_equals(getComputedStyle(el_inside_bounds).paddingBottom, "5px", "padding-bottom");

  }, "Properties with values in bounds should not be modified");

</script>

</body>