testing/web-platform/tests/css/css-overflow/overflow-shorthand-001.html
author Emilio Cobos Álvarez <emilio@crisal.io>
Wed, 19 Sep 2018 22:02:01 +0200
changeset 492589 862f7fc8be9db739acc0c48b8b49f63ff4213079
parent 488600 a377edbfae933b68be83dccd0e2a641c963afca0
permissions -rw-r--r--
Bug 1492567 - Back out bug 1481866. r=dbaron a=pascalc Summary: The behavior the WG proposed is way more subtle than what that bug implements, including: * Implementing two logical overflow longhands. * Expanding the overflow shorthand to different longhands depending on the syntax of that. Meanwhile, Blink hasn't done the swap and will ship the same behavior that we shipped in Firefox 61 (bug 1453148), that is, overflow-x, then overflow-y. So I think lacking a clear way forward we should revert this change and preserve our shipped behavior. Reviewers: dbaron! Tags: #secure-revision Bug #: 1492567 Differential Revision: https://phabricator.services.mozilla.com/D6317

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