overflow-shorthand-001.html (1717B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow Test: Overflow longhand accepts two values</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="author" title="Emilio Cobos Álvarez <emilio@crisal.io>"> 7 <link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> 8 <div id="test-div"></div> 9 <script> 10 let div = document.getElementById("test-div"); 11 function testOverflowShorthand(x, y) { 12 test(function() { 13 div.style.overflowX = x; 14 div.style.overflowY = y; 15 16 let expectedX = getComputedStyle(div).overflowX; 17 let expectedY = getComputedStyle(div).overflowY; 18 let expectedComputedSerialization = expectedX == expectedY ? expectedX : `${expectedX} ${expectedY}`; 19 let expectedSpecifiedSerialization = x == y ? x : `${x} ${y}`; 20 21 assert_equals(div.style.overflow, expectedSpecifiedSerialization); 22 assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization); 23 24 div.style.overflowX = ""; 25 div.style.overflowY = ""; 26 assert_equals(div.style.overflow, ""); 27 28 div.style.overflow = `${x} ${y}`; 29 assert_equals(div.style.overflow, expectedSpecifiedSerialization); 30 assert_equals(div.style.overflowX, x); 31 assert_equals(div.style.overflowY, y); 32 assert_equals(getComputedStyle(div).overflow, expectedComputedSerialization); 33 assert_equals(getComputedStyle(div).overflowX, expectedX); 34 assert_equals(getComputedStyle(div).overflowY, expectedY); 35 }, `overflow: ${x} ${y} works`); 36 } 37 38 let OVERFLOW_VALUES = [ "auto", "hidden", "scroll", "visible" ]; 39 for (let x of OVERFLOW_VALUES) 40 for (let y of OVERFLOW_VALUES) 41 testOverflowShorthand(x, y); 42 </script>