mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
58e47a7324
Automatic update from web-platform-tests[css-logical] Fix logical values according to the spec Spec: https://drafts.csswg.org/css-logical/#directional-keywords Currently logical values compute to the corresponding physical value, and the mapping is with respect to the element itself. This patch makes them compute as specified and changes the mapping to be with respect to the containing block. BUG=901409 TEST=external/wpt/css/css-logical/logical-values-float-clear.html TEST=external/wpt/css/css-logical/logical-values-float-clear-reftest.html TEST=external/wpt/css/css-logical/logical-values-resize.html TEST=webexposed/nonstable-css-properties.html Change-Id: Ie0acaacde813c5343ec3bb8de712c4af03639475 Reviewed-on: https://chromium-review.googlesource.com/c/1315989 Commit-Queue: Manuel Rego <rego@igalia.com> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#608730} -- wpt-commits: 68eabe4d5bf5bed82dcdcc33e8b9e54a45d55307 wpt-pr: 13928
68 lines
2.3 KiB
HTML
68 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8" />
|
|
<title>CSS Logical Values: Flow-Relative Values for the 'float' property</title>
|
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
|
|
<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear">
|
|
<meta name="assert" content="This test checks that the 'inline-start' and 'inline-end' values of the 'float' and 'clear' properties map to the correct physical value." />
|
|
<link rel="match" href="reference/logical-values-float-clear-reftest-ref.html">
|
|
<style>
|
|
.test {
|
|
display: block;
|
|
overflow: hidden;
|
|
width: 300px;
|
|
}
|
|
.inline {
|
|
display: inline;
|
|
}
|
|
.float, .clear {
|
|
display: block;
|
|
overflow: hidden;
|
|
height: 3px;
|
|
width: 100px;
|
|
background: #f0f;
|
|
}
|
|
.clear {
|
|
background: #0ff;
|
|
}
|
|
</style>
|
|
<body>
|
|
<script>
|
|
const sides = ["inline-start", "inline-end"];
|
|
const directions = ["ltr", "rtl"];
|
|
for (const floatSide of sides) {
|
|
for (const clearSide of sides) {
|
|
for (const containerDirection of directions) {
|
|
for (const inlineParentDirection of [null, ...directions]) {
|
|
for (const floatDirection of directions) {
|
|
for (const clearDirection of directions) {
|
|
const containerEl = document.createElement("div");
|
|
containerEl.className = "test";
|
|
containerEl.style.direction = containerDirection;
|
|
const floatEl = document.createElement("div");
|
|
floatEl.className = "float";
|
|
floatEl.style.direction = floatDirection;
|
|
floatEl.style.float = floatSide;
|
|
const clearEl = document.createElement("div");
|
|
clearEl.className = "clear";
|
|
clearEl.style.direction = floatDirection;
|
|
clearEl.style.clear = clearSide;
|
|
if (inlineParentDirection) {
|
|
const inlineParent = document.createElement("div");
|
|
inlineParent.className = "inline";
|
|
inlineParent.style.direction = inlineParentDirection;
|
|
inlineParent.appendChild(floatEl);
|
|
inlineParent.appendChild(clearEl);
|
|
containerEl.appendChild(inlineParent);
|
|
} else {
|
|
containerEl.appendChild(floatEl);
|
|
containerEl.appendChild(clearEl);
|
|
}
|
|
document.body.appendChild(containerEl);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|