forked from mirrors/gecko-dev
e39bf77494
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
42 lines
1.7 KiB
HTML
42 lines
1.7 KiB
HTML
<!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>
|