diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-logical')
98 files changed, 4864 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-logical/META.yml b/testing/web-platform/tests/css/css-logical/META.yml new file mode 100644 index 0000000000..cf789d631b --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/META.yml @@ -0,0 +1,3 @@ +spec: https://drafts.csswg.org/css-logical/ +suggested_reviewers: + - fantasai diff --git a/testing/web-platform/tests/css/css-logical/animation-001.html b/testing/web-platform/tests/css/css-logical/animation-001.html new file mode 100644 index 0000000000..71542022c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/animation-001.html @@ -0,0 +1,335 @@ +<!doctype html> +<meta charset=utf-8> +<title>Animating CSS logical properties using Web Animations</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#box"> +<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../css-animations/support/testcommon.js"></script> +<style> +:root { + --200px: 200px; + --300px: 300px; + --writingMode: horizontal-tb; +} +</style> + +<div id="log"></div> +<script> +'use strict'; + +test(t => { + const div = addDiv(t); + const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).height, '50px'); +}, 'Logical properties can be animated using object notation'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + [{ blockSize: '0px' }, { blockSize: '100px' }], + 1000 + ); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).height, '50px'); +}, 'Logical properties can be animated using array notation'); + +test(t => { + const anim = addDiv(t).animate({ blockSize: ['0px', '100px'] }, 1000); + assert_equals(anim.effect.getKeyframes().length, 2); + + assert_own_property(anim.effect.getKeyframes()[0], 'blockSize'); + assert_false(anim.effect.getKeyframes()[0].hasOwnProperty('height')); + + assert_own_property(anim.effect.getKeyframes()[1], 'blockSize'); + assert_false(anim.effect.getKeyframes()[1].hasOwnProperty('height')); +}, 'Logical properties are NOT stored as physical properties'); + +test(t => { + const div = addDiv(t, { style: 'writing-mode: vertical-rl' }); + const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).width, '50px'); + assert_equals(getComputedStyle(div).height, '0px'); +}, 'Logical properties in animations respect the writing-mode'); + +test(t => { + const div = addDiv(t, { style: 'direction: rtl' }); + const anim = div.animate({ marginInlineStart: ['0px', '100px'] }, 1000); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).marginLeft, '0px'); + assert_equals(getComputedStyle(div).marginRight, '50px'); +}, 'Logical properties in animations respect the direction'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + { + blockSize: ['0px', '100px'], + height: ['200px', '300px'], + }, + 1000 + ); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).height, '250px'); +}, 'Physical properties win over logical properties in object notation'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + [ + { height: '200px', blockSize: '0px' }, + { height: '300px', blockSize: '100px' }, + ], + 1000 + ); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).height, '250px'); +}, 'Physical properties win over logical properties in array notation'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + { + blockSize: ['0px', '100px'], + height: ['var(--200px)', 'var(--300px)'], + }, + 1000 + ); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).height, '250px'); +}, 'Physical properties with variables win over logical properties'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + { + marginInlineStart: '100px', + marginInline: '200px', + margin: 'logical 300px', + }, + { duration: 1, easing: 'step-start' } + ); + assert_equals(getComputedStyle(div).marginLeft, '100px'); + assert_equals(getComputedStyle(div).marginRight, '200px'); + assert_equals(getComputedStyle(div).marginTop, '300px'); + assert_equals(getComputedStyle(div).marginBottom, '300px'); +}, 'Logical shorthands follow the usual prioritization based on number of' + + ' component longhands'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + { + marginInline: '100px', + marginLeft: '200px', + }, + { duration: 1, easing: 'step-start' } + ); + assert_equals(getComputedStyle(div).marginLeft, '200px'); + assert_equals(getComputedStyle(div).marginRight, '100px'); +}, 'Physical longhands win over logical shorthands'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + { + marginInlineStart: '100px', + margin: '200px', + }, + { duration: 1, easing: 'step-start' } + ); + assert_equals(getComputedStyle(div).marginLeft, '100px'); + assert_equals(getComputedStyle(div).marginRight, '200px'); +}, 'Logical longhands win over physical shorthands'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + { + marginInline: '100px', + margin: '200px', + }, + { duration: 1, easing: 'step-start' } + ); + assert_equals(getComputedStyle(div).marginLeft, '200px'); + assert_equals(getComputedStyle(div).marginRight, '200px'); +}, 'Physical shorthands win over logical shorthands'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + { + marginInline: '100px', + margin: 'var(--200px)', + }, + { duration: 1, easing: 'step-start' } + ); + assert_equals(getComputedStyle(div).marginLeft, '200px'); + assert_equals(getComputedStyle(div).marginRight, '200px'); +}, 'Physical shorthands using variables win over logical shorthands'); + +test(t => { + const div = addDiv(t); + const anim = div.animate([{ blockSize: '200px' }, { height: '300px' }], 1000); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).height, '250px'); +}, 'Physical properties and logical properties can be mixed'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + [{ marginInline: '200px' }, { marginRight: '300px' }], + 1000 + ); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).marginRight, '250px'); +}, 'Physical shorthands and logical shorthands can be mixed'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + [{ blockSize: '100px', height: '200px' }, { height: '300px' }], + 1000 + ); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).height, '250px'); +}, 'Physical properties win over logical properties even when some keyframes' + + ' only have logical properties'); + +test(t => { + const div = addDiv(t, { style: 'width: 0px; height: 0px' }); + const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000); + anim.currentTime = 500; + + assert_equals(getComputedStyle(div).width, '0px'); + assert_equals(getComputedStyle(div).height, '50px'); + + div.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(div).width, '50px'); + assert_equals(getComputedStyle(div).height, '0px'); +}, 'Animations update when the writing-mode is changed'); + +test(t => { + const div = addDiv(t, { style: 'width: 0px; height: 0px' }); + const anim = div.animate( + { blockSize: ['0px', '100px'] }, + { + duration: 1000, + fill: 'forwards', + } + ); + anim.finish(); + + assert_equals(getComputedStyle(div).width, '0px'); + assert_equals(getComputedStyle(div).height, '100px'); + + div.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(div).width, '100px'); + assert_equals(getComputedStyle(div).height, '0px'); +}, 'Filling animations update when the writing-mode is changed'); + +test(t => { + const div = addDiv(t, { style: 'width: 100px; height: 200px' }); + const anim = div.animate({ blockSize: '300px' }, 1000); + anim.currentTime = 500; + + // Initially we are animating height from 200px -> 300px + assert_equals(getComputedStyle(div).width, '100px'); + assert_equals(getComputedStyle(div).height, '250px'); + + // After the change we are animating width from 100px -> 300px + div.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(div).width, '200px'); + assert_equals(getComputedStyle(div).height, '200px'); +}, 'Animations with implicit from values update when the writing-mode' + + ' is changed'); + +test(t => { + const div = addDiv(t, { style: 'width: 0px; height: 0px' }); + const anim = div.animate( + [ + { height: '200px', blockSize: '0px' }, + { height: '300px', blockSize: '100px' }, + ], + 1000 + ); + anim.currentTime = 500; + + // Initially writing-mode is horizontal-tb so the 'block-size' values are + // clobbered by the 'height' values. + + assert_equals(getComputedStyle(div).width, '0px'); + assert_equals(getComputedStyle(div).height, '250px'); + + // After updating the writing-mode to vertical-rl the 'block-size' values + // should no longer be overridden and should apply to the height. + + div.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(div).width, '50px'); + assert_equals(getComputedStyle(div).height, '250px'); +}, 'Animations with overlapping physical and logical properties update' + + ' when the writing-mode is changed'); + +test(t => { + const div = addDiv(t, { style: 'width: 0px; height: 0px' }); + div.style.writingMode = 'var(--writingMode)'; + const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000); + anim.currentTime = 500; + + assert_equals(getComputedStyle(div).width, '0px'); + assert_equals(getComputedStyle(div).height, '50px'); + + div.style.setProperty('--writingMode', 'vertical-rl'); + assert_equals(getComputedStyle(div).width, '50px'); + assert_equals(getComputedStyle(div).height, '0px'); +}, 'Animations update when the writing-mode is changed through a CSS variable'); + +test(t => { + const div = addDiv(t); + const anim = div.animate({ marginInlineStart: ['0px', '100px'] }, 1000); + anim.currentTime = 500; + + assert_equals(getComputedStyle(div).marginLeft, '50px'); + assert_equals(getComputedStyle(div).marginRight, '0px'); + + div.style.direction = 'rtl'; + assert_equals(getComputedStyle(div).marginLeft, '0px'); + assert_equals(getComputedStyle(div).marginRight, '50px'); +}, 'Animations update when the direction is changed'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + { + insetBlock: ['var(--200px)', 'var(--300px)'], + }, + 1000 + ); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).insetBlockStart, '250px'); +}, 'Logical shorthand with variable references animates correctly'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + { writingMode: 'vertical-rl' }, + { duration: 1, easing: 'step-start' } + ); + assert_equals(getComputedStyle(div).writingMode, 'horizontal-tb'); + assert_equals(anim.effect.getKeyframes().length, 0); +}, 'writing-mode is not animatable'); + +test(t => { + const div = addDiv(t); + const anim = div.animate( + { writingMode: 'rtl' }, + { duration: 1, easing: 'step-start' } + ); + anim.currentTime = 500; + assert_equals(getComputedStyle(div).direction, 'ltr'); + assert_equals(anim.effect.getKeyframes().length, 0); +}, 'direction is not animatable'); + +</script> diff --git a/testing/web-platform/tests/css/css-logical/animation-002.html b/testing/web-platform/tests/css/css-logical/animation-002.html new file mode 100644 index 0000000000..9213a05d83 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/animation-002.html @@ -0,0 +1,226 @@ +<!doctype html> +<meta charset=utf-8> +<title>Animating CSS logical properties using CSS Animations</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#box"> +<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../css-animations/support/testcommon.js"></script> + +<div id="log"></div> +<script> +'use strict'; + +test(t => { + addStyle(t, { + '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }', + }); + const div = addDiv(t, { style: 'animation: anim 10s -5s paused linear' }); + assert_equals(getComputedStyle(div).height, '50px'); +}, 'Logical properties can be animated'); + +test(t => { + addStyle(t, { + '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }', + }); + const div = addDiv(t, { + style: 'animation: anim 10s -5s paused linear; writing-mode: vertical-rl', + }); + assert_equals(getComputedStyle(div).width, '50px'); + assert_equals(getComputedStyle(div).height, '0px'); +}, 'Logical properties in animations respect the writing-mode'); + +test(t => { + addStyle(t, { + '@keyframes anim': + 'from { margin-inline-start: 0px } to { margin-inline-start: 100px }', + }); + const div = addDiv(t, { + style: 'animation: anim 10s -5s paused linear; direction: rtl', + }); + assert_equals(getComputedStyle(div).marginLeft, '0px'); + assert_equals(getComputedStyle(div).marginRight, '50px'); +}, 'Logical properties in animations respect the direction'); + +test(t => { + addStyle(t, { + '@keyframes anim': + 'from { block-size: 0px; height: 200px }' + + ' to { block-size: 100px; height: 300px }', + }); + const div = addDiv(t, { + style: 'animation: anim 10s -5s paused linear', + }); + assert_equals(getComputedStyle(div).height, '250px'); +}, 'Declaration order is respected within @keyframes declaration blocks'); + +test(t => { + addStyle(t, { + '@keyframes anim': + 'to { margin-top: 200px;' + + ' margin-block-start: 100px }' + }); + const div = addDiv(t, { + style: 'animation: anim 10s paused step-start', + }); + assert_equals(getComputedStyle(div).marginTop, '100px'); +}, 'Logical properties are able to override physical properties in' + + ' @keyframes declaration blocks'); + +test(t => { + addStyle(t, { + '@keyframes anim': + 'to {' + + ' margin-inline: 200px;' + + ' margin-inline-start: 0px;' + + ' margin-inline-start: 100px }', + }); + const div = addDiv(t, { + style: 'animation: anim 10s paused step-start', + }); + assert_equals(getComputedStyle(div).marginLeft, '100px'); +}, 'Declaration order is respected amongst logical properties within' + + ' @keyframes declaration blocks'); + +test(t => { + addStyle(t, { + '@keyframes anim': 'from { block-size: 200px } to { height: 300px }', + }); + const div = addDiv(t, { + style: 'animation: anim 10s -5s paused linear', + }); + assert_equals(getComputedStyle(div).height, '250px'); +}, 'Physical properties and logical properties can be mixed'); + +test(t => { + addStyle(t, { + '@keyframes anim': + 'from { height: 100px; block-size: 200px }' + + ' to { block-size: 100px; height: 300px }', + }); + const div = addDiv(t, { + style: 'animation: anim 10s -5s paused linear', + }); + assert_equals(getComputedStyle(div).height, '250px'); +}, 'Declaration order is respected on each keyframe individually'); + +test(t => { + addStyle(t, { + '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }', + }); + const div = addDiv(t, { + style: 'animation: anim 10s -5s paused linear; width: 0px; height: 0px', + }); + assert_equals(getComputedStyle(div).width, '0px'); + assert_equals(getComputedStyle(div).height, '50px'); + + div.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(div).width, '50px'); + assert_equals(getComputedStyle(div).height, '0px'); +}, 'Animations update when the writing-mode is changed'); + +promise_test(async t => { + addStyle(t, { + '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }', + }); + const div = addDiv(t, { + style: 'animation: anim 10s -9.9s linear forwards;' + + ' width: 0px; height: 0px', + }); + const watcher = new EventWatcher(t, div, [ 'animationend' ]); + await watcher.wait_for('animationend'); + + assert_equals(getComputedStyle(div).width, '0px'); + assert_equals(getComputedStyle(div).height, '100px'); + + div.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(div).width, '100px'); + assert_equals(getComputedStyle(div).height, '0px'); +}, 'Filling animations update when the writing-mode is changed'); + +test(t => { + addStyle(t, { + '@keyframes anim': 'to { block-size: 100px; height: 200px }', + }); + const div = addDiv(t, { + style: 'animation: anim 10s -5s paused linear; width: 0px; height: 0px', + }); + // Initially we are interpolating the height from 0 to 200px + assert_equals(getComputedStyle(div).width, '0px'); + assert_equals(getComputedStyle(div).height, '100px'); + + // But once we change the writing-mode, we will be interpolating *both* + // the height (from 0px to 200px) *and* the width (from 0px to 100px). + div.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(div).width, '50px'); + assert_equals(getComputedStyle(div).height, '100px'); +}, 'The number of interpolating properties can be increased when the' + + ' writing-mode is changed'); + +test(t => { + addStyle(t, { + '@keyframes anim': 'to { width: 300px; block-size: 200px }', + }); + const div = addDiv(t, { + style: 'animation: anim 10s -5s paused linear; width: 100px; height: 100px', + }); + // Initially we are interpolating the width (100px -> 300px) and the height + // (100px -> 200px). + assert_equals(getComputedStyle(div).width, '200px'); + assert_equals(getComputedStyle(div).height, '150px'); + + // Once we change the writing-mode, we will be interpolating *only* the + // width (100px -> 200px). + div.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(div).width, '150px'); + assert_equals(getComputedStyle(div).height, '100px'); +}, 'The number of interpolating properties can be decreased when the' + + ' writing-mode is changed'); + +test(t => { + addStyle(t, { ':root': '--writingMode: horizontal-tb' }); + addStyle(t, { + '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }', + }); + const div = addDiv(t, { + style: + 'animation: anim 10s -5s paused linear;' + + ' width: 0px; height: 0px;' + + ' writing-mode: var(--writingMode)' + }); + assert_equals(getComputedStyle(div).width, '0px'); + assert_equals(getComputedStyle(div).height, '50px'); + + div.style.setProperty('--writingMode', 'vertical-rl'); + assert_equals(getComputedStyle(div).width, '50px'); + assert_equals(getComputedStyle(div).height, '0px'); +}, 'Animations update when the writing-mode is changed through a CSS variable'); + +test(t => { + addStyle(t, { ':root': '--200px: 200px; --300px: 300px' }); + addStyle(t, { + '@keyframes anim': 'from { inset-block: var(--200px) } to { inset-block: var(--300px) }', + }); + const div = addDiv(t, { + style: + 'animation: anim 10s -5s paused linear;' + + ' width: 0px; height: 0px;' + }); + assert_equals(getComputedStyle(div).insetBlockStart, '250px'); +}, 'Logical shorthand with variable references animates correctly'); + +test(t => { + addStyle(t, { + '@keyframes anim': + 'from { margin-inline-start: 0px } to { margin-inline-start: 100px }', + }); + const div = addDiv(t, { style: 'animation: anim 10s -5s paused linear' }); + assert_equals(getComputedStyle(div).marginLeft, '50px'); + assert_equals(getComputedStyle(div).marginRight, '0px'); + + div.style.direction = 'rtl'; + assert_equals(getComputedStyle(div).marginLeft, '0px'); + assert_equals(getComputedStyle(div).marginRight, '50px'); +}, 'Animations update when the direction is changed'); + +</script> diff --git a/testing/web-platform/tests/css/css-logical/animation-003.tentative.html b/testing/web-platform/tests/css/css-logical/animation-003.tentative.html new file mode 100644 index 0000000000..bcb4e15d80 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/animation-003.tentative.html @@ -0,0 +1,37 @@ +<!doctype html> +<meta charset=utf-8> +<title>Animating CSS logical properties using CSS Animations - Web Animations reflection</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#box"> +<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../css-animations/support/testcommon.js"></script> + +<div id="log"></div> +<script> +'use strict'; + +/* + * The mapping from CSS Animations to Web Animations has yet to be specified + * but, when it is, we expect it to require that logical properties in CSS + * keyframes be represented as physical properties in the result returned from + * getKeyframes() since this is consistent with the behavior of expanding out + * all shorthands in to their consituent longhands in order to resolve + * overlapping properties. + */ + +test(t => { + addStyle(t, { + '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }', + }); + const div = addDiv(t, { style: 'animation: anim 10s' }); + const anim = div.getAnimations()[0]; + + assert_own_property(anim.effect.getKeyframes()[0], 'height'); + assert_false(anim.effect.getKeyframes()[0].hasOwnProperty('blockSize')); + + assert_own_property(anim.effect.getKeyframes()[1], 'height'); + assert_false(anim.effect.getKeyframes()[1].hasOwnProperty('blockSize')); +}, 'Logical properties are represented as physical properties in keyframes'); + +</script> diff --git a/testing/web-platform/tests/css/css-logical/animation-004.html b/testing/web-platform/tests/css/css-logical/animation-004.html new file mode 100644 index 0000000000..c1bed63872 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/animation-004.html @@ -0,0 +1,284 @@ +<!doctype html> +<meta charset=utf-8> +<title>Animating CSS logical properties using CSS Transitions</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#box"> +<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../css-animations/support/testcommon.js"></script> + +<div id="log"></div> +<div id="test"></div> +<script> +'use strict'; + +const testEl = document.getElementById("test"); + +function makeDeclaration(object = {}) { + return Object.entries(object).map(([prop, val]) => prop + ": " + val).join("; "); +} + +/** + * Starts a CSS transition in testEl. By default, the transition will affect the properies + * specified in finalStyles, be linear, last 10 seconds and start halfway, but this can be + * overridden in baseStyles. + * + * @param t The testharness.js Test object. + * @param baseStyles A dictionary object with property names and values to set on the + * element before starting the transition. + * @param finalStyles A dictionary object with property names and values towards which + * the element will transition. + * @param [transitionStyles] An optional dictionary object to costumize the transition. + */ +function transition(t, baseStyles, finalStyles, transitionStyles = {}) { + // Clear styles from previous test. + testEl.style.cssText = ""; + testEl.className = ""; + getComputedStyle(testEl).height; + + // Set base and final styles + addStyle(t, { + "#test": makeDeclaration(baseStyles), + "#test.transition": makeDeclaration(finalStyles), + }); + getComputedStyle(testEl).height; + + // Set transition styles + const defaultTransition = { + "transition-property": Object.keys(finalStyles).join(", "), + "transition-timing-function": "linear", + "transition-duration": "10s", + "transition-delay": "-5s", + }; + addStyle(t, { + "#test": makeDeclaration(Object.assign(defaultTransition, transitionStyles)), + }); + + // Start the transition + testEl.className = "transition"; +} + +test(t => { + transition(t, { + "block-size": "0px", + }, { + "block-size": "100px", + }); + assert_equals(getComputedStyle(testEl).height, '50px'); +}, 'Logical properties can be transitioned'); + +test(t => { + transition(t, { + "block-size": "0px", + "writing-mode": "vertical-rl", + }, { + "block-size": "100px", + }); + assert_equals(getComputedStyle(testEl).width, '50px'); + assert_equals(getComputedStyle(testEl).height, '0px'); +}, 'Logical properties in transitions respect the writing-mode'); + +test(t => { + transition(t, { + "margin-inline-start": "0px", + "direction": "rtl", + }, { + "margin-inline-start": "100px", + }); + assert_equals(getComputedStyle(testEl).marginLeft, '0px'); + assert_equals(getComputedStyle(testEl).marginRight, '50px'); +}, 'Logical properties in transitions respect the direction'); + +test(t => { + transition(t, { + "block-size": "0px", + "height": "200px", + }, { + "block-size": "100px", + "height": "300px", + }); + assert_equals(getComputedStyle(testEl).height, '250px'); +}, 'Declaration order is respected within declaration blocks'); + +test(t => { + transition(t, {}, { + "margin-top": "200px", + "margin-block-start": "100px" + }, { + "transition-timing-function": "step-start", + }); + assert_equals(getComputedStyle(testEl).marginTop, '100px'); +}, 'Logical properties are able to override physical properties in declaration blocks'); + +test(t => { + transition(t, {}, { + "margin-inline": "200px", + "margin-inline-start": "0px", + "margin-inline-start": "100px", + }, { + "transition-timing-function": "step-start", + }); + assert_equals(getComputedStyle(testEl).marginLeft, '100px'); +}, 'Declaration order is respected amongst logical properties within declaration blocks'); + +test(t => { + transition(t, { + "block-size": "200px", + }, { + "height": "300px", + }); + assert_equals(getComputedStyle(testEl).height, '250px'); +}, 'Physical properties and logical properties can be mixed'); + +test(t => { + transition(t, { + "height": "100px", + "block-size": "200px", + }, { + "block-size": "100px", + "height": "300px", + }); + assert_equals(getComputedStyle(testEl).height, '250px'); +}, 'Declaration order is respected on each keyframe individually'); + +test(t => { + transition(t, { + "width": "0px", + "height": "0px", + "block-size": "0px", + }, { + "block-size": "100px", + }); + assert_equals(getComputedStyle(testEl).width, '0px'); + assert_equals(getComputedStyle(testEl).height, '50px'); + + testEl.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(testEl).width, '50px'); + assert_equals(getComputedStyle(testEl).height, '0px'); +}, 'Transitions update when the writing-mode is changed'); + +promise_test(async t => { + transition(t, { + "width": "0px", + "height": "0px", + "block-size": "0px", + }, { + "block-size": "100px", + }, { + "transition-delay": "-9.9s", + }); + const watcher = new EventWatcher(t, testEl, [ 'transitionend' ]); + await watcher.wait_for('transitionend'); + + assert_equals(getComputedStyle(testEl).width, '0px'); + assert_equals(getComputedStyle(testEl).height, '100px'); + + testEl.style.transition = 'none'; + testEl.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(testEl).width, '100px'); + assert_equals(getComputedStyle(testEl).height, '0px'); +}, 'Filling transitions update when the writing-mode is changed'); + +test(t => { + transition(t, { + "width": "0px", + "height": "0px", + }, { + "block-size": "100px", + "height": "200px", + }); + + // Initially we are interpolating the height from 0 to 200px + assert_equals(getComputedStyle(testEl).width, '0px'); + assert_equals(getComputedStyle(testEl).height, '100px'); + + // But once we change the writing-mode, we will be interpolating *both* + // the height (from 0px to 200px) *and* the width (from 0px to 100px). + testEl.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(testEl).width, '50px'); + assert_equals(getComputedStyle(testEl).height, '100px'); +}, 'The number of interpolating properties can be increased when the' + + ' writing-mode is changed'); + +test(t => { + transition(t, { + "width": "100px", + "height": "100px", + }, { + "width": "500px", + "block-size": "200px", + }); + + // Initially we are interpolating the width (100px -> 500px) and the height + // (100px -> 200px). + assert_equals(getComputedStyle(testEl).width, '300px'); + assert_equals(getComputedStyle(testEl).height, '150px'); + + // Once we change the writing-mode, we will be interpolating *only* the + // width (300px -> 200px). + testEl.style.writingMode = 'vertical-rl'; + assert_equals(getComputedStyle(testEl).width, '250px'); + assert_equals(getComputedStyle(testEl).height, '100px'); +}, 'The number of interpolating properties can be decreased when the' + + ' writing-mode is changed'); + +test(t => { + addStyle(t, { ':root': '--writingMode: horizontal-tb' }); + transition(t, { + "width": "0px", + "height": "0px", + "writing-mode": "var(--writingMode)", + "block-size": "0px", + }, { + "block-size": "100px" + }); + assert_equals(getComputedStyle(testEl).width, '0px'); + assert_equals(getComputedStyle(testEl).height, '50px'); + + testEl.style.setProperty('--writingMode', 'vertical-rl'); + assert_equals(getComputedStyle(testEl).width, '50px'); + assert_equals(getComputedStyle(testEl).height, '0px'); +}, 'Transitions update when the writing-mode is changed through a CSS variable'); + +test(t => { + transition(t, { + "margin-inline-start": "0px", + }, { + "margin-inline-start": "100px", + }); + assert_equals(getComputedStyle(testEl).marginLeft, '50px'); + assert_equals(getComputedStyle(testEl).marginRight, '0px'); + + testEl.style.direction = 'rtl'; + assert_equals(getComputedStyle(testEl).marginLeft, '0px'); + assert_equals(getComputedStyle(testEl).marginRight, '50px'); +}, 'Transitions update when the direction is changed'); + +test(t => { + transition(t, { + "margin-inline-start": "100px", + }, { + "margin-left": "200px", + }); + assert_equals(getComputedStyle(testEl).marginLeft, '150px'); + assert_equals(getComputedStyle(testEl).marginRight, '0px'); + + testEl.style.direction = 'rtl'; + assert_equals(getComputedStyle(testEl).marginLeft, '150px'); + assert_equals(getComputedStyle(testEl).marginRight, '100px'); +}, 'Transitions from logical to physical update when the direction is changed'); + +test(t => { + transition(t, { + "margin-left": "200px", + }, { + "margin-inline-start": "100px", + }); + assert_equals(getComputedStyle(testEl).marginLeft, '150px'); + assert_equals(getComputedStyle(testEl).marginRight, '0px'); + + testEl.style.direction = 'rtl'; + assert_equals(getComputedStyle(testEl).marginLeft, '200px'); + assert_equals(getComputedStyle(testEl).marginRight, '50px'); +}, 'Transitions from physical to logical update when the direction is changed'); +</script> diff --git a/testing/web-platform/tests/css/css-logical/animations/caption-side-no-interpolation.html b/testing/web-platform/tests/css/css-logical/animations/caption-side-no-interpolation.html new file mode 100644 index 0000000000..2eef093e46 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/animations/caption-side-no-interpolation.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'caption-side', + from: 'initial', + to: 'bottom' +}); +</script> diff --git a/testing/web-platform/tests/css/css-logical/animations/float-interpolation.html b/testing/web-platform/tests/css/css-logical/animations/float-interpolation.html new file mode 100644 index 0000000000..c067f2f03c --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/animations/float-interpolation.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>float interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear"> +<meta name="assert" content="float supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.expected { color: green; } +</style> + +<body> +<template id="target-template">float</template> +<script> +test_no_interpolation({ + property: 'float', + from: 'left', + to: 'right', +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-logical/animations/padding-block-interpolation.html b/testing/web-platform/tests/css/css-logical/animations/padding-block-interpolation.html new file mode 100644 index 0000000000..881c36e323 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/animations/padding-block-interpolation.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>padding-block interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block"> +<meta name="assert" content="padding-block supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_interpolation({ + property: 'padding-block', + from: '10px', + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-logical/animations/padding-inline-interpolation.html b/testing/web-platform/tests/css/css-logical/animations/padding-inline-interpolation.html new file mode 100644 index 0000000000..293493e3bc --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/animations/padding-inline-interpolation.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>padding-inline interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-inline"> +<meta name="assert" content="padding-inline supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_interpolation({ + property: 'padding-inline', + from: '10px', + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-logical/cascading-001-ref.html b/testing/web-platform/tests/css/css-logical/cascading-001-ref.html new file mode 100644 index 0000000000..79a432c455 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/cascading-001-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Logical Properties Cascading Reference</title> + <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com"> + <style> + div { + writing-mode: horizontal-tb; + direction: ltr; + background-color: blue; + } + .horizontal { + width: 100px; + height: 10px; + } + #horizontal { + width: 100px; + height: 10px; + } + .vertical { + width: 10px; + height: 100px; + } + #vertical { + width: 10px; + height: 100px; + } + </style> +</head> +<body> + <p>Test passes if there are two vertical blue boxes followed by two horizontal blue boxes.</p> + +<div class="horizontal" id="vertical"></div><br> +<div class="horizontal" id="vertical"></div><br> +<div class="vertical" id="horizontal"></div><br> +<div class="vertical" id="horizontal"></div><br> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/cascading-001.html b/testing/web-platform/tests/css/css-logical/cascading-001.html new file mode 100644 index 0000000000..61399a8330 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/cascading-001.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Logical Properties: "A computed value that has logical and physical properties is determined by applying the CSS cascade to declarations of both."</title> + <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com"> + <link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-box-props"> + <link rel="match" href="cascading-001-ref.html"> + <meta name="assert" content="Physical property declarations with higher specificity should override logical ones and vice versa."> + <style> + div { + writing-mode: horizontal-tb; + direction: ltr; + background-color: blue; + } + .horizontal-logical { + inline-size: 100px; + block-size: 10px; + } + #horizontal-logical { + inline-size: 100px; + block-size: 10px; + } + .horizontal-physical { + width: 100px; + height: 10px; + } + #horizontal-physical { + width: 100px; + height: 10px; + } + .vertical-logical { + inline-size: 10px; + block-size: 100px; + } + #vertical-logical { + inline-size: 10px; + block-size: 100px; + } + .vertical-physical { + width: 10px; + height: 100px; + } + #vertical-physical { + width: 10px; + height: 100px; + } + </style> +</head> +<body> + <p>Test passes if there are two vertical blue boxes followed by two horizontal blue boxes.</p> +<div class="horizontal-logical" id="vertical-physical"></div><br> +<div class="horizontal-physical" id="vertical-logical"></div><br> +<div class="vertical-logical" id="horizontal-physical"></div><br> +<div class="vertical-physical" id="horizontal-logical"></div><br> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/getComputedStyle-listing.html b/testing/web-platform/tests/css/css-logical/getComputedStyle-listing.html new file mode 100644 index 0000000000..5970bcea63 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/getComputedStyle-listing.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Properties: computed style listing</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#margin-properties"> +<meta name="assert" content="This test checks that the logical properties are properly exposed in a computed CSSStyleDeclaration." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script> +function hasProperty(object, property) { + // This checks the [[HasProperty]] internal method. + return property in object; +} + +function hasPropertyValue(object, property) { + // This checks the [[Get]] internal method. + return object[property] !== undefined; +} + +function hasPropertyDescriptor(object, property) { + // This checks [[GetOwnProperty]], iterating the prototype chain. + while (object) { + if (Reflect.getOwnPropertyDescriptor(object, property)) { + return true; + } + object = Reflect.getPrototypeOf(object); + } + return false; +} + +function hasPropertyKey(object, property) { + // This checks [[OwnPropertyKeys]], iterating the prototype chain. + while (object) { + if (Reflect.ownKeys(object).includes(property)) { + return true; + } + object = Reflect.getPrototypeOf(object); + } + return false; +} + +function hasItem(object, item) { + // This checks the CSSStyleDeclaration::item WebIDL getter. + for (let i = 0; i < object.length; ++i) { + if (object.item(i) === item) { + return true; + } + } + return false; +} + +function check(property) { + const cs = getComputedStyle(document.body); + const camelCase = property.replace(/-(.)/g, (_, b) => b.toUpperCase()); + test(function() { + assert_true(hasProperty(cs, property) || hasProperty(cs, camelCase), + `The computed style has the property ${property} or ${camelCase}.`); + assert_true(hasPropertyValue(cs, property) || hasPropertyValue(cs, camelCase), + `The computed style has a value for for the property ${property} or ${camelCase}.`); + assert_true(hasPropertyDescriptor(cs, property) || hasPropertyDescriptor(cs, camelCase), + `The computed style has a property descriptor for ${property} or ${camelCase}.`); + assert_true(hasPropertyKey(cs, property) || hasPropertyKey(cs, camelCase), + `The computed style contains ${property} or ${camelCase} in the property list.`); + assert_true(hasItem(cs, property) || hasItem(cs, camelCase), + `The computed style contains the item ${property} or ${camelCase}.`); + }, property); +} + +check("border-block-end-color"); +check("border-block-end-style"); +check("border-block-end-width"); +check("border-block-start-color"); +check("border-block-start-style"); +check("border-block-start-width"); +check("border-inline-end-color"); +check("border-inline-end-style"); +check("border-inline-end-width"); +check("border-inline-start-color"); +check("border-inline-start-style"); +check("border-inline-start-width"); + +check("inset-block-start"); +check("inset-block-end"); +check("inset-inline-start"); +check("inset-inline-end"); + +check("margin-block-start"); +check("margin-block-end"); +check("margin-inline-start"); +check("margin-inline-end"); + +check("padding-block-start"); +check("padding-block-end"); +check("padding-inline-start"); +check("padding-inline-end"); + +check("block-size"); +check("inline-size"); +check("max-block-size"); +check("max-inline-size"); +check("min-block-size"); +check("min-inline-size"); +</script> diff --git a/testing/web-platform/tests/css/css-logical/inheritance.html b/testing/web-platform/tests/css/css-logical/inheritance.html new file mode 100644 index 0000000000..5546a20d6c --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/inheritance.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Logical Properties and Values properties</title> +<link rel="help" href="https://www.w3.org/TR/css-logical-1/#property-index"> +<meta name="assert" content="Properties do not inherit."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="reference-container"> + <div id="reference"></div> +</div> +<div id="container"> + <div id="target"></div> +</div> +<style> +#reference-container { + width: 300px; +} +#reference-container, #reference { + border-style: solid; /* Avoid border-top-width computed style 0 */ + border-top-width: medium; +} + +#container, #target { + border-block-end-style: solid; /* Avoid border-block-end-width computed style 0 */ + border-block-start-style: solid; + border-inline-end-style: solid; + border-inline-start-style: solid; +} + +#container { + color: blue; + width: 300px; +} +</style> +<script> +'use strict'; +const blue = "rgb(0, 0, 255)"; +const green = "rgb(0, 128, 0)"; +const mediumWidth = getComputedStyle(reference).borderTopWidth; // e.g. 3px +const referenceWidth = getComputedStyle(reference).width; // e.g. 294px + +assert_not_inherited('block-size', '0px', '10px'); + +assert_not_inherited('border-block-end-color', blue, green); +assert_not_inherited('border-block-end-style', 'none', 'dotted'); +assert_not_inherited('border-block-end-width', mediumWidth, '10px'); + +assert_not_inherited('border-block-start-color', blue, green); +assert_not_inherited('border-block-start-style', 'none', 'dotted'); +assert_not_inherited('border-block-start-width', mediumWidth, '10px'); + +assert_not_inherited('border-end-end-radius', '0px', '10px 20px'); +assert_not_inherited('border-end-start-radius', '0px', '10px 20px'); + +assert_not_inherited('border-inline-end-color', blue, green); +assert_not_inherited('border-inline-end-style', 'none', 'dotted'); +assert_not_inherited('border-inline-end-width', mediumWidth, '10px'); + +assert_not_inherited('border-inline-start-color', blue, green); +assert_not_inherited('border-inline-start-style', 'none', 'dotted'); +assert_not_inherited('border-inline-start-width', mediumWidth, '10px'); + +assert_not_inherited('border-start-end-radius', '0px', '10px 20px'); +assert_not_inherited('border-start-start-radius', '0px', '10px 20px'); + +assert_not_inherited('inline-size', referenceWidth, '10px'); + +assert_not_inherited('inset-block-end', 'auto', '10px'); +assert_not_inherited('inset-block-start', 'auto', '10px'); +assert_not_inherited('inset-inline-end', 'auto', '10px'); +assert_not_inherited('inset-inline-start', 'auto', '10px'); + +assert_not_inherited('margin-block-end', '0px', '10px'); +assert_not_inherited('margin-block-start', '0px', '10px'); +assert_not_inherited('margin-inline-end', '0px', '10px'); +assert_not_inherited('margin-inline-start', '0px', '10px'); + +assert_not_inherited('max-block-size', 'none', '10px'); +assert_not_inherited('max-inline-size', 'none', '10px'); +assert_not_inherited('min-block-size', '0px', '10px'); +assert_not_inherited('min-inline-size', '0px', '10px'); + +assert_not_inherited('padding-block-end', '0px', '10px'); +assert_not_inherited('padding-block-start', '0px', '10px'); +assert_not_inherited('padding-inline-end', '0px', '10px'); +assert_not_inherited('padding-inline-start', '0px', '10px'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/logical-box-border-color.html b/testing/web-platform/tests/css/css-logical/logical-box-border-color.html new file mode 100644 index 0000000000..b33528d9cd --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-box-border-color.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Properties: Flow-Relative Border Colors</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#border-color"> +<meta name="assert" content="This test checks the interaction of the flow-relative border-*-color properties with the physical ones in different writing modes." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script type="module"> +import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js"; +runTests(createBoxPropertyGroup("border-*-color", {type: "color"})); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logical-box-border-radius.html b/testing/web-platform/tests/css/css-logical/logical-box-border-radius.html new file mode 100644 index 0000000000..81b8fa0fec --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-box-border-radius.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Properties: flow-relative border-radius</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#border-radius-properties"> +<meta name="assert" content="This test checks the interaction of the flow-relative border-*-radius properties with the physical ones in different writing modes." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script type="module"> +import {runTests, createCornerPropertyGroup} from "./resources/test-box-properties.js"; +runTests(createCornerPropertyGroup("border-*-radius", { + type: "length", + prerequisites: {"border-style": "solid"}, +})); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logical-box-border-shorthands.html b/testing/web-platform/tests/css/css-logical/logical-box-border-shorthands.html new file mode 100644 index 0000000000..d05d864f59 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-box-border-shorthands.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Properties: Flow-Relative Border Shorthands</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#border-shorthands"> +<meta name="assert" content="This test checks the interaction of the flow-relative border-* shorthand properties with the physical ones in different writing modes." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script type="module"> +import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js"; +runTests(createBoxPropertyGroup("border-*", {type: ["length", "border-style", "color"]})); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logical-box-border-style.html b/testing/web-platform/tests/css/css-logical/logical-box-border-style.html new file mode 100644 index 0000000000..448499ddaa --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-box-border-style.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Properties: Flow-Relative Border Styles</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#border-style"> +<meta name="assert" content="This test checks the interaction of the flow-relative border-*-style properties with the physical ones in different writing modes." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script type="module"> +import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js"; +runTests(createBoxPropertyGroup("border-*-style", {type: "border-style"})); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logical-box-border-width.html b/testing/web-platform/tests/css/css-logical/logical-box-border-width.html new file mode 100644 index 0000000000..d7cac485b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-box-border-width.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Properties: Flow-Relative Border Widths</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#border-width"> +<meta name="assert" content="This test checks the interaction of the flow-relative border-*-width properties with the physical ones in different writing modes." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script type="module"> +import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js"; +runTests(createBoxPropertyGroup("border-*-width", { + type: "length", + prerequisites: {"border-*-style": "solid"}, +})); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logical-box-inset.html b/testing/web-platform/tests/css/css-logical/logical-box-inset.html new file mode 100644 index 0000000000..8587d79ed9 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-box-inset.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Properties: Flow-Relative Offsets</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#inset-properties"> +<meta name="assert" content="This test checks the interaction of the flow-relative inset-* properties with the physical ones in different writing modes." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script type="module"> +import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js"; +runTests(createBoxPropertyGroup("inset-*", { + type: "length", + prerequisites: {"position": "relative"}, +})); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logical-box-margin.html b/testing/web-platform/tests/css/css-logical/logical-box-margin.html new file mode 100644 index 0000000000..86240f96a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-box-margin.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Properties: Flow-Relative Margins</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#margin-properties"> +<meta name="assert" content="This test checks the interaction of the flow-relative margin-* properties with the physical ones in different writing modes." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script type="module"> +import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js"; +runTests(createBoxPropertyGroup("margin-*", {type: "length"})); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logical-box-padding.html b/testing/web-platform/tests/css/css-logical/logical-box-padding.html new file mode 100644 index 0000000000..f96f02757c --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-box-padding.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Properties: Flow-Relative Padding</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#padding-properties"> +<meta name="assert" content="This test checks the interaction of the flow-relative padding-* properties with the physical ones in different writing modes." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script type="module"> +import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js"; +runTests(createBoxPropertyGroup("padding-*", {type: "length"})); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logical-box-size.html b/testing/web-platform/tests/css/css-logical/logical-box-size.html new file mode 100644 index 0000000000..f90346b839 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-box-size.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Properties: Flow-Relative Sizing</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#dimension-properties"> +<meta name="assert" content="This test checks the interaction of the flow-relative sizing properties with the physical ones in different writing modes." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script type="module"> +import {runTests, createSizingPropertyGroup} from "./resources/test-box-properties.js"; +runTests(createSizingPropertyGroup("")); +runTests(createSizingPropertyGroup("max-")); +runTests(createSizingPropertyGroup("min-")); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear-1.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-1.html new file mode 100644 index 0000000000..d7f37fffdd --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-1.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear"> +<link rel="match" href="reference/logical-values-float-clear-1-ref.html"> +<style> +body > div { width: 20em; margin: 1em; padding: 2px; border: 1px solid silver; } +div > div { margin: .5em; padding: .5em; background: yellow; } +.is { float: inline-start; } +.ie { float: inline-end; } +.ltr { direction: ltr; } +.rtl { direction: rtl; } +</style> + +<body> +<div class="ltr"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus efficitur nisi at sollicitudin eleifend. + <div class="is">Inline-start</div> + Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. + Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, + ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. + <div class="ie">Inline-end</div> + Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. + Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. + Aliquam erat volutpat. +</div> + +<div class="rtl"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus efficitur nisi at sollicitudin eleifend. + <div class="is">Inline-start</div> + Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. + Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, + ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. + <div class="ie">Inline-end</div> + Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. + Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. + Aliquam erat volutpat. +</div> diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear-2.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-2.html new file mode 100644 index 0000000000..f5af837595 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-2.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear"> +<link rel="match" href="reference/logical-values-float-clear-2-ref.html"> +<style> +html { writing-mode: vertical-rl; } +body > div { height: 20em; margin: 1em; padding: 2px; border: 1px solid silver; } +div > div { margin: .5em; padding: .5em; background: yellow; } +.is { float: inline-start; } +.ie { float: inline-end; } +.ltr { direction: ltr; } +.rtl { direction: rtl; } +</style> + +<body> +<div class="ltr"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus efficitur nisi at sollicitudin eleifend. + <div class="is">Inline-start</div> + Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. + Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, + ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. + <div class="ie">Inline-end</div> + Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. + Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. + Aliquam erat volutpat. +</div> + +<div class="rtl"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus efficitur nisi at sollicitudin eleifend. + <div class="is">Inline-start</div> + Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. + Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, + ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. + <div class="ie">Inline-end</div> + Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. + Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. + Aliquam erat volutpat. +</div> diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear-3.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-3.html new file mode 100644 index 0000000000..b49711b7b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-3.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear"> +<link rel="match" href="reference/logical-values-float-clear-3-ref.html"> +<style> +body > div { width: 15em; height: 10em; margin: 1em; padding: 2px; border: 1px solid silver; } +div > div { margin: .5em; padding: .5em; background: yellow; } +.a { clear: inline-start; } +.b { clear: inline-end; } +.is { float: inline-start; height: 4em; } +.ie { float: inline-end; height: 2em; } +.ltr { direction: ltr; } +.rtl { direction: rtl; } +</style> + +<body> +<div class="ltr"> + <div class="is">Start</div> + <div class="ie">End</div> + <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p> +</div> + +<div class="ltr"> + <div class="is">Start</div> + <div class="ie">End</div> + <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p> +</div> + +<div class="rtl"> + <div class="is">Start</div> + <div class="ie">End</div> + <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p> +</div> + +<div class="rtl"> + <div class="is">Start</div> + <div class="ie">End</div> + <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p> +</div> diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear-4.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-4.html new file mode 100644 index 0000000000..d585d38bf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-4.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear"> +<link rel="match" href="reference/logical-values-float-clear-4-ref.html"> +<style> +html { writing-mode: vertical-rl; } +body > div { height: 15em; width: 10em; margin: 1em; padding: 2px; border: 1px solid silver; } +div > div { margin: .5em; padding: .5em; background: yellow; } +.a { clear: inline-start; } +.b { clear: inline-end; } +.is { float: inline-start; width: 4em; } +.ie { float: inline-end; width: 2em; } +.ltr { direction: ltr; } +.rtl { direction: rtl; } +</style> + +<body> +<div class="ltr"> + <div class="is">Start</div> + <div class="ie">End</div> + <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p> +</div> + +<div class="ltr"> + <div class="is">Start</div> + <div class="ie">End</div> + <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p> +</div> + +<div class="rtl"> + <div class="is">Start</div> + <div class="ie">End</div> + <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p> +</div> + +<div class="rtl"> + <div class="is">Start</div> + <div class="ie">End</div> + <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p> +</div> diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear-reftest.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-reftest.html new file mode 100644 index 0000000000..c0fe9a52bc --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-reftest.html @@ -0,0 +1,68 @@ +<!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> diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear.html new file mode 100644 index 0000000000..e82765809f --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Values: Flow-Relative Values for the 'float' and 'clear' Properties</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 the flow-relative values for 'float' and 'clear' in different writing modes." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script type="module"> +import {runTests} from "./resources/test-logical-values.js"; +const values = ["inline-start", "inline-end"]; +runTests("clear", values); +runTests("float", values); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logical-values-resize.html b/testing/web-platform/tests/css/css-logical/logical-values-resize.html new file mode 100644 index 0000000000..3be65dacf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logical-values-resize.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Logical Values: Flow-Relative Values for the 'resize' Property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical/#resize"> +<meta name="assert" content="This test checks the flow-relative values for 'resize' in different writing modes." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script type="module"> +import {runTests} from "./resources/test-logical-values.js"; +runTests("resize", ["block", "inline"]); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html b/testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html new file mode 100644 index 0000000000..da02e759d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html @@ -0,0 +1,122 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Logical Properties: {max-,min-}block-size vertical-lr</title> +<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.block { + border: 1px solid #000; + writing-mode: vertical-lr; +} +#block1 { + block-size: 40px; + min-block-size: 50px; + max-block-size: 100px; +} +#block2 { + block-size: 100px; + min-block-size: 50px; + max-block-size: 100px; +} +#block3 { + block-size: 120px; + min-block-size: 50px; + max-block-size: 100px; +} + +.override { + border: 1px solid #000; + writing-mode: vertical-lr; +} +#override1 { + block-size: 100px; + width: 50px; +} +#override2 { + width: 50px; + block-size: 100px; +} + +.table { + border: 1px solid #000; + display: table; + writing-mode: vertical-lr; +} +.tablecell { + display: table-cell; +} +#table1_cell { + block-size: 40px; + min-block-size: 50px; + max-block-size: 100px; + inline-size: 100px; + background-color: red; +} +#table2_cell { + block-size: 100px; + min-block-size: 50px; + max-block-size: 100px; + inline-size: 100px; + background-color: blue; +} +#table3_cell { + block-size: 120px; + min-block-size: 50px; + max-block-size: 100px; + inline-size: 100px; + background-color: green; +} +</style> + +<div id="log"></div> + +<h3>Maximum and minimim block sizes in blocks with vertical-lr</h3> +<div> + <p><code>block-size</code> < <code>min-block-size</code></p> + <div class="block" id="block1" data-expected-client-width="50" data-expected-client-height="0"></div> + + <p><code>min-block-size</code> < <code>block-size</code> ≤ <code>max-block-size</code></p> + <div class="block" id="block2" data-expected-client-width="100" data-expected-client-height="0"></div> + + <p><code>block-size</code> > <code>max-block-size</code></p> + <div class="block" id="block3" data-expected-client-width="100" data-expected-client-height="0"></div> +</div> + +<h3>Overridance of <code>width</code> and <code>block-size</code> in vertical-lr</h3> +<div> + <p>Check that <code>width</code> overrides <code>block-size</code></p> + <div class="override" id="override1" data-expected-client-width="50" data-expected-client-height="0"></div> + + <p>Check that <code>block-size</code> overrides <code>width</code></p> + <div class="override" id="override2" data-expected-client-width="100" data-expected-client-height="0"></div> +</div> + +<h3>Maximum and minimim block sizes in table cells with vertical-lr</h3> +<div> + <p><code>block-size</code> < <code>min-block-size</code></p> + <div class="table"> + <div class="tablecell" id="table1_cell" data-expected-client-width="40" data-expected-client-height="100"></div> + </div> + + <p><code>min-block-size</code> < <code>block-size</code> ≤ <code>max-block-size</code></p> + <div class="table"> + <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div> + </div> + + <p><code>block-size</code> > <code>max-block-size</code></p> + <div class="table"> + <div class="tablecell" id="table3_cell" data-expected-client-width="120" data-expected-client-height="100"></div> + </div> +</div> + +<script> +checkLayout(".block", false); +checkLayout(".override", false); +checkLayout(".tablecell", false); +done(); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-block-size.html b/testing/web-platform/tests/css/css-logical/logicalprops-block-size.html new file mode 100644 index 0000000000..8d90c07a98 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logicalprops-block-size.html @@ -0,0 +1,123 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Logical Properties: {max-,min-}block-size</title> +<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.tests { + width: 600px; +} + +.block { + border: 1px solid #000; +} +#block1 { + block-size: 40px; + min-block-size: 50px; + max-block-size: 100px; +} +#block2 { + block-size: 100px; + min-block-size: 50px; + max-block-size: 100px; +} +#block3 { + block-size: 120px; + min-block-size: 50px; + max-block-size: 100px; +} + +.override { + border: 1px solid #000; +} +#override1 { + block-size: 100px; + height: 50px; +} +#override2 { + height: 50px; + block-size: 100px; +} + +.table { + border: 1px solid #000; + display: table; +} +.tablecell { + display: table-cell; +} +#table1_cell { + block-size: 40px; + min-block-size: 50px; + max-block-size: 100px; + inline-size: 100px; + background-color: red; +} +#table2_cell { + block-size: 100px; + min-block-size: 50px; + max-block-size: 100px; + inline-size: 100px; + background-color: blue; +} +#table3_cell { + block-size: 120px; + min-block-size: 50px; + max-block-size: 100px; + inline-size: 100px; + background-color: green; +} +</style> + +<div id="log"></div> + +<h3>Maximum and minimim block sizes in blocks</h3> +<div class="tests"> + <p><code>block-size</code> < <code>min-block-size</code></p> + <div class="block" id="block1" data-expected-width="600" data-expected-client-height="50"></div> + + <p><code>min-block-size</code> < <code>block-size</code> ≤ <code>max-block-size</code></p> + <div class="block" id="block2" data-expected-width="600" data-expected-client-height="100"></div> + + <p><code>block-size</code> > <code>max-block-size</code></p> + <div class="block" id="block3" data-expected-width="600" data-expected-client-height="100"></div> +</div> + +<h3>Overridance of <code>height</code> and <code>block-size</code></h3> +<div class="tests"> + <p>Check that <code>height</code> overrides <code>block-size</code></p> + <div class="override" id="override1" data-expected-width="600" data-expected-client-height="50"></div> + + <p>Check that <code>block-size</code> overrides <code>height</code></p> + <div class="override" id="override2" data-expected-width="600" data-expected-client-height="100"></div> +</div> + +<h3>Maximum and minimim block sizes in table cells</h3> +<div class="tests"> + <p><code>block-size</code> < <code>min-block-size</code></p> + <div class="table"> + <div class="tablecell" id="table1_cell" data-expected-client-width="100" data-expected-client-height="40"></div> + </div> + + <p><code>min-block-size</code> < <code>block-size</code> ≤ <code>max-block-size</code></p> + <div class="table"> + <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div> + </div> + + <p><code>block-size</code> > <code>max-block-size</code></p> + <div class="table"> + <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="120"></div> + </div> +</div> + +<script> +checkLayout(".block", false); +checkLayout(".override", false); +checkLayout(".tablecell", false); +done(); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-inline-size-vlr.html b/testing/web-platform/tests/css/css-logical/logicalprops-inline-size-vlr.html new file mode 100644 index 0000000000..0a53dbbc5c --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logicalprops-inline-size-vlr.html @@ -0,0 +1,122 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Logical Properties: {max-,min-}inline-size vertical-lr</title> +<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.block { + border: 1px solid #000; + writing-mode: vertical-lr; +} +#block1 { + inline-size: 40px; + min-inline-size: 50px; + max-inline-size: 100px; +} +#block2 { + inline-size: 100px; + min-inline-size: 50px; + max-inline-size: 100px; +} +#block3 { + inline-size: 120px; + min-inline-size: 50px; + max-inline-size: 100px; +} + +.override { + border: 1px solid #000; + writing-mode: vertical-lr; +} +#override1 { + inline-size: 100px; + height: 50px; +} +#override2 { + height: 50px; + inline-size: 100px; +} + +.table { + border: 1px solid #000; + display: table; + writing-mode: vertical-lr; +} +.tablecell { + display: table-cell; +} +#table1_cell { + inline-size: 40px; + min-inline-size: 50px; + max-inline-size: 100px; + block-size: 100px; + background-color: red; +} +#table2_cell { + inline-size: 100px; + min-inline-size: 50px; + max-inline-size: 100px; + block-size: 100px; + background-color: blue; +} +#table3_cell { + inline-size: 120px; + min-inline-size: 50px; + max-inline-size: 100px; + block-size: 100px; + background-color: green; +} +</style> + +<div id="log"></div> + +<h3>Maximum and minimim inline sizes in blocks with vertical-lr</h3> +<div> + <p><code>inline-size</code> < <code>min-inline-size</code></p> + <div class="block" id="block1" data-expected-client-width="0" data-expected-client-height="50"></div> + + <p><code>min-inline-size</code> < <code>inline-size</code> ≤ <code>max-inline-size</code></p> + <div class="block" id="block2" data-expected-client-width="0" data-expected-client-height="100"></div> + + <p><code>inline-size</code> > <code>max-inline-size</code></p> + <div class="block" id="block3" data-expected-client-width="0" data-expected-client-height="100"></div> +</div> + +<h3>Overridance of <code>height</code> and <code>inline-size</code> in vertical-lr</h3> +<div> + <p>Check that <code>height</code> overrides <code>inline-size</code></p> + <div class="override" id="override1" data-expected-client-width="0" data-expected-client-height="50"></div> + + <p>Check that <code>inline-size</code> overrides <code>height</code></p> + <div class="override" id="override2" data-expected-client-width="0" data-expected-client-height="100"></div> +</div> + +<h3>Maximum and minimim inline sizes in table cells with vertical-lr</h3> +<div> + <p><code>inline-size</code> < <code>min-inline-size</code></p> + <div class="table"> + <div class="tablecell" id="table1_cell" data-expected-client-width="100" data-expected-client-height="50"></div> + </div> + + <p><code>min-inline-size</code> < <code>inline-size</code> ≤ <code>max-inline-size</code></p> + <div class="table"> + <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div> + </div> + + <p><code>inline-size</code> > <code>max-inline-size</code></p> + <div class="table"> + <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="100"></div> + </div> +</div> + +<script> +checkLayout(".block", false); +checkLayout(".override", false); +checkLayout(".tablecell", false); +done(); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-inline-size.html b/testing/web-platform/tests/css/css-logical/logicalprops-inline-size.html new file mode 100644 index 0000000000..3ec169924a --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logicalprops-inline-size.html @@ -0,0 +1,119 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Logical Properties: {max-,min-}inline-size</title> +<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<style> +.block { + border: 1px solid #000; +} +#block1 { + inline-size: 40px; + min-inline-size: 50px; + max-inline-size: 100px; +} +#block2 { + inline-size: 100px; + min-inline-size: 50px; + max-inline-size: 100px; +} +#block3 { + inline-size: 120px; + min-inline-size: 50px; + max-inline-size: 100px; +} + +.override { + border: 1px solid #000; +} +#override1 { + inline-size: 100px; + width: 50px; +} +#override2 { + width: 50px; + inline-size: 100px; +} + +.table { + border: 1px solid #000; + display: table; +} +.tablecell { + display: table-cell; +} +#table1_cell { + inline-size: 40px; + min-inline-size: 50px; + max-inline-size: 100px; + block-size: 100px; + background-color: red; +} +#table2_cell { + inline-size: 100px; + min-inline-size: 50px; + max-inline-size: 100px; + block-size: 100px; + background-color: blue; +} +#table3_cell { + inline-size: 120px; + min-inline-size: 50px; + max-inline-size: 100px; + block-size: 100px; + background-color: green; +} +</style> + +<div id="log"></div> + +<h3>Maximum and minimim inline sizes in blocks</h3> +<div> + <p><code>inline-size</code> < <code>min-inline-size</code></p> + <div class="block" id="block1" data-expected-client-width="50" data-expected-client-height="0"></div> + + <p><code>min-inline-size</code> < <code>inline-size</code> ≤ <code>max-inline-size</code></p> + <div class="block" id="block2" data-expected-client-width="100" data-expected-client-height="0"></div> + + <p><code>inline-size</code> > <code>max-inline-size</code></p> + <div class="block" id="block3" data-expected-client-width="100" data-expected-client-height="0"></div> +</div> + +<h3>Overridance of <code>width</code> and <code>inline-size</code></h3> +<div> + <p>Check that <code>width</code> overrides <code>inline-size</code></p> + <div class="override" id="override1" data-expected-client-width="50" data-expected-client-height="0"></div> + + <p>Check that <code>inline-size</code> overrides <code>width</code></p> + <div class="override" id="override2" data-expected-client-width="100" data-expected-client-height="0"></div> +</div> + +<h3>Maximum and minimim inline sizes in table cells</h3> +<div> + <p><code>inline-size</code> < <code>min-inline-size</code></p> + <div class="table"> + <div class="tablecell" id="table1_cell" data-expected-client-width="50" data-expected-client-height="100"></div> + </div> + + <p><code>min-inline-size</code> < <code>inline-size</code> ≤ <code>max-inline-size</code></p> + <div class="table"> + <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div> + </div> + + <p><code>inline-size</code> > <code>max-inline-size</code></p> + <div class="table"> + <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="100"></div> + </div> +</div> + +<script> +checkLayout(".block", false); +checkLayout(".override", false); +checkLayout(".tablecell", false); +done(); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-quirklength.html b/testing/web-platform/tests/css/css-logical/logicalprops-quirklength.html new file mode 100644 index 0000000000..3e133db880 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logicalprops-quirklength.html @@ -0,0 +1,36 @@ +<meta charset="utf-8"> +<title>CSS Logical Properties</title> +<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties"> +<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-prop"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> #dummy {} </style> + +<script> +function isValidDeclaration(cssText) { + var cssRule = document.styleSheets[0].cssRules[0]; + cssRule.style = cssText; + var valid = (cssRule.style.length > 0); + cssRule.style = ""; + return valid; +} +var tests = [ + {cssText:"block-size: 1"}, + {cssText:"min-block-size: 1"}, + {cssText:"max-block-size: 1"}, + {cssText:"inline-size: 1"}, + {cssText:"min-inline-size: 1"}, + {cssText:"max-inline-size: 1"}, + {cssText:"margin-block-start: 1"}, + {cssText:"margin-block-end: 1"}, + {cssText:"margin-inline-start: 1"}, + {cssText:"margin-inline-end: 1"}, +]; + +tests.forEach(function(t) { + test(() => assert_false(isValidDeclaration(t.cssText)), 'Check that "' + t.cssText + '" is not valid in quirks mode'); +}); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-with-deferred-writing-mode.html b/testing/web-platform/tests/css/css-logical/logicalprops-with-deferred-writing-mode.html new file mode 100644 index 0000000000..a213d375bd --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logicalprops-with-deferred-writing-mode.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Logical properties with deferred <code>writing-mode</code></title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#box"> +<link rel="help" href="https://drafts.csswg.org/css-variables-1/"> +<link rel="help" href="https://drafts.csswg.org/css-values-4/#common-keywords"> +<meta name="assert" content="Checks that logical properties are resolved correctly when the writing mode isn't known until computed-value time."> +<style> +#parent { + writing-mode: vertical-lr; +} + +@layer { + .revert-layer { + writing-mode: vertical-rl; + } +} +@layer { + .revert-layer { + writing-mode: horizontal-tb; + writing-mode: revert-layer; + } +} +</style> +<div id="parent"> + <div id="target"></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const target = document.getElementById("target"); +const computedStyle = getComputedStyle(target); + +function check(expected) { + for (let [prop, value] of Object.entries(expected)) { + assert_equals(computedStyle.getPropertyValue(prop), value, prop); + } +} + +test(function() { + target.style.cssText = ` + --wm: vertical-rl; + writing-mode: var(--wm); + margin-block-start: 1px; + margin-block-end: 2px; + margin-inline-start: 3px; + margin-inline-end: 4px; + `; + check({ + // Logicals + "margin-block-start": "1px", + "margin-block-end": "2px", + "margin-inline-start": "3px", + "margin-inline-end": "4px", + // Physicals + "margin-right": "1px", + "margin-left": "2px", + "margin-top": "3px", + "margin-bottom": "4px", + }); +}, "Writing mode with variable"); + +test(function() { + target.style.cssText = ` + --wm1: vertical-rl; + --wm2: var(--wm1); + writing-mode: var(--wm2); + margin-block-start: 1px; + margin-block-end: 2px; + margin-inline-start: 3px; + margin-inline-end: 4px; + `; + check({ + // Logicals + "margin-block-start": "1px", + "margin-block-end": "2px", + "margin-inline-start": "3px", + "margin-inline-end": "4px", + // Physicals + "margin-right": "1px", + "margin-left": "2px", + "margin-top": "3px", + "margin-bottom": "4px", + }); +}, "Writing mode with nested variables"); + +test(function() { + target.style.cssText = ` + writing-mode: inherit; + margin-block-start: 1px; + margin-block-end: 2px; + margin-inline-start: 3px; + margin-inline-end: 4px; + `; + check({ + // Logicals + "margin-block-start": "1px", + "margin-block-end": "2px", + "margin-inline-start": "3px", + "margin-inline-end": "4px", + // Physicals + "margin-left": "1px", + "margin-right": "2px", + "margin-top": "3px", + "margin-bottom": "4px", + }); +}, "Writing mode with 'inherit'"); + +test(function() { + target.style.cssText = ` + writing-mode: initial; + margin-block-start: 1px; + margin-block-end: 2px; + margin-inline-start: 3px; + margin-inline-end: 4px; + `; + check({ + // Logicals + "margin-block-start": "1px", + "margin-block-end": "2px", + "margin-inline-start": "3px", + "margin-inline-end": "4px", + // Physicals + "margin-top": "1px", + "margin-bottom": "2px", + "margin-left": "3px", + "margin-right": "4px", + }); +}, "Writing mode with 'initial'"); + +test(function() { + target.style.cssText = ` + writing-mode: revert; + margin-block-start: 1px; + margin-block-end: 2px; + margin-inline-start: 3px; + margin-inline-end: 4px; + `; + check({ + // Logicals + "margin-block-start": "1px", + "margin-block-end": "2px", + "margin-inline-start": "3px", + "margin-inline-end": "4px", + // Physicals + "margin-left": "1px", + "margin-right": "2px", + "margin-top": "3px", + "margin-bottom": "4px", + }); +}, "Writing mode with 'revert'"); + +test(function() { + target.className = "revert-layer"; + target.style.cssText = ` + margin-block-start: 1px; + margin-block-end: 2px; + margin-inline-start: 3px; + margin-inline-end: 4px; + `; + check({ + // Logicals + "margin-block-start": "1px", + "margin-block-end": "2px", + "margin-inline-start": "3px", + "margin-inline-end": "4px", + // Physicals + "margin-right": "1px", + "margin-left": "2px", + "margin-top": "3px", + "margin-bottom": "4px", + }); +}, "Writing mode with 'revert-layer'"); +</script> diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-with-variables.html b/testing/web-platform/tests/css/css-logical/logicalprops-with-variables.html new file mode 100644 index 0000000000..fc52495bc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/logicalprops-with-variables.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Logical properties with <code>var()</code></title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#box"> +<link rel="help" href="https://drafts.csswg.org/css-variables-1/"> +<meta name="assert" content="Checks that logical properties can use the 'var()' notation to reference custom properties."> +<div id="target"></div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const target = document.getElementById("target"); +const {style} = target; +const computedStyle = getComputedStyle(target); +let title; + +function check(property, specifiedExpected, expectedComputed) { + test(() => { + const specifiedActual = style.getPropertyValue(property); + assert_equals(specifiedActual, specifiedExpected, "Specified value"); + const computedActual = computedStyle.getPropertyValue(property); + assert_equals(computedActual, expectedComputed, "Computed value"); + }, title + " - " + property); +} + +{ + title = "Logical longhands with variables"; + style.cssText = ""; + style.setProperty("--one", "1px"); + style.setProperty("--two", "2px"); + style.setProperty("margin-inline-start", "var(--one)"); + style.setProperty("margin-inline-end", "var(--two)"); + + check("margin-inline-start", "var(--one)", "1px"); + check("margin-inline-end", "var(--two)", "2px"); + check("margin-inline", "", "1px 2px"); +} +{ + title = "Logical shorthand with 1 variable"; + style.cssText = ""; + style.setProperty("--one", "1px"); + style.setProperty("margin-inline", "var(--one)"); + + check("margin-inline-start", "", "1px"); + check("margin-inline-end", "", "1px"); + check("margin-inline", "var(--one)", "1px"); +} +{ + title = "Logical shorthand with 2 variables"; + style.cssText = ""; + style.setProperty("--one", "1px"); + style.setProperty("--two", "2px"); + style.setProperty("margin-inline", "var(--one) var(--two)"); + + check("margin-inline-start", "", "1px"); + check("margin-inline-end", "", "2px"); + check("margin-inline", "var(--one) var(--two)", "1px 2px"); +} +{ + title = "Logical shorthand with 1 variable and 1 length"; + style.cssText = ""; + style.setProperty("--one", "1px"); + style.setProperty("margin-inline", "var(--one) 2px"); + + check("margin-inline-start", "", "1px"); + check("margin-inline-end", "", "2px"); + check("margin-inline", "var(--one) 2px", "1px 2px"); +} +</script> diff --git a/testing/web-platform/tests/css/css-logical/parsing/block-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/block-size-computed.html new file mode 100644 index 0000000000..de3a3c2a0c --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/block-size-computed.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().blockSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="block-size computed value is an absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #parent { + height: 300px; + } + #target { + width: 0px; + height: 0px; + font-size: 40px; + } + #child { + height: 80px; + } +</style> +</head> +<body> +<div id="parent"> + <div id="target"> + <div id="child"> + </div> + </div> +</div> +<script> +test_computed_value("block-size", "auto", "80px"); // child height + +test_computed_value("block-size", "10px"); +test_computed_value("block-size", "20%", "60px"); +test_computed_value("block-size", "calc(0.5em + 10px)", "30px"); +test_computed_value("block-size", "calc(-0.5em + 10px)", "0px"); + +test_computed_value("block-size", "min-content", "80px"); // child height +test_computed_value("block-size", "max-content", "80px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/block-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/block-size-invalid.html new file mode 100644 index 0000000000..37d8890773 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/block-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing block-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("block-size", "none"); + +test_invalid_value("block-size", "min-content available"); +test_invalid_value("block-size", "max-content 10px"); +test_invalid_value("block-size", "20% available"); + +test_invalid_value("block-size", "-10px"); +test_invalid_value("block-size", "-20%"); +test_invalid_value("block-size", "60"); +test_invalid_value("block-size", "10px 20%"); + +test_invalid_value("block-size", "10px border-box"); +test_invalid_value("block-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/block-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/block-size-valid.html new file mode 100644 index 0000000000..47170e48f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/block-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing block-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("block-size", "auto"); + +test_valid_value("block-size", "10px"); +test_valid_value("block-size", "20%"); +test_valid_value("block-size", "calc(2em + 3ex)"); + +test_valid_value("block-size", "min-content"); +test_valid_value("block-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("block-size", "fit-content(100px)"); +// test_valid_value("block-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-color-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-computed.html new file mode 100644 index 0000000000..24a745f5fe --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-computed.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderBlockColor</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color"> +<meta name="assert" content="border-block-color is computed color(s)."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="box"></div> +<div id="target"></div> +<style> + #target { + color: lime; + } +</style> +<script> +test_computed_value("border-block-start-color", "currentcolor", 'rgb(0, 255, 0)'); +test_computed_value("border-block-start-color", "rgb(2, 3, 4)"); +test_computed_value("border-block-end-color", "rgb(34, 51, 68)"); +test_computed_value("border-block-end-color", "transparent", "rgba(0, 0, 0, 0)"); +test_computed_value("border-block-color", "rgb(34, 51, 68)"); +test_computed_value("border-block-color", "transparent rgb(2, 3, 4)", "rgba(0, 0, 0, 0) rgb(2, 3, 4)"); +test_computed_value("border-block-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)"); +test_computed_value("border-block-color", "currentcolor lime", 'rgb(0, 255, 0)'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-color-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-invalid.html new file mode 100644 index 0000000000..1c25f125fe --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-invalid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-color with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color"> +<meta name="assert" content="border-block-color supports only the grammar '<color>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-block-start-color", "#12"); +test_invalid_value("border-block-start-color", "auto"); +test_invalid_value("border-block-start-color", "red green"); +test_invalid_value("border-block-start-color", "rgb"); +test_invalid_value("border-block-start-color", "rgb(1,2,3,4,5)"); +test_invalid_value("border-block-start-color", "rgb(10%, 20, 30%)"); +test_invalid_value("border-block-end-color", "#123456789"); +test_invalid_value("border-block-end-color", "123"); +test_invalid_value("border-block-end-color", "hsla(1,2,3,4,5)"); +test_invalid_value("border-block-end-color", "red, green"); +test_invalid_value("border-block-end-color", "rgb(1)"); +test_invalid_value("border-block-end-color", "rgba(-2, 300, 400%, -0.5)"); +test_invalid_value("border-block-color", "auto"); +test_invalid_value("border-block-color", "lime, transparent"); +test_invalid_value("border-block-color", "red green blue"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-color-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-valid.html new file mode 100644 index 0000000000..aefe0f268b --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-color with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color"> +<meta name="assert" content="border-block-color supports the full grammar '<color>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-block-start-color", "currentcolor"); +test_valid_value("border-block-start-color", "rgb(2, 3, 4)"); +test_valid_value("border-block-end-color", "#234", "rgb(34, 51, 68)"); +test_valid_value("border-block-end-color", "transparent"); +test_valid_value("border-block-color", "#234", "rgb(34, 51, 68)"); +test_valid_value("border-block-color", "transparent rgb(2, 3, 4)"); +test_valid_value("border-block-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-style-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-computed.html new file mode 100644 index 0000000000..9cd8a252b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-computed.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderBlockStyle</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-style"> +<meta name="assert" content="border-block-style is specified keyword(s)."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-block-start-style", "dotted"); +test_computed_value("border-block-start-style", "groove"); +test_computed_value("border-block-start-style", "inset"); +test_computed_value("border-block-start-style", "none"); +test_computed_value("border-block-start-style", "solid"); +test_computed_value("border-block-end-style", "dashed"); +test_computed_value("border-block-end-style", "double"); +test_computed_value("border-block-end-style", "hidden"); +test_computed_value("border-block-end-style", "outset"); +test_computed_value("border-block-end-style", "ridge"); +test_computed_value("border-block-style", "dotted"); +test_computed_value("border-block-style", "double groove"); +test_computed_value("border-block-style", "hidden hidden", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-style-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-invalid.html new file mode 100644 index 0000000000..680e510aae --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-style with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-style"> +<meta name="assert" content="border-block-style supports only the grammar '<line-style>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-block-start-style", "auto"); +test_invalid_value("border-block-start-style", "hidden, outset"); +test_invalid_value("border-block-end-style", "solid double"); +test_invalid_value("border-block-style", "auto"); +test_invalid_value("border-block-style", "groove, ridge"); +test_invalid_value("border-block-style", "hidden inset dashed"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-style-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-valid.html new file mode 100644 index 0000000000..860a1052b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-valid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-style with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block"> +<meta name="assert" content="border-block-style supports the full grammar '<line-style>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset +test_valid_value("border-block-start-style", "dotted"); +test_valid_value("border-block-start-style", "groove"); +test_valid_value("border-block-start-style", "inset"); +test_valid_value("border-block-start-style", "none"); +test_valid_value("border-block-start-style", "solid"); +test_valid_value("border-block-end-style", "dashed"); +test_valid_value("border-block-end-style", "double"); +test_valid_value("border-block-end-style", "hidden"); +test_valid_value("border-block-end-style", "outset"); +test_valid_value("border-block-end-style", "ridge"); +test_valid_value("border-block-style", "dotted"); +test_valid_value("border-block-style", "double groove"); +test_valid_value("border-block-style", "hidden hidden", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-valid.html new file mode 100644 index 0000000000..68c9797c0f --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-valid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block"> +<meta name="assert" content="border-block supports the full grammar '<line-width> || <line-style> || <color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Similar to css-backgrounds/parsing/border-valid.html + +test_valid_value("border-block", "1px dotted red"); +test_valid_value("border-block", "double", ["double", "medium double"]); + +test_valid_value("border-block-start", "green double thin", "thin double green"); +test_valid_value("border-block-start", "green", ["green", "medium none green"]); +test_valid_value("border-block-end", "thin", ["thin", "thin none"]); +test_valid_value("border-block-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-width-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-computed.html new file mode 100644 index 0000000000..66b0cb7c60 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-computed.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderBlockWidth</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width"> +<meta name="assert" content="border-block-width is absolute length; zero if the border block style is none or hidden."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="box"></div> +<div id="target"></div> +<style> + #box { + border-style: dotted; /* Avoid border-*-width computed style 0 */ + border-top-width: thin; + border-right-width: medium; + border-bottom-width: thick; + } + #target { + font-size: 40px; + border-block-style: dotted; /* Avoid border-block-*-width computed style 0 */ + } +</style> +<script> +'use strict'; +const box = document.getElementById('box'); +const thinWidth = getComputedStyle(box).borderTopWidth; +const mediumWidth = getComputedStyle(box).borderRightWidth; +const thickWidth = getComputedStyle(box).borderBottomWidth; + +test_computed_value("border-block-start-width", "calc(10px + 0.5em)", "30px"); +test_computed_value("border-block-start-width", "calc(10px - 0.5em)", "0px"); +test_computed_value("border-block-start-width", "thin", thinWidth); +test_computed_value("border-block-start-width", "medium", mediumWidth); + +test_computed_value("border-block-end-width", "calc(10px + 0.5em)", "30px"); +test_computed_value("border-block-end-width", "calc(10px - 0.5em)", "0px"); +test_computed_value("border-block-end-width", "thick", thickWidth); + +test_computed_value("border-block-width", "10px"); +test_computed_value("border-block-width", "10px 20px"); +test_computed_value("border-block-width", "10px 10px", "10px"); +test(() => { + box.style.borderBlockStartWidth = '10px'; + box.style.borderBlockEndWidth = '10px'; + + box.style.borderBlockStartStyle = 'groove'; + box.style.borderBlockEndStyle = 'solid'; + assert_equals(getComputedStyle(box).borderBlockStartWidth, '10px'); + assert_equals(getComputedStyle(box).borderBlockEndWidth, '10px'); + assert_equals(getComputedStyle(box).borderBlockWidth, '10px'); + + box.style.borderBlockStartStyle = 'hidden'; + box.style.borderBlockEndStyle = 'dashed'; + assert_equals(getComputedStyle(box).borderBlockStartWidth, '0px'); + assert_equals(getComputedStyle(box).borderBlockEndWidth, '10px'); + assert_equals(getComputedStyle(box).borderBlockWidth, '0px 10px'); + + box.style.borderBlockStartStyle = 'inset'; + box.style.borderBlockEndStyle = 'none'; + assert_equals(getComputedStyle(box).borderBlockStartWidth, '10px'); + assert_equals(getComputedStyle(box).borderBlockEndWidth, '0px'); + assert_equals(getComputedStyle(box).borderBlockWidth, '10px 0px'); + + box.style.borderBlockStartStyle = 'none'; + box.style.borderBlockEndStyle = 'hidden'; + assert_equals(getComputedStyle(box).borderBlockStartWidth, '0px'); + assert_equals(getComputedStyle(box).borderBlockEndWidth, '0px'); + assert_equals(getComputedStyle(box).borderBlockWidth, '0px'); +}, 'width is zero if the border block style is none or hidden'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-width-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-invalid.html new file mode 100644 index 0000000000..65990fe930 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-width with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width"> +<meta name="assert" content="border-block-width supports only the grammar '<line-width>{1,2}'."> +<meta name="assert" content="Negative lengths are not allowed."> + <script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-block-start-width", "-20px"); +test_invalid_value("border-block-start-width", "auto"); +test_invalid_value("border-block-start-width", "medium 40px"); +test_invalid_value("border-block-end-width", "10"); +test_invalid_value("border-block-end-width", "30%"); + +test_invalid_value("border-block-width", "thick, thin"); +test_invalid_value("border-block-width", "10px 20px 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-width-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-valid.html new file mode 100644 index 0000000000..03b02a2566 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-block-width with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width"> +<meta name="assert" content="border-block-width supports the full grammar '<line-width>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <length> | thin | medium | thick +test_valid_value("border-block-start-width", "10px"); +test_valid_value("border-block-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)"); +test_valid_value("border-block-start-width", "thick"); +test_valid_value("border-block-start-width", "thin"); +test_valid_value("border-block-end-width", "0", "0px"); +test_valid_value("border-block-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); +test_valid_value("border-block-end-width", "medium"); +test_valid_value("border-block-width", "10px"); +test_valid_value("border-block-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)"); +test_valid_value("border-block-width", "10px 10px", "10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-computed.html new file mode 100644 index 0000000000..106a4f48e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-computed.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderInlineColor</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color"> +<meta name="assert" content="border-inline-color is computed color(s)."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="box"></div> +<div id="target"></div> +<style> + #target { + color: lime; + } +</style> +<script> +test_computed_value("border-inline-start-color", "currentcolor", 'rgb(0, 255, 0)'); +test_computed_value("border-inline-start-color", "rgb(2, 3, 4)"); +test_computed_value("border-inline-end-color", "rgb(34, 51, 68)"); +test_computed_value("border-inline-end-color", "transparent", "rgba(0, 0, 0, 0)"); +test_computed_value("border-inline-color", "rgb(34, 51, 68)"); +test_computed_value("border-inline-color", "transparent rgb(2, 3, 4)", "rgba(0, 0, 0, 0) rgb(2, 3, 4)"); +test_computed_value("border-inline-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)"); +test_computed_value("border-inline-color", "currentcolor lime", 'rgb(0, 255, 0)'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-invalid.html new file mode 100644 index 0000000000..f0070c787b --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-invalid.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-color with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color"> +<meta name="assert" content="border-inline-color supports only the grammar '<color>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-inline-start-color", "#12"); +test_invalid_value("border-inline-start-color", "auto"); +test_invalid_value("border-inline-start-color", "red green"); +test_invalid_value("border-inline-start-color", "rgb"); +test_invalid_value("border-inline-start-color", "rgb(1,2,3,4,5)"); +test_invalid_value("border-inline-start-color", "rgb(10%, 20, 30%)"); +test_invalid_value("border-inline-end-color", "#123456789"); +test_invalid_value("border-inline-end-color", "123"); +test_invalid_value("border-inline-end-color", "hsla(1,2,3,4,5)"); +test_invalid_value("border-inline-end-color", "red, green"); +test_invalid_value("border-inline-end-color", "rgb(1)"); +test_invalid_value("border-inline-end-color", "rgba(-2, 300, 400%, -0.5)"); +test_invalid_value("border-inline-color", "auto"); +test_invalid_value("border-inline-color", "lime, transparent"); +test_invalid_value("border-inline-color", "red green blue"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-valid.html new file mode 100644 index 0000000000..6bf240006e --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-valid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-color with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color"> +<meta name="assert" content="border-inline-color supports the full grammar '<color>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("border-inline-start-color", "currentcolor"); +test_valid_value("border-inline-start-color", "rgb(2, 3, 4)"); +test_valid_value("border-inline-end-color", "#234", "rgb(34, 51, 68)"); +test_valid_value("border-inline-end-color", "transparent"); +test_valid_value("border-inline-color", "#234", "rgb(34, 51, 68)"); +test_valid_value("border-inline-color", "transparent rgb(2, 3, 4)"); +test_valid_value("border-inline-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-computed.html new file mode 100644 index 0000000000..0ba858a685 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-computed.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderInlineStyle</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-style"> +<meta name="assert" content="border-inline-style is specified keyword(s)."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("border-inline-start-style", "dotted"); +test_computed_value("border-inline-start-style", "groove"); +test_computed_value("border-inline-start-style", "inset"); +test_computed_value("border-inline-start-style", "none"); +test_computed_value("border-inline-start-style", "solid"); +test_computed_value("border-inline-end-style", "dashed"); +test_computed_value("border-inline-end-style", "double"); +test_computed_value("border-inline-end-style", "hidden"); +test_computed_value("border-inline-end-style", "outset"); +test_computed_value("border-inline-end-style", "ridge"); +test_computed_value("border-inline-style", "dotted"); +test_computed_value("border-inline-style", "double groove"); +test_computed_value("border-inline-style", "hidden hidden", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-invalid.html new file mode 100644 index 0000000000..6684dc19ec --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-invalid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-style with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-style"> +<meta name="assert" content="border-inline-style supports only the grammar '<line-style>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-inline-start-style", "auto"); +test_invalid_value("border-inline-start-style", "hidden, outset"); +test_invalid_value("border-inline-end-style", "solid double"); +test_invalid_value("border-inline-style", "auto"); +test_invalid_value("border-inline-style", "groove, ridge"); +test_invalid_value("border-inline-style", "hidden inset dashed"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-valid.html new file mode 100644 index 0000000000..4fd0cbbb09 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-valid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-style with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block"> +<meta name="assert" content="border-inline-style supports the full grammar '<line-style>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset +test_valid_value("border-inline-start-style", "dotted"); +test_valid_value("border-inline-start-style", "groove"); +test_valid_value("border-inline-start-style", "inset"); +test_valid_value("border-inline-start-style", "none"); +test_valid_value("border-inline-start-style", "solid"); +test_valid_value("border-inline-end-style", "dashed"); +test_valid_value("border-inline-end-style", "double"); +test_valid_value("border-inline-end-style", "hidden"); +test_valid_value("border-inline-end-style", "outset"); +test_valid_value("border-inline-end-style", "ridge"); +test_valid_value("border-inline-style", "dotted"); +test_valid_value("border-inline-style", "double groove"); +test_valid_value("border-inline-style", "hidden hidden", "hidden"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-valid.html new file mode 100644 index 0000000000..be29783acf --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-valid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline"> +<meta name="assert" content="border-inline supports the full grammar '<line-width> || <line-style> || <color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Similar to css-backgrounds/parsing/border-valid.html + +test_valid_value("border-inline", "1px dotted red"); +test_valid_value("border-inline", "double", ["double", "medium double"]); + +test_valid_value("border-inline-start", "green double thin", "thin double green"); +test_valid_value("border-inline-start", "green", ["green", "medium none green"]); +test_valid_value("border-inline-end", "thin", ["thin", "thin none"]); +test_valid_value("border-inline-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-computed.html new file mode 100644 index 0000000000..03b71f0386 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-computed.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().borderInlineWidth</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width"> +<meta name="assert" content="border-inline-width is absolute length; zero if the border block style is none or hidden."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="box"></div> +<div id="target"></div> +<style> + #box { + border-style: dotted; /* Avoid border-*-width computed style 0 */ + border-top-width: thin; + border-right-width: medium; + border-bottom-width: thick; + } + #target { + font-size: 40px; + border-inline-style: dotted; /* Avoid border-inline-*-width computed style 0 */ + } +</style> +<script> +'use strict'; +const box = document.getElementById('box'); +const thinWidth = getComputedStyle(box).borderTopWidth; +const mediumWidth = getComputedStyle(box).borderRightWidth; +const thickWidth = getComputedStyle(box).borderBottomWidth; + +test_computed_value("border-inline-start-width", "calc(10px + 0.5em)", "30px"); +test_computed_value("border-inline-start-width", "calc(10px - 0.5em)", "0px"); +test_computed_value("border-inline-start-width", "thin", thinWidth); +test_computed_value("border-inline-start-width", "medium", mediumWidth); + +test_computed_value("border-inline-end-width", "calc(10px + 0.5em)", "30px"); +test_computed_value("border-inline-end-width", "calc(10px - 0.5em)", "0px"); +test_computed_value("border-inline-end-width", "thick", thickWidth); + +test_computed_value("border-inline-width", "10px"); +test_computed_value("border-inline-width", "10px 20px"); +test_computed_value("border-inline-width", "10px 10px", "10px"); +test(() => { + box.style.borderInlineStartWidth = '10px'; + box.style.borderInlineEndWidth = '10px'; + + box.style.borderInlineStartStyle = 'groove'; + box.style.borderInlineEndStyle = 'solid'; + assert_equals(getComputedStyle(box).borderInlineStartWidth, '10px'); + assert_equals(getComputedStyle(box).borderInlineEndWidth, '10px'); + assert_equals(getComputedStyle(box).borderInlineWidth, '10px'); + + box.style.borderInlineStartStyle = 'hidden'; + box.style.borderInlineEndStyle = 'dashed'; + assert_equals(getComputedStyle(box).borderInlineStartWidth, '0px'); + assert_equals(getComputedStyle(box).borderInlineEndWidth, '10px'); + assert_equals(getComputedStyle(box).borderInlineWidth, '0px 10px'); + + box.style.borderInlineStartStyle = 'inset'; + box.style.borderInlineEndStyle = 'none'; + assert_equals(getComputedStyle(box).borderInlineStartWidth, '10px'); + assert_equals(getComputedStyle(box).borderInlineEndWidth, '0px'); + assert_equals(getComputedStyle(box).borderInlineWidth, '10px 0px'); + + box.style.borderInlineStartStyle = 'none'; + box.style.borderInlineEndStyle = 'hidden'; + assert_equals(getComputedStyle(box).borderInlineStartWidth, '0px'); + assert_equals(getComputedStyle(box).borderInlineEndWidth, '0px'); + assert_equals(getComputedStyle(box).borderInlineWidth, '0px'); +}, 'width is zero if the border block style is none or hidden'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-invalid.html new file mode 100644 index 0000000000..8624fcf0fe --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-width with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width"> +<meta name="assert" content="border-inline-width supports only the grammar '<line-width>{1,2}'."> +<meta name="assert" content="Negative lengths are not allowed."> + <script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("border-inline-start-width", "-20px"); +test_invalid_value("border-inline-start-width", "auto"); +test_invalid_value("border-inline-start-width", "medium 40px"); +test_invalid_value("border-inline-end-width", "10"); +test_invalid_value("border-inline-end-width", "30%"); + +test_invalid_value("border-inline-width", "thick, thin"); +test_invalid_value("border-inline-width", "10px 20px 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-valid.html new file mode 100644 index 0000000000..81c7049c5e --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing border-inline-width with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width"> +<meta name="assert" content="border-inline-width supports the full grammar '<line-width>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// <length> | thin | medium | thick +test_valid_value("border-inline-start-width", "10px"); +test_valid_value("border-inline-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)"); +test_valid_value("border-inline-start-width", "thick"); +test_valid_value("border-inline-start-width", "thin"); +test_valid_value("border-inline-end-width", "0", "0px"); +test_valid_value("border-inline-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); +test_valid_value("border-inline-end-width", "medium"); +test_valid_value("border-inline-width", "10px"); +test_valid_value("border-inline-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)"); +test_valid_value("border-inline-width", "10px 10px", "10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inline-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/inline-size-computed.html new file mode 100644 index 0000000000..0f60165a34 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inline-size-computed.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().inlineSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="inline-size computed value is an absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #parent { + width: 200px; + } + #target { + width: 0px; + height: 0px; + font-size: 40px; + } + #child { + width: 60px; + } +</style> +</head> +<body> +<div id="parent"> + <div id="target"> + <div id="child"> + </div> + </div> +</div> +<script> +test_computed_value("inline-size", "auto", "200px"); // parent width + +test_computed_value("inline-size", "10px"); +test_computed_value("inline-size", "20%", "40px"); +test_computed_value("inline-size", "calc(0.5em + 10px)", "30px"); +test_computed_value("inline-size", "calc(-0.5em + 10px)", "0px"); + +test_computed_value("inline-size", "min-content", "60px"); // child width +test_computed_value("inline-size", "max-content", "60px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inline-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/inline-size-invalid.html new file mode 100644 index 0000000000..d3d5d3f84d --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inline-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inline-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("inline-size", "none"); + +test_invalid_value("inline-size", "min-content available"); +test_invalid_value("inline-size", "max-content 10px"); +test_invalid_value("inline-size", "20% available"); + +test_invalid_value("inline-size", "-10px"); +test_invalid_value("inline-size", "-20%"); +test_invalid_value("inline-size", "60"); +test_invalid_value("inline-size", "10px 20%"); + +test_invalid_value("inline-size", "10px border-box"); +test_invalid_value("inline-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inline-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/inline-size-valid.html new file mode 100644 index 0000000000..e785b468cd --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inline-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inline-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("inline-size", "auto"); + +test_valid_value("inline-size", "10px"); +test_valid_value("inline-size", "20%"); +test_valid_value("inline-size", "calc(2em + 3ex)"); + +test_valid_value("inline-size", "min-content"); +test_valid_value("inline-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("inline-size", "fit-content(100px)"); +// test_valid_value("inline-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-computed.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-computed.html new file mode 100644 index 0000000000..d18e97dfc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-computed.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().insetBlock / insetInline</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block"> +<meta name="assert" content="Computed value is as specified, with lengths made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("inset-block-start", "auto"); +test_computed_value("inset-block-end", "-10px"); +test_computed_value("inset-inline-start", "-20%"); +test_computed_value("inset-inline-end", "calc(10px - 0.5em)", "-10px"); + +test_computed_value("inset-block", "auto"); +test_computed_value("inset-block", "-10px"); +test_computed_value("inset-block", "calc(10px - 0.5em) -20%", "-10px -20%"); +test_computed_value("inset-block", "auto auto", "auto"); +test_computed_value("inset-inline", "-20%"); +test_computed_value("inset-inline", "calc(10px - 0.5em)", "-10px"); +test_computed_value("inset-inline", "-10px auto"); +test_computed_value("inset-inline", "auto calc(10px + 0.5em)", "auto 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-invalid.html new file mode 100644 index 0000000000..fe073f852e --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inset-block and inset-inline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block"> +<meta name="assert" content="inset-block, inset-inline support only the grammar '<'top'>{1,2}'."> +<meta name="assert" content="inset-block, inset-inline longhands support only the grammar '<'top'>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("inset-block-start", "none"); +test_invalid_value("inset-block-end", "10"); +test_invalid_value("inset-inline-start", "20% calc(10px - 0.5em)"); +test_invalid_value("inset-inline-end", "10px, auto"); + +test_invalid_value("inset-block", "none"); +test_invalid_value("inset-block", "20%, calc(10px - 0.5em)"); +test_invalid_value("inset-inline", "10px auto 20px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-shorthand.html new file mode 100644 index 0000000000..c089c2a0d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: inset-block and inset-inline set longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block"> +<meta name="assert" content="inset-block, inset-inline support the full grammar '<'top'>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('inset-block', '10px', { + 'inset-block-start': '10px', + 'inset-block-end': '10px' +}); + +test_shorthand_value('inset-block', '20% auto', { + 'inset-block-start': '20%', + 'inset-block-end': 'auto' +}); + +test_shorthand_value('inset-inline', '30%', { + 'inset-inline-start': '30%', + 'inset-inline-end': '30%' +}); + +test_shorthand_value('inset-inline', 'auto 40px', { + 'inset-inline-start': 'auto', + 'inset-inline-end': '40px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-valid.html new file mode 100644 index 0000000000..b08975251d --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-valid.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inset-block and inset-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block"> +<meta name="assert" content="inset-block, inset-inline support the full grammar '<'top'>{1,2}'."> +<meta name="assert" content="inset-block, inset-inline longhands support the full grammar '<'top'>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("inset-block-start", "auto"); +test_valid_value("inset-block-end", "-10px"); +test_valid_value("inset-inline-start", "-20%"); +test_valid_value("inset-inline-end", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); + +test_valid_value("inset-block", "auto"); +test_valid_value("inset-block", "-10px"); +test_valid_value("inset-block", "calc(10px - 0.5em) -20%", "calc(-0.5em + 10px) -20%"); +test_valid_value("inset-block", "auto auto", "auto"); +test_valid_value("inset-inline", "-20%"); +test_valid_value("inset-inline", "calc(10px - 0.5em)", "calc(-0.5em + 10px)"); +test_valid_value("inset-inline", "-10px auto"); +test_valid_value("inset-inline", "auto calc(10px + 0.5em)", "auto calc(0.5em + 10px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-computed.html b/testing/web-platform/tests/css/css-logical/parsing/inset-computed.html new file mode 100644 index 0000000000..8a08830bd4 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-computed.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().inset</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset"> +<meta name="assert" content="Computed value is as specified, with lengths made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("inset", "auto"); +test_computed_value("inset", "-10px"); + +test_computed_value("inset", "calc(10px - 0.5em) -20%", "-10px -20%"); +test_computed_value("inset", "auto auto", "auto"); + +test_computed_value("inset", "10px calc(10px - 0.5em) -30px", "10px -10px -30px"); +test_computed_value("inset", "auto auto auto", "auto"); + +test_computed_value("inset", "10px 20px auto -30px"); +test_computed_value("inset", "auto auto auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-invalid.html new file mode 100644 index 0000000000..604b801c76 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inset with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset"> +<meta name="assert" content="inset supports only the grammar '<'top'>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("inset", "none"); +test_invalid_value("inset", "20%, calc(10px - 0.5em)"); +test_invalid_value("inset", "10px auto 20px auto 30px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html new file mode 100644 index 0000000000..4557879129 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: inset sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset"> +<meta name="assert" content="inset supports the full grammar '<'top'>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('inset', '1px 2px 3px 4px', { + 'top': '1px', + 'right': '2px', + 'bottom': '3px', + 'left': '4px' +}); + +test_shorthand_value('inset', '1px 2px 3px', { + 'top': '1px', + 'right': '2px', + 'bottom': '3px', + 'left': '2px' +}); + +test_shorthand_value('inset', '1px 2px', { + 'top': '1px', + 'right': '2px', + 'bottom': '1px', + 'left': '2px' +}); + +test_shorthand_value('inset', '1px', { + 'top': '1px', + 'right': '1px', + 'bottom': '1px', + 'left': '1px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-valid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-valid.html new file mode 100644 index 0000000000..2d8f937f07 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/inset-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing inset with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset"> +<meta name="assert" content="inset supports the full grammar '<'top'>{1,4}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("inset", "auto"); +test_valid_value("inset", "-10px"); + +test_valid_value("inset", "calc(-0.5em + 10px) -20%"); +test_valid_value("inset", "auto auto", "auto"); + +test_valid_value("inset", "10px calc(-0.5em + 10px) -30px"); +test_valid_value("inset", "auto auto auto", "auto"); + +test_valid_value("inset", "10px calc(-0.5em + 10px) auto -30px"); +test_valid_value("inset", "auto auto auto auto", "auto"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-computed.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-computed.html new file mode 100644 index 0000000000..6ef52bda3b --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-computed.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().marginBlockStart etc.</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block"> +<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> +<meta name="assert" content="margin-block, margin-inline resolved values have absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #container { + will-change: transform; /* containing block for #target */ + width: 200px; + } + #parent { + width: 0px; + } + #target { + position: absolute; + font-size: 40px; + } +</style> +</head> +<body> +<div id="container"> + <div id="parent"> + <div id="target"></div> + </div> +</div> +<script> +test_computed_value("margin-block-start", "10px"); +test_computed_value("margin-block-end", "10%", "20px"); +test_computed_value("margin-inline-start", "30px"); +test_computed_value("margin-inline-end", "1em", "40px"); + +test_computed_value('margin-block-start', 'calc(10% + 40px)', '60px'); +test_computed_value('margin-block-end', 'calc(10px + 0.5em)', '30px'); +test_computed_value('margin-inline-start', 'calc(10px + 0.5em)', '30px'); +test_computed_value('margin-inline-end', 'calc(10% + 40px)', '60px'); + +test_computed_value("margin-block", "10px"); +test_computed_value("margin-block", "10px 20px"); +test_computed_value("margin-inline", "30px"); +test_computed_value("margin-inline", "30px 40px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-invalid.html new file mode 100644 index 0000000000..a1e0cbf388 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing margin-block and margin-inline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block"> +<meta name="assert" content="margin-block, margin-inline support only the grammar '<'margin-top'>{1,2}'."> +<meta name="assert" content="margin-block, margin-inline longhands support only the grammar '<'margin-top'>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("margin-block-start", "none"); +test_invalid_value("margin-block-end", "10"); +test_invalid_value("margin-inline-start", "20% calc(10px - 0.5em)"); +test_invalid_value("margin-inline-end", "10px, auto"); + +test_invalid_value("margin-block", "none"); +test_invalid_value("margin-block", "20%, calc(10px - 0.5em)"); +test_invalid_value("margin-inline", "10px auto 20px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-shorthand.html new file mode 100644 index 0000000000..9cdae57402 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: margin-block and margin-inline sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block"> +<meta name="assert" content="margin-block, margin-inline support the full grammar '<'margin-top'>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('margin-block', '10px', { + 'margin-block-start': '10px', + 'margin-block-end': '10px' +}); + +test_shorthand_value('margin-block', '20% auto', { + 'margin-block-start': '20%', + 'margin-block-end': 'auto' +}); + +test_shorthand_value('margin-inline', '30%', { + 'margin-inline-start': '30%', + 'margin-inline-end': '30%' +}); + +test_shorthand_value('margin-inline', 'auto 40px', { + 'margin-inline-start': 'auto', + 'margin-inline-end': '40px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-valid.html new file mode 100644 index 0000000000..4a278f9034 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-valid.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing margin-block and margin-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block"> +<meta name="assert" content="margin-block, margin-inline support the full grammar '<'margin-top'>{1,2}'."> +<meta name="assert" content="margin-block, margin-inline longhands support the full grammar '<'margin-top'>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("margin-block-start", "calc(20% + 10px)"); +test_valid_value("margin-block-start", "auto"); +test_valid_value("margin-block-end", "-10px"); +test_valid_value("margin-inline-start", "-20%"); +test_valid_value("margin-inline-end", "calc(2em + 3ex)"); + +test_valid_value("margin-block", "auto"); +test_valid_value("margin-block", "-10px"); +test_valid_value("margin-block", "calc(2em + 3ex) -20%"); +test_valid_value("margin-block", "auto auto", "auto"); +test_valid_value("margin-block", "-20% calc(20% + 10px)"); +test_valid_value("margin-inline", "20%"); +test_valid_value("margin-inline", "calc(2em + 3ex)"); +test_valid_value("margin-inline", "-10px auto"); +test_valid_value("margin-inline", "auto calc(2em + 3ex)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-block-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-computed.html new file mode 100644 index 0000000000..12764d3ea6 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().maxBlockSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-max-block-size"> +<meta name="assert" content="Computed max-block-size is the specified keyword, or the length-percentage made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("max-block-size", "none"); + +test_computed_value("max-block-size", "10px"); +test_computed_value("max-block-size", "20%"); +test_computed_value("max-block-size", "calc(10px + 0.5em)", "30px"); +test_computed_value("max-block-size", "calc(10px - 0.5em)", "0px"); +test_computed_value("max-block-size", "calc(20% + 10px)"); + +test_computed_value("max-block-size", "min-content"); +test_computed_value("max-block-size", "max-content"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-block-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-invalid.html new file mode 100644 index 0000000000..adcf6e497e --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing max-block-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="max-block-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("max-block-size", "auto"); + +test_invalid_value("max-block-size", "min-content available"); +test_invalid_value("max-block-size", "max-content 10px"); +test_invalid_value("max-block-size", "20% available"); + +test_invalid_value("max-block-size", "-10px"); +test_invalid_value("max-block-size", "-20%"); +test_invalid_value("max-block-size", "60"); +test_invalid_value("max-block-size", "10px 20%"); + +test_invalid_value("max-block-size", "10px border-box"); +test_invalid_value("max-block-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-block-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-valid.html new file mode 100644 index 0000000000..75b5c6f549 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing max-block-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="max-block-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("max-block-size", "none"); + +test_valid_value("max-block-size", "10px"); +test_valid_value("max-block-size", "20%"); +test_valid_value("max-block-size", "calc(2em + 3ex)"); + +test_valid_value("max-block-size", "min-content"); +test_valid_value("max-block-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("max-block-size", "fit-content(100px)"); +// test_valid_value("max-block-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-computed.html new file mode 100644 index 0000000000..693262f250 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().maxInlineSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-max-inline-size"> +<meta name="assert" content="Computed max-inline-size is the specified keyword, or the length-percentage made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("max-inline-size", "none"); + +test_computed_value("max-inline-size", "10px"); +test_computed_value("max-inline-size", "20%"); +test_computed_value("max-inline-size", "calc(10px + 0.5em)", "30px"); +test_computed_value("max-inline-size", "calc(10px - 0.5em)", "0px"); +test_computed_value("max-inline-size", "calc(20% + 10px)"); + +test_computed_value("max-inline-size", "min-content"); +test_computed_value("max-inline-size", "max-content"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-invalid.html new file mode 100644 index 0000000000..fa695551b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing max-inline-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="max-inline-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("max-inline-size", "auto"); + +test_invalid_value("max-inline-size", "min-content available"); +test_invalid_value("max-inline-size", "max-content 10px"); +test_invalid_value("max-inline-size", "20% available"); + +test_invalid_value("max-inline-size", "-10px"); +test_invalid_value("max-inline-size", "-20%"); +test_invalid_value("max-inline-size", "60"); +test_invalid_value("max-inline-size", "10px 20%"); + +test_invalid_value("max-inline-size", "10px border-box"); +test_invalid_value("max-inline-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-valid.html new file mode 100644 index 0000000000..19d582962d --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing max-inline-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="max-inline-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("max-inline-size", "none"); + +test_valid_value("max-inline-size", "10px"); +test_valid_value("max-inline-size", "20%"); +test_valid_value("max-inline-size", "calc(2em + 3ex)"); + +test_valid_value("max-inline-size", "min-content"); +test_valid_value("max-inline-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("max-inline-size", "fit-content(100px)"); +// test_valid_value("max-inline-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-block-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-computed.html new file mode 100644 index 0000000000..7c59eb5a49 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-computed.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().minBlockSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-min-block-size"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<meta name="assert" content="Computed min-block-size is the specified keyword, or the length-percentage made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } + #container { + display: flex; + } + #box { + min-block-size: auto; + } +</style> +</head> +<body> +<div id="target"></div> +<div id="container"> + <div id="box"></div> +</div> +<script> +test_computed_value("min-block-size", "auto", "0px"); + +test_computed_value("min-block-size", "10px"); +test_computed_value("min-block-size", "20%"); +test_computed_value("min-block-size", "calc(10px + 0.5em)", "30px"); +test_computed_value("min-block-size", "calc(10px - 0.5em)", "0px"); +test_computed_value("min-block-size", "calc(20% + 10px)"); + +test_computed_value("min-block-size", "min-content"); +test_computed_value("min-block-size", "max-content"); + +test(() => { + const picture = document.getElementById('box'); + assert_equals(getComputedStyle(picture).minBlockSize, 'auto'); +}, 'min-block-size auto computes to auto with flex layout.'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-block-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-invalid.html new file mode 100644 index 0000000000..325dc2e0ae --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing min-block-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="min-block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("min-block-size", "none"); + +test_invalid_value("min-block-size", "min-content available"); +test_invalid_value("min-block-size", "max-content 10px"); +test_invalid_value("min-block-size", "20% available"); + +test_invalid_value("min-block-size", "-10px"); +test_invalid_value("min-block-size", "-20%"); +test_invalid_value("min-block-size", "60"); +test_invalid_value("min-block-size", "10px 20%"); + +test_invalid_value("min-block-size", "10px border-box"); +test_invalid_value("min-block-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-block-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-valid.html new file mode 100644 index 0000000000..5a5d4a4385 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing min-block-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="min-block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("min-block-size", "auto"); + +test_valid_value("min-block-size", "10px"); +test_valid_value("min-block-size", "20%"); +test_valid_value("min-block-size", "calc(2em + 3ex)"); + +test_valid_value("min-block-size", "min-content"); +test_valid_value("min-block-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("min-block-size", "fit-content(100px)"); +// test_valid_value("min-block-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-computed.html new file mode 100644 index 0000000000..730ad4e474 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-computed.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().minInlineSize</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-min-inline-size"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> +<meta name="assert" content="Computed min-inline-size is the specified keyword, or the length-percentage made absolute."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + } + #container { + display: flex; + } + #box { + min-inline-size: auto; + } +</style> +</head> +<body> +<div id="target"></div> +<div id="container"> + <div id="box"></div> +</div> +<script> +test_computed_value("min-inline-size", "auto", "0px"); + +test_computed_value("min-inline-size", "10px"); +test_computed_value("min-inline-size", "20%"); +test_computed_value("min-inline-size", "calc(10px + 0.5em)", "30px"); +test_computed_value("min-inline-size", "calc(10px - 0.5em)", "0px"); +test_computed_value("min-inline-size", "calc(20% + 10px)"); + +test_computed_value("min-inline-size", "min-content"); +test_computed_value("min-inline-size", "max-content"); + +test(() => { + const picture = document.getElementById('box'); + assert_equals(getComputedStyle(picture).minInlineSize, 'auto'); +}, 'min-inline-size auto computes to auto with flex layout.'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-invalid.html new file mode 100644 index 0000000000..eb2cc8bb10 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-invalid.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing min-inline-size with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="min-inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("min-inline-size", "none"); + +test_invalid_value("min-inline-size", "min-content available"); +test_invalid_value("min-inline-size", "max-content 10px"); +test_invalid_value("min-inline-size", "20% available"); + +test_invalid_value("min-inline-size", "-10px"); +test_invalid_value("min-inline-size", "-20%"); +test_invalid_value("min-inline-size", "60"); +test_invalid_value("min-inline-size", "10px 20%"); + +test_invalid_value("min-inline-size", "10px border-box"); +test_invalid_value("min-inline-size", "content-box 20%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-valid.html new file mode 100644 index 0000000000..fa4ba0d1bb --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing min-inline-size with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties"> +<meta name="assert" content="min-inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("min-inline-size", "auto"); + +test_valid_value("min-inline-size", "10px"); +test_valid_value("min-inline-size", "20%"); +test_valid_value("min-inline-size", "calc(2em + 3ex)"); + +test_valid_value("min-inline-size", "min-content"); +test_valid_value("min-inline-size", "max-content"); + +// The following are not yet supported by browsers: +// test_valid_value("min-inline-size", "fit-content(100px)"); +// test_valid_value("min-inline-size", "fit-content(calc(10% + 10px))"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-computed.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-computed.html new file mode 100644 index 0000000000..230f18525a --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-computed.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: getComputedStyle().paddingBlockStart etc.</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block"> +<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> +<meta name="assert" content="padding-block, padding-inline resolved values have absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #container { + will-change: transform; /* containing block for #target */ + width: 200px; + } + #parent { + width: 0px; + } + #target { + position: absolute; + font-size: 40px; + } +</style> +</head> +<body> +<div id="container"> + <div id="parent"> + <div id="target"></div> + </div> +</div> +<script> +test_computed_value("padding-block-start", "10px"); +test_computed_value("padding-block-end", "10%", "20px"); +test_computed_value("padding-inline-start", "30px"); +test_computed_value("padding-inline-end", "1em", "40px"); + +test_computed_value('padding-block-start', 'calc(10% + 40px)', '60px'); +test_computed_value('padding-block-end', 'calc(10% - 40px)', '0px'); +test_computed_value('padding-inline-start', 'calc(10% - 40px)', '0px'); +test_computed_value('padding-inline-end', 'calc(10% + 40px)', '60px'); + +test_computed_value('padding-block-start', 'calc(10px - 0.5em)', '0px'); +test_computed_value('padding-block-end', 'calc(10px + 0.5em)', '30px'); +test_computed_value('padding-inline-start', 'calc(10px + 0.5em)', '30px'); +test_computed_value('padding-inline-end', 'calc(10px - 0.5em)', '0px'); + +test_computed_value("padding-block", "10px"); +test_computed_value("padding-block", "10px 20px"); +test_computed_value("padding-inline", "30px"); +test_computed_value("padding-inline", "30px 40px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-invalid.html new file mode 100644 index 0000000000..56c2adb078 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-invalid.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing padding-block and padding-inline with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block"> +<meta name="assert" content="padding-block, padding-inline support only the grammar '<'padding-top'>{1,2}'."> +<meta name="assert" content="padding-block, padding-inline longhands support only the grammar '<'padding-top'>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("padding-block-start", "none"); +test_invalid_value("padding-block-start", "-10px"); +test_invalid_value("padding-block-end", "1px 2px"); +test_invalid_value("padding-block-end", "auto"); +test_invalid_value("padding-block-end", "10"); +test_invalid_value("padding-block-end", "1px, 2px"); +test_invalid_value("padding-inline-start", "20% calc(10px - 0.5em)"); +test_invalid_value("padding-inline-start", "2px auto"); +test_invalid_value("padding-inline-end", "-20%"); +test_invalid_value("padding-inline-end", "10px, auto"); + +test_invalid_value("padding-block", "none"); +test_invalid_value("padding-block", "20% -10px"); +test_invalid_value("padding-block", "auto, -10px"); +test_invalid_value("padding-block", "20%, calc(10px - 0.5em)"); +test_invalid_value("padding-inline", "10px auto 20px"); +test_invalid_value("padding-inline", "1px 2px 3px"); +test_invalid_value("padding-inline", "-20% calc(20% + 10px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-shorthand.html new file mode 100644 index 0000000000..d0811c27dc --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-shorthand.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: padding-block and padding-inline set longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block"> +<meta name="assert" content="padding-block, padding-inline support the full grammar '<'padding-top'>{1,2}'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('padding-block', '0% 10px', { + 'padding-block-start': '0%', + 'padding-block-end': '10px' +}); + +test_shorthand_value('padding-block', '20%', { + 'padding-block-start': '20%', + 'padding-block-end': '20%' +}); + +test_shorthand_value('padding-inline', '10px 30%', { + 'padding-inline-start': '10px', + 'padding-inline-end': '30%' +}); + +test_shorthand_value('padding-inline', '0%', { + 'padding-inline-start': '0%', + 'padding-inline-end': '0%' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-valid.html new file mode 100644 index 0000000000..1f3be17784 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-valid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Logical Properties and Values: parsing padding-block and padding-inline with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block"> +<meta name="assert" content="padding-block, padding-inline support the full grammar '<'padding-top'>{1,2}'."> +<meta name="assert" content="padding-block, padding-inline longhands support the full grammar '<'padding-top'>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("padding-block-start", "0", "0px"); +test_valid_value("padding-block-start", "calc(20% + 10px)"); +test_valid_value("padding-block-end", "10px"); +test_valid_value("padding-inline-start", "20%"); +test_valid_value("padding-inline-end", "calc(2em + 2ex)"); + +test_valid_value("padding-block", "10px"); +test_valid_value("padding-block", "10px 20%"); +test_valid_value("padding-inline", "20%"); +test_valid_value("padding-inline", "20% calc(20% + 10px)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-1-ref.html b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-1-ref.html new file mode 100644 index 0000000000..0dac4c29b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-1-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<style> +body > div { width: 20em; margin: 1em; padding: 2px; border: 1px solid silver; } +div > div { margin: .5em; padding: .5em; background: yellow; } +.left { float: left; } +.right { float: right; } +.ltr { direction: ltr; } +.rtl { direction: rtl; } +</style> + +<body> +<div class="ltr"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus efficitur nisi at sollicitudin eleifend. + <div class="left">Inline-start</div> + Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. + Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, + ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. + <div class="right">Inline-end</div> + Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. + Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. + Aliquam erat volutpat. +</div> + +<div class="rtl"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus efficitur nisi at sollicitudin eleifend. + <div class="right">Inline-start</div> + Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. + Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, + ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. + <div class="left">Inline-end</div> + Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. + Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. + Aliquam erat volutpat. +</div> diff --git a/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-2-ref.html b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-2-ref.html new file mode 100644 index 0000000000..82bfcd2d36 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-2-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<style> +html { writing-mode: vertical-rl; } +body > div { height: 20em; margin: 1em; padding: 2px; border: 1px solid silver; } +div > div { margin: .5em; padding: .5em; background: yellow; } +.left { float: left; } +.right { float: right; } +.ltr { direction: ltr; } +.rtl { direction: rtl; } +</style> + +<body> +<div class="ltr"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus efficitur nisi at sollicitudin eleifend. + <div class="left">Inline-start</div> + Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. + Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, + ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. + <div class="right">Inline-end</div> + Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. + Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. + Aliquam erat volutpat. +</div> + +<div class="rtl"> + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus efficitur nisi at sollicitudin eleifend. + <div class="right">Inline-start</div> + Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. + Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, + ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. + <div class="left">Inline-end</div> + Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. + Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. + Aliquam erat volutpat. +</div> diff --git a/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-3-ref.html b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-3-ref.html new file mode 100644 index 0000000000..654afd856f --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-3-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<style> +body > div { width: 15em; height: 10em; margin: 1em; padding: 2px; border: 1px solid silver; } +div > div { margin: .5em; padding: .5em; background: yellow; } +.a { clear: left; } +.b { clear: right; } +.fl { float: left; height: 4em; } +.fr { float: right; height: 2em; } +.fl2 { float: left; height: 2em; } +.fr4 { float: right; height: 4em; } +.ltr { direction: ltr; } +.rtl { direction: rtl; } +</style> + +<body> +<div class="ltr"> + <div class="fl">Start</div> + <div class="fr">End</div> + <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p> +</div> + +<div class="ltr"> + <div class="fl">Start</div> + <div class="fr">End</div> + <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p> +</div> + +<div class="rtl"> + <div class="fl2">End</div> + <div class="fr4">Start</div> + <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p> +</div> + +<div class="rtl"> + <div class="fl2">End</div> + <div class="fr4">Start</div> + <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p> +</div> diff --git a/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-4-ref.html b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-4-ref.html new file mode 100644 index 0000000000..0c2065b3e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-4-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<style> +html { writing-mode: vertical-rl; } +body > div { height: 15em; width: 10em; margin: 1em; padding: 2px; border: 1px solid silver; } +div > div { margin: .5em; padding: .5em; background: yellow; } +.a { clear: left; } +.b { clear: right; } +.fl { float: left; width: 4em; } +.fr { float: right; width: 2em; } +.fl2 { float: left; width: 2em; } +.fr4 { float: right; width: 4em; } +.ltr { direction: ltr; } +.rtl { direction: rtl; } +</style> + +<body> +<div class="ltr"> + <div class="fl">Start</div> + <div class="fr">End</div> + <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p> +</div> + +<div class="ltr"> + <div class="fl">Start</div> + <div class="fr">End</div> + <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p> +</div> + +<div class="rtl"> + <div class="fl2">End</div> + <div class="fr4">Start</div> + <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p> +</div> + +<div class="rtl"> + <div class="fl2">End</div> + <div class="fr4">Start</div> + <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p> +</div> diff --git a/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html new file mode 100644 index 0000000000..28c275ebb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<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> +function physicalValue(value, containerDirection) { + return ((value === "inline-start") === (containerDirection === "ltr")) ? "left" : "right"; +} +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 = physicalValue(floatSide, containerDirection); + const clearEl = document.createElement("div"); + clearEl.className = "clear"; + clearEl.style.direction = floatDirection; + clearEl.style.clear = physicalValue(clearSide, containerDirection); + 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> diff --git a/testing/web-platform/tests/css/css-logical/resources/test-box-properties.js b/testing/web-platform/tests/css/css-logical/resources/test-box-properties.js new file mode 100644 index 0000000000..ef1854f97d --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/resources/test-box-properties.js @@ -0,0 +1,297 @@ +import { + testElement, + writingModes, + testCSSValues, + testComputedValues, + makeDeclaration +} from "./test-shared.js"; + +// Values to use while testing +const testValues = { + "length": ["1px", "2px", "3px", "4px", "5px"], + "color": ["rgb(1, 1, 1)", "rgb(2, 2, 2)", "rgb(3, 3, 3)", "rgb(4, 4, 4)", "rgb(5, 5, 5)"], + "border-style": ["solid", "dashed", "dotted", "double", "groove"], +}; + +/** + * Creates a group of physical and logical box properties, such as + * + * { physical: { + * left: "margin-left", right: "margin-right", + * top: "margin-top", bottom: "margin-bottom", + * }, logical: { + * inlineStart: "margin-inline-start", inlineEnd: "margin-inline-end", + * blockStart: "margin-block-start", blockEnd: "margin-block-end", + * }, shorthands: { + * "margin": ["margin-top", "margin-right", "margin-bottom", "margin-left"], + * "margin-inline": ["margin-inline-start", "margin-inline-end"], + * "margin-block": ["margin-block-start", "margin-block-end"], + * }, type: ["length"], prerequisites: "...", property: "margin-*" } + * + * @param {string} property + * A string representing the property names, like "margin-*". + * @param {Object} descriptor + * @param {string|string[]} descriptor.type + * Describes the kind of values accepted by the property, like "length". + * Must be a key or a collection of keys from the `testValues` object. + * @param {Object={}} descriptor.prerequisites + * Represents property declarations that are needed by `property` to work. + * For example, border-width properties require a border style. + */ +export function createBoxPropertyGroup(property, descriptor) { + const logical = {}; + const physical = {}; + const shorthands = {}; + for (const axis of ["inline", "block"]) { + const shorthand = property.replace("*", axis); + const longhands = []; + shorthands[shorthand] = longhands; + for (const side of ["start", "end"]) { + const logicalSide = axis + "-" + side; + const camelCase = logicalSide.replace(/-(.)/g, (match, $1) => $1.toUpperCase()); + const longhand = property.replace("*", logicalSide); + logical[camelCase] = longhand; + longhands.push(longhand); + } + } + const isInset = property === "inset-*"; + let prerequisites = ""; + for (const physicalSide of ["left", "right", "top", "bottom"]) { + physical[physicalSide] = isInset ? physicalSide : property.replace("*", physicalSide); + prerequisites += makeDeclaration(descriptor.prerequisites, physicalSide); + } + shorthands[property.replace("-*", "")] = + ["top", "right", "bottom", "left"].map(physicalSide => physical[physicalSide]); + const type = [].concat(descriptor.type); + return {logical, physical, shorthands, type, prerequisites, property}; +} + +/** + * Creates a group physical and logical box-corner properties. + * + * @param {string} property + * A string representing the property names, like "border-*-radius". + * @param {Object} descriptor + * @param {string|string[]} descriptor.type + * Describes the kind of values accepted by the property, like "length". + * Must be a key or a collection of keys from the `testValues` object. + * @param {Object={}} descriptor.prerequisites + * Represents property declarations that are needed by `property` to work. + * For example, border-width properties require a border style. + */ +export function createCornerPropertyGroup(property, descriptor) { + const logical = {}; + const physical = {}; + const shorthands = {}; + for (const logicalCorner of ["start-start", "start-end", "end-start", "end-end"]) { + const prop = property.replace("*", logicalCorner); + const [block_side, inline_side] = logicalCorner.split("-"); + const b = "block" + block_side.charAt(0).toUpperCase() + block_side.slice(1); + const i = "inline" + inline_side.charAt(0).toUpperCase() + inline_side.slice(1); + const index = b + "-" + i; // e.g. "blockStart-inlineEnd" + logical[index] = prop; + } + let prerequisites = ""; + for (const physicalCorner of ["top-left", "top-right", "bottom-left", "bottom-right"]) { + const prop = property.replace("*", physicalCorner); + physical[physicalCorner] = prop; + prerequisites += makeDeclaration(descriptor.prerequisites, physicalCorner); + } + const type = [].concat(descriptor.type); + return {logical, physical, shorthands, type, prerequisites, property}; +} + +/** + * Creates a group of physical and logical sizing properties. + * + * @param {string} prefix + * One of "", "max-" or "min-". + */ +export function createSizingPropertyGroup(prefix) { + return { + logical: { + inline: `${prefix}inline-size`, + block: `${prefix}block-size`, + }, + physical: { + horizontal: `${prefix}width`, + vertical: `${prefix}height`, + }, + type: ["length"], + prerequisites: makeDeclaration({display: "block"}), + property: (prefix ? prefix.slice(0, -1) + " " : "") + "sizing", + }; +} + +/** + * Tests a grup of logical and physical properties in different writing modes. + * + * @param {Object} group + * An object returned by createBoxPropertyGroup or createSizingPropertyGroup. + */ +export function runTests(group) { + const values = testValues[group.type[0]].map(function(_, i) { + return group.type.map(type => testValues[type][i]).join(" "); + }); + const logicals = Object.values(group.logical); + const physicals = Object.values(group.physical); + const shorthands = group.shorthands ? Object.entries(group.shorthands) : null; + const is_corner = group.property == "border-*-radius"; + + test(function() { + const expected = []; + for (const [i, logicalProp] of logicals.entries()) { + testElement.style.setProperty(logicalProp, values[i]); + expected.push([logicalProp, values[i]]); + } + testCSSValues("logical properties in inline style", testElement.style, expected); + }, `Test that logical ${group.property} properties are supported.`); + testElement.style.cssText = ""; + + const shorthandValues = {}; + for (const [shorthand, longhands] of shorthands || []) { + let valueArray; + if (group.type.length > 1) { + valueArray = [values[0]]; + } else { + valueArray = testValues[group.type].slice(0, longhands.length); + } + shorthandValues[shorthand] = valueArray; + const value = valueArray.join(" "); + const expected = [[shorthand, value]]; + for (let [i, longhand] of longhands.entries()) { + expected.push([longhand, valueArray[group.type.length > 1 ? 0 : i]]); + } + test(function() { + testElement.style.setProperty(shorthand, value); + testCSSValues("shorthand in inline style", testElement.style, expected); + const stylesheet = `.test { ${group.prerequisites} }`; + testComputedValues("shorthand in computed style", stylesheet, expected); + }, `Test that ${shorthand} shorthand sets longhands and serializes correctly.`); + testElement.style.cssText = ""; + } + + for (const writingMode of writingModes) { + for (const style of writingMode.styles) { + const writingModeDecl = makeDeclaration(style); + + const associated = {}; + for (const [logicalSide, logicalProp] of Object.entries(group.logical)) { + let physicalProp; + if (is_corner) { + const [ block_side, inline_side] = logicalSide.split("-"); + const physicalSide1 = writingMode[block_side]; + const physicalSide2 = writingMode[inline_side]; + let physicalCorner; + // mirror "left-top" to "top-left" etc + if (["top", "bottom"].includes(physicalSide1)) { + physicalCorner = physicalSide1 + "-" + physicalSide2; + } else { + physicalCorner = physicalSide2 + "-" + physicalSide1; + } + physicalProp = group.physical[physicalCorner]; + } else { + physicalProp = group.physical[writingMode[logicalSide]]; + } + associated[logicalProp] = physicalProp; + associated[physicalProp] = logicalProp; + } + + // Test that logical properties are converted to their physical + // equivalent correctly when all in the group are present on a single + // declaration, with no overwriting of previous properties and + // no physical properties present. We put the writing mode properties + // on a separate declaration to test that the computed values of these + // properties are used, rather than those on the same declaration. + test(function() { + let decl = group.prerequisites; + const expected = []; + for (const [i, logicalProp] of logicals.entries()) { + decl += `${logicalProp}: ${values[i]}; `; + expected.push([logicalProp, values[i]]); + expected.push([associated[logicalProp], values[i]]); + } + testComputedValues("logical properties on one declaration, writing " + + `mode properties on another, '${writingModeDecl}'`, + `.test { ${writingModeDecl} } .test { ${decl} }`, + expected); + }, `Test that logical ${group.property} properties share computed values ` + + `with their physical associates, with '${writingModeDecl}'.`); + + // Test logical shorthand properties. + if (shorthands) { + test(function() { + for (const [shorthand, longhands] of shorthands) { + let valueArray = shorthandValues[shorthand]; + const decl = group.prerequisites + `${shorthand}: ${valueArray.join(" ")}; `; + const expected = []; + for (let [i, longhand] of longhands.entries()) { + const longhandValue = valueArray[group.type.length > 1 ? 0 : i]; + expected.push([longhand, longhandValue]); + expected.push([associated[longhand], longhandValue]); + } + testComputedValues("shorthand properties on one declaration, writing " + + `mode properties on another, '${writingModeDecl}'`, + `.test { ${writingModeDecl} } .test { ${decl} }`, + expected); + } + }, `Test that ${group.property} shorthands set the computed value of both ` + + `logical and physical longhands, with '${writingModeDecl}'.`); + } + + // Test that logical and physical properties are cascaded together, + // honoring their relative order on a single declaration + // (a) with a single logical property after the physical ones + // (b) with a single physical property after the logical ones + test(function() { + for (const lastIsLogical of [true, false]) { + const lasts = lastIsLogical ? logicals : physicals; + const others = lastIsLogical ? physicals : logicals; + for (const lastProp of lasts) { + let decl = writingModeDecl + group.prerequisites; + const expected = []; + for (const [i, prop] of others.entries()) { + decl += `${prop}: ${values[i]}; `; + const valueIdx = associated[prop] === lastProp ? others.length : i; + expected.push([prop, values[valueIdx]]); + expected.push([associated[prop], values[valueIdx]]); + } + decl += `${lastProp}: ${values[others.length]}; `; + testComputedValues(`'${lastProp}' last on single declaration, '${writingModeDecl}'`, + `.test { ${decl} }`, + expected); + } + } + }, `Test that ${group.property} properties honor order of appearance when both ` + + `logical and physical associates are declared, with '${writingModeDecl}'.`); + + // Test that logical and physical properties are cascaded properly when + // on different declarations + // (a) with a logical property in the high specificity rule + // (b) with a physical property in the high specificity rule + test(function() { + for (const highIsLogical of [true, false]) { + let lowDecl = writingModeDecl + group.prerequisites; + const high = highIsLogical ? logicals : physicals; + const others = highIsLogical ? physicals : logicals; + for (const [i, prop] of others.entries()) { + lowDecl += `${prop}: ${values[i]}; `; + } + for (const highProp of high) { + const highDecl = `${highProp}: ${values[others.length]}; `; + const expected = []; + for (const [i, prop] of others.entries()) { + const valueIdx = associated[prop] === highProp ? others.length : i; + expected.push([prop, values[valueIdx]]); + expected.push([associated[prop], values[valueIdx]]); + } + testComputedValues(`'${highProp}', two declarations, '${writingModeDecl}'`, + `#test { ${highDecl} } .test { ${lowDecl} }`, + expected); + } + } + }, `Test that ${group.property} properties honor selector specificty when both ` + + `logical and physical associates are declared, with '${writingModeDecl}'.`); + } + } +} diff --git a/testing/web-platform/tests/css/css-logical/resources/test-logical-values.js b/testing/web-platform/tests/css/css-logical/resources/test-logical-values.js new file mode 100644 index 0000000000..7a039379cb --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/resources/test-logical-values.js @@ -0,0 +1,27 @@ +import { + testElement, + writingModes, + testCSSValues, + testComputedValues, + makeDeclaration +} from "./test-shared.js"; + +/** + * Tests flow-relative values for a CSS property in different writing modes. + * + * @param {string} property + * The CSS property to be tested. + * @param {string[]} values + * An array with the flow-relative values to be tested. + */ +export function runTests(property, values) { + for (const value of values) { + test(function() { + const {style} = testElement; + style.cssText = ""; + style.setProperty(property, value); + testCSSValues("logical values in inline style", style, [[property, value]]); + testComputedValues("logical values in computed style", style, [[property, value]]); + }, `Test that '${property}: ${value}' is supported.`); + } +} diff --git a/testing/web-platform/tests/css/css-logical/resources/test-shared.js b/testing/web-platform/tests/css/css-logical/resources/test-shared.js new file mode 100644 index 0000000000..7a1da2e649 --- /dev/null +++ b/testing/web-platform/tests/css/css-logical/resources/test-shared.js @@ -0,0 +1,112 @@ +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" }, +]; + +// Check if logical properties work well in WebKit non-standard +// '-webkit-writing-mode: horizontal-bt' mode +if (CSS.supports("-webkit-writing-mode", "horizontal-bt")) { + writingModes.push ( + { + styles: [ + {"-webkit-writing-mode": "horizontal-bt", "direction": "ltr"}, + ], + blockStart: "bottom", blockEnd: "top", inlineStart: "left", inlineEnd: "right", + over: "top", under: "bottom", lineLeft: "left", lineRight: "right", + block: "vertical", inline: "horizontal" }, + { + styles: [ + {"-webkit-writing-mode": "horizontal-bt", "direction": "rtl"}, + ], + blockStart: "bottom", blockEnd: "top", inlineStart: "right", inlineEnd: "left", + over: "top", under: "bottom", lineLeft: "left", lineRight: "right", + block: "vertical", inline: "horizontal" }, + ) +} + +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; +} |