random-computed.tentative.html

<!DOCTYPE html>

<link rel="help" href="https://drafts.csswg.org/css-values-5/#random">

<link rel="author" title="sam@webkit.org">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="../support/computed-testcommon.js"></script>

<div id="container" style="font-size: 20">

  <div id="target"></div>

</div>

<div id="noIdentifier1" class="randomNoIdentifier"></div>

<div id="noIdentifier2" class="randomNoIdentifier"></div>

<div id="identifier1" class="randomIdentifier"></div>

<div id="identifier2" class="randomIdentifier"></div>

<div id="identicalArguments1"></div>

<div id="identicalArguments2"></div>

<div id="identicalArgumentsAfterMath1"></div>

<div id="identicalArgumentsAfterMath2"></div>

<div id="identicalArgumentsAfterUnitResolution1"></div>

<div id="identicalArgumentsAfterUnitResolution2"></div>

<div id="identicalTwoProperties"></div>

<div id="identicalTwoPropertiesWithIdentifier"></div>

<div id="identicalTwoPropertiesWithPerElement"></div>

<div id="identicalTwoPropertiesWithPerElementAndIdentifier"></div>

<style>

  .randomPerElement { width: random(per-element, 0px, 100000px); }

  .randomNoIdentifier { width: random(10px, 110px); }

  .randomIdentifier { width: random(--identifier, 20px, 120px); }

  #identicalArguments1 { width: random(30px, 130px); }

  #identicalArguments2 { width: random(30px, 130px); }

  #identicalArgumentsAfterMath1 { width: random(5 * 10px, 2 * 75px); }

  #identicalArgumentsAfterMath2 { width: random(100px / 2, 300px / 2); }

  #identicalArgumentsAfterUnitResolution1 { width: random(160px, 320px); }

  #identicalArgumentsAfterUnitResolution2 { font-size: 16px; width: random(10em, 20em); }

  #identicalTwoProperties {

    width: random(60px, 160px);

    height: random(60px, 160px);

  #identicalTwoPropertiesWithIdentifier {

    width: random(--another-identifier, 70px, 170px);

    height: random(--another-identifier, 70px, 170px);

  #identicalTwoPropertiesWithPerElement {

    width: random(per-element, 80px, 180px);

    height: random(per-element, 80px, 180px);

  #identicalTwoPropertiesWithPerElementAndIdentifier {

    width: random(per-element --yet-another-identifier, 90px, 190px);

    height: random(--yet-another-identifier per-element, 90px, 190px);

</style>

<script>

function test_computed_value_in_range(property, specified, computedMin, computedMax, titleExtra) {

  test(() => {

    const target = document.getElementById('target');

    assert_true(property in getComputedStyle(target), property + " doesn't seem to be supported in the computed style");

    assert_true(CSS.supports(property, specified), "'" + specified + "' is a supported value for " + property + ".");

    target.style[property] = '';

    target.style[property] = specified;

    let readValue = getComputedStyle(target)[property];

    let readValueNumber = parseFloat(readValue);

    let computedMinNumber = parseFloat(computedMin);

    let computedMaxNumber = parseFloat(computedMax);

    assert_greater_than_equal(readValueNumber, computedMinNumber, specified);

    assert_less_than_equal(readValueNumber, computedMaxNumber, specified);

  }, `Property ${property} value '${specified}'${titleExtra ? ' ' + titleExtra : ''}`);

function test_pseudo_element_computed_value_in_range(property, pseudo_element, specified, computedMin, computedMax, titleExtra) {

  test(() => {

    const styleEl = document.head.appendChild(document.createElement("style"));

    styleEl.innerHTML = `#target${pseudo_element} \{ ${property}: ${specified}; \}`;

    try {

      const target = document.getElementById("target");

      let readValue = getComputedStyle(target, pseudo_element)[property];

      let readValueNumber = parseFloat(readValue);

      let computedMinNumber = parseFloat(computedMin);

      let computedMaxNumber = parseFloat(computedMax);

      assert_greater_than_equal(readValueNumber, computedMinNumber, specified);

      assert_less_than_equal(readValueNumber, computedMaxNumber, specified);

    } finally {

      document.head.removeChild(styleEl);

  }, `Property ${property} value on pseudo element '${pseudo_element}' '${specified}'${titleExtra ? ' ' + titleExtra : ''}`);

const property = 'scale';

test_computed_value_in_range(property, 'random(1, 11)', '1', '11');

test_computed_value_in_range(property, 'random(--foo, 2, 12)', '2', '12');

test_computed_value_in_range(property, 'random(--foo per-element, 3, 13)', '3', '13');

test_computed_value_in_range(property, 'random(per-element --foo, 4, 14)', '4', '14');

test_computed_value(property, 'random(0, 10, by 5)', ['0', '5', '10']);

test_computed_value(property, 'random(--foo, 10, 20, by 5)', ['10', '15', '20']);

test_computed_value(property, 'random(--foo per-element, 20, 30, by 5)', ['20', '25', '30']);

test_computed_value(property, 'random(per-element --foo, 30, 40, by 5)', ['30', '35', '40']);

// Test out of order.

test_computed_value(property, 'random(100, 10)', '100');

test_computed_value(property, 'random(-10, -100)', '-10');

// Test negative values

test_computed_value_in_range(property, 'random(-100, -10)', '-100', '-10');

test_computed_value(property, 'random(40, 50, by -5)', '40');

// Test nested expressions

test_computed_value_in_range(property, 'random(5 * 1, 30 / 2)', '5', '15');

// Test nested in expressions

test_computed_value_in_range(property, 'calc(2 * random(6, 16))', '12', '32');

// Test NaN

test_computed_value(property, 'random(NaN, 100)', '0');

test_computed_value(property, 'random(10, NaN)', '0');

test_computed_value(property, 'random(NaN, NaN)', '0');

test_computed_value(property, 'random(NaN, 100, by 10)', '0');

test_computed_value(property, 'random(10, NaN, by 10)', '0');

test_computed_value(property, 'random(NaN, NaN, by 10)', '0');

test_computed_value(property, 'random(NaN, 100, by NaN)', '0');

test_computed_value(property, 'random(10, NaN, by NaN)', '0');

test_computed_value(property, 'random(NaN, NaN, by NaN)', '0');

test_computed_value(property, 'random(10, 100, by NaN)', '0');

test_computed_value(property, 'calc(10 + random(NaN, 100))', '0');

test_computed_value(property, 'calc(10 + random(10, NaN))', '0');

test_computed_value(property, 'calc(10 + random(NaN, NaN))', '0');

test_computed_value(property, 'calc(10 + random(NaN, 100, by 10))', '0');

test_computed_value(property, 'calc(10 + random(10, NaN, by 10))', '0');

test_computed_value(property, 'calc(10 + random(NaN, NaN, by 10))', '0');

test_computed_value(property, 'calc(10 + random(NaN, 100, by NaN))', '0');

test_computed_value(property, 'calc(10 + random(10, NaN, by NaN))', '0');

test_computed_value(property, 'calc(10 + random(NaN, NaN, by NaN))', '0');

test_computed_value(property, 'calc(10 + random(10, 100, by NaN))', '0');

// Test infinity

test_computed_value(property, 'random(infinity, 100)', '0');

test_computed_value(property, 'random(10, infinity)', '0');

test_computed_value(property, 'random(infinity, infinity)', '0');

test_computed_value(property, 'random(infinity, 100, by 10)', '0');

test_computed_value(property, 'random(10, infinity, by 10)', '0');

test_computed_value(property, 'random(infinity, infinity, by 10)', '0');

test_computed_value(property, 'random(infinity, 100, by infinity)', '0');

test_computed_value(property, 'random(10, infinity, by infinity)', '0');

test_computed_value(property, 'random(infinity, infinity, by infinity)', '0');

test_computed_value(property, 'calc(10 + random(infinity, 100))', '0');

test_computed_value(property, 'calc(10 + random(10, infinity))', '0');

test_computed_value(property, 'calc(10 + random(infinity, infinity))', '0');

test_computed_value(property, 'calc(10 + random(infinity, 100, by 10))', '0');

test_computed_value(property, 'calc(10 + random(10, infinity, by 10))', '0');

test_computed_value(property, 'calc(10 + random(infinity, infinity, by 10))', '0');

test_computed_value(property, 'calc(10 + random(infinity, 100, by infinity))', '0');

test_computed_value(property, 'calc(10 + random(10, infinity, by infinity))', '0');

test_computed_value(property, 'calc(10 + random(infinity, infinity, by infinity))', '0');

// If only step is infinite, min is used.

test_computed_value(property, 'random(10, 100, by infinity)', '10');

test_computed_value(property, 'random(10, 100, by -infinity)', '10');

test_computed_value(property, 'calc(10 + random(10, 100, by infinity))', '20');

test_computed_value(property, 'calc(10 + random(10, 100, by -infinity))', '20');

// Test pseudo on psuedo elements

test_pseudo_element_computed_value_in_range('scale', '::before', 'random(7, 17)', '7', '17');

test_pseudo_element_computed_value_in_range('scale', '::before', 'random(--bar, 8, 18)', '8', '18');

test_pseudo_element_computed_value_in_range('scale', '::before', 'random(per-element, 9, 19)', '9', '19');

test_pseudo_element_computed_value_in_range('scale', '::before', 'random(per-element --foo, 10, 20)', '10', '20');

// Test identifier caching

test(() => {

  const t1 = document.getElementById('noIdentifier1');

  const t2 = document.getElementById('noIdentifier2');

  let t1Computed = getComputedStyle(t1)['width'];

  let t2Computed = getComputedStyle(t2)['width'];

  assert_equals(t1Computed, t2Computed);

}, `Uses of a style rule on two elements with 'random(...)'`);

test(() => {

  const t1 = document.getElementById('identifier1');

  const t2 = document.getElementById('identifier2');

  let t1Computed = getComputedStyle(t1)['width'];

  let t2Computed = getComputedStyle(t2)['width'];

  assert_equals(t1Computed, t2Computed);

}, `Uses of a style rule on two elements with 'random(--identifier, ...)'`);

test(() => {

  const t1 = document.getElementById('identicalArguments1');

  const t2 = document.getElementById('identicalArguments2');

  let t1Computed = getComputedStyle(t1)['width'];

  let t2Computed = getComputedStyle(t2)['width'];

  assert_equals(t1Computed, t2Computed);

}, `Uses of two style rules on two elements with identical arguments`);

test(() => {

  const t1 = document.getElementById('identicalArgumentsAfterMath1');

  const t2 = document.getElementById('identicalArgumentsAfterMath2');

  let t1Computed = getComputedStyle(t1)['width'];

  let t2Computed = getComputedStyle(t2)['width'];

  assert_equals(t1Computed, t2Computed);

}, `Uses of two style rules on two elements with identical arguments after math has been resolved`);

test(() => {

  const t1 = document.getElementById('identicalArgumentsAfterUnitResolution1');

  const t2 = document.getElementById('identicalArgumentsAfterUnitResolution2');

  let t1Computed = getComputedStyle(t1)['width'];

  let t2Computed = getComputedStyle(t2)['width'];

  assert_equals(t1Computed, t2Computed);

}, `Uses of two style rules on two elements with identical arguments after unit resolution`);

test(() => {

  const style = 'width: calc(410px, 500px)';

  const el1 = document.createElement('div');

  el1.style = style;

  document.body.appendChild(el1);

  const el1Computed = getComputedStyle(el1)['width'];

  const el2 = document.createElement('div');

  el2.style = style;

  document.body.appendChild(el2);

  const el2Computed = getComputedStyle(el2)['width'];

  assert_equals(el1Computed, el2Computed);

}, `Uses of two style rules on two elements with identical arguments accross two different style resolutions`);

test(() => {

  const el = document.getElementById('identicalTwoProperties');

  let widthComputed = getComputedStyle(el)['width'];

  let heightComputed = getComputedStyle(el)['height'];

  assert_equals(widthComputed, heightComputed);

}, `Uses of a style rule for two properies on an element with identical uses of random(...).`);

test(() => {

  const el = document.getElementById('identicalTwoPropertiesWithIdentifier');

  let widthComputed = getComputedStyle(el)['width'];

  let heightComputed = getComputedStyle(el)['height'];

  assert_equals(widthComputed, heightComputed);

}, `Uses of a style rule for two properies on an element with identical uses of random(--identifier, ...).`);

test(() => {

  const el = document.getElementById('identicalTwoPropertiesWithPerElement');

  let widthComputed = getComputedStyle(el)['width'];

  let heightComputed = getComputedStyle(el)['height'];

  assert_equals(widthComputed, heightComputed);

}, `Uses of a style rule for two properies on an element with identical uses of random(per-elemnent, ...).`);

test(() => {

  const el = document.getElementById('identicalTwoPropertiesWithPerElementAndIdentifier');

  let widthComputed = getComputedStyle(el)['width'];

  let heightComputed = getComputedStyle(el)['height'];

  assert_equals(widthComputed, heightComputed);

}, `Uses of a style rule for two properies on an element with identical uses of random(per-elemnent --identifier, ...).`);

test(() => {

  const el = document.createElement('div');

  el.className = 'randomPerElement';

  document.body.appendChild(el);

  const elComputed = getComputedStyle(el)['width'];

  // It is statistically improbable that all 100 elements will have

  // the same width when picked as a random number between 0 and 100000.

  var allSame = true;

  for (i = 0; i < 100; ++i) {

    const other = document.createElement('div');

    other.className = 'randomPerElement';

    document.body.appendChild(other);

    const otherComputed = getComputedStyle(other)['width'];

    if (elComputed != otherComputed) {

      allSame = false;

  assert_false(allSame);

}, `Uses of a style rule on multiple elements with 'random(per-element, ...)'`);

</script>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings