极速阅览

wpt/css/css-logical/animation-001.html at master · web-platform-tests/wpt · GitHub

Blame

History

Code
Blame

318 lines (276 loc) · 10 KB

Raw

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

<!doctype html>

<title>Animating CSS logical properties using Web Animations</title>

<style>

:root {

--200px: 200px;

--300px: 300px;

--writingMode: horizontal-tb;

}

</style>

'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(

{

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>

Terms
Privacy
Security
Status
Community
Docs
Contact
Manage cookies
Do not share my personal information

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Files

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

FilesExpand file tree

Breadcrumbs

animation-001.html

Latest commit

History

Breadcrumbs

animation-001.html

File metadata and controls

Footer

Footer navigation

Files