diff options
author | Martin Robinson <mrobinson@igalia.com> | 2023-06-26 10:48:30 +0200 |
---|---|---|
committer | Martin Robinson <mrobinson@igalia.com> | 2023-06-26 10:48:30 +0200 |
commit | 1359e8e4624d10ceb0bf55bcb1cb2903141c6d38 (patch) | |
tree | 131f289fd18efb5b28653f6b5d83953f8e6c820b /tests/wpt/web-platform-tests/css/css-logical | |
parent | f017169ae482effc446384050e79b752bd9ddfe5 (diff) | |
download | servo-1359e8e4624d10ceb0bf55bcb1cb2903141c6d38.tar.gz servo-1359e8e4624d10ceb0bf55bcb1cb2903141c6d38.zip |
Move `tests/wpt/web-platform-tests` to `tests/wpt/tests`
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-logical')
96 files changed, 0 insertions, 4812 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-logical/META.yml b/tests/wpt/web-platform-tests/css/css-logical/META.yml deleted file mode 100644 index cf789d631b1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/META.yml +++ /dev/null @@ -1,3 +0,0 @@ -spec: https://drafts.csswg.org/css-logical/ -suggested_reviewers: - - fantasai diff --git a/tests/wpt/web-platform-tests/css/css-logical/animation-001.html b/tests/wpt/web-platform-tests/css/css-logical/animation-001.html deleted file mode 100644 index 71542022c97..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/animation-001.html +++ /dev/null @@ -1,335 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/animation-002.html b/tests/wpt/web-platform-tests/css/css-logical/animation-002.html deleted file mode 100644 index 9213a05d83d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/animation-002.html +++ /dev/null @@ -1,226 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/animation-003.tentative.html b/tests/wpt/web-platform-tests/css/css-logical/animation-003.tentative.html deleted file mode 100644 index bcb4e15d80c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/animation-003.tentative.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/animation-004.html b/tests/wpt/web-platform-tests/css/css-logical/animation-004.html deleted file mode 100644 index c1bed638722..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/animation-004.html +++ /dev/null @@ -1,284 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/animations/caption-side-no-interpolation.html b/tests/wpt/web-platform-tests/css/css-logical/animations/caption-side-no-interpolation.html deleted file mode 100644 index 2eef093e46c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/animations/caption-side-no-interpolation.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/animations/float-interpolation.html b/tests/wpt/web-platform-tests/css/css-logical/animations/float-interpolation.html deleted file mode 100644 index c067f2f03ce..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/animations/float-interpolation.html +++ /dev/null @@ -1,24 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/cascading-001-ref.html b/tests/wpt/web-platform-tests/css/css-logical/cascading-001-ref.html deleted file mode 100644 index 79a432c4557..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/cascading-001-ref.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/cascading-001.html b/tests/wpt/web-platform-tests/css/css-logical/cascading-001.html deleted file mode 100644 index 61399a83306..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/cascading-001.html +++ /dev/null @@ -1,57 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/getComputedStyle-listing.html b/tests/wpt/web-platform-tests/css/css-logical/getComputedStyle-listing.html deleted file mode 100644 index 5970bcea631..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/getComputedStyle-listing.html +++ /dev/null @@ -1,106 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/inheritance.html b/tests/wpt/web-platform-tests/css/css-logical/inheritance.html deleted file mode 100644 index 5546a20d6cd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/inheritance.html +++ /dev/null @@ -1,95 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-color.html b/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-color.html deleted file mode 100644 index b33528d9cd1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-color.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-radius.html b/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-radius.html deleted file mode 100644 index 81b8fa0fece..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-radius.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-shorthands.html b/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-shorthands.html deleted file mode 100644 index d05d864f592..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-shorthands.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-style.html b/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-style.html deleted file mode 100644 index 448499ddaa4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-style.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-width.html b/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-width.html deleted file mode 100644 index d7cac485b54..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-box-border-width.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-box-inset.html b/tests/wpt/web-platform-tests/css/css-logical/logical-box-inset.html deleted file mode 100644 index 8587d79ed91..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-box-inset.html +++ /dev/null @@ -1,18 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-box-margin.html b/tests/wpt/web-platform-tests/css/css-logical/logical-box-margin.html deleted file mode 100644 index 86240f96a6e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-box-margin.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-box-padding.html b/tests/wpt/web-platform-tests/css/css-logical/logical-box-padding.html deleted file mode 100644 index f96f02757c3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-box-padding.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-box-size.html b/tests/wpt/web-platform-tests/css/css-logical/logical-box-size.html deleted file mode 100644 index f90346b839c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-box-size.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-1.html b/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-1.html deleted file mode 100644 index d7f37fffddc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-1.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-2.html b/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-2.html deleted file mode 100644 index f5af8375953..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-2.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-3.html b/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-3.html deleted file mode 100644 index b49711b7b2b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-3.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-4.html b/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-4.html deleted file mode 100644 index d585d38bf3a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-4.html +++ /dev/null @@ -1,40 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-reftest.html b/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-reftest.html deleted file mode 100644 index c0fe9a52bc4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear-reftest.html +++ /dev/null @@ -1,68 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear.html b/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear.html deleted file mode 100644 index e82765809f4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-values-float-clear.html +++ /dev/null @@ -1,17 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logical-values-resize.html b/tests/wpt/web-platform-tests/css/css-logical/logical-values-resize.html deleted file mode 100644 index 3be65dacf91..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logical-values-resize.html +++ /dev/null @@ -1,15 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html deleted file mode 100644 index da02e759d8e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size-vlr.html +++ /dev/null @@ -1,122 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size.html b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size.html deleted file mode 100644 index 8d90c07a983..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-block-size.html +++ /dev/null @@ -1,123 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html deleted file mode 100644 index 0a53dbbc5cf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size-vlr.html +++ /dev/null @@ -1,122 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size.html b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size.html deleted file mode 100644 index 3ec169924af..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-inline-size.html +++ /dev/null @@ -1,119 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logicalprops-quirklength.html b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-quirklength.html deleted file mode 100644 index 3e133db880c..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-quirklength.html +++ /dev/null @@ -1,36 +0,0 @@ -<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/tests/wpt/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html deleted file mode 100644 index a213d375bdf..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html +++ /dev/null @@ -1,175 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/logicalprops-with-variables.html b/tests/wpt/web-platform-tests/css/css-logical/logicalprops-with-variables.html deleted file mode 100644 index fc52495bc00..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/logicalprops-with-variables.html +++ /dev/null @@ -1,69 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/block-size-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/block-size-computed.html deleted file mode 100644 index de3a3c2a0c5..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/block-size-computed.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/block-size-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/block-size-invalid.html deleted file mode 100644 index 37d88907735..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/block-size-invalid.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/block-size-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/block-size-valid.html deleted file mode 100644 index 47170e48f15..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/block-size-valid.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-color-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-color-computed.html deleted file mode 100644 index 24a745f5fe0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-color-computed.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-color-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-color-invalid.html deleted file mode 100644 index 1c25f125fe3..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-color-invalid.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-color-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-color-valid.html deleted file mode 100644 index aefe0f268b0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-color-valid.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-style-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-style-computed.html deleted file mode 100644 index 9cd8a252b27..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-style-computed.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-style-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-style-invalid.html deleted file mode 100644 index 680e510aae6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-style-invalid.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-style-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-style-valid.html deleted file mode 100644 index 860a1052b83..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-style-valid.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-valid.html deleted file mode 100644 index 68c9797c0f4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-valid.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-width-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-width-computed.html deleted file mode 100644 index 66b0cb7c60a..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-width-computed.html +++ /dev/null @@ -1,76 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-width-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-width-invalid.html deleted file mode 100644 index 65990fe930d..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-width-invalid.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-width-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-width-valid.html deleted file mode 100644 index 03b02a25664..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-block-width-valid.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-color-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-color-computed.html deleted file mode 100644 index 106a4f48e4e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-color-computed.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-color-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-color-invalid.html deleted file mode 100644 index f0070c787bc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-color-invalid.html +++ /dev/null @@ -1,31 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-color-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-color-valid.html deleted file mode 100644 index 6bf240006e1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-color-valid.html +++ /dev/null @@ -1,23 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-style-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-style-computed.html deleted file mode 100644 index 0ba858a6850..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-style-computed.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-style-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-style-invalid.html deleted file mode 100644 index 6684dc19ecb..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-style-invalid.html +++ /dev/null @@ -1,22 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-style-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-style-valid.html deleted file mode 100644 index 4fd0cbbb094..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-style-valid.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-valid.html deleted file mode 100644 index be29783acf4..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-valid.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-width-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-width-computed.html deleted file mode 100644 index 03b71f03861..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-width-computed.html +++ /dev/null @@ -1,76 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-width-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-width-invalid.html deleted file mode 100644 index 8624fcf0fe1..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-width-invalid.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-width-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-width-valid.html deleted file mode 100644 index 81c7049c5e9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/border-inline-width-valid.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/inline-size-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/inline-size-computed.html deleted file mode 100644 index 0f60165a347..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/inline-size-computed.html +++ /dev/null @@ -1,44 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/inline-size-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/inline-size-invalid.html deleted file mode 100644 index d3d5d3f84d9..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/inline-size-invalid.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/inline-size-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/inline-size-valid.html deleted file mode 100644 index e785b468cdd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/inline-size-valid.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-computed.html deleted file mode 100644 index d18e97dfc3e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-computed.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-invalid.html deleted file mode 100644 index fe073f852ea..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-invalid.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-shorthand.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-shorthand.html deleted file mode 100644 index c089c2a0d89..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-shorthand.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-valid.html deleted file mode 100644 index b08975251d8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-block-inline-valid.html +++ /dev/null @@ -1,30 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-computed.html deleted file mode 100644 index 8a08830bd45..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-computed.html +++ /dev/null @@ -1,33 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-invalid.html deleted file mode 100644 index 604b801c760..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-invalid.html +++ /dev/null @@ -1,19 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-shorthand.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-shorthand.html deleted file mode 100644 index 4557879129e..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-shorthand.html +++ /dev/null @@ -1,43 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-valid.html deleted file mode 100644 index 2d8f937f075..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/inset-valid.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-computed.html deleted file mode 100644 index 6ef52bda3b8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-computed.html +++ /dev/null @@ -1,49 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-invalid.html deleted file mode 100644 index a1e0cbf3885..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-invalid.html +++ /dev/null @@ -1,25 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-shorthand.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-shorthand.html deleted file mode 100644 index 9cdae57402b..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-shorthand.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-valid.html deleted file mode 100644 index 4a278f90348..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/margin-block-inline-valid.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/max-block-size-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/max-block-size-computed.html deleted file mode 100644 index 12764d3ea63..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/max-block-size-computed.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/max-block-size-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/max-block-size-invalid.html deleted file mode 100644 index adcf6e497ea..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/max-block-size-invalid.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/max-block-size-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/max-block-size-valid.html deleted file mode 100644 index 75b5c6f5497..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/max-block-size-valid.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/max-inline-size-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/max-inline-size-computed.html deleted file mode 100644 index 693262f2509..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/max-inline-size-computed.html +++ /dev/null @@ -1,32 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/max-inline-size-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/max-inline-size-invalid.html deleted file mode 100644 index fa695551b24..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/max-inline-size-invalid.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/max-inline-size-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/max-inline-size-valid.html deleted file mode 100644 index 19d582962dc..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/max-inline-size-valid.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/min-block-size-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/min-block-size-computed.html deleted file mode 100644 index 7c59eb5a49f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/min-block-size-computed.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/min-block-size-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/min-block-size-invalid.html deleted file mode 100644 index 325dc2e0aea..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/min-block-size-invalid.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/min-block-size-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/min-block-size-valid.html deleted file mode 100644 index 5a5d4a43852..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/min-block-size-valid.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/min-inline-size-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/min-inline-size-computed.html deleted file mode 100644 index 730ad4e4742..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/min-inline-size-computed.html +++ /dev/null @@ -1,47 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/min-inline-size-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/min-inline-size-invalid.html deleted file mode 100644 index eb2cc8bb106..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/min-inline-size-invalid.html +++ /dev/null @@ -1,29 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/min-inline-size-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/min-inline-size-valid.html deleted file mode 100644 index fa4ba0d1bb2..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/min-inline-size-valid.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-computed.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-computed.html deleted file mode 100644 index 230f18525a0..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-computed.html +++ /dev/null @@ -1,54 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-invalid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-invalid.html deleted file mode 100644 index 56c2adb0782..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-invalid.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-shorthand.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-shorthand.html deleted file mode 100644 index d0811c27dc8..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-shorthand.html +++ /dev/null @@ -1,35 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-valid.html b/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-valid.html deleted file mode 100644 index 1f3be177841..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/parsing/padding-block-inline-valid.html +++ /dev/null @@ -1,27 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-1-ref.html b/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-1-ref.html deleted file mode 100644 index 0dac4c29b18..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-1-ref.html +++ /dev/null @@ -1,36 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-2-ref.html b/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-2-ref.html deleted file mode 100644 index 82bfcd2d36f..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-2-ref.html +++ /dev/null @@ -1,37 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-3-ref.html b/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-3-ref.html deleted file mode 100644 index 654afd856f6..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-3-ref.html +++ /dev/null @@ -1,38 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-4-ref.html b/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-4-ref.html deleted file mode 100644 index 0c2065b3e97..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-4-ref.html +++ /dev/null @@ -1,39 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html b/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html deleted file mode 100644 index 28c275ebb30..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html +++ /dev/null @@ -1,68 +0,0 @@ -<!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/tests/wpt/web-platform-tests/css/css-logical/resources/test-box-properties.js b/tests/wpt/web-platform-tests/css/css-logical/resources/test-box-properties.js deleted file mode 100644 index ef1854f97de..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/resources/test-box-properties.js +++ /dev/null @@ -1,297 +0,0 @@ -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/tests/wpt/web-platform-tests/css/css-logical/resources/test-logical-values.js b/tests/wpt/web-platform-tests/css/css-logical/resources/test-logical-values.js deleted file mode 100644 index 7a039379cbd..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/resources/test-logical-values.js +++ /dev/null @@ -1,27 +0,0 @@ -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/tests/wpt/web-platform-tests/css/css-logical/resources/test-shared.js b/tests/wpt/web-platform-tests/css/css-logical/resources/test-shared.js deleted file mode 100644 index 7a1da2e6497..00000000000 --- a/tests/wpt/web-platform-tests/css/css-logical/resources/test-shared.js +++ /dev/null @@ -1,112 +0,0 @@ -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; -} |