mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
b55eeb0554
Automatic update from web-platform-tests[css-logical] Implement flow-relative values for 'float', 'clear' and 'resize' properties They are implemented behind the CSSLogical runtime flag. Intent to Implement: https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/48OwfwZrbvI/A1XZFGkzAwAJ Spec: https://drafts.csswg.org/css-logical/#directional-keywords BUG=850004 TEST=external/wpt/css/css-logical/logical-values-float-clear.html TEST=external/wpt/css/css-logical/logical-values-resize.html The tests still have some failures because sideways writing modes have not been implemented yet (http://crbug.com/680331). Change-Id: Ieede2703368a44f3ce9996e917857226795ebaea Reviewed-on: https://chromium-review.googlesource.com/1163667 Reviewed-by: Anders Ruud <andruud@chromium.org> Reviewed-by: Yoav Weiss <yoav@yoav.ws> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#581904} -- wpt-commits: 9f51afc215d4f882a7ae069494ed37ea2c9503b1 wpt-pr: 12326
91 lines
3.6 KiB
JavaScript
91 lines
3.6 KiB
JavaScript
const sheet = document.head.appendChild(document.createElement("style"));
|
|
|
|
// Specify size for outer <div> to avoid unconstrained-size warnings
|
|
// when writing-mode of the inner test <div> is vertical-*
|
|
const wrapper = document.body.appendChild(document.createElement("div"));
|
|
wrapper.style.cssText = "width:100px; height: 100px;";
|
|
export const testElement = wrapper.appendChild(document.createElement("div"));
|
|
testElement.id = testElement.className = "test";
|
|
|
|
// Six unique overall writing modes for property-mapping purposes.
|
|
export const writingModes = [
|
|
{
|
|
styles: [
|
|
{"writing-mode": "horizontal-tb", "direction": "ltr"},
|
|
],
|
|
blockStart: "top", blockEnd: "bottom", inlineStart: "left", inlineEnd: "right",
|
|
over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
|
|
block: "vertical", inline: "horizontal" },
|
|
{
|
|
styles: [
|
|
{"writing-mode": "horizontal-tb", "direction": "rtl"},
|
|
],
|
|
blockStart: "top", blockEnd: "bottom", inlineStart: "right", inlineEnd: "left",
|
|
over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
|
|
block: "vertical", inline: "horizontal" },
|
|
{
|
|
styles: [
|
|
{"writing-mode": "vertical-rl", "direction": "rtl"},
|
|
{"writing-mode": "sideways-rl", "direction": "rtl"},
|
|
],
|
|
blockStart: "right", blockEnd: "left", inlineStart: "bottom", inlineEnd: "top",
|
|
over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
|
|
block: "horizontal", inline: "vertical" },
|
|
{
|
|
styles: [
|
|
{"writing-mode": "vertical-rl", "direction": "ltr"},
|
|
{"writing-mode": "sideways-rl", "direction": "ltr"},
|
|
],
|
|
blockStart: "right", blockEnd: "left", inlineStart: "top", inlineEnd: "bottom",
|
|
over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
|
|
block: "horizontal", inline: "vertical" },
|
|
{
|
|
styles: [
|
|
{"writing-mode": "vertical-lr", "direction": "rtl"},
|
|
],
|
|
blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top",
|
|
over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
|
|
block: "horizontal", inline: "vertical" },
|
|
{
|
|
styles: [
|
|
{"writing-mode": "sideways-lr", "direction": "ltr"},
|
|
],
|
|
blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top",
|
|
over: "left", under: "right", lineLeft: "bottom", lineRight: "top",
|
|
block: "horizontal", inline: "vertical" },
|
|
{
|
|
styles: [
|
|
{"writing-mode": "vertical-lr", "direction": "ltr"},
|
|
],
|
|
blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom",
|
|
over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
|
|
block: "horizontal", inline: "vertical" },
|
|
{
|
|
styles: [
|
|
{"writing-mode": "sideways-lr", "direction": "rtl"},
|
|
],
|
|
blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom",
|
|
over: "left", under: "right", lineLeft: "bottom", lineRight: "top",
|
|
block: "horizontal", inline: "vertical" },
|
|
];
|
|
|
|
export function testCSSValues(testName, style, expectedValues) {
|
|
for (const [property, value] of expectedValues) {
|
|
assert_equals(style.getPropertyValue(property), value, `${testName}, ${property}`);
|
|
}
|
|
}
|
|
|
|
export function testComputedValues(testName, rules, expectedValues) {
|
|
sheet.textContent = rules;
|
|
const cs = getComputedStyle(testElement);
|
|
testCSSValues(testName, cs, expectedValues);
|
|
sheet.textContent = "";
|
|
}
|
|
|
|
export function makeDeclaration(object = {}, replacement = "*") {
|
|
let decl = "";
|
|
for (const [property, value] of Object.entries(object)) {
|
|
decl += `${property.replace("*", replacement)}: ${value}; `;
|
|
}
|
|
return decl;
|
|
}
|