overflow-shorthand-001.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/overflow-shorthand-001.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Overflow Test: Overflow longhand accepts two values</title>

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

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

<link rel="author" title="Emilio Cobos Álvarez <emilio@crisal.io>">

<link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow">

<div id="test-div"></div>

<script>

let div = document.getElementById("test-div");

function testOverflowShorthand(x, y) {

  test(function() {

    div.style.overflowX = x;

    div.style.overflowY = y;

    let expectedX = getComputedStyle(div).overflowX;

    let expectedY = getComputedStyle(div).overflowY;

    let expectedComputedSerialization = expectedX == expectedY ? expectedX : `${expectedX} ${expectedY}`;

    let expectedSpecifiedSerialization = x == y ? x : `${x} ${y}`;

    assert_equals(div.style.overflow, expectedSpecifiedSerialization);

    assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization);

    div.style.overflowX = "";

    div.style.overflowY = "";

    assert_equals(div.style.overflow, "");

    div.style.overflow = `${x} ${y}`;

    assert_equals(div.style.overflow, expectedSpecifiedSerialization);

    assert_equals(div.style.overflowX, x);

    assert_equals(div.style.overflowY, y);

    assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization);

    assert_equals(getComputedStyle(div).overflowX, expectedX);

    assert_equals(getComputedStyle(div).overflowY, expectedY);

  }, `overflow: ${x} ${y} works`);

let OVERFLOW_VALUES = [ "auto", "hidden", "scroll", "visible" ];

for (let x of OVERFLOW_VALUES)

  for (let y of OVERFLOW_VALUES)

    testOverflowShorthand(x, y);

</script>