Repository: sindresorhus/modern-normalize
Branch: main
Commit: ba66c6fe35c7
Files: 19
Total size: 55.2 KB

Directory structure:
gitextract__xknk34a/

├── .editorconfig
├── .gitattributes
├── .github/
│   ├── security.md
│   └── workflows/
│       └── main.yml
├── .gitignore
├── .npmrc
├── license
├── media/
│   └── logo.sketch
├── modern-normalize.css
├── package.json
├── readme.md
└── test/
    ├── acceptance/
    │   ├── chrome/
    │   │   ├── rules.ts
    │   │   └── validation.ts
    │   ├── firefox/
    │   │   ├── rules.ts
    │   │   └── validation.ts
    │   └── safari/
    │       ├── rules.ts
    │       └── validation.ts
    └── page/
        ├── with-css.html
        └── without-css.html

================================================
FILE CONTENTS
================================================

================================================
FILE: .editorconfig
================================================
root = true

[*]
indent_style = tab
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.yml]
indent_style = space
indent_size = 2


================================================
FILE: .gitattributes
================================================
* text=auto eol=lf


================================================
FILE: .github/security.md
================================================
# Security Policy

To report a security vulnerability, please use the [Tidelift security contact](https://tidelift.com/security). Tidelift will coordinate the fix and disclosure.


================================================
FILE: .github/workflows/main.yml
================================================
name: CI
on:
  - push
  - pull_request
jobs:
  test:
    name: Node.js ${{ matrix.node-version }}
    runs-on: macos-latest
    strategy:
      fail-fast: false
      matrix:
        node-version:
          - lts/*
          - lts/-1
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm install
      - run: npm test


================================================
FILE: .gitignore
================================================
node_modules
yarn.lock


================================================
FILE: .npmrc
================================================
package-lock=false


================================================
FILE: license
================================================
MIT License

Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
Copyright (c) Jonathan Neal
Copyright (c) Nicolas Gallagher

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


================================================
FILE: modern-normalize.css
================================================
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
	box-sizing: border-box;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/

html {
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji'; /* 1 */
	line-height: 1.15; /* 2 */
	-webkit-text-size-adjust: 100%; /* 3 */
	tab-size: 4; /* 4 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
	margin: 0;
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}


================================================
FILE: package.json
================================================
{
	"name": "modern-normalize",
	"version": "3.0.1",
	"description": "Normalize browsers' default style",
	"license": "MIT",
	"repository": "sindresorhus/modern-normalize",
	"funding": "https://github.com/sponsors/sindresorhus",
	"author": {
		"name": "Sindre Sorhus",
		"email": "sindresorhus@gmail.com",
		"url": "https://sindresorhus.com"
	},
	"main": "modern-normalize.css",
	"style": "modern-normalize.css",
	"sideEffects": true,
	"engines": {
		"node": ">=6"
	},
	"scripts": {
		"test": "npm run test:stylelint",
		"test:all": "npm run test:stylelint && npm run test:chrome && npm run test:firefox && npm run test:safari",
		"test:stylelint": "stylelint modern-normalize.css",
		"test:chrome": "testcafe chrome:headless test/acceptance/chrome --app \"http-server . --silent\"",
		"test:firefox": "testcafe firefox:headless test/acceptance/firefox --app \"http-server . --silent\"",
		"test:safari": "testcafe safari test/acceptance/safari --app \"http-server . --silent\"",
		"version": "replace-in-files --regex='v\\d+\\.\\d+\\.\\d+' --replacement=v$npm_package_version modern-normalize.css && git add ."
	},
	"files": [
		"modern-normalize.css"
	],
	"keywords": [
		"normalize",
		"css",
		"reset",
		"browser",
		"style"
	],
	"devDependencies": {
		"http-server": "^14.1.1",
		"replace-in-files-cli": "^3.0.0",
		"stylelint": "^16.8.1",
		"stylelint-config-xo": "^1.0.2",
		"testcafe": "^3.6.2"
	},
	"stylelint": {
		"extends": "stylelint-config-xo",
		"rules": {
			"no-duplicate-selectors": null,
			"no-descending-specificity": null,
			"property-no-vendor-prefix": null
		}
	}
}


================================================
FILE: readme.md
================================================
<div align="center">
	<img src="media/logo.svg" alt="modern-normalize">
	<br>
	<br>
</div>

## Differences from [`normalize.css`](https://github.com/necolas/normalize.css)

- Smaller
- Includes only normalizations for the latest Chrome, Firefox, and Safari
- [Sets `box-sizing: border-box`](https://www.paulirish.com/2012/box-sizing-border-box-ftw/)
- [Improves consistency of default fonts](https://github.com/sindresorhus/modern-normalize/issues/3)
- [Sets a more readable tab size](https://github.com/sindresorhus/modern-normalize/issues/17)
- Fully tested
- Maintained

If you have questions about the source, check out the [original source](https://github.com/necolas/normalize.css/blame/master/normalize.css) and [this](https://github.com/necolas/normalize.css#extended-details-and-known-issues) for details.

[**The goal of this project is to make itself obsolete.**](https://github.com/sindresorhus/modern-normalize/issues/2)

## Browser support

- Latest Chrome
- Latest Firefox
- Latest Safari

## Install

```sh
npm install modern-normalize
```

###### Download

- [Normal](https://cdn.jsdelivr.net/npm/modern-normalize/modern-normalize.css)
- [Minified](https://cdn.jsdelivr.net/npm/modern-normalize/modern-normalize.min.css)

###### CDN

- [jsdelivr](https://www.jsdelivr.com/package/npm/modern-normalize)
- [unpkg](https://unpkg.com/modern-normalize)
- [cdnjs](https://cdnjs.com/libraries/modern-normalize)

## Usage

```css
@import 'node_modules/modern-normalize/modern-normalize.css';
```

or

```html
<link rel="stylesheet" href="node_modules/modern-normalize/modern-normalize.css">
```

## FAQ

### Can you provide Sass, Less, etc, ports?

There's absolutely no reason to have separate ports for these. They are just CSS supersets and can import CSS directly.

## Related

- [sass-extras](https://github.com/sindresorhus/sass-extras) - Useful utilities for working with Sass


================================================
FILE: test/acceptance/chrome/rules.ts
================================================
import {Selector} from 'testcafe';

fixture `Chrome Rules Tests`
	.page `http://localhost:8080/test/page/with-css.html`;

test('Use a better box model (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('box-sizing')).eql('border-box');
});

test('Use a more readable tab size (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('tab-size')).eql('4');
});

test('Correct the line height in all browsers.', async t => {
	await t
		.expect(Selector('html').getStyleProperty('font-size')).eql('16px')
		.expect(Selector('html').getStyleProperty('line-height')).eql('18.4px');
});

test('Prevent adjustments of font size after orientation changes in iOS.', async t => {
	await t
		.expect(Selector('html').getStyleProperty('text-size-adjust')).eql('100%');
});

test('Remove the margin in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('margin-top')).eql('0px')
		.expect(Selector('body').getStyleProperty('margin-right')).eql('0px')
		.expect(Selector('body').getStyleProperty('margin-bottom')).eql('0px')
		.expect(Selector('body').getStyleProperty('margin-left')).eql('0px');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('font-family')).eql(`system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`);
});

test('<hr> should be the correct height.', async t => {
	await t
		.expect(Selector('hr[data-test--hr]').getStyleProperty('height')).eql('2px');
});

test('Add the correct text decoration in Safari.', async t => {
	await t
		.expect(Selector('abbr[data-test--abbr]').getStyleProperty('text-decoration')).eql('underline dotted rgb(0, 0, 0)');
});

test('Add the correct font weight in Chrome and Safari.', async t => {
	await t
		.expect(Selector('b[data-test--bold]').getStyleProperty('font-weight')).eql('900')
		.expect(Selector('strong[data-test--bold]').getStyleProperty('font-weight')).eql('900');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-family')).eql('ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace');
});

test('Correct the odd `em` font sizing in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-size')).eql('16px');
});

test('Add the correct font size in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--small]').getStyleProperty('font-size')).eql('12.8px');
});

test('Prevent `sub` and `sup` elements from affecting the line height in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--subsup]').getStyleProperty('font-size')).eql('12px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('line-height')).eql('0px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('position')).eql('relative')
		.expect(Selector('[data-test--subsup]').getStyleProperty('vertical-align')).eql('baseline')
		.expect(Selector('sub[data-test--subsup]').getStyleProperty('bottom')).eql('-3px')
		.expect(Selector('sup[data-test--subsup]').getStyleProperty('top')).eql('-6px');
});

test('Change the font styles in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-family')).eql('MYCUSTOMFONT')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-size')).eql('16px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('line-height')).eql('18.4px');
});

test('Remove the margin in Firefox and Safari.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-top')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-right')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-bottom')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-left')).eql('0px');
});

test('Text transform should not be inherited.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('text-transform')).eql('none')
		.expect(Selector('select[data-test--forms-1]').getStyleProperty('text-transform')).eql('none');
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
		.expect(Selector('[type="button"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
		.expect(Selector('[type="reset"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
		.expect(Selector('[type="submit"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button');
});

test('Correct the padding in Firefox.', async t => {
	await t
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-top')).eql('5.6px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-right')).eql('12px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('10px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-left')).eql('12px');
});

test('Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.', async t => {
	await t
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-top')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-right')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-left')).eql('0px');
});

test('Add the correct vertical alignment in Chrome and Firefox.', async t => {
	await t
		.expect(Selector('progress[data-test--forms-2]').getStyleProperty('vertical-align')).eql('baseline');
});

test('Correct the cursor style of increment and decrement buttons in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the odd appearance in Chrome and Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('textfield');
});

test('Correct the outline style in Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('outline-offset')).eql('0px');
});

test('Remove the inner padding in Chrome and Safari on macOS.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Change font properties to `inherit` in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Add the correct display in Chrome and Safari.', async t => {
	await t
		.expect(Selector('summary[data-test--interactive]').getStyleProperty('display')).eql('list-item');
});


================================================
FILE: test/acceptance/chrome/validation.ts
================================================
import {Selector} from 'testcafe';

fixture `Chrome Validation Tests`
	.page `http://localhost:8080/test/page/without-css.html`;

test('Use a better box model (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('box-sizing')).notEql('border-box');
});

test('Use a more readable tab size (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('tab-size')).notEql('4');
});

test('Correct the line height in all browsers.', async t => {
	await t
		.expect(Selector('html').getStyleProperty('font-size')).eql('16px')
		.expect(Selector('html').getStyleProperty('line-height')).notEql('18.4px');
});

test('Prevent adjustments of font size after orientation changes in iOS.', async t => {
	await t
		.expect(Selector('html').getStyleProperty('text-size-adjust')).notEql('100%');
});

test('Remove the margin in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('margin-top')).notEql('0px')
		.expect(Selector('body').getStyleProperty('margin-right')).notEql('0px')
		.expect(Selector('body').getStyleProperty('margin-bottom')).notEql('0px')
		.expect(Selector('body').getStyleProperty('margin-left')).notEql('0px');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('font-family')).notEql('system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"');
});

test('<hr> should be the correct height.', async t => {
	await t
		.expect(Selector('hr[data-test--hr]').getStyleProperty('height')).notEql('2px');
});

test('Add the correct text decoration in Safari.', async t => {
	await t
		.expect(Selector('abbr[data-test--abbr]').getStyleProperty('text-decoration')).eql('underline dotted rgb(0, 0, 0)');
});

test('Add the correct font weight in Chrome and Safari.', async t => {
	await t
		.expect(Selector('b[data-test--bold]').getStyleProperty('font-weight')).notEql('900')
		.expect(Selector('strong[data-test--bold]').getStyleProperty('font-weight')).notEql('900');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-family')).notEql('ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace');
});

test('Correct the odd `em` font sizing in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-size')).notEql('16px');
});

test('Add the correct font size in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--small]').getStyleProperty('font-size')).notEql('12.8px');
});

test('Prevent `sub` and `sup` elements from affecting the line height in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--subsup]').getStyleProperty('font-size')).notEql('12px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('line-height')).notEql('0px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('position')).notEql('relative')
		.expect(Selector('[data-test--subsup]').getStyleProperty('vertical-align')).notEql('baseline')
		.expect(Selector('sub[data-test--subsup]').getStyleProperty('bottom')).notEql('-3px')
		.expect(Selector('sup[data-test--subsup]').getStyleProperty('top')).notEql('-6px');
});

test('Change the font styles in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-family')).notEql('MYCUSTOMFONT')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-size')).notEql('16px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('line-height')).notEql('18.4px');
});

test('Remove the margin in Firefox and Safari.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-top')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-right')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-bottom')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-left')).eql('0px');
});

test('Text transform should not be inherited.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('text-transform')).eql('none')
		.expect(Selector('select[data-test--forms-1]').getStyleProperty('text-transform')).eql('none');
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
		.expect(Selector('[type="button"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('button')
		.expect(Selector('[type="reset"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('button')
		.expect(Selector('[type="submit"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('button');
});

test('Correct the padding in Firefox.', async t => {
	await t
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-top')).eql('5.6px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-right')).eql('12px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('10px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-left')).eql('12px');
});

test('Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.', async t => {
	await t
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-top')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-right')).notEql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-left')).notEql('0px');
});

test('Add the correct vertical alignment in Chrome and Firefox.', async t => {
	await t
		.expect(Selector('progress[data-test--forms-2]').getStyleProperty('vertical-align')).notEql('baseline');
});

test('Correct the cursor style of increment and decrement buttons in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the odd appearance in Chrome and Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('textfield');
});

test('Correct the outline style in Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('outline-offset')).eql('0px');
});

test('Remove the inner padding in Chrome and Safari on macOS.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Change font properties to `inherit` in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Add the correct display in Chrome and Safari.', async t => {
	await t
		.expect(Selector('summary[data-test--interactive]').getStyleProperty('display')).notEql('list-item');
});


================================================
FILE: test/acceptance/firefox/rules.ts
================================================
import {Selector} from 'testcafe';

fixture `Firefox Rules Tests`
	.page `http://localhost:8080/test/page/with-css.html`;

test('Use a better box model (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('box-sizing')).eql('border-box');
});

test('Use a more readable tab size (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('tab-size')).eql('4');
});

test('Correct the line height in all browsers.', async t => {
	await t
		.expect(Selector('html').getStyleProperty('font-size')).eql('16px')
		.expect(Selector('html').getStyleProperty('line-height')).eql('18.4px');
});

test('Prevent adjustments of font size after orientation changes in iOS.', async t => {
	await t
		.expect(Selector('html').getStyleProperty('text-size-adjust')).eql(undefined);
});

test('Remove the margin in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('margin-top')).eql('0px')
		.expect(Selector('body').getStyleProperty('margin-right')).eql('0px')
		.expect(Selector('body').getStyleProperty('margin-bottom')).eql('0px')
		.expect(Selector('body').getStyleProperty('margin-left')).eql('0px');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('font-family')).eql(`system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`);
});

test('<hr> should be the correct height.', async t => {
	await t
		.expect(Selector('hr[data-test--hr]').getStyleProperty('height')).eql('2px');
});

test('Add the correct text decoration in Safari.', async t => {
	await t
		.expect(Selector('abbr[data-test--abbr]').getStyleProperty('text-decoration')).eql('underline dotted rgb(0, 0, 0)');
});

test('Add the correct font weight in Chrome and Safari.', async t => {
	await t
		.expect(Selector('b[data-test--bold]').getStyleProperty('font-weight')).eql('900')
		.expect(Selector('strong[data-test--bold]').getStyleProperty('font-weight')).eql('900');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-family')).eql('ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace');
});

test('Correct the odd `em` font sizing in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-size')).eql('16px');
});

test('Add the correct font size in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--small]').getStyleProperty('font-size')).eql('12.8px');
});

test('Prevent `sub` and `sup` elements from affecting the line height in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--subsup]').getStyleProperty('font-size')).eql('12px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('line-height')).eql('0px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('position')).eql('relative')
		.expect(Selector('[data-test--subsup]').getStyleProperty('vertical-align')).eql('baseline')
		.expect(Selector('sub[data-test--subsup]').getStyleProperty('bottom')).eql('-3px')
		.expect(Selector('sup[data-test--subsup]').getStyleProperty('top')).eql('-6px');
});

test('Change the font styles in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-family')).eql('MYCUSTOMFONT')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-size')).eql('16px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('line-height')).eql('18.4px');
});

test('Remove the margin in Firefox and Safari.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-top')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-right')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-bottom')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-left')).eql('0px');
});

test('Text transform should not be inherited.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('text-transform')).eql('none')
		.expect(Selector('select[data-test--forms-1]').getStyleProperty('text-transform')).eql('none');
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql(undefined)
		.expect(Selector('[type="button"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql(undefined)
		.expect(Selector('[type="reset"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql(undefined)
		.expect(Selector('[type="submit"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql(undefined);
});

test('Correct the padding in Firefox.', async t => {
	await t
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-top')).eql('5.6px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-right')).eql('12px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('10px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-left')).eql('12px');
});

test('Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.', async t => {
	await t
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-top')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-right')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-left')).eql('0px');
});

test('Add the correct vertical alignment in Chrome and Firefox.', async t => {
	await t
		.expect(Selector('progress[data-test--forms-2]').getStyleProperty('vertical-align')).eql('baseline');
});

test('Correct the cursor style of increment and decrement buttons in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the odd appearance in Chrome and Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql(undefined);
});

test('Correct the outline style in Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('outline-offset')).eql('-2px');
});

test('Remove the inner padding in Chrome and Safari on macOS.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Change font properties to `inherit` in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Add the correct display in Chrome and Safari.', async t => {
	await t
		.expect(Selector('summary[data-test--interactive]').getStyleProperty('display')).eql('list-item');
});


================================================
FILE: test/acceptance/firefox/validation.ts
================================================
import {Selector} from 'testcafe';

fixture `Firefox Validation Tests`
	.page `http://localhost:8080/test/page/without-css.html`;

test('Use a better box model (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('box-sizing')).notEql('border-box');
});

test('Use a more readable tab size (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('tab-size')).notEql('4');
});

test('Correct the line height in all browsers.', async t => {
	await t
		.expect(Selector('html').getStyleProperty('font-size')).eql('16px')
		.expect(Selector('html').getStyleProperty('line-height')).notEql('18.4px');
});

test('Prevent adjustments of font size after orientation changes in iOS.', async t => {
	await t
		.expect(Selector('html').getStyleProperty('text-size-adjust')).notEql('100%');
});

test('Remove the margin in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('margin-top')).notEql('0px')
		.expect(Selector('body').getStyleProperty('margin-right')).notEql('0px')
		.expect(Selector('body').getStyleProperty('margin-bottom')).notEql('0px')
		.expect(Selector('body').getStyleProperty('margin-left')).notEql('0px');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('font-family')).notEql('system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"');
});

test('<hr> should be the correct height.', async t => {
	await t
		.expect(Selector('hr[data-test--hr]').getStyleProperty('height')).notEql('2px');
});

test('Add the correct text decoration in Safari.', async t => {
	await t
		.expect(Selector('abbr[data-test--abbr]').getStyleProperty('text-decoration')).eql('underline dotted rgb(0, 0, 0)');
});

test('Add the correct font weight in Chrome and Safari.', async t => {
	await t
		.expect(Selector('b[data-test--bold]').getStyleProperty('font-weight')).eql('900')
		.expect(Selector('strong[data-test--bold]').getStyleProperty('font-weight')).eql('900');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-family')).notEql('ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace');
});

test('Correct the odd `em` font sizing in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-size')).notEql('16px');
});

test('Add the correct font size in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--small]').getStyleProperty('font-size')).notEql('12.8px');
});

test('Prevent `sub` and `sup` elements from affecting the line height in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--subsup]').getStyleProperty('font-size')).notEql('12px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('line-height')).notEql('0px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('position')).notEql('relative')
		.expect(Selector('[data-test--subsup]').getStyleProperty('vertical-align')).notEql('baseline')
		.expect(Selector('sub[data-test--subsup]').getStyleProperty('bottom')).notEql('-3px')
		.expect(Selector('sup[data-test--subsup]').getStyleProperty('top')).notEql('-6px');
});

test('Change the font styles in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-family')).notEql('MYCUSTOMFONT')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-size')).notEql('16px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('line-height')).notEql('18.4px');
});

test('Remove the margin in Firefox and Safari.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-top')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-right')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-bottom')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-left')).eql('0px');
});

test('Text transform should not be inherited.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('text-transform')).eql('none')
		.expect(Selector('select[data-test--forms-1]').getStyleProperty('text-transform')).eql('none');
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql(undefined)
		.expect(Selector('[type="button"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql(undefined)
		.expect(Selector('[type="reset"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql(undefined)
		.expect(Selector('[type="submit"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql(undefined);
});

test('Correct the padding in Firefox.', async t => {
	await t
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-top')).eql('5.6px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-right')).eql('12px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('10px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-left')).eql('12px');
});

test('Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.', async t => {
	await t
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-top')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-right')).notEql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-left')).notEql('0px');
});

test('Add the correct vertical alignment in Chrome and Firefox.', async t => {
	await t
		.expect(Selector('progress[data-test--forms-2]').getStyleProperty('vertical-align')).notEql('baseline');
});

test('Correct the cursor style of increment and decrement buttons in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the odd appearance in Chrome and Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql(undefined);
});

test('Correct the outline style in Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('outline-offset')).eql('0px');
});

test('Remove the inner padding in Chrome and Safari on macOS.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Change font properties to `inherit` in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Add the correct display in Chrome and Safari.', async t => {
	await t
		.expect(Selector('summary[data-test--interactive]').getStyleProperty('display')).notEql('list-item');
});


================================================
FILE: test/acceptance/safari/rules.ts
================================================
import {Selector} from 'testcafe';

fixture `Safari Rules Tests`
	.page `http://localhost:8080/test/page/with-css.html`;

test('Use a better box model (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('box-sizing')).eql('border-box');
});

test('Use a more readable tab size (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('tab-size')).eql('4');
});

test('Correct the line height in all browsers.', async t => {
	await t
		.expect(Selector('html').getStyleProperty('font-size')).eql('16px')
		.expect(Selector('html').getStyleProperty('line-height')).eql('18px');
});

test('Prevent adjustments of font size after orientation changes in iOS.', async t => {
	await t
		// TODO: Check behavior of `-webkit-text-size-adjust` changing to auto in Safari
		.expect(Selector('html').getStyleProperty('-webkit-text-size-adjust')).eql('auto');
});

test('Remove the margin in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('margin-top')).eql('0px')
		.expect(Selector('body').getStyleProperty('margin-right')).eql('0px')
		.expect(Selector('body').getStyleProperty('margin-bottom')).eql('0px')
		.expect(Selector('body').getStyleProperty('margin-left')).eql('0px');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('font-family')).eql(`system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`);
});

test('<hr> should be the correct height.', async t => {
	await t
		.expect(Selector('hr[data-test--hr]').getStyleProperty('height')).eql('2px');
});

test('Add the correct text decoration in Safari.', async t => {
	// TODO: Why `text-decoration` is none?
	// await t
	// 	.expect(Selector('abbr[data-test--abbr]').getStyleProperty('text-decoration')).eql('underline dotted');
});

test('Add the correct font weight in Chrome and Safari.', async t => {
	await t
		.expect(Selector('b[data-test--bold]').getStyleProperty('font-weight')).eql('900')
		.expect(Selector('strong[data-test--bold]').getStyleProperty('font-weight')).eql('900');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-family')).eql('ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace');
});

test('Correct the odd `em` font sizing in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-size')).eql('16px');
});

test('Add the correct font size in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--small]').getStyleProperty('font-size')).eql('12.800000190734863px');
});

test('Prevent `sub` and `sup` elements from affecting the line height in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--subsup]').getStyleProperty('font-size')).eql('12px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('line-height')).eql('0px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('position')).eql('relative')
		.expect(Selector('[data-test--subsup]').getStyleProperty('vertical-align')).eql('baseline')
		.expect(Selector('sub[data-test--subsup]').getStyleProperty('bottom')).eql('-3px')
		.expect(Selector('sup[data-test--subsup]').getStyleProperty('top')).eql('-6px');
});

test('Change the font styles in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-family')).eql('MYCUSTOMFONT')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-size')).eql('16px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('line-height')).eql('18px');
});

test('Remove the margin in Firefox and Safari.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-top')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-right')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-bottom')).eql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-left')).eql('0px');
});

test('Text transform should not be inherited.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('text-transform')).eql('none')
		.expect(Selector('select[data-test--forms-1]').getStyleProperty('text-transform')).eql('none');
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
		.expect(Selector('[type="button"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
		.expect(Selector('[type="reset"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
		.expect(Selector('[type="submit"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button');
});

test('Correct the padding in Firefox.', async t => {
	await t
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-top')).eql('5.599999904632568px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-right')).eql('12px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('10px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-left')).eql('12px');
});

test('Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.', async t => {
	await t
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-top')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-right')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-left')).eql('0px');
});

test('Add the correct vertical alignment in Chrome and Firefox.', async t => {
	await t
		.expect(Selector('progress[data-test--forms-2]').getStyleProperty('vertical-align')).eql('baseline');
});

test('Correct the cursor style of increment and decrement buttons in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the odd appearance in Chrome and Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('textfield');
});

test('Correct the outline style in Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('outline-offset')).eql('0px');
});

test('Remove the inner padding in Chrome and Safari on macOS.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Change font properties to `inherit` in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Add the correct display in Chrome and Safari.', async t => {
	await t
		.expect(Selector('summary[data-test--interactive]').getStyleProperty('display')).eql('list-item');
});


================================================
FILE: test/acceptance/safari/validation.ts
================================================
import {Selector} from 'testcafe';

fixture `Safari Validation Tests`
	.page `http://localhost:8080/test/page/without-css.html`;

test('Use a better box model (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('box-sizing')).notEql('border-box');
});

test('Use a more readable tab size (opinionated).', async t => {
	await t
		.expect(Selector('html').getStyleProperty('tab-size')).notEql('4');
});

test('Correct the line height in all browsers.', async t => {
	await t
		.expect(Selector('html').getStyleProperty('font-size')).eql('16px')
		.expect(Selector('html').getStyleProperty('line-height')).eql('18px');
});

test('Prevent adjustments of font size after orientation changes in iOS.', async t => {
	await t
		// TODO: check behavior of -webkit-text-size-adjust changing to auto in safari
		.expect(Selector('html').getStyleProperty('-webkit-text-size-adjust')).eql('auto');
});

test('Remove the margin in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('margin-top')).notEql('0px')
		.expect(Selector('body').getStyleProperty('margin-right')).notEql('0px')
		.expect(Selector('body').getStyleProperty('margin-bottom')).notEql('0px')
		.expect(Selector('body').getStyleProperty('margin-left')).notEql('0px');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('body').getStyleProperty('font-family')).notEql('system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"');
});

test('<hr> should be the correct height.', async t => {
	await t
		.expect(Selector('hr[data-test--hr]').getStyleProperty('height')).notEql('2px');
});

test('Add the correct text decoration in Safari.', async t => {
	// await t
	// 	.expect(Selector('abbr[data-test--abbr]').getStyleProperty('text-decoration')).notEql('underline dotted');
});

test('Add the correct font weight in Chrome and Safari.', async t => {
	await t
		.expect(Selector('b[data-test--bold]').getStyleProperty('font-weight')).notEql('900')
		.expect(Selector('strong[data-test--bold]').getStyleProperty('font-weight')).notEql('900');
});

test('Improve consistency of default fonts in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-family')).notEql('ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace');
});

test('Correct the odd `em` font sizing in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--code]').getStyleProperty('font-size')).notEql('16px');
});

test('Add the correct font size in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--small]').getStyleProperty('font-size')).notEql('12.800000190734863px');
});

test('Prevent `sub` and `sup` elements from affecting the line height in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--subsup]').getStyleProperty('font-size')).notEql('12px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('line-height')).notEql('0px')
		.expect(Selector('[data-test--subsup]').getStyleProperty('position')).notEql('relative')
		.expect(Selector('[data-test--subsup]').getStyleProperty('vertical-align')).notEql('baseline')
		.expect(Selector('sub[data-test--subsup]').getStyleProperty('bottom')).notEql('-3px')
		.expect(Selector('sup[data-test--subsup]').getStyleProperty('top')).notEql('-6px');
});

test('Change the font styles in all browsers.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-family')).notEql('MYCUSTOMFONT')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('font-size')).notEql('16px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('line-height')).notEql('18px');
});

test('Remove the margin in Firefox and Safari.', async t => {
	await t
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-top')).notEql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-right')).notEql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-bottom')).notEql('0px')
		.expect(Selector('[data-test--forms-1]').getStyleProperty('margin-left')).notEql('0px');
});

test('Text transform should not be inherited.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('text-transform')).eql('none')
		.expect(Selector('select[data-test--forms-1]').getStyleProperty('text-transform')).eql('none');
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	await t
		.expect(Selector('button[data-test--forms-1]').getStyleProperty('-webkit-appearance')).eql('button')
		.expect(Selector('[type="button"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('button')
		.expect(Selector('[type="reset"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('button')
		.expect(Selector('[type="submit"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('button');
});

test('Correct the padding in Firefox.', async t => {
	await t
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-top')).eql('5.599999904632568px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-right')).eql('12px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('10px')
		.expect(Selector('fieldset[data-test--forms-2]').getStyleProperty('padding-left')).eql('12px');
});

test('Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.', async t => {
	await t
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-top')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-right')).notEql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-bottom')).eql('0px')
		.expect(Selector('legend[data-test--forms-2]').getStyleProperty('padding-left')).notEql('0px');
});

test('Add the correct vertical alignment in Chrome and Firefox.', async t => {
	await t
		.expect(Selector('progress[data-test--forms-2]').getStyleProperty('vertical-align')).notEql('baseline');
});

test('Correct the cursor style of increment and decrement buttons in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the odd appearance in Chrome and Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('-webkit-appearance')).notEql('textfield');
});

test('Correct the outline style in Safari.', async t => {
	await t
		.expect(Selector('[type="search"][data-test--forms-1]').getStyleProperty('outline-offset')).eql('0px');
});

test('Remove the inner padding in Chrome and Safari on macOS.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Correct the inability to style clickable types in iOS and Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Change font properties to `inherit` in Safari.', async t => {
	// TODO: Pseudo-elements selector not supported by testcafe (See https://github.com/DevExpress/testcafe/issues/2813).
});

test('Add the correct display in Chrome and Safari.', async t => {
	await t
		.expect(Selector('summary[data-test--interactive]').getStyleProperty('display')).notEql('list-item');
});


================================================
FILE: test/page/with-css.html
================================================
<html>
	<head>
		<link rel="stylesheet" href="/modern-normalize.css">
	</head>
	<body>
		<hr data-test--hr />
		<abbr data-test--abbr title="HyperText Markup Language">HTML</abbr>
		<div style="font-weight: 700">
			<b data-test--bold>BOLD</b>
			<strong data-test--bold>BOLD</strong>
		</div>
		<code data-test--code></code>
		<kbd data-test--code></kbd>
		<samp data-test--code></samp>
		<pre data-test--code></pre>
		<small data-test--small></small>
		<sub data-test--subsup></sub>
		<sup data-test--subsup></sup>
		<div style="font-family: MYCUSTOMFONT">
			<button data-test--forms-1></button>
			<input data-test--forms-1>
			<input data-test--forms-1 type="text">
			<input data-test--forms-1 type="number">
			<input data-test--forms-1 type="search">
			<optgroup data-test--forms-1></optgroup>
			<select data-test--forms-1></select>
			<textarea data-test--forms-1></textarea>
			<input data-test--forms-1 type="button">
			<input data-test--forms-1 type="reset">
			<input data-test--forms-1 type="submit">
			<button data-test--forms-1 type="button"></button>
			<button data-test--forms-1 type="reset"></button>
			<button data-test--forms-1 type="submit"></button>
			<fieldset data-test--forms-2></fieldset>
			<legend data-test--forms-2></legend>
			<progress data-test--forms-2></progress>
		</div>
		<summary data-test--interactive></summary>
	</body>
</html>


================================================
FILE: test/page/without-css.html
================================================
<html>
	<body>
		<hr data-test--hr />
		<abbr data-test--abbr title="HyperText Markup Language">HTML</abbr>
		<div style="font-weight: 700">
			<b data-test--bold>BOLD</b>
			<strong data-test--bold>BOLD</strong>
		</div>
		<code data-test--code></code>
		<kbd data-test--code></kbd>
		<samp data-test--code></samp>
		<pre data-test--code></pre>
		<small data-test--small></small>
		<sub data-test--subsup></sub>
		<sup data-test--subsup></sup>
		<div style="font-family: MYCUSTOMFONT">
			<button data-test--forms-1></button>
			<input data-test--forms-1>
			<input data-test--forms-1 type="text">
			<input data-test--forms-1 type="number">
			<input data-test--forms-1 type="search">
			<optgroup data-test--forms-1></optgroup>
			<select data-test--forms-1></select>
			<textarea data-test--forms-1></textarea>
			<input data-test--forms-1 type="button">
			<input data-test--forms-1 type="reset">
			<input data-test--forms-1 type="submit">
			<button data-test--forms-1 type="button"></button>
			<button data-test--forms-1 type="reset"></button>
			<button data-test--forms-1 type="submit"></button>
			<fieldset data-test--forms-2></fieldset>
			<legend data-test--forms-2></legend>
			<progress data-test--forms-2></progress>
		</div>
		<summary data-test--interactive></summary>
	</body>
</html>