| <!doctype html> |
| <meta charset="utf-8"> |
| <title>logical margin, inset, padding & border properties</title> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get"> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set"> |
| <link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="../../resources/testhelper.js"></script> |
| <script src="resources/testsuite.js"></script> |
| <body> |
| <div id="log"></div> |
| <script> |
| 'use strict'; |
| |
| const logical = { |
| axes: ['block', 'inline'], |
| sides: ['block-start', 'block-end', 'inline-start', 'inline-end'], |
| corners: ['start-start', 'start-end', 'end-start', 'end-end'], |
| }; |
| |
| for (const prefix of ['margin-', 'inset-', 'padding-']) { |
| for (const side of [...logical.sides, ...logical.axes]) { |
| runPropertyTests(prefix + side, [ |
| // TODO: Test 'auto' |
| { syntax: '<percentage>' }, |
| { syntax: '<length>' }, |
| ]); |
| } |
| } |
| |
| // BORDERS |
| for (const side of [...logical.sides, ...logical.axes]) { |
| runPropertyTests('border-' + side, [ |
| //{ syntax: 'thin solid green' }, |
| //{ syntax: 'thin solid' }, |
| //{ syntax: 'thick' }, |
| { syntax: 'none' }, |
| ]); |
| |
| runPropertyTests(`border-${side}-width`, [ |
| { syntax: 'thin' }, |
| { syntax: 'medium' }, |
| { syntax: 'thick' }, |
| { syntax: '<length>' }, |
| ]); |
| |
| runPropertyTests(`border-${side}-color`, [ |
| { syntax: 'currentcolor' }, |
| //{ syntax: '<color>' }, |
| ]); |
| |
| runPropertyTests(`border-${side}-style`, [ |
| { syntax: 'none' }, |
| { syntax: 'solid' }, |
| ]); |
| } |
| |
| // border radius |
| for (const side of logical.corners) { |
| runPropertyTests(`border-${side}-radius`, [ |
| { syntax: '<percentage>' }, |
| { syntax: '<length>' }, |
| ]); |
| } |
| </script> |
