diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/cssom/cssstyledeclaration-setter-declarations.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/cssom/cssstyledeclaration-setter-declarations.html')
| -rw-r--r-- | testing/web-platform/tests/css/cssom/cssstyledeclaration-setter-declarations.html | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/cssom/cssstyledeclaration-setter-declarations.html b/testing/web-platform/tests/css/cssom/cssstyledeclaration-setter-declarations.html new file mode 100644 index 0000000000..e66466e7a1 --- /dev/null +++ b/testing/web-platform/tests/css/cssom/cssstyledeclaration-setter-declarations.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<title>CSSOM test: declaration block after setting via CSSOM</title> +<link rel="help" href="https://drafts.csswg.org/cssom/#set-a-css-declaration-value"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> + function generateCSSDeclBlock(props) { + let elem = document.createElement("div"); + let cssText = props.map(({name, value, priority}) => { + let longhand = `${name}: ${value}`; + if (priority) { + longhand += "!" + priority; + } + return longhand + ";"; + }).join(" "); + elem.setAttribute("style", cssText); + return elem.style; + } + function compareByName(a, b) { + if (a.name < b.name) return -1; + if (a.name > b.name) return 1; + return 0; + } + function checkDeclarationsAnyOrder(block, props, msg) { + let actual = []; + for (let name of block) { + let value = block.getPropertyValue(name); + let priority = block.getPropertyPriority(name); + actual.push({name, value, priority}); + } + actual.sort(compareByName); + let expected = Array.from(props); + expected.sort(compareByName); + assert_object_equals(actual, expected, "Declaration block content should match " + msg); + } + function longhand(name, value, priority="") { + return {name, value, priority}; + } + function* shorthand(name, value, priority="") { + for (let subprop of SUBPROPS[name]) { + yield longhand(subprop, value, priority); + } + } + + const SUBPROPS = { + "margin": ["margin-top", "margin-right", "margin-bottom", "margin-left"], + "padding": ["padding-top", "padding-right", "padding-bottom", "padding-left"], + }; + + test(function() { + let expectedDecls = [ + longhand("top", "1px"), + longhand("bottom", "2px"), + longhand("left", "3px", "important"), + longhand("right", "4px"), + ]; + let block = generateCSSDeclBlock(expectedDecls); + checkDeclarationsAnyOrder(block, expectedDecls, "in initial block"); + + block.setProperty("top", "5px", "important"); + expectedDecls[0] = longhand("top", "5px", "important"); + checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property"); + + block.setProperty("bottom", "2px"); + checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with identical value"); + + block.setProperty("left", "3px"); + expectedDecls[2].priority = ""; + checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with different priority"); + + block.setProperty("float", "none"); + expectedDecls.push(longhand("float", "none")); + checkDeclarationsAnyOrder(block, expectedDecls, "after setting non-existing property"); + }, "setProperty with longhand should update only the declaration being set"); + + test(function() { + let expectedDecls = [ + longhand("top", "1px"), + longhand("bottom", "2px"), + longhand("left", "3px", "important"), + longhand("right", "4px"), + ]; + let block = generateCSSDeclBlock(expectedDecls); + checkDeclarationsAnyOrder(block, expectedDecls, "in initial block"); + + block.top = "5px"; + expectedDecls[0] = longhand("top", "5px"); + checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property"); + + block.bottom = "2px"; + checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with identical value"); + + block.left = "3px"; + expectedDecls[2].priority = ""; + checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with different priority"); + + block.float = "none"; + expectedDecls.push(longhand("float", "none")); + checkDeclarationsAnyOrder(block, expectedDecls, "after setting non-existing property"); + }, "property setter should update only the declaration being set"); + + test(function() { + let expectedDecls = [ + ...shorthand("margin", "1px"), + longhand("top", "2px"), + ...shorthand("padding", "3px", "important"), + ]; + let block = generateCSSDeclBlock(expectedDecls); + checkDeclarationsAnyOrder(block, expectedDecls, "in initial block"); + + block.setProperty("margin", "4px"); + for (let i = 0; i < 4; i++) { + expectedDecls[i].value = "4px"; + } + checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand"); + + block.setProperty("margin", "4px"); + checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with identical value"); + + block.setProperty("padding", "3px"); + for (let i = 5; i < 9; i++) { + expectedDecls[i].priority = ""; + } + checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with different priority"); + + block.setProperty("margin-bottom", "5px", "important"); + expectedDecls[2] = longhand("margin-bottom", "5px", "important"); + checkDeclarationsAnyOrder(block, expectedDecls, "after setting a longhand in an existing shorthand"); + }, "setProperty with shorthand should update only the declarations being set"); + + test(function() { + let expectedDecls = [ + ...shorthand("margin", "1px"), + longhand("top", "2px"), + ...shorthand("padding", "3px", "important"), + ]; + let block = generateCSSDeclBlock(expectedDecls); + checkDeclarationsAnyOrder(block, expectedDecls, "in initial block"); + + block.margin = "4px"; + for (let i = 0; i < 4; i++) { + expectedDecls[i].value = "4px"; + } + checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand"); + + block.margin = "4px"; + checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with identical value"); + + block.padding = "3px"; + for (let i = 5; i < 9; i++) { + expectedDecls[i].priority = ""; + } + checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with different priority"); + + block.marginBottom = "5px"; + expectedDecls[2] = longhand("margin-bottom", "5px"); + checkDeclarationsAnyOrder(block, expectedDecls, "after setting a longhand in an existing shorthand"); + }, "longhand property setter should update only the decoarations being set"); +</script> |