mirror of
https://github.com/servo/servo.git
synced 2025-08-29 00:58:20 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
3
tests/wpt/web-platform-tests/css/css-rhythm-1/OWNERS
Normal file
3
tests/wpt/web-platform-tests/css/css-rhythm-1/OWNERS
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@plinss
|
||||
@kojiishi
|
||||
@fantasai
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step basic layout</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
|
||||
<link rel="match" href="reference/line-height-step-basic-001.html">
|
||||
<meta name="assert" content="This test asserts the line-height-step property rounds up line box height.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
div {
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
}
|
||||
.test, .ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 5em;
|
||||
}
|
||||
.test {
|
||||
line-height: 40px;
|
||||
line-height-step: 60px;
|
||||
}
|
||||
.ref {
|
||||
line-height: 60px;
|
||||
}
|
||||
</style>
|
||||
<p class="instructions">Test passes if left and right are the same.
|
||||
<div class="ref">
|
||||
<div>XXXXX</div>
|
||||
<div>XXXXX XXXXX XXXXX</div>
|
||||
<div><br>X<br>X</div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div>XXXXX</div>
|
||||
<div>XXXXX XXXXX XXXXX</div>
|
||||
<div><br>X<br>X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step boundary test</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
|
||||
<link rel="match" href="reference/line-height-step-boundary-001.html">
|
||||
<meta name="assert" content="This test asserts the line-height-step property rounds up line box height.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
div {
|
||||
font-family: Ahem;
|
||||
font-size: 30px;
|
||||
}
|
||||
.test, .ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 5em;
|
||||
}
|
||||
.test {
|
||||
line-height-step: 40px;
|
||||
}
|
||||
</style>
|
||||
<p class="instructions">Test passes if left and right are the same.
|
||||
<div class="ref">
|
||||
<div style="line-height: 40px">XXXXX</div>
|
||||
<div style="line-height: 40px">XXXXX</div>
|
||||
<div style="line-height: 80px">XXXXX</div>
|
||||
<div style="line-height: 80px">XXXXX</div>
|
||||
<div style="line-height: 80px">XXXXX</div>
|
||||
<div style="line-height: 120px">XXXXX</div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div style="line-height: 39px">XXXXX</div>
|
||||
<div style="line-height: 40px">XXXXX</div>
|
||||
<div style="line-height: 41px">XXXXX</div>
|
||||
<div style="line-height: 79px">XXXXX</div>
|
||||
<div style="line-height: 80px">XXXXX</div>
|
||||
<div style="line-height: 81px">XXXXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step dynamic change</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
|
||||
<meta name="assert" content="This test asserts changing the line-height-step property takes effects.">
|
||||
<meta name="flags" content="dom">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
div {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<div id="target">X</div>
|
||||
<div id="next">X</div>
|
||||
<script>
|
||||
runTests();
|
||||
function runTests() {
|
||||
var before = next.offsetTop;
|
||||
target.style.lineHeightStep = "40px";
|
||||
var after = next.offsetTop;
|
||||
forceRelayout(document.documentElement);
|
||||
var afterRelayout = next.offsetTop;
|
||||
|
||||
test(function () {
|
||||
assert_not_equals(after, before);
|
||||
}, "Height must change when line-height-step changes");
|
||||
test(function () {
|
||||
assert_equals(after, afterRelayout);
|
||||
}, "Height must not change after relayout");
|
||||
}
|
||||
|
||||
function forceRelayout(element) {
|
||||
var saved = element.style.display;
|
||||
element.style.display = "none";
|
||||
element.offsetTop;
|
||||
element.style.display = saved;
|
||||
element.offsetTop;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: parsing line-height-step</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
|
||||
<meta name="assert" content="This test asserts the parsing and getComputedStyle works correctly for the line-height-step property.">
|
||||
<meta name="flags" content="dom">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div title="initial value should be '0px'" data-expected="0px"></div>
|
||||
|
||||
<div style="line-height-step: 20px" data-expected="20px">
|
||||
<div title="line-height-step should inherit" data-expected="20px"></div>
|
||||
<div style="line-height-step: initial" data-expected="0px"></div>
|
||||
|
||||
<div style="line-height-step: 40px" data-expected="40px"></div>
|
||||
|
||||
<div title="'0' should be a valid length" style="line-height-step: 0" data-expected="0px"></div>
|
||||
|
||||
<div title="Interger should be invalid" style="line-height-step: 1" data-expected="20px"></div>
|
||||
<div title="Negative length should be invalid" style="line-height-step: -1px" data-expected="20px"></div>
|
||||
</div>
|
||||
|
||||
<div id="pt" style="line-height-step: 40pt"></div>
|
||||
|
||||
<script>
|
||||
Array.prototype.forEach.call(document.querySelectorAll("[data-expected]"), function (element) {
|
||||
var expected = element.dataset.expected;
|
||||
test(function () {
|
||||
var actual = getComputedStyle(element).lineHeightStep;
|
||||
assert_equals(actual, expected);
|
||||
}, element.title || "'" + element.getAttribute("style") + "' should compute to '" + expected + "'");
|
||||
});
|
||||
|
||||
test(function () {
|
||||
assert_equals(getComputedStyle(document.getElementById("pt")).lineHeightStep.slice(-2), "px");
|
||||
}, "Computed value should be the absolute length");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step and ruby</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
|
||||
<link rel="match" href="reference/line-height-step-ruby-001.html">
|
||||
<meta name="assert" content="This test asserts the line-height-step property and ruby.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
div {
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
}
|
||||
.test, .ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 5em;
|
||||
}
|
||||
.test {
|
||||
line-height: 40px;
|
||||
line-height-step: 120px;
|
||||
}
|
||||
.ref {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p class="instructions">Test passes if left and right are the same.
|
||||
<div class="ref">
|
||||
<div>X<ruby>XX<rt>XX</rt></ruby>X</div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div>X<ruby>XX<rt>XX</rt></ruby>X</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step vertical-align test</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
|
||||
<link rel="match" href="reference/line-height-step-valign-001.html">
|
||||
<meta name="assert" content="This test asserts the vertical-align property with the line-height-step property.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
div {
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
}
|
||||
.test {
|
||||
line-height-step: 80px;
|
||||
line-height: 1;
|
||||
}
|
||||
.ref {
|
||||
line-height: 1;
|
||||
}
|
||||
.adjuster {
|
||||
line-height: 80px;
|
||||
color: transparent;
|
||||
}
|
||||
.top {
|
||||
vertical-align: top;
|
||||
}
|
||||
.text-top {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.text-bottom {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
<p class="instructions">Test passes if two lines are the same.
|
||||
<div class="ref">
|
||||
<div>XX<span class="top">X</span><span class="text-top">X</span><span class="text-bottom">X</span><span class="bottom">X</span><span class="adjuster">X</span></div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div>XX<span class="top">X</span><span class="text-top">X</span><span class="text-bottom">X</span><span class="bottom">X</span></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step in vertical-rl</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
|
||||
<link rel="match" href="reference/line-height-step-writing-mode-vrl-001.html">
|
||||
<meta name="assert" content="This test asserts the line-height-step property in vertical-rl writing mode.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
.container {
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
writing-mode: vertical-rl;
|
||||
width: 5em;
|
||||
}
|
||||
.test, .ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.test {
|
||||
line-height: 40px;
|
||||
line-height-step: 120px;
|
||||
}
|
||||
.ref {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p class="instructions">Test passes if top and bottom are the same.
|
||||
<div class="container">
|
||||
<div class="ref">
|
||||
<div>XXXXX</div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div>XXXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step with ruby in vertical-rl</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-rhythm-1/#line-height-step">
|
||||
<link rel="match" href="reference/line-height-step-writing-mode-vrl-ruby-001.html">
|
||||
<meta name="assert" content="This test asserts the line-height-step property with ruby in vertical-rl writing mode.">
|
||||
<meta name="flags" content="ahem">
|
||||
<style>
|
||||
.container {
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
writing-mode: vertical-rl;
|
||||
width: 5em;
|
||||
}
|
||||
.test, .ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.test {
|
||||
line-height: 40px;
|
||||
line-height-step: 120px;
|
||||
}
|
||||
.ref {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p class="instructions">Test passes if top and bottom are the same.
|
||||
<div class="container">
|
||||
<div class="ref">
|
||||
<div>X<ruby>XX<rt>XX</rt></ruby>X</div>
|
||||
</div>
|
||||
<div class="test">
|
||||
<div>X<ruby>XX<rt>XX</rt></ruby>X</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step basic layout reference</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<style>
|
||||
div {
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
}
|
||||
.test, .ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 5em;
|
||||
}
|
||||
.ref {
|
||||
line-height: 60px;
|
||||
}
|
||||
</style>
|
||||
<p class="instructions">Test passes if left and right are the same.
|
||||
<div class="ref">
|
||||
<div>XXXXX</div>
|
||||
<div>XXXXX XXXXX XXXXX</div>
|
||||
<div><br>X<br>X</div>
|
||||
</div>
|
||||
<div class="ref">
|
||||
<div>XXXXX</div>
|
||||
<div>XXXXX XXXXX XXXXX</div>
|
||||
<div><br>X<br>X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step boundary test</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<style>
|
||||
div {
|
||||
font-family: Ahem;
|
||||
font-size: 30px;
|
||||
}
|
||||
.test, .ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 5em;
|
||||
}
|
||||
</style>
|
||||
<p class="instructions">Test passes if left and right are the same.
|
||||
<div class="ref">
|
||||
<div style="line-height: 40px">XXXXX</div>
|
||||
<div style="line-height: 40px">XXXXX</div>
|
||||
<div style="line-height: 80px">XXXXX</div>
|
||||
<div style="line-height: 80px">XXXXX</div>
|
||||
<div style="line-height: 80px">XXXXX</div>
|
||||
<div style="line-height: 120px">XXXXX</div>
|
||||
</div>
|
||||
<div class="ref">
|
||||
<div style="line-height: 40px">XXXXX</div>
|
||||
<div style="line-height: 40px">XXXXX</div>
|
||||
<div style="line-height: 80px">XXXXX</div>
|
||||
<div style="line-height: 80px">XXXXX</div>
|
||||
<div style="line-height: 80px">XXXXX</div>
|
||||
<div style="line-height: 120px">XXXXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step and ruby</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<style>
|
||||
div {
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
}
|
||||
.test, .ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 5em;
|
||||
}
|
||||
.ref {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p class="instructions">Test passes if left and right are the same.
|
||||
<div class="ref">
|
||||
<div>X<ruby>XX<rt>XX</rt></ruby>X</div>
|
||||
</div>
|
||||
<div class="ref">
|
||||
<div>X<ruby>XX<rt>XX</rt></ruby>X</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step vertical-align test</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<style>
|
||||
div {
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
}
|
||||
.ref {
|
||||
line-height: 1;
|
||||
}
|
||||
.adjuster {
|
||||
line-height: 80px;
|
||||
color: transparent;
|
||||
}
|
||||
.top {
|
||||
vertical-align: top;
|
||||
}
|
||||
.text-top {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.text-bottom {
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
.bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
<p class="instructions">Test passes if two lines are the same.
|
||||
<div class="ref">
|
||||
<div>XX<span class="top">X</span><span class="text-top">X</span><span class="text-bottom">X</span><span class="bottom">X</span><span class="adjuster">X</span></div>
|
||||
</div>
|
||||
<div class="ref">
|
||||
<div>XX<span class="top">X</span><span class="text-top">X</span><span class="text-bottom">X</span><span class="bottom">X</span><span class="adjuster">X</span></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step in vertical-rl</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<style>
|
||||
.container {
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
writing-mode: vertical-rl;
|
||||
width: 5em;
|
||||
}
|
||||
.test, .ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ref {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p class="instructions">Test passes if top and bottom are the same.
|
||||
<div class="container">
|
||||
<div class="ref">
|
||||
<div>XXXXX</div>
|
||||
</div>
|
||||
<div class="ref">
|
||||
<div>XXXXX</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Rhythmic Sizing: line-height-step with ruby in vertical-rl</title>
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
|
||||
<style>
|
||||
.container {
|
||||
font-family: Ahem;
|
||||
font-size: 40px;
|
||||
writing-mode: vertical-rl;
|
||||
width: 5em;
|
||||
}
|
||||
.test, .ref {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ref {
|
||||
line-height: 120px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p class="instructions">Test passes if top and bottom are the same.
|
||||
<div class="container">
|
||||
<div class="ref">
|
||||
<div>X<ruby>XX<rt>XX</rt></ruby>X</div>
|
||||
</div>
|
||||
<div class="ref">
|
||||
<div>X<ruby>XX<rt>XX</rt></ruby>X</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
1
tests/wpt/web-platform-tests/css/css-rhythm-1/tools/generators/.gitignore
vendored
Normal file
1
tests/wpt/web-platform-tests/css/css-rhythm-1/tools/generators/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
Generators
|
||||
==========
|
||||
|
||||
This directory contains scripts to generate some tests.
|
||||
|
||||
## Setup
|
||||
|
||||
1. Install node.js.
|
||||
2. Change the current directory to this directory.
|
||||
3. Type the following commands:
|
||||
```
|
||||
npm install
|
||||
```
|
||||
4. (optional) Install gulp globally so it'll be on your path:
|
||||
```
|
||||
sudo npm install -g gulp
|
||||
```
|
||||
|
||||
## Generate Test Files
|
||||
|
||||
```
|
||||
gulp
|
||||
```
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
'use strict';
|
||||
|
||||
const testdir = "../..";
|
||||
const refdir = "../../reference";
|
||||
|
||||
var browserSync = null;
|
||||
var gulp = require("gulp");
|
||||
var gutil = require('gulp-util');
|
||||
var ejs = require("gulp-ejs");
|
||||
var rename = require("gulp-rename");
|
||||
|
||||
gulp.task("default", [
|
||||
"snap-width",
|
||||
]);
|
||||
|
||||
var snapWidthFiles = [];
|
||||
[["inline"], ["block"], ["table"]].forEach(contentTypes => {
|
||||
["available", "fixed", "max"].forEach(widthType => {
|
||||
snapWidthFiles.push({
|
||||
name: "snap-width-" + contentTypes.join("-") + "-in-" + widthType + "-001",
|
||||
contentTypes: contentTypes,
|
||||
widthType: widthType,
|
||||
});
|
||||
});
|
||||
snapWidthFiles.push({
|
||||
name: "snap-width-" + contentTypes.join("-") + "-001",
|
||||
contentTypes: contentTypes,
|
||||
isReference: true,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("snap-width", function () {
|
||||
return generateFiles(snapWidthFiles);
|
||||
});
|
||||
|
||||
function generateFiles(files) {
|
||||
return generateFile(files[0])
|
||||
.on("end", function () {
|
||||
if (files.length > 1)
|
||||
return generateFiles(files.slice(1));
|
||||
});
|
||||
}
|
||||
|
||||
function generateFile(options) {
|
||||
options.isReference = options.isReference || false;
|
||||
options.destname = options.name + ".html";
|
||||
options.destdir = options.isReference ? refdir : testdir;
|
||||
gutil.log("Generating", options.destname);
|
||||
return gulp.src("snap-width.ejs")
|
||||
.pipe(ejs(options))
|
||||
.pipe(rename(options.destname))
|
||||
.pipe(gulp.dest(options.destdir));
|
||||
}
|
||||
|
||||
function extend(obj, props) {
|
||||
for (var p in props)
|
||||
if (props.hasOwnProperty(p))
|
||||
obj[p] = props[p];
|
||||
return obj;
|
||||
}
|
||||
|
||||
gulp.task("test", ["browser-sync", "watch"]);
|
||||
|
||||
gulp.task("watch", function () {
|
||||
gulp.watch("snap-width.ejs", ["snap-width"]);
|
||||
});
|
||||
|
||||
gulp.task("browser-sync", function () {
|
||||
if (!browserSync)
|
||||
browserSync = require("browser-sync");
|
||||
browserSync({
|
||||
server: {
|
||||
baseDir: "../../..",
|
||||
directory: true,
|
||||
},
|
||||
files: [testdir + "/*", refdir + "/*"],
|
||||
startPath: "css-snap-size-1/",
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"name": "generators",
|
||||
"version": "1.0.0",
|
||||
"description": "Generators ==========",
|
||||
"main": "gulpfile.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"browser-sync": "^2.11.1",
|
||||
"ejs": "^2.4.1",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-ejs": "^2.1.1",
|
||||
"gulp-rename": "^1.2.2"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Snap Size: snap-width</title>
|
||||
<% if (!isReference) {
|
||||
%><link rel="help" href="https://drafts.csswg.org/css-snap-size/#snap-width">
|
||||
<link rel="match" href="reference/snap-width-<%= contentType %>-001.html">
|
||||
<meta name="assert" content="This test asserts the snap-width property rounds down the box width.">
|
||||
<meta name="flags" content="ahem">
|
||||
<% } %><link rel="author" title="Koji Ishii" href="kojiishi@gmail.com">
|
||||
<%
|
||||
var styles = "";
|
||||
if (!isReference) {
|
||||
switch (widthType) {
|
||||
case "available":
|
||||
styles = `
|
||||
.container { width: 20.5em; }
|
||||
.container.border, .container.padding { width: 21.3em; }
|
||||
.container.border.padding { width: 22.1em; }
|
||||
.test {
|
||||
snap-width: 1em;
|
||||
text-align: right;
|
||||
}`;
|
||||
break;
|
||||
case "fixed":
|
||||
styles = `
|
||||
.test {
|
||||
snap-width: 1em;
|
||||
text-align: right;
|
||||
width: 20.5em;
|
||||
}`;
|
||||
break;
|
||||
case "max":
|
||||
styles = `
|
||||
.test {
|
||||
snap-width: 1em;
|
||||
text-align: right;
|
||||
max-width: 20.5em;
|
||||
}`;
|
||||
break;
|
||||
default:
|
||||
console.assert(false, "Unknown widthType:", widthType);
|
||||
}
|
||||
}
|
||||
|
||||
var contentHTML = "XXXXXXXXXX XXXXXXXXX";
|
||||
for (var contentType of contentTypes) {
|
||||
switch (contentType) {
|
||||
case "block":
|
||||
contentHTML= `<div>${contentHTML}</div>`;
|
||||
break;
|
||||
case "table":
|
||||
contentHTML= `<table width="100%"><tr><td>${contentHTML}</td></tr></table>`;
|
||||
styles += `
|
||||
table { border-spacing: 0; }
|
||||
td { padding: 0; }`;
|
||||
break;
|
||||
case "inline":
|
||||
break;
|
||||
default:
|
||||
console.assert(false, "Unknown contentType:", contentType);
|
||||
}
|
||||
}
|
||||
%><style>
|
||||
.container {
|
||||
font-family: Ahem;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
}
|
||||
.container > div {
|
||||
margin: .5em 0;
|
||||
}
|
||||
.border > div {
|
||||
border-left: .4em transparent solid;
|
||||
border-right: .4em transparent solid;
|
||||
}
|
||||
.padding > div {
|
||||
padding: 0 .4em;
|
||||
}
|
||||
<%= styles %>
|
||||
.ref {
|
||||
white-space: pre; /* make sure the line does not wrap */
|
||||
width: 20em;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p class="instructions">Test passes if each pair of boxes are the same,
|
||||
including how they look, widths, and horizontal positions.
|
||||
<% [[], ["border"], ["padding"], ["border", "padding"]].forEach(function (containerClassList) {
|
||||
containerClassList.push("container");
|
||||
%>
|
||||
<div class="<%= containerClassList.join(" ") %>">
|
||||
<% [isReference ? "ref" : "test", "ref"].forEach(function (testClass) {
|
||||
%> <div class="<%=testClass%>"><%- contentHTML %></div>
|
||||
<% });
|
||||
%></div>
|
||||
<% });
|
||||
%></body>
|
||||
Loading…
Add table
Add a link
Reference in a new issue